/* ============================================================
   FUMI DORADO S.A.S — Global Stylesheet
   Sistema de Gestión de Servicios
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  /* Colores principales */
  --color-bg:           #111111;
  --color-surface:      #1e1e1e;
  --color-surface-2:    #272727;
  --color-surface-3:    #303030;
  --color-border:       #3a3a3a;
  --color-border-gold:  rgba(212, 168, 30, 0.35);

  /* Dorado */
  --color-gold:         #D4A81E;
  --color-gold-light:   #F0C830;
  --color-gold-dark:    #A8841A;
  --color-gold-muted:   rgba(212, 168, 30, 0.12);
  --color-gold-glow:    rgba(212, 168, 30, 0.25);

  /* Texto */
  --color-text:         #F2F2F2;
  --color-text-muted:   #9a9a9a;
  --color-text-faint:   #5c5c5c;

  /* Estados */
  --color-success:      #3dba7a;
  --color-warning:      #e6a817;
  --color-error:        #e05252;
  --color-info:         #4fa3e0;

  /* Tipografía */
  --font-display:       'Sora', sans-serif;
  --font-body:          'DM Sans', sans-serif;

  --text-xs:    0.72rem;
  --text-sm:    0.85rem;
  --text-base:  1rem;
  --text-md:    1.1rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.25rem;

  --weight-light:   300;
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Espaciado */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* Bordes */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 18px rgba(212, 168, 30, 0.3);

  /* Transiciones */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-gold-light);
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  line-height: 1.25;
  color: var(--color-text);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p { margin-bottom: var(--space-4); color: var(--color-text-muted); }
p:last-child { margin-bottom: 0; }

small { font-size: var(--text-xs); color: var(--color-text-muted); }

.text-gold   { color: var(--color-gold); }
.text-muted  { color: var(--color-text-muted); }
.text-faint  { color: var(--color-text-faint); }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container--sm  { max-width: 640px; }
.container--md  { max-width: 860px; }
.container--lg  { max-width: 1400px; }

/* Flexbox helpers */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Grid helpers */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   NAVBAR / TOPBAR
   ============================================================ */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.navbar__logo {
  width: 40px;
  height: 40px;
  background: var(--color-gold);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: #111;
}

.navbar__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--color-text);
}

.navbar__subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ============================================================
   CARDS / TARJETAS
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  border-color: var(--color-border-gold);
  box-shadow: var(--shadow-gold);
}

.card--elevated {
  background: var(--color-surface-2);
  box-shadow: var(--shadow-md);
}

.card--module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-6);
}

.card--module:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--color-text);
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.card__icon {
  width: 48px;
  height: 48px;
  background: var(--color-gold-muted);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 22px;
  margin-top: auto;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn--primary {
  background: var(--color-gold);
  color: #111;
}
.btn--primary:hover {
  background: var(--color-gold-light);
  box-shadow: var(--shadow-gold);
  color: #111;
}

.btn--secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn--secondary:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.btn--danger {
  background: var(--color-error);
  color: #fff;
}
.btn--danger:hover {
  background: #c74444;
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}
.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  width: 100%;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.form-control {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.form-control::placeholder {
  color: var(--color-text-faint);
}

.form-control:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-glow);
}

.form-control--icon {
  padding-left: var(--space-10);
}

.form-input-wrapper {
  position: relative;
}

.form-input-wrapper .input-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  pointer-events: none;
  font-size: 16px;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
}

/* ============================================================
   PÁGINA DE LOGIN
   ============================================================ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: var(--space-6);
}

.auth-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.auth-card__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.auth-card__logo-icon {
  width: 64px;
  height: 64px;
  background: var(--color-gold);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  color: #111;
}

.auth-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  text-align: center;
}

.auth-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
}

.auth-card__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth-card__footer {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-gold);
  cursor: pointer;
}

.auth-card__footer:hover {
  color: var(--color-gold-light);
}

/* ============================================================
   TABLAS
   ============================================================ */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

thead {
  background: var(--color-surface-2);
}

thead th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
}

tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--color-gold-muted);
}

tbody td {
  padding: var(--space-4) var(--space-5);
  color: var(--color-text);
}

/* ============================================================
   BADGES / ETIQUETAS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.badge--gold    { background: var(--color-gold-muted); color: var(--color-gold); border: 1px solid var(--color-border-gold); }
.badge--success { background: rgba(61,186,122,0.12); color: var(--color-success); }
.badge--error   { background: rgba(224,82,82,0.12); color: var(--color-error); }
.badge--info    { background: rgba(79,163,224,0.12); color: var(--color-info); }
.badge--warning { background: rgba(230,168,23,0.12); color: var(--color-warning); }

/* ============================================================
   AVATAR
   ============================================================ */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  color: #111;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar--lg {
  width: 60px;
  height: 60px;
  font-size: var(--text-lg);
}

.avatar--sm {
  width: 28px;
  height: 28px;
  font-size: var(--text-xs);
}

/* ============================================================
   PERFIL / INFO ROWS
   ============================================================ */
.profile-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.profile-row__icon {
  width: 36px;
  height: 36px;
  background: var(--color-gold-muted);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 16px;
  flex-shrink: 0;
}

.profile-row__label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-bottom: 2px;
}

.profile-row__value {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.page-header__back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--transition-fast);
  margin-bottom: var(--space-2);
}
.page-header__back:hover { color: var(--color-gold); }

.page-header__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.page-header__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ============================================================
   ALERTS / MENSAJES
   ============================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: 1px solid;
}

.alert--success { background: rgba(61,186,122,0.08); border-color: rgba(61,186,122,0.3); color: var(--color-success); }
.alert--error   { background: rgba(224,82,82,0.08); border-color: rgba(224,82,82,0.3); color: var(--color-error); }
.alert--warning { background: rgba(230,168,23,0.08); border-color: rgba(230,168,23,0.3); color: var(--color-warning); }
.alert--info    { background: rgba(79,163,224,0.08); border-color: rgba(79,163,224,0.3); color: var(--color-info); }

/* ============================================================
   MODAL
   ============================================================ */

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
}

.modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.modal__close:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.w-full  { width: 100%; }
.hidden  { display: none; }

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

.gold-line {
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
  border: none;
  margin: var(--space-4) 0;
}

