/* ==============================================================================
 * assets/style.css
 * ==============================================================================
 * Hoja de estilos ÚNICA de todo el sistema (panel de administración, panel
 * de médicos, y páginas públicas de valoración) — todas las páginas la
 * enlazan con <link rel="stylesheet" href="assets/style.css">.
 *
 * Contiene, en este orden:
 *   1. Variables de color (tema oscuro "violeta EBEN") y fondo con textura
 *   2. Estilos base: header público, contenedor principal, textos de ayuda
 *   3. Componentes de formulario: inputs, botones, tarjetas de opción
 *   4. Selector de fotos, calendario de citas, franjas horarias
 *   5. Selector de idioma, campo de contraseña con ojo
 *   6. Barra superior (topbar) y menús desplegables del panel administrativo
 *
 * Las variables con el comentario "alias del sistema anterior" existen para
 * que el HTML/PHP más viejo (que todavía usa nombres como --maroon o
 * --porcelain, de una paleta anterior tipo "clínica clásica") siga
 * funcionando sin tener que reescribirlo, apuntando ya a los colores
 * nuevos del tema violeta.
 * ============================================================================== */

/* ---------------------------------------------------------------------------
 * SECCIÓN 1 — Variables de color y fondo con textura
 * ------------------------------------------------------------------------- */
:root{
  /* Manual de marca EbenOs v1.1 (2026) — Núcleo (#8B61E3, el acento por
     defecto de la plataforma) sobre neutros Basalto/Cantera/Grafito. Los
     --bg-* pasan de "Tolopea" (negro con tinte violeta) a Basalto, un
     negro neutro de verdad, tal como pide el manual ("sin degradados,
     colores planos"). Actualizado desde el violeta "Purple Heart" (v1.0)
     que citaba este mismo comentario antes.
     Color por servicio: los 7 servicios reales no comparten un único
     acento — CRM, Facturación y Pacientes lo sobreescriben en caliente
     vía ACENTO_POR_SERVICIO (packages/shared/lib/helpers.js,
     pintarHeaderAdmin) con las familias Comercial/Finanzas/Salud del
     manual; Core/Agenda/Formularios/Perfil se quedan en este Núcleo por
     defecto (más cercanos a "Administración/Agendamiento/Formularios"). */
  --bg-0:#0D0D16;
  --bg-1:#0D0D16;
  --bg-2:#17161F;
  --bg-3:#201F2B;
  --violet:#8B61E3;
  --violet-2:#A688EA;
  --violet-deep:#6B45C4;
  --lilac:#E8DFFB;

  /* Colores semánticos del manual (par fondo claro + texto oscuro, para
     badges/píldoras sobre tarjetas blancas) */
  --exito-bg:#C5F8AB; --exito-fg:#345920;
  --alerta-bg:#FFFDC1; --alerta-fg:#9C6A00;
  --error-bg:#F3C5C3; --error-fg:#CA433A;

  /* alias del sistema anterior, para que todo el HTML existente siga funcionando */
  --ink:#F7F8FF;
  --maroon:#8B61E3;
  --maroon-deep:#6B45C4;
  --rose:#E8DFFB;
  --rose-soft:rgba(139,97,227,0.16);
  --porcelain:rgba(255,255,255,0.07);
  --white:#F7F8FF;
  --text-dim:rgba(247,248,255,0.6);
  --text-faint:rgba(247,248,255,0.42);
  --line:rgba(255,255,255,0.14);
  --glass-border:rgba(255,255,255,0.14);
  --glass-fill:rgba(255,255,255,0.055);
  --error:#FF6B57;
  --success:#4ADE9A;
  --warn:#FFB03C;

  --sidebar-w:248px;
  --sidebar-w-collapsed:84px;
  /* Sidebar con riel de módulos (cliente/médico) — riel (--sidebar-w-collapsed)
     + panel del módulo actual, uno al lado del otro. Más ancho que
     --sidebar-w porque tiene que caber esa columna extra del riel. */
  --sidebar-w-con-riel:296px;
  --topbar-h:64px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ height:100%; }
/* Red de seguridad responsiva: sin importar qué tan angosta o ancha sea la
   pantalla, la página nunca debe generar una barra de scroll horizontal
   por accidente (un elemento fijo, una tabla ancha, una imagen grande,
   etc.). Los widgets que sí necesitan su propio scroll horizontal a
   propósito (como la grilla de la Agenda) lo declaran ellos mismos con
   `overflow:auto` en su propio contenedor, así que esto no les afecta. */
html, body{ max-width:100%; overflow-x:hidden; }
img, video, canvas{ max-width:100%; height:auto; }
table{ max-width:100%; }
body{
  font-family:'Outfit', sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(94,53,255,0.30), transparent 60%),
    radial-gradient(900px 600px at 105% 15%, rgba(125,92,255,0.22), transparent 55%),
    radial-gradient(800px 800px at 50% 115%, rgba(30,27,61,0.55), transparent 60%),
    linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
  background-attachment:fixed;
  line-height:1.55;
  min-height:100vh;
  padding-top:80px; /* respaldo antes de que el JS del topbar mida su alto real; ../assets/style.css lo sobreescribe */
}
body:not(:has(.gm-topbar)){ padding-top:0; }
body:has(.gm-sidebar){ padding-left:var(--sidebar-w); } /* respaldo antes de que el JS del sidebar mida su ancho real */
@media(max-width:900px){ body:has(.gm-sidebar){ padding-left:0; } }
h1,h2,h3{font-family:'Outfit', sans-serif; font-weight:600;}
.mono{font-family:'Outfit', sans-serif; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;}

/* fondo tipo rejilla sutil, igual a las referencias de diseño */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image: radial-gradient(circle at 30% 0%, black 0%, transparent 70%);
  mask-image: radial-gradient(circle at 30% 0%, black 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* ---------------------------------------------------------------------------
 * SECCIÓN 2 — Header público y contenedor principal
 * ------------------------------------------------------------------------- */
.gm-header{border-bottom:1px solid var(--line); padding:16px 24px; position:relative; z-index:1; background:rgba(255,255,255,0.04); backdrop-filter:blur(20px);}
.gm-logo{height:40px; display:block;}
.gm-main{max-width:720px; margin:0 auto; padding:44px 20px 80px; position:relative; z-index:1;} /* el body ya reserva el ancho del sidebar via padding-left, así que este centrado sigue funcionando igual */

.eyebrow{font-family:'Outfit', sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--violet-2); display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--violet-2);}

.step-dots{display:flex; gap:10px; justify-content:center; margin-bottom:34px;}
.step-dot{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-family:'Outfit', sans-serif; font-weight:700; background:var(--glass-fill); border:1px solid var(--glass-border); color:var(--text-dim);}
.step-dot.active,.step-dot.done{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(94,53,255,.4);}
.step-line{width:20px; height:1px; background:var(--line); align-self:center;}

/* ---------------------------------------------------------------------------
 * SECCIÓN 3 — Componentes de formulario: inputs, botones, tarjetas
 * ------------------------------------------------------------------------- */
.gm-input{width:100%; padding:13px 16px; border:1px solid rgba(255,255,255,0.12); border-radius:13px; font-family:'Outfit', sans-serif; font-size:14px; color:var(--ink); background:rgba(255,255,255,0.05); outline:none; resize:vertical; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;}
.gm-input::placeholder{color:rgba(247,248,255,0.32);}
.gm-input:focus{border-color:var(--violet-2); background:rgba(94,53,255,0.08); box-shadow:0 0 0 4px rgba(94,53,255,0.16);}
.field{margin-bottom:18px;}
.field label{display:block; font-family:'Outfit', sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.02em; color:rgba(247,248,255,0.8); margin-bottom:8px;}
.field .hint{font-size:11.5px; color:var(--text-dim); margin-top:5px;}

.btn-primary{display:inline-flex; align-items:center; gap:8px; justify-content:center; background:linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff; border:none; border-radius:13px; padding:14px 22px; font-family:'Outfit', sans-serif; font-weight:600; font-size:14.5px; letter-spacing:0.02em; cursor:pointer; box-shadow:0 12px 28px rgba(94,53,255,0.38), inset 0 1px 0 rgba(255,255,255,0.3); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, background .18s ease; text-decoration:none;}
.btn-primary:hover:not(:disabled){transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 16px 34px rgba(94,53,255,0.48), inset 0 1px 0 rgba(255,255,255,0.3);}
.btn-primary:active{transform:translateY(0) scale(.99);}
.btn-primary:disabled{opacity:.5; cursor:not-allowed;}
.btn-outline{display:inline-flex; align-items:center; gap:8px; justify-content:center; background:rgba(255,255,255,0.05); color:var(--ink); border:1px solid rgba(255,255,255,0.18); border-radius:11px; padding:11px 20px; font-family:'Outfit', sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.02em; cursor:pointer; transition:background .15s ease, border-color .15s ease; text-decoration:none;}
.btn-outline:hover{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.32);}
.btn-back{display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; color:var(--text-dim); font-family:'Outfit', sans-serif; font-size:12px; font-weight:600; letter-spacing:0.02em; margin-bottom:22px; padding:0; text-decoration:none;}
.btn-back:hover{color:var(--ink);}

.tipo-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:600px){ .tipo-grid{grid-template-columns:1fr;} }
.tipo-card{text-align:left; border:1px solid var(--glass-border); border-radius:16px; padding:26px; background:var(--glass-fill); backdrop-filter:blur(18px); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; width:100%; box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);}
.tipo-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px -14px rgba(94,53,255,.45), inset 0 1px 0 rgba(255,255,255,0.25); border-color:var(--violet-2);}
.tipo-icon{width:44px; height:44px; border-radius:50%; background:rgba(125,92,255,0.16); display:grid; place-items:center; margin-bottom:16px; color:var(--violet-2);}
.tipo-card h3{font-size:17px; font-weight:600; margin-bottom:8px; color:var(--ink);}
.tipo-card p{font-size:13.5px; color:var(--text-dim); margin-bottom:14px;}
.tipo-cta{display:inline-flex; align-items:center; gap:6px; font-family:'Outfit', sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--violet-2);}

