/* ===========================================================================
   PROPIA - Design Tokens
   ---------------------------------------------------------------------------
   Tokens extraidos del prototipo PROPIA.dc.html (Claude Design).
   Define la paleta, tipografia, radios, sombras y espacios de toda la app.

   Convencion: --propia-{categoria}-{variante}
   Categorias: brand, text, border, bg, surface, status, radius, shadow, font

   Convive con el CSS de NexLink (assets/css/styles.css) durante la migracion.
   Componentes nuevos (modales globales, refactor de paginas) consumen estas
   variables; los legacy siguen con sus valores hardcoded hasta su refactor.
   =========================================================================== */

:root {
  /* === Brand ============================================================= */
  --propia-brand:           #6D4FE3;  /* primario - botones, links, focus */
  --propia-brand-hover:     #5838C9;  /* hover sobre brand */
  --propia-brand-soft:      #F1ECFD;  /* fondo soft de chips, callouts */
  --propia-brand-soft-2:    #F5F1FE;  /* fondo soft alternativo (lavanda) */
  --propia-brand-soft-3:    #EFEAFC;  /* gradiente cierre */
  --propia-brand-border:    #DCD2F8;  /* borde sobre brand-soft */
  --propia-brand-text:      #4B2BB0;  /* texto dentro de brand-soft */
  --propia-brand-text-2:    #5838C9;  /* texto sobre brand-soft */

  /* === Brand glow (sombras con tinte brand) ============================== */
  --propia-glow-brand-sm:   0 4px 12px  rgba(109, 79, 227, 0.28);
  --propia-glow-brand:      0 6px 16px  rgba(109, 79, 227, 0.30);
  --propia-glow-brand-lg:   0 30px 70px rgba(109, 79, 227, 0.40);

  /* === Texto ============================================================= */
  --propia-text-h1:         #1B2A3A;  /* titulos h1/h2, valores grandes */
  --propia-text-body:       #33475B;  /* body principal */
  --propia-text-strong:     #2D3E50;
  --propia-text-secondary:  #516F90;  /* secundario, links muted */
  --propia-text-muted:      #7C98B6;  /* labels, caption */
  --propia-text-faint:      #A6B7C8;  /* placeholder, iconos disabled */
  --propia-text-very-faint: #C3D0DD;  /* mas claro aun */
  --propia-text-inverse:    #FFFFFF;  /* texto sobre brand */

  /* === Bordes y divisores =============================================== */
  --propia-border-card:     #E1E8EE;  /* borde de card estandar */
  --propia-border-card-2:   #C3D0DD;  /* borde hover/focus mas fuerte */
  --propia-border-divider:  #EEF3F8;  /* divisor interno */
  --propia-border-divider-2:#F4F7FA;  /* divisor mas claro */

  /* === Fondos y superficies ============================================= */
  --propia-bg-app:          #F5F8FA;  /* fondo de toda la app */
  --propia-bg-card:         #FFFFFF;  /* fondo de card */
  --propia-bg-card-soft:    #FAFBFC;  /* card alternada (zebra) */
  --propia-bg-overlay:      rgba(27, 42, 58, 0.55); /* overlay modal */
  --propia-bg-overlay-dark: rgba(27, 42, 58, 0.60); /* overlay mas oscuro */

  /* === Estados (semaforos) ============================================== */
  --propia-success:         #1A8754;  /* OK */
  --propia-success-bg:      #E6F6EE;
  --propia-success-border:  #B6E2C9;
  --propia-success-hover:   #15703F;

  --propia-warning:         #B27E0A;  /* atencion */
  --propia-warning-bg:      #FFF3CE;
  --propia-warning-border:  #FCE7A3;

  --propia-error:           #D7263D;  /* error / critico */
  --propia-error-strong:    #C0383C;
  --propia-error-bg:        #FDE7E7;
  --propia-error-border:    #F5C2C7;
  --propia-error-text:      #B03A2E;

  --propia-info:            #2563EB;  /* azul - residente */
  --propia-info-bg:         #DBEAFE;
  --propia-info-border:     #BFDBFE;
  --propia-info-strong:     #1E40AF;

  /* === Tipografia ======================================================= */
  --propia-font-base:       'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --propia-font-mono:       'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --propia-font-size-h1:    27px;
  --propia-font-size-h2:    23px;
  --propia-font-size-h3:    17px;
  --propia-font-size-body:  14px;
  --propia-font-size-sm:    13px;
  --propia-font-size-xs:    12px;
  --propia-font-size-xxs:   11px;

  --propia-font-weight-regular: 400;
  --propia-font-weight-medium:  500;
  --propia-font-weight-semibold:600;
  --propia-font-weight-bold:    700;
  --propia-font-weight-black:   800;

  --propia-letter-tight:    -0.6px; /* h1 */
  --propia-letter-tight-sm: -0.3px; /* h2 */
  --propia-letter-wide:      0.4px;
  --propia-letter-very-wide: 0.6px; /* eyebrow / labels */

  /* === Radios ============================================================ */
  --propia-radius-chip:     20px;  /* chips de filtros, frecuencias */
  --propia-radius-modal:    18px;  /* modales */
  --propia-radius-card:     14px;  /* cards grandes */
  --propia-radius-card-sm:  12px;  /* cards medianas */
  --propia-radius-card-xs:  11px;  /* cards pequeñas */
  --propia-radius-input:    9px;   /* inputs, selects, botones */
  --propia-radius-input-sm: 8px;   /* badges, pills */
  --propia-radius-input-xs: 7px;   /* mini tags */
  --propia-radius-icon:     10px;  /* contenedor de icono */
  --propia-radius-icon-sm:  9px;
  --propia-radius-pill:     999px; /* pills perfectos */

  /* === Sombras (sin tinte brand) ======================================== */
  --propia-shadow-card:     0 1px 2px  rgba(45, 62, 80, 0.05);
  --propia-shadow-card-hover:0 4px 12px rgba(45, 62, 80, 0.08);
  --propia-shadow-modal:    0 30px 70px rgba(27, 42, 58, 0.40);
  --propia-shadow-tooltip:  0 4px 12px rgba(27, 42, 58, 0.15);

  /* === Animaciones ====================================================== */
  --propia-anim-fast:       0.12s ease;
  --propia-anim-base:       0.18s ease;
  --propia-anim-slow:       0.25s ease;
  --propia-anim-modal:      0.15s ease;
}