/* ============================================================
   SCROLLBAR PERSONALIZADA
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-dark);
}

/* ============================================================
   BOTONES DE ACCIÓN EN TABLA (icono)
   ============================================================ */
.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 14px;
  text-decoration: none;
  padding: 8px;
}

.btn-icon:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn-icon--danger:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

.btn-icon--view:hover {
  border-color: var(--color-info);
  color: var(--color-info);
}

.table-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================================
   CHECKBOX PERSONALIZADO
   ============================================================ */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.checkbox-wrapper input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface-2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.checkbox-wrapper input[type="checkbox"]:checked {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.checkbox-wrapper input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #111;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox-wrapper input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px var(--color-gold-glow);
}

.checkbox-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}



/* ============================================================
   CARD DE DETALLE DE ORDEN (OS-001)
   ============================================================ */
.order-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.order-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-detail__id {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.order-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.order-detail__field {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.order-detail__field-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.order-detail__field-label .icon {
  color: var(--color-gold);
  font-size: 12px;
}

.order-detail__field-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.order-detail__field--full {
  grid-column: 1 / -1;
}

.order-detail__observations {
  min-height: 80px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   ESTADO DE ORDEN (badges específicos)
   ============================================================ */
.badge--ejecutar  { background: rgba(230,168,23,0.15); color: #e6a817; border: 1px solid rgba(230,168,23,0.3); }
.badge--finalizado { background: rgba(61,186,122,0.15); color: var(--color-success); border: 1px solid rgba(61,186,122,0.3); }
.badge--proceso   { background: rgba(79,163,224,0.15); color: var(--color-info); border: 1px solid rgba(79,163,224,0.3); }
.badge--cancelado { background: rgba(224,82,82,0.15); color: var(--color-error); border: 1px solid rgba(224,82,82,0.3); }

/* ============================================================
   ROL DE USUARIO (badges específicos)
   ============================================================ */
.badge--tecnico { background: rgba(79,163,224,0.15); color: var(--color-info); border: 1px solid rgba(79,163,224,0.3); }
.badge--cliente { background: rgba(61,186,122,0.15); color: var(--color-success); border: 1px solid rgba(61,186,122,0.3); }
.badge--admin   { background: var(--color-gold-muted); color: var(--color-gold); border: 1px solid var(--color-border-gold); }

/* ============================================================
   SECCIÓN DE MÓDULOS (Dashboard grid)
   ============================================================ */
.modules-section__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* ============================================================
   BARRA DE FILTROS / BÚSQUEDA
   ============================================================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.filter-bar .form-control {
  background: var(--color-surface);
  flex: 1;
  min-width: 160px;
}

.filter-bar__divider {
  width: 1px;
  height: 28px;
  background: var(--color-border);
  flex-shrink: 0;
}

.btn--clear {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.btn--clear:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ============================================================
   SELECTOR DE MESES (toggle grid)
   ============================================================ */
.month-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}

.month-btn {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
  user-select: none;
}

.month-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.month-btn.active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #111;
  font-weight: var(--weight-semi);
}

/* ============================================================
   FORMULARIO POR PASOS (stepper)
   ============================================================ */
.step-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.step-section {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.step-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-3);
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  color: #111;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-section__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-text);
}

.step-section__body {
  padding: var(--space-5);
}

/* ============================================================
   CHECKBOX GRID (áreas / plagas)
   ============================================================ */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-3);
}

.checkbox-grid-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.checkbox-grid-item:hover {
  border-color: var(--color-gold);
}

.checkbox-grid-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface-2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.checkbox-grid-item input[type="checkbox"]:checked {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.checkbox-grid-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: 2px solid #111;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox-grid-item input[type="checkbox"]:checked ~ .checkbox-grid-label {
  color: var(--color-text);
}

.checkbox-grid-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

/* ============================================================
   CARD DE DOCUMENTO SELECCIONABLE
   ============================================================ */
.doc-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.doc-card:hover {
  border-color: var(--color-border-gold);
}

.doc-card.selected {
  border-color: var(--color-gold);
  background: var(--color-gold-muted);
}

.doc-card input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.doc-card input[type="checkbox"]:checked {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.doc-card input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: 2px solid #111;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.doc-card__info {
  flex: 1;
}

.doc-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.doc-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: 2px;
}

/* ============================================================
   MAPA DE SERVICIOS
   ============================================================ */
.map-container {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.map-legend {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.map-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.map-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.map-legend__dot--pending   { background: var(--color-warning); }
.map-legend__dot--completed { background: var(--color-success); }

.map-viewport {
  width: 100%;
  min-height: 240px;
  background: #2a2a2a;
  position: relative;
}

.map-list {
  border-top: 1px solid var(--color-border);
}

.map-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}

.map-list__item:last-child { border-bottom: none; }
.map-list__item:hover { background: var(--color-gold-muted); }

.map-list__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
}

.map-list__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.map-list__time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

/* ============================================================
   CARD DETALLE CLIENTE
   ============================================================ */
.client-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.client-detail__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.client-detail__logo {
  width: 44px;
  height: 44px;
  background: var(--color-gold-muted);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 20px;
  flex-shrink: 0;
}

.client-detail__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--color-text);
}

.client-detail__nit {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.client-detail__section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.client-detail__sede {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   BADGE TIPO PRODUCTO
   ============================================================ */
.badge--insecticida  { background: rgba(224,82,82,0.12); color: #e05252; border: 1px solid rgba(224,82,82,0.3); }
.badge--rodenticida  { background: rgba(153,102,255,0.12); color: #9966ff; border: 1px solid rgba(153,102,255,0.3); }
.badge--activo       { background: rgba(61,186,122,0.12); color: var(--color-success); border: 1px solid rgba(61,186,122,0.3); }
.badge--inactivo     { background: rgba(224,82,82,0.12); color: var(--color-error); border: 1px solid rgba(224,82,82,0.3); }

/* ============================================================
   BARRA DE BÚSQUEDA SIMPLE
   ============================================================ */
.search-bar {
  position: relative;
  width: 100%;
}

.search-bar__icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  font-size: 15px;
  pointer-events: none;
}

.search-bar input {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-bar input::placeholder { color: var(--color-text-faint); }
.search-bar input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-glow);
}

/* ============================================================
   CARD DE ÉXITO / CONFIRMACIÓN
   ============================================================ */
.success-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  text-align: center;
}

.success-card__icon {
  width: 72px;
  height: 72px;
  background: var(--color-gold-muted);
  border: 2px solid var(--color-border-gold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 32px;
}

.success-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.3;
}

/* ============================================================
   CARD MÓDULO SELECTOR (grande, con ícono centrado)
   ============================================================ */
.module-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.module-selector__card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: center;
}

