/* ============================================================================
 * admin.css — Panel de administración (liquid glass, paleta del cotizador).
 * ==========================================================================*/

.admin-panel {
  position: fixed; inset: 0; z-index: 8000;
  display: flex; flex-direction: column;
  background:
    radial-gradient(60% 45% at 88% -5%, rgba(0,159,242,.20) 0%, transparent 60%),
    radial-gradient(55% 45% at 8% 8%, rgba(83,74,183,.16) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 108%, rgba(0,168,224,.14) 0%, transparent 62%),
    linear-gradient(170deg, #eef4f6 0%, #e7f1f2 55%, #eef5f6 100%);
  color: var(--ink, #0E1620);
  -webkit-font-smoothing: antialiased;
}

/* Cristal (liquid glass iOS): superficie translúcida con desenfoque y brillo. */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.5)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 30px -14px rgba(12,40,80,.28) !important;
}
.admin-panel[hidden] { display: none !important; }

/* Encabezado */
.admin-top {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  background: linear-gradient(120deg, #06333c, #0a4f59 60%, #067e90);
  color: #fff; box-shadow: 0 6px 20px -12px rgba(6,31,92,.7);
}
.admin-brand { display: flex; align-items: center; gap: 10px; font-family: 'Familjen Grotesk', sans-serif; font-weight: 700; font-size: 16px; }
.admin-brand img { width: 30px; height: 30px; border-radius: 8px; background: #fff; padding: 3px; object-fit: contain; }
.admin-tabs { display: flex; gap: 6px; margin-left: 8px; }
.admin-tabs button {
  padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
}
.admin-tabs button.is-active { background: #fff; color: #06333c; }
.admin-tabs .badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: #E22A62; color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.admin-close {
  margin-left: auto; padding: 9px 16px; border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font: inherit; font-weight: 500;
}
.admin-close:hover { background: rgba(255,255,255,.2); }

/* Cuerpo con scroll */
.admin-body { flex: 1; overflow-y: auto; padding: 22px; max-width: 1080px; width: 100%; margin: 0 auto; }
.admin-section[hidden] { display: none !important; }

/* Tarjetas de métricas — compactas y de cristal. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 11px; margin-bottom: 12px; }
.stat-card {
  border-radius: 15px; padding: 13px 15px;
  background: linear-gradient(160deg, rgba(255,255,255,.74), rgba(255,255,255,.52));
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px -16px rgba(12,40,80,.3);
}
.stat-card .n { font-family: 'Familjen Grotesk', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: #0A2E6E; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-card .l { font-size: 11.5px; color: var(--muted, #6A7C8A); margin-top: 3px; }
.stat-card.online .n { color: var(--free, #15A34A); }
.stat-card.alert .n { color: #E22A62; }

/* Paneles de cristal. */
.admin-card {
  border-radius: 20px; padding: 18px 20px; margin-bottom: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 34px -20px rgba(12,40,80,.3);
}
.admin-card h3 { font-family: 'Familjen Grotesk', sans-serif; font-size: 14.5px; margin: 0 0 14px; color: #0A2E6E; }
.admin-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .admin-2col { grid-template-columns: 1fr; } }

/* Gráfica de barras (cotizaciones por día) */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars .bar i {
  width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #0AA0B8, #067e90); min-height: 3px;
}
.bars .bar b { font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bars .bar span { font-size: 9.5px; color: var(--muted-2, #9BAAB6); }

/* Listas tipo "top" */
.rank { display: flex; flex-direction: column; gap: 9px; }
.rank .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.rank .row .track { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--canvas, #F1F5F8); overflow: hidden; }
.rank .row .track > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0AA0B8, #067e90); }
.rank .row .name { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .row .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.rank .vacio { color: var(--muted-2); font-size: 13px; padding: 8px 0; }

/* Tabla de usuarios */
.admin-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-tabla th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.admin-tabla td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-tabla tr:last-child td { border-bottom: 0; }
.admin-tabla .u-nombre { font-weight: 600; color: var(--ink); }
.admin-tabla .u-usuario { color: var(--muted); font-size: 12px; }
/* Encabezado de grupo por sucursal: desplegable (acordeón) al hacer clic. */
.admin-tabla tr.u-grupo td { padding: 0; border-bottom: 2px solid var(--att-deep, #067e90); }
.u-grupo__btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 10px; border: 0; cursor: pointer; text-align: left; font: inherit;
  background: linear-gradient(90deg, rgba(6,110,128,.10), rgba(6,110,128,0) 70%);
  transition: background .14s ease;
}
.u-grupo__btn:hover { background: linear-gradient(90deg, rgba(6,110,128,.18), rgba(6,110,128,.02) 75%); }
.u-grupo__chev {
  flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid #067e90; border-bottom: 2px solid #067e90;
  transform: rotate(-45deg); transition: transform .16s ease; margin-left: 2px;
}
.u-grupo.is-open .u-grupo__chev { transform: rotate(45deg); }
.u-grupo__nombre { font-family: 'Familjen Grotesk', sans-serif; font-weight: 700; font-size: 13.5px; color: #06333c; letter-spacing: .01em; }
.u-grupo__n { margin-left: 2px; font-size: 11px; font-weight: 600; color: #067e90; background: rgba(6,110,128,.12); padding: 2px 9px; border-radius: 999px; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.pill--on { background: rgba(21,163,74,.14); color: #15803D; }
.pill--off { background: rgba(106,124,138,.14); color: #55606B; }
.pill--admin { background: rgba(6,110,128,.14); color: #067e90; }
.pill--vend { background: rgba(0,168,224,.14); color: #0273A6; }
.pill--ger { background: rgba(124,58,237,.14); color: #6D28D9; }

/* Panel de gerencia: selector de sucursal (solo admin) y título de alcance. */
.ger-suc-wrap { display: flex; align-items: center; margin-left: auto; }
.ger-suc-wrap[hidden] { display: none !important; }
.ger-suc-wrap label { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 12.5px; font-weight: 500; }
.ger-suc-wrap select { border: 0; border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 13px; background: rgba(255,255,255,.92); color: #0B2740; max-width: 220px; }
.ger-suc-titulo { font-size: 13px; color: var(--muted,#6A7C8A); margin: 2px 0 12px; }
.ger-suc-titulo b { color: inherit; }
.pill--block { background: rgba(226,42,98,.16); color: #C2185B; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--on { background: #15A34A; box-shadow: 0 0 0 3px rgba(21,163,74,.18); }
.dot--off { background: #C3CDD5; }

/* Botones de acción */
.abtn { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 9px; padding: 6px 11px; font-size: 12px; font-weight: 500; cursor: pointer; }
.abtn:hover { border-color: var(--att-deep, #067e90); color: var(--att-deep, #067e90); }
.abtn--primary { background: linear-gradient(135deg, #0AA0B8, #067e90); color: #fff; border: 0; }
.abtn--danger { color: #C2185B; border-color: rgba(226,42,98,.3); }
.abtn--danger:hover { background: rgba(226,42,98,.08); }
.acciones-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Cabecera de Usuarios: título + buscador + "Nuevo usuario". */
.usuarios-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.usuarios-top__acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#u-buscar { min-width: 240px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; background: var(--paper); color: var(--ink); outline: none; }
#u-buscar:focus { border-color: var(--att-deep, #067e90); box-shadow: 0 0 0 3px rgba(6,110,128,.12); }
@media (max-width: 560px) { #u-buscar { min-width: 0; flex: 1 1 auto; } }

/* Buzón */
.sol-filtros { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.sol-filtros button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; }
.sol-filtros button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.sol-item {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
}
.sol-item.resuelta { opacity: .6; }
.sol-tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; }
.sol-tipo--restablecer { background: rgba(194,65,12,.12); color: #C2410C; }
.sol-tipo--desbloqueo { background: rgba(226,42,98,.14); color: #C2185B; }
.sol-tipo--ayuda { background: rgba(0,168,224,.14); color: #0273A6; }
.sol-tipo--sugerencia { background: rgba(21,163,74,.14); color: #15803D; }
.sol-item .quien { font-weight: 600; color: var(--ink); margin-top: 6px; }
.sol-item .msg { color: var(--ink-2, #1B2733); font-size: 13px; margin-top: 4px; }
.sol-item .meta { color: var(--muted); font-size: 11.5px; margin-top: 6px; }
.sol-item .recordada { font-family: monospace; background: var(--canvas); padding: 2px 6px; border-radius: 6px; }
.sol-item .acciones-row { grid-column: 2; }
@media (max-width: 620px) { .sol-item { grid-template-columns: 1fr; } .sol-item .acciones-row { grid-column: 1; } }

.admin-vacio { text-align: center; color: var(--muted); padding: 30px; font-size: 14px; }

/* Sub-navegación del tablero (General / Sucursales / Ejecutivos): segmentado de cristal. */
.seg-tablero {
  display: inline-flex; gap: 3px; margin-bottom: 16px; padding: 4px; border-radius: 14px;
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 16px -12px rgba(12,40,80,.4);
}
.seg-tablero button {
  border: 0; background: transparent; cursor: pointer; padding: 7px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: #4a5c6d; transition: background .14s ease, color .14s ease;
}
.seg-tablero button:hover { color: #0A2E6E; }
.seg-tablero button.is-active {
  color: #063a8a; background: rgba(255,255,255,.92);
  box-shadow: 0 1px 2px rgba(12,40,80,.14), inset 0 1px 0 rgba(255,255,255,1);
}

/* -------- Usuarios: "En línea ahora" (presencia en vivo) + pendientes -------- */
.users-hero {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 14px; border-radius: 18px;
}
.users-hero__on { flex: 1 1 320px; min-width: 0; }
.users-hero__label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #52627a; margin-bottom: 10px; }
.users-hero__label b { color: #0A2E6E; font-size: 13px; background: rgba(6,110,128,.12); padding: 1px 9px; border-radius: 999px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #15A34A; box-shadow: 0 0 0 0 rgba(21,163,74,.5); animation: livePulse 1.8s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(21,163,74,.5); } 70% { box-shadow: 0 0 0 7px rgba(21,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(21,163,74,0); } }
.u-online { display: flex; flex-wrap: wrap; gap: 8px; }
.u-online__vacio { font-size: 13px; color: var(--muted, #6A7C8A); padding: 4px 2px; }
.u-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -8px rgba(12,40,80,.35);
}
.u-avatar {
  position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(150deg, #2fc6d6, #067e90); box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
}
.u-avatar--admin { background: linear-gradient(150deg, #0a9cb0, #063a44); }
.u-avatar__dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #15A34A; border: 2px solid #fff; }
.u-chip__txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.u-chip__txt b { font-size: 12.5px; font-weight: 600; color: #10233f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.u-chip__txt small { font-size: 10.5px; color: #6a7c8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.users-hero__pend {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 15px; border-radius: 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: #4a5c6d;
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transition: transform .14s ease, box-shadow .14s ease;
}
.users-hero__pend:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(12,40,80,.5); }
.users-hero__pend-ico { font-size: 15px; color: #067e90; }
.users-hero__pend b { min-width: 22px; text-align: center; padding: 1px 8px; border-radius: 999px; background: rgba(106,124,138,.16); color: #55606B; font-size: 12px; }
.users-hero__pend.has-pend b { background: #E22A62; color: #fff; }
.u-count { font-size: 12px; font-weight: 600; color: #067e90; background: rgba(6,110,128,.12); padding: 2px 10px; border-radius: 999px; vertical-align: middle; margin-left: 4px; }

/* Botón de entrada al panel (en el chip de usuario) */
.auth-chip__panel { border: 0; border-radius: 999px; cursor: pointer; padding: 5px 12px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(135deg,#0AA0B8,#067e90); }
.auth-chip__panel:hover { filter: brightness(1.08); }

/* Formulario nuevo usuario / modal simple */
.admin-modal { position: fixed; inset: 0; z-index: 8100; display: flex; align-items: center; justify-content: center; background: rgba(6,20,40,.5); padding: 20px; }
.admin-modal[hidden] { display: none !important; }
.admin-modal__card { background: #fff; border-radius: 18px; padding: 22px; width: 100%; max-width: 420px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.5); }
.admin-modal__card h3 { margin: 0 0 16px; font-family: 'Familjen Grotesk', sans-serif; }
.admin-field { margin-bottom: 12px; }
.admin-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
.admin-field input, .admin-field select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.admin-modal__actions { display: flex; gap: 10px; margin-top: 18px; }
.admin-modal__actions .abtn { padding: 10px 16px; }

/* ============================================================================
 * Móvil — encabezado del panel ordenado en dos filas:
 *   Fila 1:  [logo + "Panel de administración"]        [Volver al cotizador]
 *   Fila 2:  [ Tablero ] [ Buzón ] [ Usuarios ]   (tres pestañas parejas)
 * Antes iba todo en una sola fila y las pestañas de la derecha se cortaban.
 * ==========================================================================*/
@media (max-width: 720px) {
  .admin-top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
  }
  .admin-brand {
    min-width: 0; gap: 10px; font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .admin-brand img { width: 40px; height: 40px; flex: 0 0 auto; }
  .admin-close { margin-left: 0; padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
  .admin-tabs {
    grid-column: 1 / -1; margin: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  }
  .admin-tabs button {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 9px 6px; font-size: 12.5px; text-align: center;
  }
  .admin-body { padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* Teléfonos angostos: el título del panel se acorta y las pestañas encogen la letra. */
@media (max-width: 420px) {
  .admin-brand { font-size: 14px; }
  .admin-brand img { width: 36px; height: 36px; }
  .admin-close { padding: 7px 11px; font-size: 12px; }
  .admin-tabs button { padding: 9px 4px; font-size: 11.5px; }
}

/* ============================================================================
 * MODO OSCURO — el panel de administración (solo admin).
 * Este archivo estaba pensado para modo claro (superficies "liquid glass"
 * blancas y textos azul marino). Aquí se adaptan a la paleta oscura sin tocar
 * la estructura. El encabezado (.admin-top) conserva el azul de marca a
 * propósito. Solo aplica bajo html[data-theme="dark"].
 * ==========================================================================*/
html[data-theme="dark"] .admin-panel{
  background:
    radial-gradient(60% 45% at 88% -5%, rgba(0,159,242,.10) 0%, transparent 60%),
    radial-gradient(55% 45% at 8% 8%, rgba(83,74,183,.10) 0%, transparent 60%),
    linear-gradient(170deg, #1d1e21 0%, #212327 55%, #1b1c1f 100%) !important;
  color: var(--ink, #f1f3f6);
}

/* Superficies de cristal → cristal oscuro translúcido. */
html[data-theme="dark"] .glass{
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.028)) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -16px rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .admin-card{
  background: linear-gradient(160deg, #2c2e32, #242629) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.7) !important;
}
html[data-theme="dark"] .stat-card .n{ color:#eaf0f7 !important; }
html[data-theme="dark"] .admin-card h3{ color:#dbe7f5 !important; }

/* Sub-navegación del tablero (segmentado). */
html[data-theme="dark"] .seg-tablero{ background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.10) !important; box-shadow:none !important; }
html[data-theme="dark"] .seg-tablero button{ color:#a6b0bb !important; }
html[data-theme="dark"] .seg-tablero button:hover{ color:#e8eef6 !important; }
html[data-theme="dark"] .seg-tablero button.is-active{ color:#0A2E6E !important; background:#e9eff7 !important; box-shadow:none !important; }

/* Tabla de usuarios: encabezados de grupo (sucursal) y acordeón. */
html[data-theme="dark"] .u-grupo__nombre{ color:#e3ebf4 !important; }
html[data-theme="dark"] .u-grupo__n{ color:#7fc4f2 !important; background:rgba(90,170,240,.16) !important; }
html[data-theme="dark"] .u-grupo__chev{ border-color:#7fc4f2 !important; }
html[data-theme="dark"] .admin-tabla tr.u-grupo td{ border-bottom-color:rgba(90,170,240,.5) !important; }
html[data-theme="dark"] .u-grupo__btn{ background:linear-gradient(90deg, rgba(90,170,240,.12), rgba(90,170,240,0) 70%) !important; }
html[data-theme="dark"] .u-grupo__btn:hover{ background:linear-gradient(90deg, rgba(90,170,240,.20), rgba(90,170,240,.02) 75%) !important; }

/* "En línea ahora" + pendientes. */
html[data-theme="dark"] .users-hero__label{ color:#9db3cc !important; }
html[data-theme="dark"] .users-hero__label b{ color:#e3ebf4 !important; background:rgba(90,170,240,.16) !important; }
html[data-theme="dark"] .u-chip{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.10) !important; box-shadow:none !important; }
html[data-theme="dark"] .u-chip__txt b{ color:#eaf0f7 !important; }
html[data-theme="dark"] .u-chip__txt small{ color:#a6b0bb !important; }
html[data-theme="dark"] .u-avatar__dot{ border-color:#26282c !important; }
html[data-theme="dark"] .users-hero__pend{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.10) !important; color:#cdd7e2 !important; box-shadow:none !important; }
html[data-theme="dark"] .users-hero__pend-ico{ color:#7fc4f2 !important; }
html[data-theme="dark"] .users-hero__pend b{ background:rgba(255,255,255,.12) !important; color:#cdd7e2 !important; }
html[data-theme="dark"] .u-count{ color:#7fc4f2 !important; background:rgba(90,170,240,.16) !important; }

/* Pastillas de estado y de solicitudes: se aclara el texto para que contraste
   sobre su fondo tintado en modo oscuro (el fondo rgba ya funciona). */
html[data-theme="dark"] .pill--on{ color:#5fd39a !important; }
html[data-theme="dark"] .pill--off{ color:#aeb9c4 !important; background:rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .pill--admin{ color:#7fc4f2 !important; }
html[data-theme="dark"] .pill--vend{ color:#5fc8ee !important; }
html[data-theme="dark"] .pill--block{ color:#ff87b0 !important; }
html[data-theme="dark"] .dot--off{ background:#5b636b !important; }
html[data-theme="dark"] .sol-tipo--restablecer{ color:#f0a860 !important; }
html[data-theme="dark"] .sol-tipo--desbloqueo{ color:#ff87b0 !important; }
html[data-theme="dark"] .sol-tipo--ayuda{ color:#5fc8ee !important; }
html[data-theme="dark"] .sol-tipo--sugerencia{ color:#5fd39a !important; }
html[data-theme="dark"] .sol-item .recordada{ background:#1e1e1e !important; }

/* Modales (nuevo usuario, editar datos, perfil): tarjeta y campos oscuros.
   Nota: el modal de perfil (auth.js) reutiliza .admin-modal__card y .admin-field,
   así que también queda cubierto aquí. */
html[data-theme="dark"] .admin-modal{ background:rgba(0,0,0,.6) !important; }
html[data-theme="dark"] .admin-modal__card{ background:#26282c !important; color:var(--ink, #f1f3f6) !important; box-shadow:0 30px 70px -20px rgba(0,0,0,.75) !important; }
html[data-theme="dark"] .admin-field label{ color:var(--muted, #a6b0bb) !important; }
html[data-theme="dark"] .admin-field input,
html[data-theme="dark"] .admin-field select{
  background:#1e1e1e !important; border-color:rgba(255,255,255,.16) !important; color:#f1f3f6 !important;
}

/* ============================================================================
 * ALINEACIÓN CON EL NUEVO LENGUAJE AT&T (azul → morado) + glass.
 * Cubre: encabezado del panel, fondo, modales (perfil / contraseña / nuevo
 * usuario), campos, botones. Solo apariencia.
 * ==========================================================================*/

/* Encabezado del panel → degradado AT&T */
.admin-top{
  background:linear-gradient(120deg,#07424c 0%,#0a555f 50%,#0c6a73 100%) !important;
  box-shadow:0 12px 30px -18px rgba(70,35,130,.6) !important;
}
.admin-tabs button.is-active{ color:#067e90 !important; }

/* Fondo del panel → sistema azul→morado */
.admin-panel{
  background:
    radial-gradient(60% 45% at 88% -5%, rgba(120,90,220,.18) 0%, transparent 60%),
    radial-gradient(55% 45% at 6% 8%, rgba(0,150,224,.16) 0%, transparent 60%),
    linear-gradient(170deg, #eef4f6 0%, #e7f1f2 55%, #eef5f6 100%) !important;
}
html[data-theme="dark"] .admin-panel{
  background:
    radial-gradient(60% 45% at 88% -5%, rgba(120,90,220,.14) 0%, transparent 60%),
    radial-gradient(55% 45% at 6% 8%, rgba(0,150,224,.12) 0%, transparent 60%),
    linear-gradient(170deg, #12142a 0%, #171635 55%, #1c1638 100%) !important;
}

/* Botón primario y chip de entrada al panel → cian AT&T */
.abtn--primary{ background:linear-gradient(135deg,#17b8cc,#067e90) !important; box-shadow:0 8px 20px -10px rgba(6,110,128,.7) !important; }
.abtn--primary:hover{ filter:brightness(1.05); }
.auth-chip__panel{ background:linear-gradient(135deg,#17b8cc,#067e90) !important; }

/* Modales (perfil, contraseña, nuevo usuario…) → vidrio + acentos AT&T */
.admin-modal{ background:rgba(10,18,44,.55) !important; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.admin-modal__card{
  background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.8)) !important;
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.72) !important; border-radius:22px !important;
  box-shadow:0 34px 80px -24px rgba(20,8,60,.5), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.admin-modal__card h3{ color:#067e90 !important; }
.admin-field input, .admin-field select{
  border-radius:12px !important;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.admin-field input:focus, .admin-field select:focus{
  border-color:var(--att,#0AA0B8) !important; box-shadow:0 0 0 3px rgba(0,168,224,.16) !important; outline:none;
}
.admin-modal__actions .abtn{ border-radius:999px !important; }
.admin-modal__actions .abtn:not(.abtn--primary):not(.abtn--danger){
  background:rgba(0,168,224,.08) !important; border:1px solid color-mix(in srgb,#0AA0B8 40%, var(--line)) !important; color:#067e90 !important;
}

html[data-theme="dark"] .admin-modal__card{
  background:linear-gradient(160deg, rgba(46,54,66,.94), rgba(38,45,58,.9)) !important;
  border-color:rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] .admin-modal__card h3{ color:#5fc8ee !important; }
html[data-theme="dark"] .admin-field input:focus,
html[data-theme="dark"] .admin-field select:focus{
  border-color:var(--att,#0AA0B8) !important; box-shadow:0 0 0 3px rgba(0,168,224,.22) !important;
}
html[data-theme="dark"] .admin-modal__actions .abtn:not(.abtn--primary):not(.abtn--danger){
  background:rgba(0,168,224,.12) !important; color:#bfe8fb !important; border-color:color-mix(in srgb,#0AA0B8 46%, rgba(255,255,255,.14)) !important;
}

/* Buzón: filtro activo en cian AT&T (en vez de negro). */
.sol-filtros button.is-active{ background:linear-gradient(135deg,#17b8cc,#067e90) !important; border-color:transparent !important; color:#fff !important; }

/* ============================================================================
 * PINCELADA — identidad actual en los modales (perfil, contraseña, soporte).
 * Trae la firma del rediseño (degradado AZUL→MORADO + vidrio pulido) a los
 * modales .admin-modal, que aún se leían con el acento cian anterior.
 * Solo apariencia; no cambia estructura, textos ni lógica. Acotado a
 * .admin-modal para NO alterar el panel de administración ni otras vistas.
 * ==========================================================================*/

/* Tarjeta: vidrio con un velo de color de marca arriba + filo con degradado. */
.admin-modal__card{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(120,60,200,.16), transparent 55%),
    radial-gradient(100% 70% at 0% -8%, rgba(0,120,210,.14), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,.94), rgba(246,247,253,.86)) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:
    0 34px 80px -24px rgba(30,12,80,.5),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.admin-modal__card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; pointer-events:none;
  background:linear-gradient(100deg,#07424c,#0a555f 42%,#0c6a73 72%,#12b4cb);
}
/* Título con el mismo degradado (texto). Se usa background-IMAGE (longhand)
 * para no reiniciar background-clip, que el shorthand background pondría en
 * border-box y dejaría el texto invisible. */
.admin-modal__card h3{
  background-image:linear-gradient(100deg,#07424c,#0a5f6a 60%,#12b4cb) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent; color:#067e90 !important;
}

/* Botón primario: degradado azul→morado de la marca (antes cian). */
.admin-modal .abtn--primary{
  background:linear-gradient(120deg,#07424c 0%,#0a5f6a 52%,#12b4cb 100%) !important;
  box-shadow:0 12px 26px -12px rgba(90,30,180,.75) !important;
}
.admin-modal .abtn--primary:hover{ filter:brightness(1.06); }

/* Botón secundario (Cerrar / Cancelar): tinte de marca coherente con el primario. */
.admin-modal__actions .abtn:not(.abtn--primary):not(.abtn--danger){
  background:rgba(90,48,176,.07) !important;
  border:1px solid color-mix(in srgb,#0a5f6a 34%, var(--line)) !important;
  color:#4a2a9a !important;
}

/* Campos: mismo radio y anillo de foco de marca (incluye el textarea de soporte). */
.admin-field textarea{ border-radius:12px !important; transition:border-color .15s ease, box-shadow .15s ease; }
.admin-field textarea:focus{
  border-color:var(--att,#0AA0B8) !important; box-shadow:0 0 0 3px rgba(0,168,224,.16) !important; outline:none;
}

/* Tema oscuro (por si vuelve a habilitarse): mismo velo sobre superficie oscura. */
html[data-theme="dark"] .admin-modal__card{
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(140,80,220,.20), transparent 55%),
    radial-gradient(100% 70% at 0% -8%, rgba(0,130,220,.16), transparent 55%),
    linear-gradient(160deg, rgba(46,54,66,.96), rgba(38,45,58,.92)) !important;
  border-color:rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] .admin-modal__card h3{
  background-image:linear-gradient(100deg,#5aa8ff,#9a7bff 60%,#c78bff) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent; color:#5aa8ff !important;
}
html[data-theme="dark"] .admin-modal__actions .abtn:not(.abtn--primary):not(.abtn--danger){
  background:rgba(120,80,210,.16) !important; color:#d8c9ff !important;
  border-color:color-mix(in srgb,#7a4fd0 46%, rgba(255,255,255,.14)) !important;
}

/* ===== Tablero: barra de filtros (rango + granularidad) y drill-down (Fase 1) ===== */
.tb-filtros{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px;
  margin:0 0 16px; padding:8px 14px; border-radius:14px;
}
.tb-filtros__grupo{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tb-filtros__label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted,#5F6673); }
.tb-fechas{ display:inline-flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tb-fechas label{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted,#5F6673); font-weight:500; }
.tb-fechas input[type="date"]{ font:inherit; font-size:12.5px; padding:5px 8px; border:1px solid var(--line,#E7E7E2); border-radius:8px; background:#fff; color:inherit; }
.tb-grano{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted,#5F6673); }
.tb-ambito{ display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:8px 12px; border-radius:10px;
  background:rgba(79,70,229,.08); border:1px solid rgba(79,70,229,.2); font-size:13px; }
.tb-ambito button{ margin-left:auto; font:inherit; font-size:12px; cursor:pointer;
  border:1px solid rgba(79,70,229,.35); background:#fff; color:#4F46E5; border-radius:999px; padding:4px 11px; }
.tb-ambito button:hover{ background:rgba(79,70,229,.1); }
.admin-tabla--click tbody tr{ cursor:pointer; }
.admin-tabla--click tbody tr:hover{ background:rgba(79,70,229,.06); }
.admin-card h3 small{ font-weight:400; font-size:11.5px; color:var(--muted,#5F6673); }
html[data-theme="dark"] .tb-fechas input[type="date"]{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
html[data-theme="dark"] .tb-ambito{ background:rgba(120,110,245,.14); border-color:rgba(120,110,245,.3); }
html[data-theme="dark"] .tb-ambito button{ background:rgba(255,255,255,.06); color:#c7c3ff; }

/* Sub-navegación limpia del tablero y pestañas internas */
.seg-tablero{ display:inline-flex; gap:6px; margin-bottom:16px; padding:4px; border-radius:999px; }
.seg-tablero button{
  padding:7px 18px; border-radius:999px; border:1px solid transparent; font-size:13px; font-weight:600;
  cursor:pointer; color:var(--muted,#5F6673); background:transparent; transition:all .15s ease;
}
.seg-tablero button:hover{ color:var(--ink,#0A2E6E); }
.seg-tablero button.is-active{
  background:#fff; color:#0A2E6E; border-color:rgba(10,46,110,.12);
  box-shadow:0 4px 14px -6px rgba(10,46,110,.25);
}
html[data-theme="dark"] .seg-tablero button.is-active{
  background:#26282c; color:#7dd3fc; border-color:rgba(255,255,255,.12); box-shadow:none;
}

/* Sub-selectores internos (Equipo: Sucursal/Ejecutivo, Uso: Dispositivos/Tutorial/Embudo) */
.seg-sub{
  display:inline-flex; gap:4px; padding:3px; border-radius:10px;
  background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.06);
}
.seg-sub button{
  padding:6px 14px; font-size:12.5px; font-weight:600; border-radius:8px;
  border:1px solid transparent; cursor:pointer; background:transparent; color:var(--muted,#5F6673);
  transition:all .14s ease;
}
.seg-sub button:hover{ color:var(--ink,#0A2E6E); }
.seg-sub button.is-active{
  background:#fff; color:#0A2E6E; border-color:rgba(0,0,0,.08);
  box-shadow:0 2px 6px -2px rgba(0,0,0,.15);
}
html[data-theme="dark"] .seg-sub{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .seg-sub button.is-active{ background:#2c2e32; color:#7dd3fc; border-color:rgba(255,255,255,.12); }

.equipo-toolbar, .uso-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-bottom:14px;
}
.tb-drill-hint{ font-size:12px; color:var(--muted,#5F6673); }

/* Rankings en podio (medallas 🥇🥈🥉 y botón de expansión) */
.rank-pos{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; font-size:14px; margin-right:4px; vertical-align:middle; }
.rank-badge{
  display:inline-block; font-size:10.5px; font-weight:700; color:var(--muted,#6A7C8A);
  background:rgba(0,0,0,.06); padding:1px 6px; border-radius:6px; vertical-align:middle;
}
html[data-theme="dark"] .rank-badge{ background:rgba(255,255,255,.1); color:#a6b0bb; }
.rank-toggle-btn{
  display:block; width:100%; margin-top:10px; padding:7px 10px; font-size:12px; font-weight:600;
  color:#0284C7; background:rgba(14,165,233,.08); border:1px solid rgba(14,165,233,.2);
  border-radius:9px; cursor:pointer; text-align:center; transition:background .15s ease;
}
.rank-toggle-btn:hover{ background:rgba(14,165,233,.16); }
html[data-theme="dark"] .rank-toggle-btn{ color:#7dd3fc; background:rgba(14,165,233,.15); border-color:rgba(14,165,233,.3); }

/* Mini tarjetas de contexto en Ventas */
.mini-kpi-row{ display:flex; flex-direction:column; gap:10px; }
.mini-kpi-item{ display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-radius:10px; background:rgba(0,0,0,.025); border:1px solid rgba(0,0,0,.05); font-size:13px; }
.mini-kpi-item b{ font-size:14px; color:#0A2E6E; }
html[data-theme="dark"] .mini-kpi-item{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.07); }
html[data-theme="dark"] .mini-kpi-item b{ color:#7dd3fc; }

/* ===== Ventas nuevas vs Renovaciones (tablero) ===== */
.tv-split__bar{ display:flex; height:16px; border-radius:999px; overflow:hidden; background:#EEF0F4; }
.tv-split__nueva{ background:#5F6673; }
.tv-split__reno{ background:linear-gradient(90deg,#6366F1,#4338CA); }
.tv-split__legend{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:10px; font-size:13px; color:var(--muted,#5F6673); }
.tv-split__legend b{ color:var(--ink,#15171C); }
.tv-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.tv-dot--nueva{ background:#5F6673; }
.tv-dot--reno{ background:#4338CA; }
html[data-theme="dark"] .tv-split__bar{ background:rgba(255,255,255,.1); }
html[data-theme="dark"] .tv-split__legend b{ color:#e8ecf2; }

/* ===== Dispositivos: Web Móvil vs Web Escritorio ===== */
.disp-split__bar{ display:flex; height:18px; border-radius:999px; overflow:hidden; background:#E2E8F0; }
.disp-split__movil{ background:linear-gradient(90deg,#0EA5E9,#0284C7); transition:width .3s ease; }
.disp-split__escritorio{ background:linear-gradient(90deg,#6366F1,#4338CA); transition:width .3s ease; }
.disp-split__legend{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:12px; font-size:13px; color:var(--muted,#5F6673); }
.disp-split__legend b{ color:var(--ink,#15171C); }
.disp-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.disp-dot--movil{ background:#0284C7; }
.disp-dot--escritorio{ background:#4338CA; }
.disp-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.disp-badge--movil{ background:rgba(14,165,233,.14); color:#0369A1; }
.disp-badge--escritorio{ background:rgba(99,102,241,.14); color:#4338CA; }
.disp-badge--ambos{ background:rgba(100,116,139,.14); color:#475569; }
.disp-conclusion{ margin-top:10px; font-size:13px; font-weight:600; color:#0369A1; background:rgba(14,165,233,.08); padding:8px 14px; border-radius:10px; border:1px solid rgba(14,165,233,.2); display:flex; align-items:center; gap:8px; }
.disp-conclusion--escritorio{ color:#4338CA; background:rgba(99,102,241,.08); border-color:rgba(99,102,241,.2); }
.disp-conclusion--empate{ color:#475569; background:rgba(100,116,139,.08); border-color:rgba(100,116,139,.2); }
html[data-theme="dark"] .disp-split__bar{ background:rgba(255,255,255,.12); }
html[data-theme="dark"] .disp-split__legend b{ color:#e8ecf2; }
html[data-theme="dark"] .disp-conclusion{ background:rgba(14,165,233,.15); color:#7dd3fc; border-color:rgba(14,165,233,.3); }
html[data-theme="dark"] .disp-conclusion--escritorio{ background:rgba(99,102,241,.15); color:#a5b4fc; border-color:rgba(99,102,241,.3); }