/* ============================================================
   WTF PUBLICIDAD — Panel Interno
   shell.css — Sistema de diseño unificado (mismo que los modulos
   de Redes/Diseno/Admin), con soporte de tema claro/oscuro.
   Topbar, sidebar, login, dashboard, modales, toast.
   ============================================================ */

:root {
  --trans:          background .3s ease, color .3s ease, border-color .3s ease;
  --topbar-h:       52px;
  --sidebar-w:      220px;
  --sidebar-w-col:  56px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f3; --c1: #fff; --c2: #f8f8f6;
  --br: #e5e5e2; --brh: #ccc; --brs: #bbb;
  --t: #1a1a1a; --ts: #666; --tm: #aaa; --td: #ddd;
  --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.05);
  --sep: #e5e5e2;
  --nav-active-bg: rgba(117,184,42,.1);
  --red-bg: rgba(226,75,74,.08);   --red-br: rgba(226,75,74,.25);
  --green-bg: rgba(117,184,42,.08); --green-br: rgba(117,184,42,.25);
  --yellow-bg: rgba(239,159,39,.08); --yellow-br: rgba(239,159,39,.25);
  --blue-bg: rgba(55,138,221,.08);  --blue-br: rgba(55,138,221,.25);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a; --c1: #111; --c2: #181818;
  --br: #252525; --brh: #333; --brs: #444;
  --t: #f0f0f0; --ts: #888; --tm: #555; --td: #333;
  --shadow-card: 0 1px 4px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.25);
  --sep: #252525;
  --nav-active-bg: rgba(117,184,42,.12);
  --red-bg: rgba(226,75,74,.1);    --red-br: rgba(226,75,74,.3);
  --green-bg: rgba(117,184,42,.1); --green-br: rgba(117,184,42,.3);
  --yellow-bg: rgba(239,159,39,.1); --yellow-br: rgba(239,159,39,.3);
  --blue-bg: rgba(55,138,221,.1);  --blue-br: rgba(55,138,221,.3);
}

html { transition: var(--trans); }
body { background: var(--bg); color: var(--t); }

/* ─── TOPBAR ─── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--topbar-h);
  background: var(--c1);
  border-bottom: 1px solid var(--br);
  display: flex; align-items: center;
  padding: 0 1rem; gap: .65rem;
}
.tb-logo { height: 22px; width: auto; flex-shrink: 0; }
.tb-sep  { width: 1px; height: 18px; background: var(--br); }
.tb-badge {
  font-size: 9px; font-weight: 700;
  padding: 2px 9px; border-radius: 20px;
  background: rgba(117,184,42,.15); color: var(--g);
  border: 1px solid rgba(117,184,42,.3);
  letter-spacing: .06em; text-transform: uppercase;
}
.tb-right { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
/* ─── BUZÓN INTERNO ───
   Los selectores llevan `.tb-btn` delante a propósito: `.tb-btn` se declara
   más abajo en este mismo archivo y, a igual especificidad, gana el último.
   Sin esto, su `background: transparent` y su `color: var(--ts)` pisaban los
   de aquí y el botón salía gris y sin fondo.
   Va a la izquierda, pegado a «Panel Interno», y no entre los iconos de la
   derecha: ahí era un icono más entre seis y se perdía, que es justo lo que
   le pasó al botón de fichar antes de bajarlo al centro.

   APAGADO CUANDO NO HAY NADA, VERDE CUANDO SÍ. Un botón que grita siempre
   deja de gritar: si estuviera verde a todas horas, el día que de verdad
   haya un comunicado nadie notaría la diferencia. El verde se gana con una
   deuda pendiente, y entonces el texto va en NEGRO —blanco sobre este verde
   da 2.34:1 y no pasa AA—. */