.module-selector__card:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.module-selector__icon {
  width: 56px;
  height: 56px;
  background: var(--color-gold-muted);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 24px;
}

.module-selector__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--color-text);
}

.module-selector__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   CARD DE DIAGRAMA / DOCUMENTO (UPC, HDS, FT)
   ============================================================ */
.diagram-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-base);
}

.diagram-card:hover {
  border-color: var(--color-border-gold);
}

.diagram-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.diagram-card__file-icon {
  width: 36px;
  height: 36px;
  background: var(--color-gold-muted);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 18px;
  flex-shrink: 0;
}

.diagram-card__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-text);
  line-height: 1.3;
}

.diagram-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.diagram-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.diagram-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

/* Badge tipo archivo */
.badge--hds { background: rgba(224,82,82,0.15); color: var(--color-error); border: 1px solid rgba(224,82,82,0.3); font-weight: var(--weight-bold); }
.badge--ft  { background: rgba(224,82,82,0.15); color: var(--color-error); border: 1px solid rgba(224,82,82,0.3); font-weight: var(--weight-bold); }
.badge--upc { background: var(--color-gold-muted); color: var(--color-gold); border: 1px solid var(--color-border-gold); font-weight: var(--weight-bold); }

/* ============================================================
   GALERÍA DE EVIDENCIAS FOTOGRÁFICAS
   ============================================================ */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.photo-thumb {
  aspect-ratio: 1;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-fast);
  position: relative;
}

.photo-thumb:hover {
  border-color: var(--color-gold);
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-thumb__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  position: absolute;
  bottom: var(--space-2);
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(0,0,0,0.5);
  padding: 2px 0;
}

.photo-thumb--empty {
  color: var(--color-text-faint);
  font-size: 22px;
}

/* ============================================================
   ALERTA INFORMATIVA CON LISTA
   ============================================================ */
.info-box {
  background: var(--color-gold-muted);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.info-box__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gold);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  margin-bottom: var(--space-3);
}

.info-box__list {
  list-style: disc;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.info-box__list li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ============================================================
   BADGE EVIDENCIAS (fotos count)
   ============================================================ */
.badge--photos {
  background: rgba(61,186,122,0.12);
  color: var(--color-success);
  border: 1px solid rgba(61,186,122,0.3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.badge--no-photos {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

/* ============================================================
   INPUT CON PREFIJO TELEFÓNICO
   ============================================================ */
.input-phone {
  display: flex;
  align-items: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-phone:focus-within {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-glow);
}

.input-phone__prefix {
  padding: var(--space-3) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
  flex-shrink: 0;
}

.input-phone input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.input-phone input::placeholder { color: var(--color-text-faint); }

/* ============================================================
   INPUT CON TOGGLE CONTRASEÑA (mostrar/ocultar)
   ============================================================ */
.input-password {
  position: relative;
}

.input-password input {
  padding-right: var(--space-10);
}

.input-password__toggle {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  font-size: 16px;
  padding: var(--space-1);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
}

.input-password__toggle:hover { color: var(--color-gold); }

/* ============================================================
   OTP / CÓDIGO DE VERIFICACIÓN
   ============================================================ */
.otp-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.otp-input {
  width: 52px;
  height: 56px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  text-align: center;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  caret-color: var(--color-gold);
}

.otp-input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-glow);
}

.otp-input.filled {
  border-color: var(--color-border-gold);
  background: var(--color-gold-muted);
}

/* ============================================================
   LINK DE NAVEGACIÓN SECUNDARIA (← Volver)
   ============================================================ */
.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--transition-fast);
  text-decoration: none;
  margin-top: var(--space-2);
}

.auth-back-link:hover { color: var(--color-gold); }

.auth-link {
  color: var(--color-gold);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--transition-fast);
  text-decoration: none;
}

.auth-link:hover { color: var(--color-gold-light); }

/* ============================================================
   MENSAJE DE CONFIRMACIÓN CON COUNTDOWN
   ============================================================ */
.auth-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-4) 0;
}

.auth-success__icon {
  width: 64px;
  height: 64px;
  background: var(--color-gold-muted);
  border: 2px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 28px;
}

.auth-success__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.3;
}

.auth-success__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 300px;
  line-height: 1.6;
  margin: 0;
}

.auth-success__countdown {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
  margin-top: var(--space-2);
}

/* ===== PERFIL GENERAL ===== */

body {
    background: #0f0f0f;
    color: #ffffff;
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
}

/* CONTENEDOR PRINCIPAL */
.perfil-container {
    width: 100%;
    min-height: 100vh;
}

/* HEADER */
.perfil-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 40px;
    border-bottom: 2px solid #d4af37;
    background: #1a1a1a;
}

.perfil-header h2 {
    margin: 0;
}

.perfil-header p {
    margin: 0;
    color: #aaa;
}

/* BOTÓN VOLVER */
.back {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
}

/* TARJETA CENTRAL */
.perfil-card {
    max-width: 600px;
    margin: 60px auto;
    padding: 30px;
    border-radius: 12px;
    border: 2px solid #d4af37;
    background: #1a1a1a;
}

/* PARTE SUPERIOR (ICONO + NOMBRE) */
.perfil-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

/* ICONO */
.perfil-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #d4af37;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #000;
}

/* INFO */
.perfil-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* CADA ITEM */
.item {
    background: #2a2a2a;
    padding: 12px 15px;
    border-radius: 8px;
}

/* TEXTO */
.item strong {
    display: block;
    color: #bbb;
    font-size: 14px;
}