/* ---------------------------------------------------------------------------
 * SECCIÓN 4 — Selector de fotos, calendario de citas, franjas horarias
 * ------------------------------------------------------------------------- */
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:600px){ .photo-grid{grid-template-columns:1fr;} }
.photo-slot input{display:none;}
.photo-box{width:100%; aspect-ratio:3/4; border-radius:14px; border:1.5px dashed rgba(255,255,255,0.2); background:rgba(255,255,255,0.04); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; position:relative; overflow:hidden; padding:0;}
.photo-box.filled{border:1px solid var(--violet-2); background:none;}
.photo-box img{width:100%; height:100%; object-fit:cover;}
.photo-box .overlay{position:absolute; inset:0; background:rgba(11,11,29,.65); opacity:0; display:grid; place-items:center; color:#fff; font-size:11px; font-family:'Outfit', sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.03em; transition:opacity .15s ease;}
.photo-box:hover .overlay{opacity:1;}
.photo-hint{font-size:10.5px; color:var(--text-dim); text-align:center; margin-top:6px;}
.photo-label{font-family:'Outfit', sans-serif; font-size:11.5px; font-weight:600; color:var(--violet-2); text-align:center; padding:0 8px;}

.notice{padding:14px 16px; background:var(--glass-fill); border:1px solid var(--glass-border); border-radius:12px; font-size:12px; color:var(--text-dim); display:flex; gap:10px; align-items:flex-start; margin-top:20px;}

.consent{display:flex; gap:10px; align-items:flex-start; margin:20px 0; font-size:12.5px; color:var(--text-dim);}
.consent input{margin-top:3px;}
.consent a{color:var(--violet-2);}

.error-text{color:var(--error); font-size:12.5px; margin-top:10px;}

.success-wrap{max-width:460px; margin:30px auto 0; text-align:center;}
.success-icon{width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg, var(--violet), var(--violet-deep)); display:grid; place-items:center; margin:0 auto 20px; color:#fff; font-size:26px; box-shadow:0 12px 28px rgba(94,53,255,.4);}

.spin{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.calendarioMes{border:1px solid var(--glass-border); border-radius:16px; padding:16px; background:var(--glass-fill); backdrop-filter:blur(16px);}
.calMesHeader{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.calMesHeader .calMesTitulo{font-family:'Outfit',sans-serif; font-weight:600; font-size:15px; text-transform:capitalize;}
.calMesNav{background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:14px; color:var(--ink);}
.calMesNav:hover{border-color:var(--violet-2);}
.calMesNav:disabled{opacity:.3; cursor:default;}
.calGrid{display:grid; grid-template-columns:repeat(7, 1fr); gap:5px;}
.calDiaSemana{text-align:center; font-size:10.5px; font-family:'Outfit',sans-serif; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--text-faint); padding-bottom:6px;}
.calCelda{aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:13px; cursor:default; color:var(--text-dim); position:relative;}
.calCelda.vacia{visibility:hidden;}
.calCelda.disponible{background:rgba(94,53,255,0.16); color:var(--lilac); cursor:pointer; font-weight:600;}
.calCelda.disponible:hover{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff;}
.calCelda.selected{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff; font-weight:700;}
.dia-btn{display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.05); border-radius:10px; padding:10px 4px; cursor:pointer; transition:border-color .15s ease, background .15s ease;}
.dia-btn:hover{border-color:var(--violet-2);}
.dia-btn.selected{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); border-color:transparent;}
.dia-btn.selected .dia-nombre, .dia-btn.selected .dia-num, .dia-btn.selected .dia-mes{color:#fff;}
.dia-nombre{font-family:'Outfit', sans-serif; font-size:10px; font-weight:600; text-transform:uppercase; color:var(--text-dim); letter-spacing:.03em;}
.dia-num{font-family:'Outfit', sans-serif; font-size:16px; font-weight:600; color:var(--ink);}
.dia-mes{font-size:9.5px; color:var(--text-dim);}

.franjas{flex-wrap:wrap; gap:8px; margin-top:14px;}
.franja-btn{border:1px solid var(--glass-border); background:rgba(255,255,255,0.05); border-radius:20px; padding:8px 14px; font-size:12.5px; cursor:pointer; color:var(--ink); transition:border-color .15s ease, background .15s ease, color .15s ease;}
.franja-btn:hover{border-color:var(--violet-2);}
.franja-btn.selected{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); border-color:transparent; color:#fff;}

/* ---------------------------------------------------------------------------
 * SECCIÓN 5 — Selector de idioma y campo de contraseña con ojo
 * ------------------------------------------------------------------------- */
.lang-switch{display:flex; gap:4px;}
.lang-link{font-size:11px; font-family:'Outfit', sans-serif; font-weight:600; letter-spacing:.02em; color:var(--text-dim); text-decoration:none; padding:5px 9px; border-radius:5px; border:1px solid transparent;}
.lang-link.active{background:var(--rose-soft); color:var(--lilac); border-color:var(--violet-2);}
.lang-link:hover{border-color:var(--line);}

.password-wrap{position:relative;}
.password-wrap .gm-input{padding-right:44px;}
.toggle-pass{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:6px; color:rgba(247,248,255,0.45); display:flex; align-items:center; justify-content:center; border-radius:5px;}
.toggle-pass:hover{color:var(--lilac); background:none;}
.toggle-pass svg{width:18px; height:18px;}

/* ---------------------------------------------------------------------------
 * SECCIÓN 6 — Sidebar de navegación + barra superior del panel
 * ------------------------------------------------------------------------- */
.gm-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); z-index:55;
  display:flex; flex-direction:column;
  background:var(--bg-1); border-right:1px solid var(--line);
  transition:transform .2s ease, width .2s ease;
}
.gm-sidebar-brand{
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  padding:18px 20px; border-bottom:1px solid var(--line);
}
.gm-sidebar-brand img{height:26px; max-width:170px; object-fit:contain; display:block;}
.marca-mini{height:32px; width:32px; object-fit:contain;}
.gm-sidebar-scroll{flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 12px 24px;}
.gm-sidebar-label{
  font-family:'Outfit',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint); padding:16px 12px 6px; white-space:nowrap;
}
.gm-sidebar-label:first-child{padding-top:4px;}
.gm-sidebar-link{
  display:flex; align-items:center; gap:11px;
  font-size:13.5px; font-family:'Outfit', sans-serif; font-weight:600;
  color:rgba(247,248,255,.82); text-decoration:none;
  padding:10px 12px; border-radius:10px; margin-bottom:2px;
  border:1px solid transparent; white-space:nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gm-sidebar-link:hover{
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.03) 65%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(3,2,10,.22);
  color:#fff;
}
.gm-sidebar-link.active{
  background: linear-gradient(135deg, rgba(94,53,255,0.28), rgba(125,92,255,0.14));
  border-color: rgba(125,92,255,0.4);
  color:#fff;
}
.gm-sidebar-link .chevron{margin-left:auto; font-size:9px; flex-shrink:0;}
.gm-sidebar-link-disabled, .gm-sidebar-link-disabled:hover{
  opacity:.38; filter:grayscale(.6); pointer-events:none; cursor:not-allowed; background:none; color:rgba(247,248,255,.82);
}
.acceso-item-disabled, .acceso-item-disabled:hover{
  opacity:.38; filter:grayscale(.6); pointer-events:none; cursor:not-allowed;
}
.gm-sidebar-children{display:none; flex-direction:column; padding-left:26px; margin:2px 0 4px;}
.gm-nav-dropdown.abierto .gm-sidebar-children{display:flex;}
.gm-sidebar-children a{
  font-size:12.5px; padding:8px 12px; color:rgba(247,248,255,0.68);
  border:1px solid transparent; border-radius:10px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gm-sidebar-children a:hover{
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 65%);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  color:#fff;
}

/* Sidebar colapsado a solo iconos (toggle de escritorio) */
.gm-sidebar.gm-sidebar-collapsed{ width:var(--sidebar-w-collapsed); }
.gm-sidebar.gm-sidebar-collapsed .gm-sidebar-brand{ padding:18px 0; justify-content:center; }
.gm-sidebar-brand .marca-mini{ display:none; }
.marca-completa{ display:flex; align-items:center; gap:12px; }
.gm-sidebar.gm-sidebar-collapsed .gm-sidebar-brand .marca-completa{ display:none; }
.gm-sidebar.gm-sidebar-collapsed .gm-sidebar-brand .marca-mini{ display:block; }
.gm-sidebar.gm-sidebar-collapsed .gm-sidebar-label{ display:none; }
.gm-sidebar.gm-sidebar-collapsed .gm-sidebar-link{ justify-content:center; padding:11px 0; }
.gm-sidebar.gm-sidebar-collapsed .gm-sidebar-link .texto,
.gm-sidebar.gm-sidebar-collapsed .gm-sidebar-link .chevron,
.gm-sidebar.gm-sidebar-collapsed .gm-sidebar-children{ display:none !important; }

/* Al pasar el mouse sobre el sidebar recogido, se expande flotando ENCIMA
   del contenido (no empuja nada) — la clase gm-sidebar-collapsed nunca se
   quita mientras el mouse está encima, así que gmAjustarEspacioSidebar()
   sigue viendo "recogido" y el padding del body / la posición del topbar no
   se mueven ni un pixel; el z-index alto es lo que evita que el contenido
   de la página se vea "encima" del sidebar expandido. Se queda por debajo
   de los modales/overlays reales (.modal-overlay, .gmCropOverlay) para no
   taparlos si alguno se abre con el sidebar todavía flotando. */