.tb-btn.tb-buzon {
  /* FLEX QUE NO SE ENCOGE Y TEXTO QUE NO SE PARTE. La barra es un flex con
     gap y sus hijos se encogen por omisión: sin esto, «Buzón interno» se
     partía en dos renglones y el botón se montaba encima de «Panel Interno».
     Pasó en producción el 30 de octubre de 2026. */
  flex: 0 0 auto; white-space: nowrap;
  width: auto; height: 30px; padding: 0 .7rem; gap: .4rem;
  font-size: 12px; font-weight: 600; font-family: var(--font);
  background: var(--c1); border: 1px solid var(--brh); color: var(--t);
}
.tb-btn.tb-buzon:hover { background: var(--c2); border-color: var(--brh); color: var(--t); }
.tb-btn.tb-buzon i { font-size: 16px; }

/* CON ALGO PENDIENTE: verde, texto en NEGRO —blanco sobre este verde da
   2.34:1 y no pasa AA— y el punto rojo de siempre. El verde se gana con una
   deuda y se pierde al confirmarla: encendido a todas horas dejaría de decir
   nada el día que de verdad haya un comunicado. */
.tb-btn.tb-buzon.tiene { background: var(--g); border-color: var(--g); color: #000; }
.tb-btn.tb-buzon.tiene:hover { background: var(--gd); border-color: var(--gd); color: #000; }

/* El punto va con su aro del color de la barra, como el de la campana: rojo
   pegado al verde vibra, y el aro los separa. Cuántos son se lee en el título
   del botón y lo dice el lector de pantalla; un número Y un punto en 30 px de
   alto es ruido, y el número exacto se ve entero al abrir la pantalla. */
.tb-btn.tb-buzon .tb-buzon-punto {
  position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #E24B4A; border: 2px solid var(--c1);
}
@media (max-width: 860px) { .tb-btn.tb-buzon .tb-buzon-txt { display: none; } }

.tb-btn {
  width: 32px; height: 32px; border-radius: var(--r);
  background: transparent; border: none; cursor: pointer;
  color: var(--ts); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--trans); position: relative;
}
.tb-btn:hover { background: var(--c2); color: var(--t); }
.notif-dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #E24B4A; border: 1.5px solid var(--c1);
}
.tb-chip {
  display: flex; align-items: center; gap: .4rem;
  padding: 3px 8px 3px 3px; border-radius: 20px;
  border: 1px solid var(--br); cursor: pointer; position: relative;
}
.tb-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: #378ADD; color: #fff;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tb-chip-name { font-size: 11px; font-weight: 600; color: var(--t); }
.tb-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--c1); border: 1px solid var(--brh);
  border-radius: var(--r2); min-width: 190px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  display: none; z-index: 300; overflow: hidden;
}
.tb-dropdown.open { display: block; }
.dd-head  { padding: .55rem .8rem; border-bottom: 1px solid var(--br); }
.dd-name  { font-size: 12px; font-weight: 600; color: var(--t); }
.dd-email { font-size: 11px; color: var(--ts); }
.dd-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem; font-size: 12px; color: var(--ts); cursor: pointer;
}
.dd-item:hover { background: var(--c2); color: var(--t); }
.dd-item i { font-size: 14px; }
.dd-sep { height: 1px; background: var(--br); }
.dd-item.red { color: #E24B4A; }

/* ─── SIDEBAR ─── */
.sidebar {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--c1); border-right: 1px solid var(--br);
  display: flex; flex-direction: column;
  overflow: hidden; transition: width .25s ease; z-index: 100;
}
.sidebar.collapsed { width: var(--sidebar-w-col); }
.nav-group { padding: .5rem 0; }
.nav-group-label {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tm); padding: .35rem .85rem .15rem; white-space: nowrap; overflow: hidden;
}
.sidebar.collapsed .nav-group-label { opacity: 0; }
.nav-item {
  display: flex; align-items: center;
  padding: .45rem .7rem; margin: 1px .4rem;
  border-radius: var(--r); cursor: pointer; transition: var(--trans);
  position: relative;
}
.nav-item:hover { background: var(--c2); }
.nav-item.active { background: var(--nav-active-bg); }
.nav-item.active .nav-icon,
.nav-item.active .nav-label { color: var(--g); font-weight: 600; }
.nav-icon { font-size: 17px; color: var(--ts); flex-shrink: 0; width: 22px; text-align: center; }
.nav-label {
  font-size: 12px; color: var(--t); margin-left: .6rem;
  white-space: nowrap; overflow: hidden;
  transition: opacity .15s, max-width .25s; max-width: 140px; flex: 1;
}
.sidebar.collapsed .nav-label { opacity: 0; max-width: 0; }
.sidebar.collapsed .nav-item { justify-content: center; padding: .45rem; }
.sidebar.collapsed .nav-icon { width: auto; }
.nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 20px; line-height: 1.4;
  background: var(--red-bg); color: #E24B4A; flex-shrink: 0;
}
.nav-badge.yellow { background: var(--yellow-bg); color: #EF9F27; }
.sb-sep { height: 1px; background: var(--br); margin: .25rem .6rem; }

/* ─── SIDEBAR DESPLEGABLE (Redes Sociales / Diseno) ─── */
.nav-sec { padding: .35rem 0; }
.nav-sec-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tm); padding: .3rem .85rem .1rem; white-space: nowrap; overflow: hidden;
}
.sidebar.collapsed .nav-sec-lbl { opacity: 0; pointer-events: none; }
.nav-group { margin: 0; }
.nav-group-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .38rem .85rem; cursor: pointer; transition: var(--trans);
  font-size: 12px; font-weight: 500; color: var(--ts);
}
.nav-group-hdr:hover { background: var(--c2); color: var(--t); }
.nav-group-hdr.active { color: var(--g); }
.nav-group-chevron { font-size: 11px; color: var(--tm); transition: transform .2s ease; flex-shrink: 0; }
.nav-group.open .nav-group-chevron { transform: rotate(180deg); }
.nav-group-body {
  display: none; padding-left: .5rem; border-left: 2px solid var(--br); margin-left: 1.15rem;
  margin-top: .1rem; margin-bottom: .2rem;
}
.nav-group.open .nav-group-body { display: block; }
/* Total de pendientes del grupo: se ve con el grupo cerrado (al abrirlo,
   cada opción muestra el suyo). Con el menú contraído queda un punto. */