/* === Dark mode (cuando data-bs-theme=dark) ================================ */
[data-bs-theme="dark"] {
  --propia-bg-app:          #1a1a2e;
  --propia-bg-card:         #232342;
  --propia-bg-card-soft:    #2a2a4a;
  --propia-text-h1:         #F0F0F5;
  --propia-text-body:       #D5D5E0;
  --propia-text-secondary:  #A8A8BC;
  --propia-text-muted:      #8888A0;
  --propia-text-faint:      #6868A0;
  --propia-border-card:     #3a3a5a;
  --propia-border-divider:  #2c2c50;
  --propia-brand-soft:      #2A2050;
  --propia-brand-soft-2:    #25204A;
}

/* === Tipografia base ====================================================== */
body {
  font-family: var(--propia-font-base);
}

/* Aplica Lexend a Bootstrap modal/dropdown/tooltip que heredan de body */
.modal-content,
.dropdown-menu,
.tooltip,
.popover {
  font-family: var(--propia-font-base);
}

/* === Placeholders tenues =================================================
   El tema NexLink (assets/css/styles.css) pone el placeholder en
   var(--bs-body-color) = #696981 (color de texto oscuro), por lo que el
   texto de ayuda parecia dato ya escrito. Lo bajamos al token de placeholder
   (--propia-text-faint), que ademas se adapta a dark mode. opacity:1 evita
   que Firefox lo atenue de mas. Se carga despues del tema -> gana. */