.gm-sidebar.gm-sidebar-collapsed:hover{
  width: var(--sidebar-w);
  z-index: 70;
  box-shadow: 0 24px 70px rgba(3,2,10,.45);
}
.gm-sidebar.gm-sidebar-collapsed:hover .gm-sidebar-brand{ padding:18px 20px; justify-content:flex-start; }
.gm-sidebar.gm-sidebar-collapsed:hover .gm-sidebar-brand .marca-completa{ display:flex; }
.gm-sidebar.gm-sidebar-collapsed:hover .gm-sidebar-brand .marca-mini{ display:none; }
.gm-sidebar.gm-sidebar-collapsed:hover .gm-sidebar-label{ display:block; }
.gm-sidebar.gm-sidebar-collapsed:hover .gm-sidebar-link{ justify-content:flex-start; padding:10px 12px; }
.gm-sidebar.gm-sidebar-collapsed:hover .gm-sidebar-link .texto,
.gm-sidebar.gm-sidebar-collapsed:hover .gm-sidebar-link .chevron{ display:inline !important; }
.gm-sidebar.gm-sidebar-collapsed:hover .gm-nav-dropdown.abierto .gm-sidebar-children{ display:flex !important; }

/* Riel de módulos (cliente/médico con módulos activos) — mismo patrón
   visual que el selector de apps de Gmail (Mail/Chat/Meet): icono arriba,
   etiqueta chiquita debajo. Es su PROPIA columna, siempre visible (no solo
   en el modo recogido) — al lado va el panel del módulo actual (su logo +
   su propio menú, ver .gm-sidebar-panel). Un sidebar sin riel (súper
   admin/soporte/etc.) conserva el layout de una sola columna sin cambios. */
.gm-sidebar.gm-sidebar-con-riel{
  flex-direction: row; align-items: stretch;
  width: var(--sidebar-w-con-riel);
  /* La línea recta de borde a borde (heredada de .gm-sidebar) se veía como
     un pelo perdido entre dos fondos casi idénticos (panel y contenido) —
     se reemplaza por una barrita suelta, gris suave, con las puntas
     redondeadas (ver ::after) en vez de una línea recta de punta a punta. */
  border-right: none;
}
.gm-sidebar.gm-sidebar-con-riel::after{
  content:''; position:absolute; top:20px; bottom:20px; right:0; width:3px;
  border-radius:999px; background:rgba(20,18,40,.10);
}
.gm-sidebar-con-riel .gm-sidebar-rail{
  display:flex; flex-direction:column; gap:4px; flex-shrink:0;
  width:var(--sidebar-w-collapsed); padding:16px 8px 24px; overflow-y:auto;
  /* Azul más claro que el fondo del sidebar (--bg-1) — para que el riel se
     distinga del panel del módulo de al lado, no se confundan en un solo bloque. */
  background:#16205C;
  border-right:1px solid var(--line);
}
.gm-sidebar-rail-item{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 4px; border-radius:14px; text-decoration:none;
  color:rgba(247,248,255,.72); border:1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gm-sidebar-rail-item:hover{
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 65%);
  border-color: rgba(255,255,255,.14); color:#fff;
}
.gm-sidebar-rail-item.active{
  background: linear-gradient(135deg, rgba(94,53,255,0.28), rgba(125,92,255,0.14));
  border-color: rgba(125,92,255,0.4); color:#fff;
}
.gm-sidebar-rail-icono{ display:flex; align-items:center; justify-content:center; }
.gm-sidebar-rail-texto{ font-size:10px; font-family:'Outfit',sans-serif; font-weight:600; text-align:center; line-height:1.2; }
/* Panel del módulo actual (logo + su propio menú) — segunda columna, al
   lado del riel. Se oculta por completo cuando el sidebar está recogido,
   dejando solo el riel (mismo pedido: "en el menú recogido deben aparecer
   los iconos de los módulos"). Fondo claro (pedido del usuario: el riel se
   queda con su azul oscuro de siempre, pero el panel de al lado pasa a un
   gris suave casi blanco) — todo su texto/enlaces, hardcodeados en claro
   para un fondo oscuro, se re-tematizan aquí a oscuro-sobre-claro. El panel
   es BLANCO puro (no el mismo gris del contenido de al lado) para que sea
   el contraste de fondo el que separe panel/contenido, no una línea recta
   flotando entre dos grises idénticos. */
.gm-sidebar-con-riel .gm-sidebar-panel{
  flex:1; min-width:0; display:flex; flex-direction:column;
  background:#FFFFFF;
}
.gm-sidebar-con-riel .gm-sidebar-panel .gm-sidebar-link{
  color:var(--text-dim);
  /* Etiquetas largas ("Verificación en dos pasos") no deben cortarse — se
     permite el salto de línea en vez del nowrap+overflow-hidden genérico
     que trae .gm-sidebar-link para el sidebar oscuro de una sola columna. */
  white-space:normal; line-height:1.25;
}
.gm-sidebar-con-riel .gm-sidebar-panel .gm-sidebar-link .texto{ word-break:break-word; }
.gm-sidebar-con-riel .gm-sidebar-panel .gm-sidebar-link:hover{
  background:rgba(20,18,40,.05);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-color:var(--line); box-shadow:none; color:var(--ink);
}
.gm-sidebar-con-riel .gm-sidebar-panel .gm-sidebar-link.active{
  background:linear-gradient(135deg, rgba(94,53,255,.14), rgba(125,92,255,.08));
  border-color:rgba(125,92,255,.35); color:var(--violet-2);
}
.gm-sidebar-con-riel .gm-sidebar-panel .gm-sidebar-link-disabled,
.gm-sidebar-con-riel .gm-sidebar-panel .gm-sidebar-link-disabled:hover{ color:var(--text-faint); }
.gm-sidebar-con-riel .gm-sidebar-panel .gm-sidebar-children a{ color:var(--text-dim); white-space:normal; line-height:1.25; }
.gm-sidebar-con-riel .gm-sidebar-panel .gm-sidebar-children a:hover{
  background:rgba(20,18,40,.05);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-color:var(--line); box-shadow:none; color:var(--ink);
}
.gm-sidebar.gm-sidebar-collapsed.gm-sidebar-con-riel{ width:var(--sidebar-w-collapsed); }
.gm-sidebar.gm-sidebar-collapsed.gm-sidebar-con-riel .gm-sidebar-rail{ border-right:none; }
.gm-sidebar.gm-sidebar-collapsed.gm-sidebar-con-riel .gm-sidebar-panel{ display:none; }
/* El riel no se expande al pasar el mouse — a diferencia del menú genérico
   de arriba, un selector de módulos ya muestra su etiqueta siempre, no hace
   falta el "peek". */
.gm-sidebar.gm-sidebar-collapsed.gm-sidebar-con-riel:hover{
  width:var(--sidebar-w-collapsed); z-index:55; box-shadow:none;
}
.gm-sidebar.gm-sidebar-collapsed.gm-sidebar-con-riel:hover .gm-sidebar-panel{ display:none; }

/* El botón de recoger/mostrar el menú ahora vive dentro del riel, encima
   de "Inicio" — mismo lenguaje visual que un .gm-sidebar-rail-item (icono
   suelto sobre el azul oscuro del riel), no el chip gris claro que usa
   cuando vive suelto en la barra superior (sidebars sin riel). La
   especificidad extra es a propósito: gana sobre la regla de tema claro
   body:has(.gm-topbar) .gm-sidebar-toggle de más abajo. */
body:has(.gm-topbar) .gm-sidebar-con-riel .gm-sidebar-toggle{
  width:100%; height:auto; flex-shrink:0;
  padding:10px 4px; margin-bottom:2px; border-radius:14px;
  background:transparent; border:1px solid transparent; box-shadow:none;
  color:rgba(247,248,255,.72); font-size:18px;
}
body:has(.gm-topbar) .gm-sidebar-con-riel .gm-sidebar-toggle:hover{
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 65%);
  border-color: rgba(255,255,255,.14); color:#fff;
}

/* Barra superior: se corre a la derecha del sidebar; búsqueda decorativa + campana + usuario */
.gm-topbar{
  position:fixed; top:0; left:var(--sidebar-w); right:0; height:var(--topbar-h); z-index:50;
  display:flex; align-items:center; gap:14px;
  padding:0 24px; border-bottom:1px solid var(--line);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.gm-sidebar-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0;
  border-radius:10px; border:1px solid var(--glass-border); background:var(--glass-fill); color:var(--ink);
  cursor:pointer; font-size:16px;
}
.gm-sidebar-toggle:hover{ background:rgba(255,255,255,.14); }
/* Caja de búsqueda decorativa — todavía no está conectada a ningún buscador real */
.gm-topbar-titulo{display:flex; flex-direction:column; margin-right:8px; white-space:nowrap;}
.gm-topbar-titulo strong{font-family:'Outfit',sans-serif; font-size:17px; font-weight:700; color:var(--ink); line-height:1.2;}
.gm-topbar-titulo span{font-size:11.5px; color:var(--text-dim); line-height:1.2;}
.gm-topbar-search{flex:1 1 420px; max-width:420px; min-width:0; margin:0 auto; position:relative;}
.gm-topbar-search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none;}
.gm-topbar-search input{
  width:100%; background:var(--glass-fill); border:1px solid var(--glass-border); border-radius:11px;
  padding:9px 14px 9px 38px; font-size:13px; color:var(--ink); font-family:'Outfit',sans-serif;
}
.gm-topbar-search input::placeholder{color:var(--text-faint);}
/* Ícono de filtros dentro de la caja de búsqueda (extremo derecho) — mismo
   patrón visual que Gmail; sin función propia todavía. */