.item p {
    margin: 5px 0 0 0;
    font-size: 16px;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sidebar { display: none; }
  .main-content { margin-left: 0; padding: var(--space-6); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
  .order-detail__grid { grid-template-columns: 1fr; }
  .month-picker { grid-template-columns: repeat(4, 1fr); }
  .checkbox-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .navbar { padding: var(--space-3) var(--space-4); }
  .main-content { padding: var(--space-4); }
  .auth-card { padding: var(--space-6) var(--space-5); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .modules-grid { grid-template-columns: 1fr; }
  .module-selector { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar__divider { display: none; }
  .month-picker { grid-template-columns: repeat(3, 1fr); }
  .checkbox-grid { grid-template-columns: 1fr; }
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
}

/* Sin sidebar: técnico y cliente */
.main-content--full {
  margin-left: 0;
}

/* ===== HI-FI GESTIÓN SERVICIOS (FIX FINAL) ===== */

.layout-full {
  width: 100%;
  min-height: 100vh;
  background: #121212;
}

/* HEADER SUPERIOR */
.hifi-header {
  width: 100%;
  background: #3a3a3a;
  border-bottom: 1px solid #d4af37;
  padding: 30px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hifi-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.hifi-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.hifi-title p {
  margin: 0;
  font-size: 18px;
  color: #bbb;
}

/* FLECHA */
.back-arrow {
  font-size: 40px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  margin-right: 10px;
}

/* CONTENIDO */
.hifi-content {
  width: 100%;
  padding: 40px 60px;
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

/* TABLA */
.table-wrapper {
  width: 100%;
  max-width: 1350px; 
  border: 1px solid #d4af37;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
}

/* TABLA GENERAL */
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.table-wrapper thead {
  background: #1c1c1c;
}

.table-wrapper th,
.table-wrapper td {
  padding: 15px;       
  text-align: left;
  vertical-align: middle;
}

/* Encabezados */
.table-wrapper th {
  font-size: 14px;
  color: #bbb;
  font-weight: 500;
}

/* Filas */
.table-wrapper tbody tr {
  border-top: 1px solid #333;
}

/* OS dorado */
.text-gold {
  color: #d4af37;
  font-weight: bold;
}

/* ESTADOS */
.estado {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

/* colores estado */
.estado.por-ejecutar {
  background: #d4af37;
  color: #000;
}

.estado.finalizado {
  background: #2ecc71;
  color: #000;
}

.estado.en-proceso {
  background: #3498db;
  color: #000;
}

/* BOTÓN CREAR */
.btn-crear {
  background: #d4af37;
  color: #000;
  border: none;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.acciones-superiores{
    width: 88%;
    margin: 24px auto 16px auto;
    display: flex;
    justify-content: flex-end;
}



/* CHECKBOX */
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.checkbox input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* BOTÓN */
.modal-form button {
  margin-top: 10px;
  padding: 12px;
}

.modal-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

/* ICONO FECHA */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* ICONO HORA */
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.modal-exito {
  text-align: center;
  padding: 40px 30px;
}

.modal-exito h2 {
  font-size: 26px;
  margin: 20px 0;
}

.icono-exito {
  width: 60px;
  height: 60px;
  border: 3px solid #d4af37;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 28px;
  color: #d4af37;
}

/* MODAL MÁS LIMPIO */
.modal-ver {
  width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px;
}

/* HEADER */
.modal-ver-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.modal-ver-header h3 {
  font-size: 22px;
  font-weight: 600;
}

/* ESTADOS */
.estado-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.estado-pendiente {
  background: #d4af37;
  color: black;
}

.estado-ok {
  background: #2ecc71;
  color: black;
}

.estado-proceso {
  background: #3498db;
  color: black;
}

/* GRID */
.modal-ver-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
}

/* CARDS */
.card {
  background: #2a2a2a;
  padding: 18px;
  border-radius: 10px;
}

.card.full {
  grid-column: span 2;
}

/* 🔥 TEXTO CORRECTO */
.card span {
  font-size: 13px;
  color: #aaa; /* subtitulo gris */
}

.card strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #fff; /* VALOR blanco fuerte */
}

.card p {
  margin-top: 6px;
  color: #ddd;
}

/* BOTÓN CENTRADO */
.modal-ver button {
  display: block;
  margin: 0 auto; /* 🔥 centra */
  padding: 10px 30px;
}

/* MODAL EXITO PRO */
.modal-exito {
  width: 420px;
  text-align: center;
  padding: 40px 30px;
}

/* ICONO */
.exito-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px auto;

  border: 3px solid #d4af37;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;
  color: #d4af37;
}

/* TEXTO */
.modal-exito h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 25px;
}

/* BOTON */
.modal-exito button {
  padding: 10px 30px;
  margin: 0 auto;
}

.meses-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mes-chip {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
  background: #222;
  color: #aaa;
}

.mes-chip.activo {
  background: #d4af37;
  color: #000;
}

.producto-nombre {
  font-size: 15px;
  font-weight: 600;
}

.producto-desc {
  font-size: 13px;
  color: #bbb;
  margin-top: 4px;
  line-height: 1.4;
}

.mes-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mes-selector span {
  padding: 6px 10px;
  border-radius: 6px;
  background: #222;
  color: #aaa;
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s;
}

.mes-selector span:hover {
  background: #333;
}

.mes-selector span.activo {
  background: #d4af37;
  color: #000;
}

.card-form {
  background: #1c1c1c;
  border: 1px solid #d4af37;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.reporte-section {
  margin-bottom: 20px;
}

.reporte-section h4 {
  color: #d4af37;
  margin-bottom: 8px;
}

.modal-body p {
  margin: 5px 0;
}

.reporte-card {
  background: #1c1c1c;
  border: 1px solid #d4af37;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}

.reporte-card__title {
  color: #d4af37;
  font-weight: bold;
  margin-bottom: 10px;
}

.reporte-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.reporte-grid span {
  display: block;
  font-size: 12px;
  color: #aaa;
}

.reporte-grid strong {
  color: #fff;
}

.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  background: #111;
  border: 1px solid #d4af37;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
}

.obs-box {
  background: #111;
  padding: 10px;
  border-radius: 6px;
  color: #ccc;
}

.fotos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.foto {
  height: 70px;
  border: 1px solid #d4af37;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
}

.btn-icon--download {
  color: #d4af37;
}

.btn-icon--download:hover {
  background: #d4af37;
  color: black;
}

.modal-success {
  max-width: 500px;
  text-align: center;
  padding: 40px;
}

.modal-success h2 {
  color: white;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  margin: 25px 0;
}

.success-icon {
  font-size: 70px;
  color: #d4af37;
  margin-bottom: 10px;
}

.modal-success .btn {
  margin-top: 10px;
  min-width: 140px;
}

.filters-box{
  width: 88%;
  margin: 15px auto 0px auto;
  background:#1f1f1f;
  border:1px solid #2c2c2c;
  border-radius:12px;
  padding:20px;
}

.filters-row{
  display:flex;
  gap:12px;
  margin-top:10px;
  flex-wrap:wrap;
}

.filter-input{
  background:#111;
  border:1px solid #2f2f2f;
  color:white;
  padding:12px;
  border-radius:8px;
  min-width:180px;
}

.filter-search{
  width:100%;
  margin-bottom:15px;
}

/* ===============================
   RESUMEN SERVICIOS TÉCNICO
================================= */

.summary-cards{
  width: 90%;
  margin: 30px auto;
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.summary-card{
  flex: 1;
  min-width: 250px;
  background: #1f1f1f;
  border: 1px solid #2c2c2c;
  border-radius: 12px;
  padding: 25px;
}

.summary-card__title{
  color: #bdbdbd;
  font-size: 15px;
  margin-bottom: 15px;
  font-weight: 600;
}

.summary-card__number{
  font-size: 42px;
  font-weight: bold;
  color: #e0b72d;
}

.summary-card__number--green{
  color: #3bd14a;
}

.summary-card__number--gold{
  color: #d4af37;
}

.summary-card__subtitle{
  color: #8b8b8b;
  margin-top: 10px;
  font-size: 14px;
}

/* LISTA */

.summary-list{
  width: 90%;
  margin: 20px auto 40px auto;
  background: #1f1f1f;
  border: 1px solid #2c2c2c;
  border-radius: 12px;
  padding: 20px;
}

.summary-list__title{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: white;
}

.service-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 15px;
  gap: 20px;
  flex-wrap: wrap;
}

.service-item__cliente{
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.service-item__os{
  color: #9e9e9e;
  margin-top: 4px;
}

.service-item__tipo{
  color: #d4d4d4;
  margin-top: 8px;
  font-size: 14px;
}

.service-item__hora,
.service-item__sede{
  color: #c5c5c5;
  font-size: 14px;
}

.service-item__info{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.service-item__hora{
  color:#cfcfcf;
  font-size:15px;
}

.service-item__sede{
  color:#cfcfcf;
  font-size:15px;
}

/* BADGES MÁS GRANDES */

.badge{
  padding:10px 18px;
  font-size:14px;
  font-weight:600;
  border-radius:999px;
}

/* =========================================
   FORMULARIO TECNICO
========================================= */

.formulario-page{
  min-height: 100vh;
  background: #0d0d0d;
}

.formulario-topbar{
  width: 100%;
  background: #3a3a3a;
  border-bottom: 1px solid #d4af37;
  padding: 30px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.formulario-topbar-left{
  display: flex;
  align-items: center;
  gap: 15px;
}

.formulario-topbar-left h1{
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

.formulario-topbar-left p{
  margin: 0;
  font-size: 18px;
  color: #bbb;
}

.formulario-topbar-left a{
  font-size: 40px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  margin-right: 10px;
}

.formulario-wrapper{
  padding: 40px;
}

.formulario-section{
  background: #1b1b1b;
  border-radius: 20px;
  padding: 35px;
  border: 1px solid #2c2c2c;
  margin-bottom: 30px;
}

.formulario-section-title{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}

.formulario-section-title h2{
  color: white;
  font-size: 30px;
}

.formulario-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.formulario-group{
  display: flex;
  flex-direction: column;
}

.formulario-group label{
  margin-bottom: 10px;
  color: #d9d9d9;
  font-size: 15px;
  font-weight: 500;
}

.formulario-group input,
.formulario-group textarea{
  background: #000;
  border: 1px solid #2c2c2c;
  border-radius: 16px;
  padding: 16px;
  color: white;
  font-size: 15px;
  outline: none;
}

.formulario-group textarea{
  min-height: 120px;
  resize: none;
}

.formulario-full{
  grid-column: span 3;
}

.formulario-group input[readonly],
.formulario-group textarea[readonly]{
  opacity: 0.9;
  cursor: default;
}

/* =========================
   DIAGNÓSTICO INSPECCIÓN
========================= */

.diagnostico-container{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.diagnostico-card{
  background: #0b0b0b;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  padding: 18px 22px;
}

.diagnostico-card h3{
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 600;
}

.radio-group{
  display: flex;
  gap: 28px;
  margin-bottom: 8px;
}

.radio-option{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.radio-option input[type="radio"]{
  width: 20px;
  height: 20px;
  accent-color: #d4af37;
  cursor: pointer;
}

.diagnostico-extra{
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hidden{
  display: none;
}

/* =========================
   CONTROL DE ÁREAS
========================= */

.formulario-subtitle{
  color: #cfcfcf;
  margin-bottom: 24px;
  font-size: 18px;
}

.areas-container{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.area-card{
  background: #0b0b0b;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  padding: 20px 22px;
}

.area-check{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
}

.area-check input[type="checkbox"]{
  width: 22px;
  height: 22px;
  accent-color: #d4af37;
  cursor: pointer;
}

.area-extra{
  margin-top: 20px;
}

.area-extra select{
  width: 100%;
  height: 56px;
  border-radius: 16px;
  border: 1px solid #d4af37;
  background: #0b0b0b;
  color: #fff;
  padding: 0 18px;
  font-size: 18px;
}

.area-extra select:focus{
  outline: none;
}

/* =========================
   TIPO Y MÉTODO CONTROL
========================= */

.metodo-block{
  margin-bottom: 34px;
}

.metodo-group{
  margin-top: 30px;
}

.metodo-group h3{
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 18px;
}

.metodo-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metodo-check{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
}

.metodo-check input[type="checkbox"]{
  width: 22px;
  height: 22px;
  accent-color: #d4af37;
  cursor: pointer;
}

/* =========================
   INSPECCIÓN SERVICIO
========================= */

.plagas-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.plagas-detalles h3{
  color: #d4af37;
  font-size: 24px;
  margin-bottom: 22px;
}

.plaga-card{
  background: #0b0b0b;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 20px;
}

.plaga-card h4{
  font-size: 22px;
  margin-bottom: 18px;
}

.plaga-card p{
  color: #dcdcdc;
  margin-bottom: 14px;
  font-size: 18px;
}

.nivel-group{
  display: flex;
  gap: 24px;
}

/* =========================
   CONDICIONES DEL LUGAR
========================= */

.formulario-group select{
  width: 100%;
  height: 58px;
  background: #000;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  color: #fff;
  padding: 0 18px;
  font-size: 18px;
}

.formulario-group select:focus{
  outline: none;
  border-color: #d4af37;
}

/* =========================
   ESTACIONES CEBADERAS
========================= */

.cebaderas-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.btn-agregar-estacion{
  background: #d4af37;
  color: #000;
  border: none;
  border-radius: 18px;
  padding: 14px 26px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
}

.sin-estaciones{
  text-align: center;
  color: #cfcfcf;
  font-size: 20px;
  padding: 40px 0;
}

.estacion-card{
  background: #0b0b0b;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
}

.estacion-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.estacion-top h3{
  font-size: 32px;
}

.btn-delete{
  background: transparent;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: red;
}

.upload-box{
  width: 100%;
  min-height: 90px;
  border: 2px dashed #2f2f2f;
  border-radius: 18px;
  background: #0b0b0b;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  cursor: pointer;

  transition: 0.2s;
}

.upload-box:hover{
  border-color: #d4af37;
}

.upload-icon{
  color: #d4af37;
  font-size: 26px;
}

.upload-text{
  color: #d4af37;
  font-size: 18px;
  font-weight: 600;
}

.formulario-textarea{
  width: 100%;
  min-height: 140px;

  background: #050505;
  border: 1px solid #2a2a2a;
  border-radius: 18px;

  padding: 22px;

  color: white;
  font-size: 18px;

  resize: vertical;
}

.formulario-textarea:focus{
  outline: none;
  border-color: #d4af37;
}

.section-title{
  font-size: 22px;
  font-weight: 700;
  color: white;

  margin-bottom: 28px;
}

/* ===================================================== */
/* FIRMAS */
/* ===================================================== */

.firmas-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.firma-card{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.firma-card label{
  font-size: 16px;
  font-weight: 600;
  color: #d6d6d6;
}

.firma-canvas{
  width: 100%;
  height: 220px;

  background: #f4f4f4;

  border-radius: 18px;
  border: 2px solid #2f2f2f;

  cursor: crosshair;
}

.btn-limpiar{
  background: transparent;
  border: none;

  color: #d4af37;

  font-size: 16px;
  font-weight: 600;

  cursor: pointer;

  width: fit-content;
}

.firma-input{
  width: 100%;
  height: 58px;

  background: #050505;
  border: 1px solid #2a2a2a;
  border-radius: 16px;

  padding: 0 18px;

  color: white;
  font-size: 16px;
}

.firma-input:focus{
  outline: none;
  border-color: #d4af37;
}

/* ===================================================== */
/* BOTONES FINALES */
/* ===================================================== */

.formulario-actions{
  display: flex;
  justify-content: flex-end;
  gap: 20px;

  margin-top: 50px;
}

.btn-cancelar{
  height: 60px;
  padding: 0 34px;

  border-radius: 18px;
  border: none;

  background: #2a2a2a;
  color: white;

  font-size: 18px;
  font-weight: 600;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
}

.btn-finalizar{
  height: 60px;
  padding: 0 42px;

  border-radius: 18px;
  border: none;

  background: #d4af37;
  color: black;

  font-size: 18px;
  font-weight: 600;

  cursor: pointer;
}

/* =========================================
   DOCUMENTOS FIGMA
========================================= */

.documentos-main{
  padding: 40px 70px;
}

.documentos-info-card{
  background: #2f2f33;

  border-radius: 16px;

  padding: 26px;

  margin-bottom: 36px;
}

.documentos-info-top{
  display: flex;
  gap: 18px;

  margin-bottom: 22px;
}

.documentos-icon{
  width: 52px;
  height: 52px;

  border-radius: 10px;

  background: #d4af37;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
}

.documentos-info-top h2{
  font-size: 28px;
  margin-bottom: 6px;
}

.documentos-info-top p{
  color: #cfcfcf;
}

.documentos-counter{
  background: #111;

  border-radius: 8px;

  padding: 14px 16px;

  width: 420px;

  font-size: 15px;
}

.documentos-counter span{
  color: #d4af37;
  font-weight: bold;
}

.documentos-options{
  display: flex;
  flex-direction: column;

  gap: 28px;
}

.documento-option{
  background: #2f2f33;

  border: 1px solid transparent;

  border-radius: 16px;

  padding: 28px 34px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: pointer;

  transition: 0.2s;
}

.documento-option.active{
  border-color: #d4af37;
}

.documento-option h3{
  font-size: 22px;
  margin-bottom: 10px;
}

.documento-option p{
  color: #cfcfcf;
}

.documento-option input{
  width: 22px;
  height: 22px;

  accent-color: #d4af37;
}

.documentos-btn-container{
  display: flex;
  justify-content: center;

  margin-top: 46px;
}

/* LINK COMO BOTÓN */

a.btn-finalizar{
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   DOCUMENTOS GENERADOS
========================================= */

.documentos-generados-main{
  padding: 40px 70px;
}

.estado-completado{
  background: #4caf50;

  color: #000;

  padding: 12px 30px;

  border-radius: 8px;

  font-weight: 600;
}

.documentos-servicio-card{
  background: #2f2f33;

  border-radius: 16px;

  padding: 28px;

  margin-bottom: 30px;
}

.documentos-servicio-header{
  display: flex;
  gap: 18px;

  margin-bottom: 28px;
}

.documentos-servicio-icon{
  width: 50px;
  height: 50px;

  border-radius: 10px;

  background: #d4af37;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
}

.documentos-servicio-header h2{
  margin-bottom: 8px;
}

.documentos-servicio-header p{
  color: #cfcfcf;
}

.documentos-servicio-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 24px;
}

.documentos-servicio-grid label{
  display: block;

  margin-bottom: 10px;

  color: #cfcfcf;
}

.documentos-servicio-grid span{
  background: #111;

  padding: 12px 16px;

  border-radius: 8px;

  display: inline-block;
}

.documento-generado-card{
  background: #2f2f33;

  border-radius: 16px;

  padding: 26px 28px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 24px;
}

.documento-generado-left{
  display: flex;
  gap: 18px;
  align-items: center;
}

.documento-generado-icon{
  width: 48px;
  height: 48px;

  border-radius: 10px;

  background: #d4af37;

  display: flex;
  align-items: center;
  justify-content: center;
}

.documento-generado-left h3{
  margin-bottom: 6px;
}

.documento-generado-left p{
  color: #cfcfcf;
}

.documento-generado-actions{
  display: flex;
  gap: 14px;
}

.btn-ver{
  background: #fff;

  color: #000;

  border: none;

  border-radius: 8px;

  padding: 12px 24px;

  cursor: pointer;
}

.btn-descargar{

display:inline-flex;

align-items:center;

justify-content:center;

width:auto !important;

min-width:140px;

padding:12px 20px;

text-decoration:none;

flex:none;

white-space:nowrap;

}

.documentos-final-actions{
  display: flex;
  justify-content: center;
  gap: 22px;

  margin: 50px 0;
}

.btn-secundario{
  border: 1px solid #d4af37;

  color: #fff;

  padding: 14px 26px;

  border-radius: 10px;

  text-decoration: none;
}

.documentos-nota{
  background: #2f2f33;

  border-radius: 12px;

  padding: 18px 24px;

  color: #cfcfcf;
}

.estado-programado{
    background:#2f7fc1;
    color:white;
}

.preview-evidencias{

display:flex;
gap:12px;
margin-top:15px;
flex-wrap:wrap;

}

.preview-img{

width:120px;
height:120px;

object-fit:cover;

border-radius:12px;

border:2px solid #D4AF37;

}

.preview-item{

position:relative;

width:120px;
height:120px;

}

.preview-img{

width:100%;
height:100%;

object-fit:cover;

border-radius:12px;

border:2px solid #D4AF37;

}

.btn-eliminar-img{

position:absolute;

top:-8px;
right:-8px;

width:28px;
height:28px;

border:none;

border-radius:50%;

background:#ff4d4d;

color:white;

cursor:pointer;

font-size:16px;

font-weight:bold;

display:flex;
align-items:center;
justify-content:center;

}

.custom-select-container{

position:relative;

width:100%;

}

.custom-select{

width:100%;

padding:12px;

background:#111;

border:1px solid #333;

color:white;

border-radius:6px;

font-size:14px;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

min-height:46px;

transition:.2s;

}

.custom-select:hover{

border-color:#d4af37;

}

.custom-select span:last-child{

font-size:12px;

color:#ccc;

}

.custom-options{

position:absolute;

top:52px;

left:0;

width:100%;

background:#111;

border:1px solid #333;

border-radius:6px;

overflow:hidden;

z-index:999;

box-shadow:0 8px 20px rgba(0,0,0,.5);

}

.custom-options label{

display:flex;

align-items:center;

justify-content:flex-start;

gap:10px;

padding:12px 16px;

cursor:pointer;

font-size:14px;

color:white;

width:100%;

margin:0;

}

.custom-options label:hover{

background:#222;

}

.custom-options label:hover{

background:#222;

}

.custom-options input{

margin:0;

width:auto !important;

flex:none;

accent-color:#d4af37;

}

.hidden{

display:none;

}

.custom-arrow{

width:0;

height:0;

border-left:5px solid transparent;

border-right:5px solid transparent;

border-top:6px solid #bdbdbd;

margin-right:4px;

opacity:.9;

}

.documento-generado-actions{

display:flex;

align-items:center;

gap:16px;

flex-wrap:nowrap;

}

.descargar-link{

display:inline-flex !important;

align-items:center;

justify-content:center;

width:160px;

height:45px;

background:#D4AF37;

color:black;

font-weight:600;

border-radius:10px;

text-decoration:none;

flex-shrink:0;

}

.documento-generado-actions{

display:flex;

align-items:center;

gap:16px;

justify-content:flex-end;

}

/* ==========================================
   HEADER GLOBAL
========================================== */

.page-container{

    min-height:100vh;

    background:var(--color-bg);

    padding:var(--space-8);
}

.page-content{

    max-width:1100px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:var(--space-6);
}

.page-header{

    padding-bottom:var(--space-5);

    border-bottom:2px solid var(--color-gold);

    display:flex;

    flex-direction:column;

    align-items:flex-start;
}

.page-header__back{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    color:var(--color-text-muted);

    text-decoration:none;

    transition:.2s;
}

.page-header__back:hover{

    color:var(--color-gold);
}

.page-header__title{

    font-size:3rem;

    font-weight:700;

    margin-bottom:8px;
}

.page-header__subtitle{

    color:var(--color-text-muted);

    font-size:1rem;
}

/* ===================================
   GESTIÓN CLIENTES
=================================== */

.clientes-content{

    width:100%;

    max-width:1350px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:70px;
}

.clientes-actions{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    margin-top:20px;
}

.clientes-content .table-wrapper{

    width:100%;

    margin:0 auto;
}

/* ===================================
   GESTIÓN USUARIOS
=================================== */

.usuarios-content{

    width:100%;

    max-width:1350px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:70px;
}

.usuarios-actions{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    margin-top:20px;
}

.usuarios-content .table-wrapper{

    width:100%;

    margin:0 auto;
}

/* ===================================
   DIAGRAMAS
=================================== */

.diagramas-content{

    width:100%;

    max-width:960px;

    margin:150px auto 0 auto;

    display:flex;

    flex-direction:column;

    gap:40px;
}

/* ===================================
   DIAGRAMAS UPC
=================================== */

.diagramas-content{

    width:100%;

    max-width:1120px;

    margin:40px auto 0 auto;
}

.diagramas-toolbar{

    width:100%;

    margin-bottom:10px;
}

.diagramas-search{

    width:100%;

    padding:20px;

    background:#1e1e1e;

    border-radius:14px;

    border:1px solid #2c2c2c;
}

.diagramas-actions{

    width:100%;

    display:flex;

    justify-content:flex-end;

    margin-top:15px;

    margin-bottom:20px;
}

/* ===================================
   PERFIL
=================================== */

.perfil-content{

    max-width:650px;

    margin:60px auto;

}

.perfil-card{

    background:#171717;

    border:1px solid var(--color-gold);

    border-radius:16px;

    padding:22px;
}

.perfil-top{

    display:flex;

    gap:24px;

    align-items:center;

    margin-bottom:35px;
}

.perfil-avatar{

    width:80px;

    height:80px;

    border-radius:50%;

    background:var(--color-gold);

    color:black;

    font-weight:700;

    font-size:2rem;

    display:flex;

    align-items:center;

    justify-content:center;
}

.perfil-top h3{

    font-size:2rem;

    margin-bottom:6px;
}

.perfil-top p{

    color:#b7b7b7;
}

.perfil-info{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.perfil-item{

    background:#2a2a2a;

    padding:16px;

    border-radius:10px;

    display:flex;

    align-items:center;

    gap:16px;
}

.perfil-item-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:rgba(212,175,55,.25);

    color:var(--color-gold);

    display:flex;

    justify-content:center;

    align-items:center;
}

.perfil-item span{

    color:#b7b7b7;

    font-size:.9rem;
}

.perfil-item p{

    margin-top:4px;

    font-weight:600;
}

/* ===================================
   MAPA SERVICIOS
=================================== */

.mapa-content{

    width:100%;

    max-width:900px;

    margin:40px auto 0 auto;

    display:flex;

    flex-direction:column;

    gap:35px;
}

/* ===================================
   PROGRAMA
=================================== */

.programa-content{

    width:100%;

    max-width:1100px;

    margin:40px auto 0 auto;

    display:flex;

    flex-direction:column;

    gap:40px;
}

/* ===================================
   PROGRAMA
=================================== */

.programa-grid{

    display:grid;

    grid-template-columns:
    repeat(
      3,
      minmax(320px,1fr)
    );

    gap:30px;

    margin-top:10px;
}

.programa-card{

    min-height:150px;

    padding:20px 28px;
}

.programa-title{

    font-size:1.2rem;

    line-height:1.3;

    margin-bottom:12px;
}

.programa-subtitle{

    color:#c0c0c0;

    line-height:1.4;

    max-width:230px;

    margin-bottom:30px;
}
.programa-icon{

    width:42px !important;

    height:42px !important;

    min-width:42px !important;

    min-height:42px !important;

    border-radius:10px;

    background:rgba(212,175,55,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:auto;

    overflow:hidden;
}

.programa-icon,
.programa-icon i,
.programa-icon span{

    font-size:1rem !important;

    line-height:1 !important;
}

.programa-content{

    margin:25px auto 0 auto;
}

.formulario-page{

    min-height:auto;
}

/* ==========================
DOCUMENTOS
========================== */

.documentos-content{

max-width:1100px;

margin:30px auto;

display:flex;

flex-direction:column;

gap:40px;
}


.documentos-search{

border:1px solid var(--color-gold);

padding:15px;

border-radius:10px;
}


.search-box{

display:flex;

align-items:center;

gap:15px;

padding:15px;

border:1px solid #444;

border-radius:8px;
}

.search-box input{

background:none;

border:none;

outline:none;

width:100%;

color:white;
}


.documentos-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

margin-top:40px;

}

.documento-card{

background:#121212;

border:1px solid var(--color-gold);

border-radius:8px;

padding:18px;
}

.documento-header{

    display:grid;

    grid-template-columns:50px 1fr auto;

    grid-template-rows:auto auto;

    align-items:start;

    column-gap:12px;

    margin-bottom:25px;

}


/* ICONO */

.documento-icon{

    grid-row:1 / span 2;

    width:42px;

    height:42px;

    border-radius:10px;

    background:rgba(212,170,35,.15);

    color:var(--color-gold);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.3rem;

}


/* TITULO */

.documento-header h3{

    grid-column:2;

    grid-row:1;

    margin:0;

    font-size:1.1rem;

    font-weight:600;

}


/* INFORME */

.documento-header span{

    grid-column:2;

    grid-row:2;

    color:var(--color-gold);

    font-size:.85rem;

}


/* FECHA */

.documento-fecha{

    grid-column:3;

    grid-row:1;

    font-size:.8rem;

    white-space:nowrap;

}


/* SERVICIO Y OS */

.documento-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-left:62px;

    margin-bottom:25px;

}

.documento-info strong{

    min-width:80px;

    text-align:right;

}

.documento-info{

margin-bottom:25px;

display:flex;

justify-content:space-between;
}

.documento-btn{

width:100%;
}

.documentos-grid .documento-card .documento-header h3{

   font-size:1.2rem;

}

/* ===========================
   MODALS CLIENTES CRISTIAN
=========================== */

.cliente-modal-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    rgba(0,0,0,.75);

    backdrop-filter:
    blur(5px);

    z-index:99999;

    padding:20px;

}

.cliente-modal-overlay.hidden{

    display:none;

}

.cliente-modal{

    width:100%;

    max-width:760px;

    max-height:90vh;

    overflow-y:auto;

    background:#111;

    border-radius:20px;

    border:1px solid
    var(--color-gold);

    padding:32px;

    box-shadow:
    0 20px 60px
    rgba(0,0,0,.6);

    animation:
    modalCliente .25s ease;

}


@keyframes modalCliente{

from{

opacity:0;

transform:
translateY(20px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

/* ===========================
   MODALS USUARIOS
=========================== */

.usuario-modal-overlay{

    position:fixed;
    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    rgba(0,0,0,.75);

    backdrop-filter:
    blur(5px);

    z-index:99999;

    padding:20px;

}

.usuario-modal-overlay.hidden{

    display:none;

}

.usuario-modal{

    width:100%;
    max-width:760px;

    max-height:90vh;

    overflow-y:auto;

    background:#111;

    border-radius:20px;

    border:1px solid
    var(--color-gold);

    padding:32px;

    box-shadow:
    0 20px 60px
    rgba(0,0,0,.6);

    animation:
    modalUsuario .25s ease;

}

@keyframes modalUsuario{

from{

opacity:0;

transform:
translateY(20px);

}

to{

opacity:1;

transform:
translateY(0);

}

}