.form-control::placeholder,
textarea.form-control::placeholder,
.pmm-input::placeholder {
  color: var(--propia-text-faint, #A6B7C8);
  opacity: 1;
}

/* === Utility classes ====================================================== */

/* Para botones primarios nuevos (los legacy NexLink siguen con su clase) */
.propia-btn-brand {
  background: var(--propia-brand);
  color: var(--propia-text-inverse);
  border: none;
  border-radius: var(--propia-radius-input);
  padding: 10px 17px;
  font-size: var(--propia-font-size-sm);
  font-weight: var(--propia-font-weight-bold);
  font-family: var(--propia-font-base);
  cursor: pointer;
  box-shadow: var(--propia-glow-brand);
  transition: background var(--propia-anim-base);
}
.propia-btn-brand:hover {
  background: var(--propia-brand-hover);
}
.propia-btn-brand:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.propia-btn-ghost {
  background: var(--propia-bg-card);
  color: var(--propia-text-secondary);
  border: 1px solid var(--propia-border-card);
  border-radius: var(--propia-radius-input);
  padding: 9px 14px;
  font-size: var(--propia-font-size-sm);
  font-weight: var(--propia-font-weight-semibold);
  font-family: var(--propia-font-base);
  cursor: pointer;
  transition: border-color var(--propia-anim-base), color var(--propia-anim-base);
}
.propia-btn-ghost:hover {
  border-color: var(--propia-brand);
  color: var(--propia-brand);
}

/* Eyebrow (label pequeño tipografia muy ancha) */
.propia-eyebrow {
  font-size: var(--propia-font-size-xs);
  letter-spacing: var(--propia-letter-very-wide);
  font-weight: var(--propia-font-weight-bold);
  color: var(--propia-brand);
  text-transform: uppercase;
}

/* Badge de estado */
.propia-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--propia-font-size-xxs);
  font-weight: var(--propia-font-weight-bold);
  padding: 4px 10px;
  border-radius: var(--propia-radius-input-sm);
}
.propia-badge--success {
  color: var(--propia-success);
  background: var(--propia-success-bg);
}
.propia-badge--warning {
  color: var(--propia-warning);
  background: var(--propia-warning-bg);
}
.propia-badge--error {
  color: var(--propia-error-text);
  background: var(--propia-error-bg);
}
.propia-badge--brand {
  color: var(--propia-brand-text-2);
  background: var(--propia-brand-soft);
}
.propia-badge--neutral {
  color: var(--propia-text-secondary);
  background: var(--propia-border-divider);
}

/* Card base */
.propia-card {
  background: var(--propia-bg-card);
  border: 1px solid var(--propia-border-card);
  border-radius: var(--propia-radius-card);
  box-shadow: var(--propia-shadow-card);
}

/* === Override puntual de Bootstrap brand color (opt-in) ==================
   Para que los .btn-primary y .text-primary de codigo legacy adopten brand,
   activar agregando data-propia-brand="on" en <html>. Por defecto OFF para
   no romper estilos existentes. =========================================== */
html[data-propia-brand="on"] .btn-primary {
  background-color: var(--propia-brand);
  border-color: var(--propia-brand);
}
html[data-propia-brand="on"] .btn-primary:hover,
html[data-propia-brand="on"] .btn-primary:focus {
  background-color: var(--propia-brand-hover);
  border-color: var(--propia-brand-hover);
}
html[data-propia-brand="on"] a,
html[data-propia-brand="on"] .text-primary {
  color: var(--propia-brand);
}
html[data-propia-brand="on"] .form-control:focus,
html[data-propia-brand="on"] .form-select:focus {
  border-color: var(--propia-brand);
  box-shadow: 0 0 0 0.2rem rgba(109, 79, 227, 0.15);
}