.gm-topbar-search{padding-right:0;}
.gm-topbar-search-tune{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; border-radius:50%; color:var(--text-dim); cursor:pointer;}
.gm-topbar-search-tune:hover{background:rgba(20,18,40,.06);}
.gm-topbar-search-tune:disabled{cursor:default;}
.gm-topbar-search input{padding-right:36px;}
/* Mega menú de dashboards — se abre al enfocar la caja de búsqueda. Colores
   fijos (no var(--ink)/var(--line)) a propósito: esta caja debe verse igual
   sin importar si la página que la aloja está en tema oscuro o claro. */
.gm-megamenu{
  display:none; position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:560px; max-width:90vw; background:#fff; border:1px solid rgba(20,18,40,.09); border-radius:16px;
  padding:16px; box-shadow:0 20px 48px rgba(20,18,40,.18); z-index:60;
}
.gm-topbar-search.abierto .gm-megamenu{display:block;}
/* Variante del megamenú para el lanzador de módulos del topbar (ícono de
   cuadrícula) — mismo panel/tiles, pero se abre desde su propio botón a la
   derecha, no centrado bajo la caja de búsqueda. */
.gm-modulos-panel{left:auto; right:0; transform:none; width:320px;}
.gm-config-dropdown.abierto .gm-modulos-panel{display:block;}
.gm-megamenu-label{font-size:11px; font-weight:700; color:#8B87A0; text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; font-family:'Outfit',sans-serif;}
.gm-megamenu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.gm-megamenu-item{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:14px 8px; border-radius:12px; text-decoration:none; color:#14121F; font-size:12px; font-weight:600; font-family:'Outfit',sans-serif;}
.gm-megamenu-item:hover{background:rgba(20,18,40,.05);}
.gm-megamenu-item .ic{width:38px; height:38px; border-radius:10px; background:rgba(139,97,227,.1); color:var(--violet); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.gm-megamenu-hint{font-size:11px; color:#8B87A0; margin-top:12px; padding-top:12px; border-top:1px solid rgba(20,18,40,.08); font-family:'Outfit',sans-serif;}
.gm-topbar-user{display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto;}
/* Pill de estado ("Activo") — marcador visual, sin función propia todavía. */
.gm-topbar-status-pill{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:20px; background:rgba(255,255,255,0.08); border:1px solid var(--glass-border); color:var(--ink); font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;}
.gm-topbar-status-pill:hover{background:rgba(255,255,255,0.16);}
.gm-topbar-status-pill .chev{opacity:.6;}
.gm-topbar-status-dot{width:8px; height:8px; border-radius:50%; background:#1F7A4D; flex-shrink:0;}
/* Botón del asistente de IA — mismo tamaño que .gm-config-trigger, pero con
   un fondo degradado de color (estilo Gemini) en vez de monocromo, para que
   se distinga del resto de íconos utilitarios. */
.gm-topbar-ia-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; border:none; cursor:pointer; color:#fff; background:linear-gradient(135deg,#5D5FEF 0%,#9B5DE5 45%,#F15BB5 100%); box-shadow:0 6px 16px rgba(155,93,229,.4);}
.gm-topbar-ia-btn:hover{filter:brightness(1.08);}
.gm-topbar-ia-mark{height:19px; width:auto; display:block;}

/* Panel del Asistente de IA — lleva también la clase .gm-config-menu (ver
   pintarHeaderAdmin) para heredar su cristal/fondo YA correcto en los dos
   temas (oscuro por defecto, blanco dentro de body:has(.gm-topbar), el
   panel admin real) — acá solo se ajusta tamaño/padding/layout de columna,
   nunca color, para no repetir el problema (ver .gm-estado-* más abajo:
   un fondo/texto fijo del tema oscuro se ve invisible sobre el panel claro). */
.gm-asistente-panel{
  width:360px; max-width:92vw; height:460px; max-height:70vh;
  padding:0; flex-direction:column; overflow:hidden;
}
.gm-asistente-panel-header{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); flex-shrink:0;}
.gm-asistente-panel-mark{width:30px; height:30px; padding:6px; border-radius:9px; background:linear-gradient(135deg,#5D5FEF 0%,#9B5DE5 45%,#F15BB5 100%); flex-shrink:0;}
.gm-asistente-panel-header strong{display:block; font-size:13.5px; color:var(--ink); font-family:'Outfit',sans-serif;}
.gm-asistente-panel-header span{display:block; font-size:11px; color:var(--text-dim); margin-top:1px;}
.gm-asistente-mensajes{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px;}
.gm-asistente-msg{max-width:85%; padding:9px 13px; border-radius:14px; font-size:12.5px; line-height:1.5; font-family:'Outfit',sans-serif;}
.gm-asistente-msg-bot{align-self:flex-start; background:var(--glass-fill); color:var(--ink); border-bottom-left-radius:4px;}
.gm-asistente-msg-usuario{align-self:flex-end; background:linear-gradient(135deg,#5D5FEF 0%,#9B5DE5 100%); color:#fff; border-bottom-right-radius:4px;}
.gm-asistente-input-row{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); flex-shrink:0;}
.gm-asistente-input-row input{flex:1; background:var(--glass-fill); border:1px solid var(--line); border-radius:10px; padding:9px 12px; color:var(--ink); font-size:12.5px; font-family:'Outfit',sans-serif; outline:none;}
.gm-asistente-input-row input::placeholder{color:var(--text-faint);}
.gm-asistente-input-row input:focus{border-color:var(--violet-2);}
.gm-asistente-input-row button{flex-shrink:0; width:36px; height:36px; border-radius:10px; border:none; cursor:pointer; color:#fff; background:linear-gradient(135deg,#5D5FEF 0%,#9B5DE5 45%,#F15BB5 100%); display:flex; align-items:center; justify-content:center;}
.gm-asistente-input-row button:disabled{opacity:.5; cursor:not-allowed;}
@media(max-width:520px){
  .gm-asistente-panel{position:fixed; top:auto; bottom:0; left:0; right:0; margin:0; width:100%; max-width:100%; height:72vh; max-height:72vh; border-radius:18px 18px 0 0;}
}

/* Logo de la empresa + avatar del usuario, UNA sola cápsula con un solo
   borde (no dos chips separados) — pidió el usuario mostrando una
   referencia visual exacta (logo a la izquierda, avatar pegado a la
   derecha, mismo fondo/borde para ambos). */
.gm-topbar-identidad{display:flex; align-items:center; gap:8px; height:40px; padding:4px 8px 4px 14px; border-radius:20px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.04);}
.gm-topbar-org-logo{height:20px; width:auto; max-width:120px; object-fit:contain;}
.gm-topbar-user-info{display:flex; align-items:center; gap:8px; border-radius:20px; padding:3px; transition:background .15s;}
.gm-topbar-user-info:hover{background:var(--glass-fill);}
.gm-topbar-avatar{
  position:relative; width:32px; height:32px; border-radius:50%;
  background: linear-gradient(140deg, var(--violet), var(--violet-deep)); color:#fff; display:grid; place-items:center;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:13px; flex-shrink:0;
  box-shadow: 0 6px 16px rgba(94,53,255,.4);
}
.gm-topbar-presencia{
  position:absolute; bottom:-2px; right:-2px; width:10px; height:10px;
  border-radius:50%; border:2px solid var(--bg-1);
}
.gm-topbar-greeting{font-size:13px; color:var(--ink); line-height:1.2; text-align:left;}
.gm-topbar-greeting strong{font-weight:700; display:block; text-align:left;}
.gm-topbar-greeting span{display:block; font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em; font-family:'Outfit',sans-serif; font-weight:600; text-align:left;}
@media(max-width:900px){
  .gm-sidebar{transform:translateX(-100%); box-shadow:0 0 60px rgba(0,0,0,.5);}
  .gm-sidebar.gm-sidebar-open{transform:translateX(0);}
  .gm-topbar{left:0;}
  .gm-topbar-search{display:none;}
}
@media(max-width:520px){
  .gm-topbar-greeting{display:none;}
  .gm-topbar{padding:0 14px;}
}

/* Submenu desplegable dentro del sidebar (ej. "Todas las solicitudes" > "Solicitudes clásico") */
.gm-nav-dropdown{display:flex; flex-direction:column;}

/* Dropdown elegante del icono de configuracion (engranaje) */
.gm-config-dropdown{position:relative;}
.gm-config-trigger{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:11px; font-size:18px; text-decoration:none; color:var(--text-dim); transition:background .15s, color .15s;
  cursor:pointer; background:rgba(255,255,255,0.08); border:1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.gm-config-trigger:hover{background:rgba(255,255,255,0.16); color:var(--ink);}
.gm-config-trigger.active,
.gm-config-dropdown.abierto .gm-config-trigger{
  background:linear-gradient(135deg, var(--violet), var(--violet-deep));
  color:#fff; border-color:transparent;
  box-shadow:0 8px 20px rgba(94,53,255,.4);
}
.gm-config-trigger.active:hover{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff;}
.gm-config-menu{
  display:none; position:absolute; top:100%; margin-top:8px; right:0;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 45%),
    linear-gradient(165deg, rgba(32,29,66,0.97), rgba(10,10,26,0.99));
  border:1px solid rgba(255,255,255,0.25); border-radius:18px;
  min-width:270px; z-index:60; padding:10px; flex-direction:column; gap:2px;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 24px 60px rgba(3,2,10,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.gm-config-dropdown.abierto .gm-config-menu{display:flex;}
.gm-config-item{
  display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius:12px;
  text-decoration:none; color:var(--ink); transition:background .15s;
}
.gm-config-item:hover{background:rgba(255,255,255,0.08);}
.gm-config-item strong{
  display:block; font-size:13.5px; font-weight:600; font-family:'Outfit',sans-serif;
  background:linear-gradient(135deg, #FFFFFF 30%, var(--lilac) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gm-config-item small{display:block; font-size:11.5px; color:rgba(247,248,255,0.55); margin-top:1px; font-family:'Outfit',sans-serif;}
.gm-config-icono{
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}

/* Pastilla de estado del topbar (Automático/No interrumpir/Ausente + estado
   personalizado) — mismo layout de .gm-config-item, pero con un tercer
   elemento a la derecha en vez de solo ícono+texto. Todo en variables
   (--ink/--text-dim/--text-faint/--glass-fill/--line), nunca colores fijos
   del tema oscuro — el panel admin real vive dentro de
   body:has(.gm-topbar), que redefine esas variables a su versión clara (ver
   esa sección más abajo); un color fijo tipo rgba(255,255,255,…) se ve
   invisible ahí (texto casi blanco sobre fondo casi blanco). */
.gm-estado-opcion{
  display:flex; align-items:center; gap:12px; width:100%; padding:9px 10px; border-radius:12px;
  background:none; border:none; text-align:left; cursor:pointer; color:var(--ink); transition:background .15s;
}
.gm-estado-opcion:hover{background:var(--glass-fill);}
.gm-estado-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.gm-estado-textos{flex:1; display:flex; flex-direction:column;}
.gm-estado-textos strong{font-size:13px; font-weight:600; font-family:'Outfit',sans-serif; color:var(--ink);}
.gm-estado-textos span{font-size:11px; color:var(--text-dim); margin-top:1px;}
.gm-estado-check{flex-shrink:0; display:flex; visibility:hidden; color:var(--violet-2);}
.gm-estado-opcion.seleccionado .gm-estado-check{visibility:visible;}
.gm-estado-agregar{display:flex; gap:6px; padding:8px 10px; margin-top:2px; border-top:1px solid var(--line);}
.gm-estado-agregar input{flex:1; background:var(--glass-fill); border:1px solid var(--line); border-radius:8px; padding:7px 10px; color:var(--ink); font-size:12.5px; font-family:'Outfit',sans-serif; outline:none;}
.gm-estado-agregar input::placeholder{color:var(--text-faint);}
.gm-estado-agregar input:focus{border-color:var(--violet-2);}
.gm-estado-agregar button{flex-shrink:0; width:32px; height:32px; border-radius:8px; border:none; cursor:pointer; color:#fff; background:linear-gradient(135deg, var(--violet), var(--violet-deep)); display:flex; align-items:center; justify-content:center;}

/* Nombre/rol de quién tiene la sesión — vive DENTRO del menú del avatar
   (se abre al hacer clic), no como texto siempre visible en la barra
   superior. Estilo más "Google": el avatar solo se identifica con un ícono,
   el nombre aparece al abrir su menú, no ocupa espacio permanente arriba. */
/* Encabezado "cuenta" del dropdown del avatar — estilo cuenta de Google
   (correo/rol, foto grande con distintivo de cámara, saludo, botón
   "Administrar cuenta", fila Agregar cuenta/Salir, enlaces legales). Los
   demás ítems del menú (Mi perfil, Seguridad, Tickets, etc.) siguen debajo
   con su estilo de lista de siempre (.gm-config-item). */
.gm-config-menu-cuenta{width:320px;}
.gm-config-quien{padding:16px 20px 18px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.14); text-align:center;}
.gm-config-quien-correo{font-size:13px; font-weight:700; color:#fff; font-family:'Outfit',sans-serif;}
.gm-config-quien-rol{font-size:11.5px; color:rgba(247,248,255,.55); font-weight:500; margin-top:2px; font-family:'Outfit',sans-serif;}
.gm-config-quien-fotowrap{position:relative; width:72px; height:72px; margin:16px auto 10px;}
.gm-config-quien-foto{width:72px; height:72px; border-radius:50%; background:linear-gradient(140deg, var(--violet), var(--violet-deep)); color:#fff; display:grid; place-items:center; font-family:'Outfit',sans-serif; font-weight:700; font-size:26px; overflow:hidden;}
.gm-config-quien-camara{position:absolute; bottom:0; right:0; width:26px; height:26px; border-radius:50%; background:#fff; color:var(--text-dim); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25); border:1px solid var(--line); cursor:pointer;}
.gm-config-quien-camara:hover{color:var(--violet-2); border-color:var(--violet-2);}

/* Editor de foto de perfil (arrastrar + zoom sobre un visor circular) —
   compartido por el ícono de cámara del panel de identidad (topbar, ver
   gmTopbarFoto* en helpers.js) y por el campo "Cambiar foto" de Mi perfil
   (ver SCRIPT_FOTO_PERFIL) — misma pieza visual en los dos casos, con
   distintos ids de elemento para no chocar cuando ambos viven en la misma
   página (Mi perfil incluye el header Y su propio campo de foto). */
.gmCropOverlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(20,18,40,.55);align-items:center;justify-content:center;padding:20px;}
.gmCropOverlay.open{display:flex;}
.gmCropBox{background:#fff;border-radius:16px;padding:24px;width:320px;max-width:100%;box-shadow:0 30px 80px rgba(20,18,40,.35);}
.gmCropBox h4{font-size:15px;margin-bottom:16px;color:#14121F;font-family:'Outfit',sans-serif;font-weight:700;}
.gmCropViewport{width:220px;height:220px;margin:0 auto 18px;border-radius:50%;overflow:hidden;position:relative;background:#F5F6FA;cursor:grab;touch-action:none;box-shadow:0 0 0 1px rgba(20,18,40,.09);}
.gmCropViewport.arrastrando{cursor:grabbing;}
.gmCropViewport img{position:absolute;top:0;left:0;user-select:none;pointer-events:none;max-width:none;}
.gmCropZoomRow{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.gmCropZoomRow svg{flex-shrink:0;color:#8B87A0;}
.gmCropZoom{flex:1;}
.gmCropActions{display:flex;gap:10px;justify-content:flex-end;}
.gm-config-quien-saludo{font-size:17px; font-weight:600; color:#fff; font-family:'Outfit',sans-serif; margin-bottom:14px;}
.gm-config-quien-administrar{display:inline-block; padding:8px 18px; border-radius:20px; border:1px solid var(--glass-border); color:var(--violet-2); font-size:12.5px; font-weight:700; text-decoration:none; margin-bottom:14px;}
.gm-config-quien-administrar:hover{background:rgba(255,255,255,.08);}
.gm-config-quien-fila2{display:flex; gap:8px; margin-bottom:12px;}
.gm-config-quien-fila2-btn{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 8px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); color:var(--ink); font-size:12px; font-weight:600; text-decoration:none; cursor:pointer;}
.gm-config-quien-fila2-btn:hover{background:rgba(255,255,255,.08);}
.gm-config-quien-fila2-btn:disabled{cursor:default; opacity:.6;}
.gm-config-quien-legal{font-size:10.5px; color:rgba(247,248,255,.4); font-family:'Outfit',sans-serif;}
.gm-config-quien-legal a{color:inherit; text-decoration:none;}
.gm-config-quien-legal a:hover{text-decoration:underline;}

/* Selector de moneda/idioma de la barra superior — botón píldora + menú con
   check en el elemento activo (mismo cristal/blur que .gm-config-menu). */
.gm-moneda-trigger{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px 0 12px;
  border-radius:999px; font-size:13.5px; font-weight:700; font-family:'Outfit',sans-serif; color:var(--ink);
  cursor:pointer; background:rgba(255,255,255,0.08); border:1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2); transition:background .15s, color .15s;
  white-space:nowrap;
}
.gm-moneda-trigger:hover{background:rgba(255,255,255,0.16); color:var(--ink);}
.gm-config-dropdown.abierto .gm-moneda-trigger{
  background:linear-gradient(135deg, var(--violet), var(--violet-deep));
  color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(94,53,255,.4);
}
.gm-moneda-trigger .chev{flex-shrink:0; opacity:.75;}
.gm-moneda-menu{min-width:280px;}
.gm-moneda-lista{
  max-height:336px; overflow-y:auto; margin:0 -4px; padding:0 4px 4px;
  /* Se ve un pedazo de la siguiente fila cortada a proposito + scrollbar
     visible, para que quede claro que la lista sigue y no que ahí se
     acabaron las monedas. */
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent;
}
.gm-moneda-lista::-webkit-scrollbar{width:6px;}
.gm-moneda-lista::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3); border-radius:6px;}
.gm-moneda-lista::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5);}
.gm-moneda-grupo-label{padding:8px 10px 6px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint);}
.gm-moneda-item{
  display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:12px;
  text-decoration:none; transition:background .15s;
}
.gm-moneda-item:hover{background:rgba(255,255,255,0.08);}
.gm-moneda-item.activa{background:rgba(148,116,255,.16);}
.gm-moneda-bandera{font-size:19px; flex-shrink:0; line-height:1;}
.gm-moneda-texto{flex:1; min-width:0;}
.gm-moneda-texto strong{
  /* El menú siempre es un panel de vidrio oscuro, sin importar el tema de
     la página (algunas páginas redefinen --ink a oscuro para su propio
     contenido claro) — por eso el texto va con color fijo, nunca var(--ink),
     igual que .gm-config-item strong al lado. */
  display:block; font-size:14.5px; font-weight:600; font-family:'Outfit',sans-serif;
  background:linear-gradient(135deg, #FFFFFF 30%, var(--lilac) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gm-moneda-texto small{display:block; font-size:11.5px; color:rgba(247,248,255,0.55); margin-top:1px; font-family:'Outfit',sans-serif;}

/* ==========================================================================
   SELECTOR DE RANGO DE FECHAS ("tipo Google Analytics") — generado por
   pintarSelectorFechas() en src/lib/helpers.js, usado en los dashboards de
   métricas del súper admin. Usa var(--ink)/--text-dim/--line/--glass-fill,
   así que hereda el tema claro que /admin/panel y /admin/usuarios-dashboard
   ya sobreescriben localmente para su contenido — pero esas dos páginas NO
   redefinen una variable de "fondo de tarjeta" (usan #fff directo), así que
   aquí también se usa #fff fijo en vez de var(--bg-1) (esa sí es global y
   quedaría oscura, ilegible con el texto --ink claro de esas páginas).
   ========================================================================== */
.fecha-rango-btn{display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 16px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; box-shadow:0 2px 8px rgba(20,18,40,.04); font-family:'Outfit',sans-serif;}
.fecha-rango-btn:hover{background:var(--glass-fill);}
.fecha-rango-btn-fila{display:block;}
.fecha-rango-btn-comp{display:block; font-size:10.5px; font-weight:600; color:var(--text-faint);}
.gm-fecha-panel{display:none; position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 50px rgba(20,18,40,.16); z-index:60; overflow:hidden;}
.gm-fecha-selector.abierto .gm-fecha-panel{display:flex;}
.gm-fecha-presets{display:flex; flex-direction:column; gap:1px; padding:10px; min-width:190px; border-right:1px solid var(--line); max-height:480px; overflow-y:auto;}
.gm-fecha-presets-label{font-size:11px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; padding:8px 10px 6px;}
.gm-fecha-presets a{padding:9px 10px; border-radius:8px; font-size:13px; color:var(--ink); text-decoration:none; font-family:'Outfit',sans-serif;}
.gm-fecha-presets a:hover{background:var(--glass-fill);}
.gm-fecha-presets a.active{color:var(--violet); font-weight:700; background:rgba(94,53,255,.1);}
.gm-fecha-calendario{padding:16px; width:290px;}
.gm-fecha-inputs{display:flex; align-items:center; gap:8px; margin-bottom:14px;}
.gm-fecha-inputs > div{flex:1; min-width:0;}
.gm-fecha-inputs label{display:block; font-size:10.5px; color:var(--text-faint); margin-bottom:3px;}
.gm-fecha-inputs input{width:100%; border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:12.5px; color:var(--ink); background:transparent; font-family:'Outfit',sans-serif;}
.gm-fecha-inputs input:disabled{opacity:.5; cursor:not-allowed;}
.gm-fecha-inputs span{color:var(--text-faint); padding-top:14px;}
/* "Efecto show": los campos de comparación viven en el mismo calendario, justo
   debajo de los principales — se revelan con una transición de altura/opacidad
   en vez de aparecer/desaparecer de golpe, y nunca abren un calendario aparte. */
.gm-fecha-inputs-comp{max-height:0; opacity:0; overflow:hidden; transition:max-height .28s ease, opacity .22s ease, margin .28s ease;}
.gm-fecha-inputs-comp.mostrar{max-height:90px; opacity:1;}
.gm-fecha-inputs-comp .gm-fecha-inputs{padding:8px 8px 0; margin:2px 0 12px; border-top:2px dashed rgba(234,179,8,.4);}
.gm-fecha-cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.gm-fecha-cal-nav span{font-size:11.5px; font-weight:700; color:var(--ink); letter-spacing:.04em;}
.gm-fecha-cal-nav button{background:none; border:1px solid var(--line); border-radius:7px; width:26px; height:26px; color:var(--ink); cursor:pointer; font-size:13px;}
.gm-fecha-cal-nav button:hover{background:var(--glass-fill);}
.gm-fecha-cal-nav button:disabled{opacity:.35; cursor:not-allowed; pointer-events:none;}
.gm-fecha-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:14px;}
.gm-fecha-cal-dow{text-align:center; font-size:10px; color:var(--text-faint); font-weight:700; padding:4px 0;}
.gm-fecha-cal-dia{text-align:center; font-size:12px; color:var(--ink); padding:6px 0; border-radius:6px; cursor:pointer;}
.gm-fecha-cal-dia:hover{background:var(--glass-fill);}
.gm-fecha-cal-dia.enRango{background:rgba(94,53,255,.12); border-radius:0;}
.gm-fecha-cal-dia.inicio, .gm-fecha-cal-dia.fin{background:var(--violet); color:#fff; font-weight:700;}
.gm-fecha-cal-dia.comparacion{background:rgba(234,179,8,.32); border-radius:0;}
.gm-fecha-cal-dia.deshabilitado{color:var(--text-faint); opacity:.4; cursor:not-allowed; pointer-events:none;}
/* Atajos "N días hasta hoy/ayer" — en la misma columna de la lista de períodos. */
.gm-fecha-dias-rapidos{padding:10px 10px 4px; border-top:1px solid var(--line); margin-top:6px;}
.gm-fecha-dias-fila{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink); margin-bottom:8px;}
.gm-fecha-dias-fila input{width:46px; border:1px solid var(--line); border-radius:6px; padding:4px 6px; font-size:12px; color:var(--ink); background:transparent; text-align:center; font-family:'Outfit',sans-serif;}
/* El interruptor "Comparar" vive en la misma barra que la selección de rangos
   (columna izquierda), no junto al calendario. */
.gm-fecha-comparar{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink); padding:8px 10px; border-top:1px solid var(--line); cursor:pointer;}
.gm-fecha-comp-modos-vert{display:flex; flex-direction:column; gap:1px; max-height:0; opacity:0; overflow:hidden; transition:max-height .28s ease, opacity .22s ease, margin .28s ease; margin-left:8px; padding-left:6px; border-left:2px solid rgba(234,179,8,.4);}
.gm-fecha-comp-modos-vert.mostrar{max-height:160px; opacity:1; margin-top:2px; margin-bottom:4px;}
.gm-fecha-comp-modos-vert a{padding:7px 10px; border-radius:8px; font-size:12px; color:var(--ink); text-decoration:none; cursor:pointer; font-family:'Outfit',sans-serif;}
.gm-fecha-comp-modos-vert a:hover{background:var(--glass-fill);}
.gm-fecha-comp-modos-vert a.active{background:rgba(234,179,8,.2); color:#946200; font-weight:700;}
.gm-switch{position:relative; display:inline-block; width:34px; height:19px; flex-shrink:0;}
.gm-switch input{opacity:0; width:0; height:0;}
.gm-switch-track{position:absolute; inset:0; background:var(--line); border-radius:20px; transition:background .15s;}
.gm-switch-track::before{content:""; position:absolute; width:15px; height:15px; left:2px; top:2px; background:#fff; border-radius:50%; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.3);}
.gm-switch input:checked + .gm-switch-track{background:var(--violet);}
.gm-switch input:checked + .gm-switch-track::before{transform:translateX(15px);}
.gm-fecha-acciones{display:flex; align-items:center; justify-content:flex-end; gap:10px;}
.gm-fecha-cancelar{background:none; border:none; color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; padding:9px 4px; font-family:'Outfit',sans-serif;}
.gm-fecha-cancelar:hover{color:var(--ink);}
.gm-fecha-aplicar{flex:1; background:var(--violet); color:#fff; border:none; border-radius:9px; padding:9px; font-size:13px; font-weight:700; cursor:pointer; font-family:'Outfit',sans-serif;}
.gm-fecha-aplicar:hover{background:var(--violet-deep);}
@media(max-width:560px){.gm-fecha-panel{flex-direction:column; right:-60px;} .gm-fecha-presets{border-right:none; border-bottom:1px solid var(--line); flex-direction:row; flex-wrap:wrap; max-height:none;}}

/* ==========================================================================
   TABLERO DE WIDGETS — generado por pintarWidgetsBoard() en helpers.js,
   usado en todos los dashboards con métricas del súper admin (/admin/panel,
   /admin/usuarios-dashboard). Tarjetas arrastrables con un selector de
   métrica DENTRO de cada una. Hereda el tema claro que cada dashboard ya
   sobreescribe localmente — ver el comentario en esas vistas.
   ========================================================================== */
.widgets-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:22px; align-items:start;}
.widget-wrap{display:block;}
.widget-wrap.arrastrando{opacity:.35;}
.widget-wrap.sobre-destino .widget-card{outline:2px dashed var(--violet); outline-offset:2px;}
.widget-card{position:relative; cursor:grab;}
.widget-card:active{cursor:grabbing;}
.widget-drag-handle{position:absolute; top:10px; right:12px; color:var(--text-faint); font-size:13px; line-height:1; user-select:none;}
.kpi-card-v2{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:0 4px 14px rgba(20,18,40,.05);}
.kpi-top{display:flex; align-items:flex-start; gap:12px;}
.kpi-icon{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}
.kpi-label-v2{font-size:12px; color:var(--text-dim); margin-bottom:4px;}
.kpi-num-v2{font-family:'Outfit',sans-serif; font-size:24px; font-weight:700; color:var(--ink);}
.kpi-badge{font-size:11px; font-weight:700; padding:2px 7px; border-radius:20px;}
.kpi-badge.up{background:#1F7A4D1A; color:#1F7A4D;}
.kpi-badge.down{background:#B3261E1A; color:#B3261E;}
.kpi-sub{font-size:10.5px; color:var(--text-faint); margin-top:6px;}
.spark-wrap{position:relative; height:42px; width:100%; margin-top:10px;}
.spark-wrap canvas{position:absolute; inset:0; width:100% !important; height:100% !important;}
.widget-selector{position:relative; margin-bottom:4px;}
.widget-selector-btn-inline{display:inline-flex; align-items:center; gap:4px; max-width:100%; background:none; border:none; padding:0; margin:0 -1px; font-size:12px; color:var(--text-dim); cursor:pointer; font-family:'Outfit',sans-serif;}
.widget-selector-btn-inline:hover{color:var(--violet);}
.widget-selector-btn-inline .txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.widget-selector-btn-inline .chev{flex-shrink:0; font-size:8px; color:var(--text-faint);}
.widget-selector-menu{display:none; position:absolute; top:calc(100% + 4px); left:0; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 14px 34px rgba(20,18,40,.14); padding:6px; min-width:200px; max-height:280px; overflow-y:auto; z-index:40;}
.widget-selector.abierto .widget-selector-menu{display:block;}
.widget-selector-grupo{font-size:10px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; padding:8px 8px 4px;}
.widget-selector-grupo:first-child{padding-top:4px;}
.widget-selector-menu a{display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:7px; font-size:12.5px; color:var(--ink); text-decoration:none; cursor:pointer; font-family:'Outfit',sans-serif;}
.widget-selector-menu a:hover{background:var(--glass-fill);}
.widget-selector-menu a.active{background:rgba(94,53,255,.1); color:var(--violet); font-weight:700;}

/* ==========================================================================
   TABLERO DE GRÁFICAS — generado por pintarGraficasBoard() en helpers.js,
   mismo patrón arrastrable/configurable que el tablero de widgets de arriba,
   pero para tarjetas grandes con gráfica (línea/dona) o lista (Estado del
   sistema) en vez de un número + sparkline.
   ========================================================================== */
.graficas-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grafica-card{padding:18px 20px 16px;}
.grafica-card .widget-selector-btn-inline{font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:14px;}
.grafica-card .widget-selector-btn-inline:hover{color:var(--violet);}
.grafica-card .widget-selector-btn-inline .ic{flex-shrink:0;}
.grafica-canvas-wrap{position:relative; height:190px; width:100%;}
.grafica-canvas-wrap canvas{position:absolute; inset:0; width:100% !important; height:100% !important;}
.grafica-lista{min-height:190px;}
.grafica-nota{font-size:11px; color:var(--text-faint); margin-top:12px;}
.grafica-enlace{display:block; font-size:11px; color:var(--violet); font-weight:600; text-decoration:none; margin-top:10px;}
.grafica-enlace:hover{text-decoration:underline;}

/* ==========================================================================
   SECCIONES ARRASTRABLES — generado por pintarSeccionesArrastrables() en
   helpers.js. Envuelve bloques grandes (tablero de widgets, de gráficas,
   una tabla completa) para que se puedan reordenar arrastrando desde su
   "mango" — el contenido interno nunca inicia el arrastre.
   ========================================================================== */
.seccion-wrap{margin-bottom:6px;}
.seccion-wrap.arrastrando{opacity:.4;}
.seccion-wrap.sobre-destino{outline:2px dashed var(--violet); outline-offset:4px; border-radius:14px;}
.seccion-drag-handle{display:inline-flex; align-items:center; gap:8px; cursor:grab; color:var(--text-faint); font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; padding:6px 4px; user-select:none;}
.seccion-drag-handle:active{cursor:grabbing;}
.seccion-drag-handle span{color:var(--text-dim);}
.seccion-contenido{margin-bottom:8px;}

/* ==========================================================================
   TABLA "TODOS LOS USUARIOS" — generada por pintarTablaUsuarios() en
   src/routes/admin/usuariosDashboard.js. Pestañas + búsqueda + filtros +
   tabla + paginación real, mismo tema claro que el resto del dashboard.
   ========================================================================== */
.tabla-usuarios-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px 12px; box-shadow:0 4px 14px rgba(20,18,40,.05);}
.tabla-tabs-row{display:flex; gap:22px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:wrap;}
.tabla-tab{font-size:13px; font-weight:600; color:var(--text-dim); text-decoration:none; padding:0 0 12px; border-bottom:2px solid transparent; white-space:nowrap;}
.tabla-tab.active{color:var(--violet); border-bottom-color:var(--violet);}
.tabla-tab:hover:not(.active){color:var(--ink);}
.tabla-toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.tabla-buscar{position:relative; flex:1; min-width:220px; display:flex; align-items:center; gap:6px; background:#F5F6FA; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:13px; color:var(--text-dim);}
.tabla-buscar input{flex:1; border:none; background:none; outline:none; font-size:13px; color:var(--ink); font-family:'Outfit',sans-serif;}
.tabla-buscar input::placeholder{color:var(--text-faint);}
.tabla-filtro-btn{background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 14px; font-size:13px; font-weight:600; color:var(--text-dim); cursor:pointer; white-space:nowrap; font-family:'Outfit',sans-serif;}
.tabla-filtro-btn:hover{border-color:var(--violet); color:var(--violet);}
.tabla-filtro-menu{padding:12px; min-width:220px;}
.tabla-filtro-check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); padding:6px 2px; cursor:pointer; font-family:'Outfit',sans-serif;}
.tabla-filtro-select{width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; color:var(--ink); background:#fff; font-family:'Outfit',sans-serif; cursor:pointer;}
.tabla-estado-select{width:auto; min-width:170px;}
.tabla-filtro-aplicar{width:100%; margin-top:10px; background:var(--violet); color:#fff; border:none; border-radius:8px; padding:9px; font-size:13px; font-weight:700; cursor:pointer; font-family:'Outfit',sans-serif;}
.tabla-filtro-aplicar:hover{background:var(--violet-deep);}
.tabla-nuevo-btn{padding:9px 16px; font-size:13px; border-radius:10px; box-shadow:none;}
/* table-layout:fixed + un ancho fijo por columna (abajo) es lo que evita el
   scroll horizontal — el contenido que no cabe se corta con "…" en vez de
   ensanchar la tabla (ver .tabla-truncar). */
table.tabla-usuarios{width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px;}
table.tabla-usuarios thead th{text-align:left; font-size:11px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; padding:0 10px 10px; border-bottom:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
table.tabla-usuarios tbody td{padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.tabla-usuarios tbody tr:last-child td{border-bottom:none;}
.tabla-col-usuario{width:21%;}
.tabla-col-empresa{width:12%;}
.tabla-col-rol{width:10%;}
.tabla-col-estado{width:9%;}
.tabla-col-acceso{width:15%;}
.tabla-col-creacion{width:11%;}
.tabla-col-plan{width:11%;}
.tabla-col-acciones{width:11%; text-align:right;}
.tabla-truncar{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.tabla-usuario-cell{display:flex; align-items:center; gap:10px; min-width:0;}
.fila-icono{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; font-size:14px; font-weight:700; font-family:'Outfit',sans-serif; flex-shrink:0;}
.tabla-usuario-nombre{font-weight:700; color:var(--ink); font-size:13px;}
.tabla-usuario-handle{font-size:11.5px; color:var(--text-faint);}
.tabla-empresa-nombre{color:var(--ink); font-size:13px;}
.tabla-empresa-id{font-size:11px; color:var(--text-faint);}
.tabla-texto-secundario{color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rol-pill{display:inline-block; padding:4px 12px; border-radius:20px; font-size:11.5px; font-weight:700; font-family:'Outfit',sans-serif; white-space:nowrap;}
.tabla-estado-cell{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; white-space:nowrap;}
.estado-semaforo{display:inline-block; width:8px; height:8px; border-radius:50%; cursor:default; flex-shrink:0;}
.tabla-acciones{position:relative;}
.tabla-acciones-btn{background:none; border:none; font-size:17px; color:var(--text-faint); cursor:pointer; padding:4px 8px; border-radius:6px; line-height:1;}
.tabla-acciones-btn:hover{background:var(--glass-fill); color:var(--ink);}
.tabla-acciones-menu{right:0; left:auto; min-width:190px;}
.tabla-paginacion{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 2px 6px; margin-top:4px; border-top:1px solid var(--line);}
.tabla-pag-resumen{font-size:12.5px; color:var(--text-faint);}
.tabla-pag-resumen strong{color:var(--ink); font-weight:700;}
.tabla-pag-nums{display:flex; align-items:center; gap:2px; background:#F5F6FA; border-radius:12px; padding:4px;}
.tabla-pag-num, .tabla-pag-flecha{display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; border-radius:9px; font-size:12.5px; font-weight:600; color:var(--text-dim); text-decoration:none; font-family:'Outfit',sans-serif;}
.tabla-pag-num:hover, .tabla-pag-flecha:hover{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(20,18,40,.08);}
.tabla-pag-num.active{background:var(--violet); color:#fff; box-shadow:0 3px 10px rgba(94,53,255,.35);}
.tabla-pag-flecha.deshabilitada{color:var(--text-faint); opacity:.35; pointer-events:none;}
.tabla-pag-elipsis{padding:0 6px; color:var(--text-faint);}
.tabla-pag-select{width:auto; min-width:130px; padding:7px 10px; font-size:12.5px; border-radius:9px;}
@media(max-width:900px){
  .tabla-usuarios-card{overflow-x:auto;}
  table.tabla-usuarios{table-layout:auto; min-width:820px; white-space:nowrap;}
  .tabla-truncar{max-width:180px;}
}
@media(max-width:640px){.tabla-toolbar{flex-direction:column; align-items:stretch;} .tabla-buscar{min-width:0;} .tabla-paginacion{justify-content:center; text-align:center;}}
.estado-fila{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:13px; color:var(--ink);}
.estado-fila:first-child{border-top:none;}
.estado-pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;}
.estado-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}

/* ==========================================================================
   MODALES — usados en todo el panel admin (confirmaciones, formularios
   dentro de una ventana flotante, detalles, etc). El estándar de referencia
   es el modal de "Nueva reserva" de la Agenda — cualquier modal nuevo
   debería reusar estas dos clases base, y solo agregar sus propias clases
   para el contenido específico (ver .modal-box-reserva en agendar-manual.php
   como ejemplo de una extensión: header/body/footer fijos con scroll interno).
   ========================================================================== */
.modal-overlay{position:fixed;inset:0;background:rgba(8,8,20,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;place-items:center;padding:20px;z-index:80;}
.modal-overlay.open{display:grid;}
.modal-box{
  background:
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%),
    linear-gradient(165deg, rgba(32,29,66,.98), rgba(10,10,26,.99));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 30px 80px rgba(3,2,10,.6), inset 0 1px 0 rgba(255,255,255,.14);
  border-radius:14px;max-height:92vh;overflow-y:auto;overscroll-behavior:contain;
  max-width:480px;width:100%;padding:26px;color:var(--ink);
}

/* ==========================================================================
   TABLAS ("lista de tarjetas" con CSS grid) — usadas en Pacientes, Médicos,
   Servicios, Panel principal, Respuestas, Trazabilidad, etc. Todas las
   filas comparten una sola cuadrícula (definida en .table-wrap, con el
   grid-template-columns propio de cada página) para que las columnas
   siempre coincidan entre el encabezado y cada fila, sin importar cuánto
   contenido tenga cada una — cada página solo necesita declarar su propio
   `grid-template-columns` en su .table-wrap.
   ========================================================================== */
.table-wrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;overflow-x:auto;margin-bottom:16px;background:rgba(255,255,255,0.02);display:grid;}
.table-row{display:contents;}
/* align-self:stretch (no "center") + flex propio para centrar el contenido
   — con "center" cada celda se autodimensiona a su propio contenido y SU
   FONDO no llega a cubrir el alto real de la fila cuando una celda vecina
   es más alta (ej. una etiqueta de encabezado que hace salto de línea);
   eso deja una franja sin pintar arriba/abajo de las celdas más cortas —
   se ve como una "costura" horizontal cortando el encabezado o la fila. */
.table-row>*{padding:14px 18px;border-top:1px solid var(--line);align-self:stretch;display:flex;align-items:center;}
.table-row:first-child>*{border-top:none;}
.table-head>*{background:var(--porcelain);font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);}
.empty-state{text-align:center;padding:50px 20px;color:var(--text-dim);border:1px dashed var(--line);border-radius:10px;grid-column:1/-1;}

/* ==========================================================================
   Tarjetas de información dentro de un modal de detalle (usadas para
   mostrar edad/estado/procedimientos, etc. en el detalle de una solicitud)
   ========================================================================== */
.info-block{background:var(--porcelain);border-radius:8px;padding:12px 14px;}
.info-label{font-size:10.5px;font-family:'Outfit',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--maroon-deep);margin-bottom:4px;}
.photos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.photos-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--line);}

/* Badge de estado pequeño (activo/inactivo, tipo de servicio, etc.) */
.badge{font-size:10.5px;font-family:'Outfit',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:20px;display:inline-block;}

/* ==========================================================================
   Capa de UX de formularios (packages/shared/public/assets/forms-ux.js) —
   estado de carga del botón, error en línea junto al campo, y el botón de
   cerrar que se inyecta en cualquier .alert. Se aplica sola en cualquier
   página que incluya forms-ux.js, sin que cada formulario tenga que pedirlo.
   ========================================================================== */
.gm-btn-spinner{width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;display:inline-block;vertical-align:-2px;margin-right:7px;opacity:.85;animation:gm-spin .65s linear infinite;}
@keyframes gm-spin{to{transform:rotate(360deg);}}
.gm-btn-cargando{pointer-events:none;}

.gm-field-error{display:flex;align-items:center;gap:5px;color:var(--error);font-size:11.5px;font-family:'Outfit',sans-serif;font-weight:500;margin-top:5px;animation:gm-field-error-in .15s ease;}
.gm-field-error::before{content:'⚠';font-size:10.5px;flex-shrink:0;}
@keyframes gm-field-error-in{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:translateY(0);}}
input.gm-campo-invalido, select.gm-campo-invalido, textarea.gm-campo-invalido{border-color:var(--error) !important;}

.gm-alert-entrada{animation:gm-alert-in .25s cubic-bezier(.16,1,.3,1);}
.gm-alert-saliendo{animation:gm-alert-out .2s ease forwards;}
@keyframes gm-alert-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
@keyframes gm-alert-out{to{opacity:0;transform:translateY(-6px);}}
.gm-alert-cerrar{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:22px;height:22px;border:none;background:rgba(0,0,0,.08);color:inherit;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.65;transition:opacity .15s,background .15s;}
.gm-alert-cerrar:hover{opacity:1;background:rgba(0,0,0,.16);}

/* ==========================================================================
   TEMA CLARO DEL PANEL ADMIN — una sola fuente de verdad para toda la
   identidad del panel de administración (sidebar oscuro + contenido claro,
   "igual al mockup del manual de marca"), en vez de que cada página nueva
   copie/pegue su propio bloque :root suelto (así fue como terminamos con
   páginas claras y páginas oscuras mezcladas: cada quien redefinía las
   variables pero nunca los componentes que traían su color oscuro
   hardcodeado en vez de con variables — .modal-box es el caso más visible:
   como su fondo nunca usó var(--ink)/var(--line), CUALQUIER modal se veía
   oscuro sin importar si la página de alrededor ya era clara).
   Se aplica solo cuando el shell de admin está presente
   (body:has(.gm-topbar)) — nunca toca login/registro/portal de
   pacientes/formularios públicos, que mantienen el tema oscuro "Purple
   Heart/Tolopea" original. El sidebar en sí no se toca aquí: usa sus
   propios colores (var(--bg-1) y textos hardcodeados en rgba(247,248,255,…)
   independientes de --ink/--line), así que sigue oscuro sin que haga falta
   nada especial — "igual al mockup" también dice que el sidebar se queda
   oscuro adentro de un panel claro.
   ========================================================================== */
body:has(.gm-topbar){
  /* Basalto (#0D0D16) y Cantera (#F4F5FA) del manual — este panel ya era
     "sidebar oscuro + contenido claro", que es exactamente la Dirección A
     ("Piedra clara") recomendada; solo cambian los valores exactos. */
  --ink:#0D0D16;
  --text-dim:#3A3A46;
  --text-faint:#8B87A0;
  --line:rgba(13,13,22,.09);
  --glass-border:rgba(13,13,22,.13);
  --glass-fill:rgba(13,13,22,.04);
  --porcelain:rgba(13,13,22,.035);
  --white:#FFFFFF;
  background:#F4F5FA;
}
body:has(.gm-topbar)::before{ display:none; }

body:has(.gm-topbar) .gm-topbar{
  background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 1px 0 var(--line);
}
body:has(.gm-topbar) .gm-sidebar-toggle{ background:#F5F6FA; border-color:var(--line); color:var(--text-dim); box-shadow:none; }
body:has(.gm-topbar) .gm-sidebar-toggle:hover{ background:var(--glass-fill); color:var(--ink); }
body:has(.gm-topbar) .gm-topbar-search input{ background:#F5F6FA; border-color:var(--line); color:var(--ink); }
body:has(.gm-topbar) .gm-topbar-user-info:hover{ background:var(--glass-fill); }

body:has(.gm-topbar) .gm-config-trigger{ background:#F5F6FA; border-color:var(--line); color:var(--text-dim); box-shadow:none; }
body:has(.gm-topbar) .gm-config-trigger:hover{ background:var(--glass-fill); color:var(--ink); }
body:has(.gm-topbar) .gm-topbar-status-pill{ background:#F5F6FA; border-color:var(--line); color:var(--ink); }
body:has(.gm-topbar) .gm-topbar-status-pill:hover{ background:var(--glass-fill); }
body:has(.gm-topbar) .gm-topbar-identidad{ background:#F5F6FA; border-color:var(--line); }
body:has(.gm-topbar) .gm-topbar-search-tune:hover{ background:rgba(20,18,40,.06); }
body:has(.gm-topbar) .gm-config-menu{
  background:#fff; border:1px solid var(--line); backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 24px 60px rgba(20,18,40,.16), inset 0 1px 0 rgba(255,255,255,.6);
}
body:has(.gm-topbar) .gm-config-item{ color:var(--ink); }
body:has(.gm-topbar) .gm-config-item:hover{ background:var(--glass-fill); }
body:has(.gm-topbar) .gm-config-item strong{ background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--ink); }
body:has(.gm-topbar) .gm-config-item small{ color:var(--text-dim); }
body:has(.gm-topbar) .gm-config-quien{ border-bottom-color:var(--line); }
body:has(.gm-topbar) .gm-config-quien-correo{ color:var(--ink); }
body:has(.gm-topbar) .gm-config-quien-rol{ color:var(--text-dim); }
body:has(.gm-topbar) .gm-config-quien-saludo{ color:var(--ink); }
body:has(.gm-topbar) .gm-config-quien-fila2-btn{ background:#F5F6FA; }
body:has(.gm-topbar) .gm-config-quien-fila2-btn:hover{ background:var(--glass-fill); }
body:has(.gm-topbar) .gm-config-quien-legal{ color:var(--text-faint); }

body:has(.gm-topbar) .gm-moneda-trigger{ background:#F5F6FA; border-color:var(--line); color:var(--ink); box-shadow:none; }
body:has(.gm-topbar) .gm-moneda-trigger:hover{ background:var(--glass-fill); color:var(--ink); }
body:has(.gm-topbar) .gm-moneda-lista{ scrollbar-color:rgba(20,18,40,.2) transparent; }
body:has(.gm-topbar) .gm-moneda-lista::-webkit-scrollbar-thumb{ background:rgba(20,18,40,.18); }
body:has(.gm-topbar) .gm-moneda-lista::-webkit-scrollbar-thumb:hover{ background:rgba(20,18,40,.3); }
body:has(.gm-topbar) .gm-moneda-item:hover{ background:var(--glass-fill); }

body:has(.gm-topbar) .gm-input{ border-color:var(--line); background:#fff; }
body:has(.gm-topbar) .gm-input::placeholder{ color:var(--text-faint); }
body:has(.gm-topbar) .field label{ color:var(--text-dim); }
body:has(.gm-topbar) .btn-outline{ background:#fff; border-color:var(--line); }
body:has(.gm-topbar) .btn-outline:hover{ background:var(--glass-fill); border-color:rgba(20,18,40,.22); }

body:has(.gm-topbar) .modal-box{
  background:#fff; border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(20,18,40,.16), inset 0 1px 0 rgba(255,255,255,.6);
}
body:has(.gm-topbar) .table-wrap{ background:#fff; }