.nav-group-hdr { position: relative; }
.nav-group-total { display: none; margin-right: .35rem; }
.nav-group-total.tiene { display: inline-block; }
.nav-group.open .nav-group-total { display: none; }
.sidebar.collapsed .nav-group-total.tiene,
.sidebar.collapsed .nav-group.open .nav-group-total.tiene {
  display: block; position: absolute; top: 6px; left: 30px; margin: 0;
  width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%;
  background: #E24B4A; box-shadow: 0 0 0 2px var(--c1);
}
.sidebar.collapsed .nav-group-total.yellow.tiene { background: #EF9F27; }
.nav-sub-item {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; border-radius: var(--r); cursor: pointer;
  font-size: 11px; color: var(--ts); transition: var(--trans); margin-bottom: .05rem;
}
.nav-sub-item:hover { background: var(--c2); color: var(--t); }
.nav-sub-item.active { color: var(--g); background: var(--green-bg); }
.nav-sub-ico { font-size: 12px; flex-shrink: 0; }
.sb-user { padding: .75rem; border-top: 1px solid var(--br); margin-top: auto; }
.sidebar.collapsed .sb-user { display: none; }
.sb-user-inner { display: flex; align-items: center; gap: .5rem; }
.sb-user-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: #378ADD; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sb-user-nombre { font-size: 11px; font-weight: 700; color: var(--t); }
.sb-user-rol    { font-size: 10px; color: var(--ts); }
.sb-user-badge {
  font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 20px;
  background: var(--blue-bg); color: #378ADD; border: 1px solid var(--blue-br);
  margin-top: .2rem; display: inline-block;
}

/* ─── LAYOUT / CONTENIDO ───
   .sidebar es position:fixed (fuera del flujo), asi que .layout
   NO debe ser flex: con un solo hijo en flujo (#main-wrap), flex:1
   lo haria calcular su ancho contra el 100% de .layout y luego
   desplazarlo con margin-left, desbordando el viewport y rompiendo
   el centrado interno (.main-content quedaba pegado a la izquierda
   en vez de centrado). Con block + margin-left simple, el ancho
   real de #main-wrap ya es "100% menos el sidebar", que es lo que
   se necesita. */
.layout { padding-top: var(--topbar-h); min-height: 100vh; }
/* html,body tienen overflow:hidden (base.css) para que el sidebar y el
   topbar queden fijos; por eso #main-wrap necesita su PROPIO scroll
   interno, si no, cualquier pantalla mas alta que el viewport queda
   inalcanzable (no hay scroll posible en ningun lado). */
#main-wrap {
  margin-left: var(--sidebar-w); padding: 1.5rem;
  transition: margin-left .25s ease;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
#main-wrap.collapsed { margin-left: var(--sidebar-w-col); }
.main-content { max-width: 1000px; margin: 0 auto; }

/* Centrado garantizado del contenido de cada bloque, sin importar
   lo que declare (o no) el <style> propio de esa pantalla. */
#main-wrap .main { max-width: 960px !important; margin: 0 auto !important; }

/* ─── SALUDO DEL DASHBOARD ─── */
.saludo-wrap {
  background: linear-gradient(135deg, var(--g), var(--gd));
  border-radius: var(--r2); padding: 1rem 1.25rem; margin-bottom: .75rem;
  position: relative; overflow: hidden;
}
.saludo-wrap::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.saludo-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.saludo-titulo { font-size: 16px; font-weight: 700; color: #000; }
.saludo-sub    { font-size: 12px; color: rgba(0,0,0,.6); margin-top: .2rem; }

/* ─── KPIs ─── */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; margin-bottom: .75rem; }
/* Fila de 6 tarjetas (Inicio de Dirección con el KPI de Ventas): 3 + 3 en
   escritorio en lugar de 5 + 1. Debajo de 900 px manda la regla de 2 columnas. */
@media (min-width: 901px) { .kpi-row.kpi-row-3 { grid-template-columns: repeat(3, 1fr); } }
.kpi {
  background: var(--c1); border: 1px solid var(--br); border-radius: var(--r2);
  padding: .85rem 1rem; box-shadow: var(--shadow-card); cursor: pointer;
  transition: border-color var(--t-fast, .12s ease);
}
.kpi:hover  { border-color: var(--brh); }
.kpi.ok     { border-color: var(--green-br);  background: var(--green-bg); }
.kpi.warn   { border-color: var(--yellow-br); background: var(--yellow-bg); }
.kpi.err    { border-color: var(--red-br);    background: var(--red-bg); }
.kpi-lbl { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ts); margin-bottom: .25rem; }
.kpi-val { font-size: 26px; font-weight: 700; color: var(--t); line-height: 1; letter-spacing: -1px; }
.kpi.ok .kpi-val   { color: var(--g); }
.kpi.warn .kpi-val { color: #EF9F27; }
.kpi.err .kpi-val  { color: #E24B4A; }
.kpi-sub { font-size: 10px; color: var(--ts); margin-top: .2rem; }

/* ─── Barra de progreso de meta (animada al cargar) ─── */
.meta-bar-track { height: 7px; border-radius: 8px; background: rgba(0,0,0,.08); overflow: hidden; margin-top: .45rem; }
.meta-bar-fill {
  height: 100%; border-radius: 8px; width: 0%;
  background: linear-gradient(90deg, #8fa8c9, var(--g));
  transition: width 1.2s cubic-bezier(.22,1,.36,1), background 1.2s ease;
}
.meta-bar-fill.nivel-medio  { background: linear-gradient(90deg, var(--g), #a9e06a); }
.meta-bar-fill.nivel-alto   { background: linear-gradient(90deg, var(--g), #d4e85a); }
.meta-bar-fill.nivel-cumplida {
  background: linear-gradient(90deg, var(--g), #ffd76a);
  animation: metaPulso 1.6s ease-in-out 1.2s 2;
}
@keyframes metaPulso {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}
.meta-bar-txt { font-size: 10px; color: var(--ts); margin-top: .3rem; display: flex; align-items: center; gap: .25rem; }
.meta-bar-txt .ti-trophy { color: #EF9F27; }

/* ─── VENTAS DEL EQUIPO (Inicio de Dirección y de Ventas) ───
   Un renglon por vendedor. Las cifras van en una fila que se acomoda sola:
   en el escritorio salen las cinco de corrido y en el celular se parten en
   dos renglones, sin tabla que se desborde a lo ancho. */
.vte-card { margin-bottom: .75rem; }
.vte-resumen { font-size: 11px; color: var(--ts); padding-bottom: .2rem; }
.vte-resumen b { color: var(--t); font-weight: 700; }
.vte-fila { padding: .6rem 0; border-bottom: 1px solid var(--br); }
.vte-fila:last-of-type { border-bottom: none; }
.vte-cab { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.vte-nombre { font-size: 12px; font-weight: 600; color: var(--t); }
.vte-pct { font-size: 12px; font-weight: 700; white-space: nowrap; }
.vte-sinmeta { font-size: 10px; font-weight: 500; color: var(--tm); white-space: nowrap; }
.vte-cifras { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; padding-top: .35rem; }
.vte-cifras > div { min-width: 62px; }
.vte-dato { font-size: 13px; font-weight: 700; color: var(--t); }
.vte-lbl { font-size: 10px; color: var(--ts); }
.vte-nota { font-size: 10px; color: var(--ts); padding-top: .6rem; }
@media (max-width: 480px) {
  .vte-cifras { gap: .35rem .85rem; }
}

/* ─── TARJETAS DEL DASHBOARD (solicitudes / alertas) ─── */
.dash-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.dcard {
  background: var(--c1); border: 1px solid var(--br); border-radius: var(--r2);
  padding: 1rem; box-shadow: var(--shadow-card);
}
.dcard-title {
  font-size: 12px; font-weight: 600; color: var(--t);
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem;
}
.dcard-link { font-size: 11px; font-weight: 500; color: var(--g); cursor: pointer; }

/* ─── «EL EQUIPO HOY», EN EL INICIO ───
   Era una tira de una línea en la que los nombres vivían dentro de un `title`:
   había que apuntar con el cursor para saber de quién se hablaba, y a veces el
   tooltip ni salía. Andrés lo pidió el 25 de octubre de 2026 después de la
   confusión con los dos Josés.
   Ahora cada grupo es un bloque con su gente escrita, en columnas que se
   acomodan solas. Ocupa más alto, y es a propósito: vale más una tarjeta alta
   que se lee de un vistazo que una tira que hay que interrogar. */
.rhh-cab { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .7rem; }
.rhh-tit { font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: .4rem; }
.rhh-tit i { color: var(--g); font-size: 14px; }
.rhh-dia { font-size: 11.5px; color: var(--ts); }
.rhh-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: .55rem; }
/* `min-width:0` NO SOBRA: sin él, una celda de grid no encoge por debajo del
   ancho de su contenido, y como los nombres van en una sola línea, el bloque
   se salía de la tarjeta en el celular. El recorte con puntos suspensivos solo
   funciona si antes se le permite encoger. */
.rhh-g { border: 1px solid var(--br); border-radius: var(--r2); padding: .5rem .65rem; background: var(--c1); min-width: 0; }
/* El color acompaña; quien manda son el icono y la palabra. Entre el ámbar de
   un retardo y el rojo de una falta hay gente que no distingue. */
.rhh-g-cab { display: flex; align-items: center; gap: .35rem; font-size: 11.5px; font-weight: 700; margin-bottom: .35rem; }
.rhh-g-cab i { font-size: 13px; }
.rhh-g-cab b { font-size: 15px; font-weight: 700; }
.rhh-lista { list-style: none; margin: 0; padding: 0; font-size: 11.5px; color: var(--t); line-height: 1.65; }
.rhh-lista li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rhh-lista li small { color: var(--tm); font-size: 10.5px; }
.rhh-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: .75rem;
           padding-top: .6rem; border-top: 1px solid var(--br); font-size: 12px; color: var(--ts); }
.rhh-pie b { color: var(--t); }
.rhh-aviso { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; color: var(--t);
             background: var(--yellow-bg); border: 1px solid var(--yellow-br); border-radius: var(--r); padding: .2rem .6rem; }
@media (max-width: 560px) { .rhh-grupos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Y en lo más angosto, una sola columna: dos nombres recortados a la mitad no
   son dos nombres. */
@media (max-width: 400px) { .rhh-grupos { grid-template-columns: minmax(0, 1fr); } }
.drow {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid var(--br); font-size: 12px;
}
.drow:last-child { border-bottom: none; padding-bottom: 0; }
.aitem { display: flex; align-items: flex-start; gap: .55rem; padding: .5rem 0; border-bottom: 1px solid var(--br); }
.aitem:last-child { border-bottom: none; padding-bottom: 0; }
.aico {
  width: 30px; height: 30px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}

/* ─── PAGINAS (sistema de bloques) ─── */
[data-page] { display: none; }
[data-page].active { display: block; }
.page-loader { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 3rem 0; color: var(--tm); font-size: 12px; }

/* ─── LOGIN ─── */
#app-login { align-items: center; justify-content: center; min-height: 100vh; }
.login-box {
  width: 320px; background: var(--c1); border: 1px solid var(--br);
  border-radius: var(--r2); padding: 2rem 1.75rem; box-shadow: var(--shadow-card);
}
.login-error {
  background: var(--red-bg); border: 1px solid var(--red-br); color: #E24B4A;
  font-size: 12px; padding: 8px 11px; border-radius: var(--r); margin-bottom: .85rem;
}
/* Por qué se cerró la sesión (inactividad o tope), index.php */
.login-aviso {
  display: flex; align-items: flex-start; gap: .45rem;
  background: var(--c2); border: 1px solid var(--br); color: var(--t);
  font-size: 12px; line-height: 1.45; padding: 8px 11px; border-radius: var(--r); margin-bottom: .85rem;
}
.login-aviso i { font-size: 14px; color: var(--ts); margin-top: 1px; }

/* ─── AVISO DE CIERRE POR INACTIVIDAD (app.js, WTFInactividad) ─── */
.wtfses-velo {
  position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.wtfses-velo[hidden] { display: none; }
.wtfses-modal {
  background: var(--c1); color: var(--t); border: 1px solid var(--br); border-radius: var(--r2);
  padding: 1.5rem 1.5rem 1.25rem; max-width: 340px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.4); font-family: var(--font);
}
.wtfses-ico {
  width: 42px; height: 42px; margin: 0 auto .75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  background: rgba(239,159,39,.14); color: #BA7517;
}
.wtfses-tit { font-size: 14px; font-weight: 600; margin-bottom: .3rem; }
.wtfses-txt { font-size: 12px; line-height: 1.5; color: var(--ts); margin: 0 0 1rem; }
.wtfses-modal .btn-p { width: 100%; justify-content: center; padding: 9px; }
.wtfses-modal .btn-p:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }
.login-field { margin-bottom: .85rem; }
.login-label {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ts); margin-bottom: 5px;
}
.login-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--br); border-radius: var(--r);
  background: var(--c2); color: var(--t); font-size: 13px; font-family: var(--font);
  outline: none; transition: border-color .12s ease;
}
.login-input:focus { border-color: rgba(117,184,42,.55); }
.login-input::placeholder { color: var(--tm); }
.btn-p {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--g); color: #000; border: 1px solid var(--g);
  border-radius: var(--r); font-size: 13px; font-weight: 600; font-family: var(--font);
  cursor: pointer; transition: background .12s ease;
}
.btn-p:hover:not(:disabled) { background: var(--gd); }
.btn-p:disabled { opacity: .6; cursor: not-allowed; }

/* ─── MODALES ─── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 500;
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.open { display: flex; }
/* La confirmacion va SIEMPRE encima de lo demas, tambien del panel lateral
   de Remisiones (.rem-velo/.rem-drawer, z-index 600 y 601): si no, su velo
   se queda arriba y el boton "Confirmar" no se puede tocar. */
#modal-confirmar { z-index: 700; }
.modal-box { background: var(--c1); border-radius: var(--r2); overflow: hidden; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.modal-hdr { display: flex; align-items: center; gap: .5rem; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--br); }
.modal-tit { font-size: 13px; font-weight: 600; color: var(--t); display: flex; align-items: center; gap: .4rem; }
/* LA ✕ TIENE TAMAÑO PROPIO, no el de su icono.
   Antes era un <button> sin padding con un <i> dentro: todo su tamaño salía del
   glifo, 10 x 21 px cuando cargaba y 0 x 0 cuando no. Dos problemas en uno —un
   objetivo por debajo del mínimo de 24 x 24 para tocar con el dedo, y un botón
   que desaparece si falla la fuente—, y los dos se arreglan dándole al botón
   sus propias medidas. */
.modal-close { background: none; border: none; cursor: pointer; color: var(--ts); font-size: 18px; font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  min-width: 28px; min-height: 28px; padding: 4px; margin: -4px -4px -4px 0; border-radius: 8px; }
.modal-close:hover { background: var(--c2); color: var(--t); }
.modal-body { padding: 1rem; }
.modal-footer { padding: .75rem 1rem; border-top: 1px solid var(--br); display: flex; justify-content: flex-end; gap: .4rem; }
.btn-cancel { padding: 7px 14px; background: transparent; border: 1px solid var(--br); border-radius: var(--r); font-size: 11px; font-weight: 600; cursor: pointer; font-family: var(--font); color: var(--ts); }

/* ─── LIGHTBOX GLOBAL ─── */
#lightbox {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.93);
  z-index: 9999; align-items: center; justify-content: center;
}
#lightbox.open { display: flex; }
.lb-close { position: absolute; top: 1rem; right: 1rem; color: #fff; font-size: 22px; cursor: pointer; }
#lb-img { max-width: 90vw; max-height: 90vh; }

/* ─── TOAST GLOBAL ─── */
.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--g); color: #000; font-size: 12px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--r); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; transform: translateY(8px); z-index: 9998;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .dash-2  { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  #main-wrap { margin-left: 0 !important; padding: 1rem; }
  .sidebar   { transform: translateX(-100%); }
}

/* ─── BLOQUES DEL INICIO (index.php → inicio_bloque()) ───
   Un título por área (Números del mes, Ventas y Prospección, Redes…) con
   una línea que corre hasta el borde. Dentro, los cuadros se separan con
   gap; se anulan los márgenes propios de cada tarjeta para no duplicarlos. */
.ini-bloque { margin-top: 1.4rem; }
.ini-bloque-tit {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t);
}
.ini-bloque-tit .ti, .ini-bloque-tit .wtfok-ico { font-size: 15px; color: var(--wtfok-ico, var(--g)); }
.ini-bloque-tit::after { content: ""; flex: 1; height: 1px; background: var(--br); margin-left: .35rem; }
.ini-bloque-cuerpo { display: flex; flex-direction: column; gap: .75rem; }
.ini-bloque-cuerpo > * { margin: 0 !important; }