/* === Modal globales (pmm-*) — compartido entre todos los modales del catalogo */
.pmm-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--propia-border-divider, #EEF3F8);
  flex-shrink: 0;
}
.pmm-header-icon {
  width: 38px; height: 38px;
  border-radius: var(--propia-radius-icon, 10px);
  background: var(--propia-brand-soft, #F1ECFD);
  color: var(--propia-brand, #6D4FE3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pmm-header-text { flex: 1; }
.pmm-title { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; color: var(--propia-text-h1, #1B2A3A); }
.pmm-subtitle { font-size: 12px; color: var(--propia-text-muted, #A6B7C8); margin-top: 1px; }
.pmm-close {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--propia-text-muted, #A6B7C8);
  border: 1px solid var(--propia-border-card, #E1E8EE);
  background: transparent;
  cursor: pointer;
}
.pmm-close:hover { background: var(--propia-bg-app, #F5F8FA); color: var(--propia-text-body, #33475B); }

.pmm-body {
  overflow-y: auto;
  padding: 20px 24px;
  display: flex; flex-direction: column;
  gap: 14px;
}

.pmm-field { display: flex; flex-direction: column; min-width: 0; }
.pmm-label {
  font-size: 11px;
  color: var(--propia-text-muted, #7C98B6);
  font-weight: 700;
  margin-bottom: 5px;
}
.pmm-required { color: #D7263D; margin-left: 2px; }
.pmm-optional { font-weight: 600; color: #A6B7C8; margin-left: 4px; }
.pmm-help { font-size: 10px; color: #A6B7C8; margin-top: 3px; }
.pmm-eyebrow {
  font-size: 11px; letter-spacing: 0.6px; color: #A6B7C8;
  font-weight: 700; margin: 4px 0 8px;
}

.pmm-input {
  border: 1px solid var(--propia-border-card, #E1E8EE);
  border-radius: var(--propia-radius-input, 9px);
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--propia-text-body, #33475B);
  background: var(--propia-bg-card, #fff);
  outline: none;
  font-family: inherit;
  width: 100%; box-sizing: border-box;
}
.pmm-input:focus { border-color: var(--propia-brand, #6D4FE3); }
textarea.pmm-input { resize: vertical; line-height: 1.5; font-family: inherit; }

.pmm-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pmm-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pmm-col-span-2 { grid-column: span 2; }
.pmm-col-span-3 { grid-column: 1 / -1; }
.pmm-divider { border-top: 1px solid var(--propia-border-divider, #EEF3F8); padding-top: 12px; margin-top: 4px; }
.pmm-toggle {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
  color: var(--propia-brand, #6D4FE3);
  background: transparent; border: 0; cursor: pointer; padding: 0;
  text-align: left;
}

.pmm-upload {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--propia-brand, #6D4FE3);
  cursor: pointer;
}
.pmm-upload input[type="file"] { display: none; }

.pmm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pmm-chip {
  font-size: 11.5px; font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--propia-border-card, #E1E8EE);
  color: var(--propia-text-secondary, #516F90);
  background: var(--propia-bg-card, #fff);
  cursor: pointer;
}
.pmm-chip:hover { border-color: var(--propia-brand, #6D4FE3); }
.pmm-chip--active {
  border-color: var(--propia-brand, #6D4FE3);
  color: #fff;
  background: var(--propia-brand, #6D4FE3);
}

.pmm-row { display: grid; grid-template-columns: 1fr 100px; gap: 12px; }
.pmm-grow { min-width: 0; }

.pmm-days { display: flex; gap: 4px; }
.pmm-day {
  flex: 1; font-size: 11px; font-weight: 700;
  padding: 8px 0; border-radius: 7px;
  border: 1px solid var(--propia-border-card, #E1E8EE);
  color: var(--propia-text-secondary, #516F90);
  background: var(--propia-bg-card, #fff);
  cursor: pointer;
}
.pmm-day:hover { border-color: var(--propia-brand, #6D4FE3); }
.pmm-day--active {
  border-color: var(--propia-brand, #6D4FE3);
  color: #fff;
  background: var(--propia-brand, #6D4FE3);
}

.pmm-callout {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px;
  background: var(--propia-brand-soft, #FBFAFE);
  border: 1px solid var(--propia-brand-border, #DCD2F8);
  border-radius: 11px;
}
.pmm-callout-text { font-size: 11.5px; color: var(--propia-brand-text-2, #7C5CE8); line-height: 1.45; }

.pmm-footer {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 16px 24px;
  border-top: 1px solid var(--propia-border-divider, #EEF3F8);
  flex-shrink: 0;
}

/* Botones brand globales (reutilizables fuera del modal) */
.propia-btn-brand {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  border-radius: var(--propia-radius-input, 9px);
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; border: 0;
  background: var(--propia-brand, #6D4FE3);
  color: #fff;
  box-shadow: 0 4px 12px rgba(109, 79, 227, .30);
}
.propia-btn-brand:hover { background: var(--propia-brand-hover, #5838C9); }
.propia-btn-brand:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.propia-btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border-radius: var(--propia-radius-input, 9px);
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  background: var(--propia-bg-card, #fff);
  border: 1px solid var(--propia-border-card, #E1E8EE);
  color: var(--propia-text-secondary, #516F90);
}
.propia-btn-ghost:hover { border-color: var(--propia-brand, #6D4FE3); color: var(--propia-brand, #6D4FE3); }

/* ============================================================================
   Header homogeneo de modulos de listado. Referencia: Unidades Privadas
   (/distribucion). Titulo + subtitulo, mini-KPIs y barra de filtros, para que
   Zonas Comunes, Equipos y Activos, Directorio y Usuarios se vean identicos.
   Global (no scoped): las clases estan disponibles en cualquier pagina.
   ============================================================================ */
.mod-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.mod-pagetitle { font-size: 30px; font-weight: 800; color: #1B2A3A; margin: 0 0 4px; letter-spacing: -.5px; }
.mod-pagesub { font-size: 14px; color: #6B7C8F; margin: 0; }

.mod-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.mod-stat { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #E1E8EE; border-radius: 12px; padding: 14px 18px; min-width: 150px; }
.mod-stat-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: #F3EFFE; color: var(--propia-brand, #6D4FE3); display: flex; align-items: center; justify-content: center; }
.mod-stat-n { font-size: 21px; font-weight: 800; color: #1B2A3A; line-height: 1.1; }
.mod-stat-l { font-size: 12px; color: #6B7C8F; }
/* Variantes de estado para KPIs tipo semaforo (activo/mantenimiento/fuera). */
.mod-stat--ok { background: #E6F6EE; border-color: #BFE8D2; }
.mod-stat--ok .mod-stat-icon { background: #CBEFDA; color: #0F8A4F; }
.mod-stat--ok .mod-stat-n { color: #0F8A4F; }
.mod-stat--warn { background: #FEF6E7; border-color: #F7DFB2; }
.mod-stat--warn .mod-stat-icon { background: #FBE7C2; color: #B45309; }
.mod-stat--warn .mod-stat-n { color: #B45309; }
.mod-stat--danger { background: #FDECEC; border-color: #F5C6C6; }
.mod-stat--danger .mod-stat-icon { background: #F8D3D3; color: #C0383C; }
.mod-stat--danger .mod-stat-n { color: #C0383C; }
/* KPI clickable que ademas filtra (tabs de Usuarios). */
.mod-stat--btn { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.mod-stat--btn:hover { border-color: #C3D0DD; }
.mod-stat--btn.active { border-color: var(--propia-brand, #6D4FE3); box-shadow: 0 0 0 1px var(--propia-brand, #6D4FE3) inset; }

.mod-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mod-search { display: flex; align-items: center; gap: 7px; border: 1px solid #E1E8EE; border-radius: 9px; padding: 0 11px; background: #fff; }
.mod-search svg { color: #A6B7C8; flex-shrink: 0; }
.mod-search:focus-within { border-color: var(--propia-brand, #6D4FE3); }
.mod-search-inp { border: 0; outline: none; padding: 8px 0; font-size: 12.5px; color: #33475B; font-family: inherit; width: 210px; background: transparent; }
.mod-fsel { border: 1px solid #E1E8EE; border-radius: 9px; padding: 8px 10px; font-size: 12px; color: #516F90; background: #fff; outline: none; font-family: inherit; cursor: pointer; }
.mod-fsel:focus { border-color: var(--propia-brand, #6D4FE3); }
.mod-fclear { border: 1px solid #DCD2F8; border-radius: 9px; padding: 8px 12px; font-size: 11.5px; font-weight: 700; color: var(--propia-brand, #6D4FE3); background: #F1ECFD; cursor: pointer; font-family: inherit; }
.mod-search-count { font-size: 12px; color: #A6B7C8; font-weight: 600; white-space: nowrap; }