/* ============================================================
   CRM THR — Sistema de diseño
   Two-tone: azul noche + blanco. Plus Jakarta Sans. Material Symbols.
   ============================================================ */

:root {
  /* Two-tone surfaces */
  --bg-dark: #0A1929;
  --bg-panel: #0D2137;
  --border-dark: #1E3A5F;

  /* Accents */
  --accent-blue: #3B9EEB;
  --accent-blue-deep: #0055CC;
  --hot-orange: #EA580C;
  --success-green: #10B981;

  /* Texto que va ENCIMA de --accent-blue-deep cuando se usa como fondo.
     En oscuro el azul profundo se aclara, así que el texto tiene que oscurecerse. */
  --on-accent-deep: #FFFFFF;

  /* Paleta semántica de chips y métricas (especialidad, frecuencia, avisos).
     Son siempre color de PRIMER PLANO —texto e iconos sobre un tinte del propio
     color—, nunca fondo con texto encima. Por eso en modo oscuro pueden
     aclararse sin romper el contraste de ningún botón. */
  --accent-purple: #7C3AED;
  --accent-cyan: #0891B2;
  --accent-emerald: #059669;
  --hot-orange-fg: #EA580C;
  --warn-amber: #B45309;
  --neutral-chip: #94A3B8;

  /* Portada de Inicio y las tarjetas "de cristal" que van sobre ella */
  --hero-bg: linear-gradient(125deg, #E9F2FD 0%, #F3F1FE 42%, #FFF1E7 100%);
  --hero-border: #E5ECF6;
  --hero-glow: rgba(59, 158, 235, 0.30);
  --hero-shadow: 0 14px 40px -22px rgba(30, 80, 150, 0.35);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.90);
  --glass-shadow: 0 6px 18px -8px rgba(30, 80, 150, 0.25);

  /* Content */
  --content-bg: #FFFFFF;
  --surface: #F8FAFC;
  --surface-2: #F1F5F9;
  --border-light: #E2E8F0;
  --text-primary: #0A1929;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  /* Mapa de zonas. La provincia sin repartir tiene que LEERSE sobre el panel en
     vez de desaparecer en él: es el estado en el que se ve el mapa entero antes
     de repartir nada, y con un gris casi blanco no se distingue ni la silueta.
     El borde va aparte porque el que luce sobre los colores del comercial (claro,
     para separarlos) se pierde sobre ese gris. */
  --mapa-fondo: #EDF2F8;
  --mapa-libre: #C3D2E3;
  --mapa-libre-borde: #7C90A8;
  --mapa-borde: #FFFFFF;
  --mapa-sombra: drop-shadow(0 6px 14px rgba(30, 80, 150, 0.18));
  /* Frontera entre países y su nombre: tienen que leerse encima tanto del gris de
     lo libre como de los colores de los comerciales */
  --mapa-frontera: #1B2E4A;
  --mapa-pais: rgba(27, 46, 74, 0.34);

  /* Series de los gráficos de Estadísticas, en este orden: llamadas, emails,
     WhatsApp, en persona. Validadas para daltonismo sobre el blanco de las
     tarjetas y sobre el azul noche (dataviz validate_palette). Aqua y amarillo
     no llegan a 3:1 sobre blanco: por eso el gráfico lleva leyenda y tabla. */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --grafico-rejilla: #EEF2F7;

  /* Cabecera de la tabla de Clientes: oscura, como la de la hoja de seguimiento
     del equipo, para que se distinga de las filas a primera vista */
  --tabla-cab: #0A1929;
  --tabla-cab-texto: rgba(255, 255, 255, 0.78);
  /* La columna de la próxima reunión, resaltada como en la hoja */
  --tabla-cita: #FEF6E4;

  /* Tints */
  --tint-blue: #F0F6FF;
  --tint-blue-2: #EEF4FF;
  --tint-orange: #FFF0E6;
  --tint-green: #ECFDF5;

  --radius-card: 12px;
  --radius-btn: 7px;
  --radius-pill: 20px;

  --shadow-pop: 0 16px 48px -12px rgba(10, 25, 41, 0.30);
  --shadow-soft: 0 2px 8px -2px rgba(10, 25, 41, 0.08);

  --topbar-h: 52px;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* WhatsApp */
  --wa-bg: #EFEAE2;
  --wa-sent: #D9FDD3;
  --wa-recv: #FFFFFF;
  --wa-text: #111B21;
  --wa-sub: #667781;
}

/* Modo oscuro (las áreas de contenido también pasan a azul noche).
   Los acentos se aclaran: sobre azul noche, #0055CC y #7C3AED se quedan en
   2,5:1 de contraste y son ilegibles. Los valores de aquí pasan de 6:1. */
[data-theme="dark"] {
  --content-bg: #0A1929;
  --surface: #0D2137;
  --surface-2: #0F2742;
  --border-light: #1E3A5F;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --tint-blue: #102A45;
  --tint-blue-2: #112F4E;
  --tint-orange: #2A1810;
  --tint-green: #0C2A22;

  /* En oscuro el problema es el mismo al revés: la provincia libre tiene que
     quedar por encima del fondo del panel, no fundirse con él. */
  --mapa-fondo: #0A1B2E;
  --mapa-libre: #21456B;
  --mapa-libre-borde: #4A76A8;
  --mapa-borde: #0A1929;
  --mapa-sombra: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
  --mapa-frontera: #DCE7F5;
  --mapa-pais: rgba(220, 231, 245, 0.3);

  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --grafico-rejilla: #16304D;

  /* En oscuro la cabecera no puede ser del mismo azul noche que las filas */
  --tabla-cab: #16385C;
  --tabla-cab-texto: rgba(241, 245, 249, 0.85);
  --tabla-cita: #2B2414;

  --accent-blue-deep: #6BB6F5;
  --on-accent-deep: #0A1929;
  --accent-purple: #A98BFF;
  --accent-cyan: #38BFDE;
  --accent-emerald: #34D399;
  --hot-orange-fg: #FB923C;
  --warn-amber: #F0A868;
  --neutral-chip: #94A3B8;

  /* La portada deja de ser un degradado claro con texto blanco encima
     (invisible) y pasa al mismo barrido azul → violeta → cálido, en noche. */
  --hero-bg: linear-gradient(125deg, #102A4C 0%, #1A2246 45%, #2C2333 100%);
  --hero-border: #1E3A5F;
  --hero-glow: rgba(59, 158, 235, 0.22);
  --hero-shadow: 0 14px 40px -22px rgba(0, 0, 0, 0.65);
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.11);
  --glass-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.55);

  --wa-bg: #0B141A;
  --wa-sent: #005C4B;
  --wa-recv: #202C33;
  --wa-text: #E9EDEF;
  --wa-sub: #8696A0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg-dark);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* dvh es la altura que se ve de verdad. En el móvil 100vh incluye la barra del
   navegador, y lo que queda por debajo —la navegación de abajo— se esconde
   detrás de ella. El primer valor es para los navegadores que no lo conocen. */
#root { height: 100vh; height: 100dvh; }

.msym {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; user-select: none; vertical-align: middle;
}

/* Scrollbars */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.28); border-radius: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ===================== APP SHELL ===================== */
.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--content-bg); }

.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  background: var(--bg-dark); display: flex; align-items: center;
  padding: 0 18px; gap: 18px; z-index: 50; position: relative;
  border-bottom: 1px solid var(--border-dark);
}
.brand { display: flex; align-items: center; gap: 11px; padding-right: 6px; }
.brand-user { color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; letter-spacing: -0.01em; }
.brand-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.14); }
.logo-thr-img { height: 21px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 14px; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px;
  border-radius: 8px; cursor: pointer; color: rgba(255,255,255,0.55);
  font-size: 13px; font-weight: 600; transition: background .14s, color .14s; white-space: nowrap;
}
.nav-item:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.nav-item.active { color: #fff; }
.nav-box {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(255,255,255,0.07); transition: background .14s;
}
.nav-box .msym { color: rgba(255,255,255,0.45); transition: color .14s; }
.nav-item:hover .nav-box .msym { color: rgba(255,255,255,0.75); }
.nav-item.active .nav-box { background: var(--accent-blue); }
.nav-item.active .nav-box .msym { color: var(--bg-dark); }

.icon-btn {
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  cursor: pointer; color: var(--text-secondary); position: relative;
  transition: background .14s, color .14s; border: none; background: transparent;
  text-decoration: none;
}
.icon-btn:hover { background: var(--surface-2); }
.topbar .icon-btn:hover { background: rgba(255,255,255,0.07); color: #fff; }

.module-root { flex: 1; min-height: 0; display: flex; background: var(--content-bg); }
/* Sin esto, un módulo crece hasta el ancho de su contenido más largo (una fila
   que no se parte, un desplegable con una opción larga) y se sale de la
   pantalla en vez de ajustarse a ella. En el escritorio no se nota; en el móvil
   deja media interfaz fuera. */
.module-root > * { min-width: 0; }

/* ===================== GENÉRICOS ===================== */
.label-xs { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.split-pane { display: flex; width: 100%; min-height: 0; }

/* ---- Tabla de Clientes (escritorio) ----
   Densa, como una hoja de cálculo: muchas filas a la vista, una línea por cliente
   y lo que no cabe, en el título de la celda. La cabecera y la primera columna se
   quedan fijas al desplazarse. Cada celda pinta su propio fondo porque la columna
   fija lo necesita opaco, y así el rayado y el resaltado le llegan igual. */
.tabla-cli { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; font-size: 11.5px; }
.tabla-cli th {
  position: sticky; top: 0; z-index: 3; height: 30px; padding: 0 10px; text-align: left;
  background: var(--tabla-cab); color: var(--tabla-cab-texto);
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.tabla-cli th.ordenable { cursor: pointer; }
.tabla-cli th.ordenable:hover, .tabla-cli th.ordenada { color: #fff; }
.tabla-cli td {
  height: 29px; padding: 0 9px; background: var(--content-bg); color: var(--text-primary);
  border-bottom: 1px solid var(--border-light); border-right: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tabla-cli tbody tr { cursor: pointer; }
.tabla-cli tbody tr:nth-child(even) td { background: var(--surface); }
.tabla-cli tbody tr td.cita-on { background: var(--tabla-cita); }
.tabla-cli tbody tr:hover td { background: var(--tint-blue); }
.tabla-cli tbody tr.sel td { background: var(--tint-blue-2); }
.tabla-cli tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent-blue); }
.tabla-cli .fija { position: sticky; z-index: 1; }
.tabla-cli th.fija { z-index: 4; }
/* La última columna fija lleva una sombra a la derecha, que es lo que dice que
   lo de debajo se desplaza */
.tabla-cli .fija-fin { box-shadow: 6px 0 8px -6px rgba(10, 25, 41, 0.18); }
.tabla-cli tbody tr.sel td.fija-fin:first-child { box-shadow: inset 3px 0 0 var(--accent-blue), 6px 0 8px -6px rgba(10, 25, 41, 0.18); }
.tabla-cli .apagado { color: var(--text-muted); }
/* Nota rápida en la columna del comentario: el botón sale al pasar por la fila, y
   el campo ocupa la celda entera */
.tabla-cli .celda-nota { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tabla-cli .celda-nota > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tabla-cli .nota-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  height: 21px; padding: 0 7px; border-radius: 5px; border: 1px solid var(--border-light);
  background: var(--content-bg); color: var(--text-secondary); font-family: var(--font);
  font-size: 10.5px; font-weight: 700; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.tabla-cli tbody tr:hover .nota-btn, .tabla-cli .nota-btn:focus-visible { opacity: 1; }
@media (hover: none) { .tabla-cli .nota-btn { opacity: 1; } }  /* tableta: sin ratón no hay «pasar por encima» */
.tabla-cli .nota-btn:hover { color: var(--accent-blue-deep); border-color: var(--accent-blue); }
.tabla-cli .nota-campo {
  width: 100%; height: 23px; padding: 0 7px; border-radius: 5px; box-sizing: border-box;
  border: 1px solid var(--accent-blue); background: var(--content-bg); color: var(--text-primary);
  font-family: var(--font); font-size: 11.5px; outline: none; cursor: text;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 22%, transparent);
}
.tabla-cli .nota-campo:disabled { opacity: .6; }
.tabla-cli .num { font-variant-numeric: tabular-nums; }

/* La ficha, que se abre al lado de la tabla sin quitarle ancho */
@keyframes deslizar { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.cajon-ficha {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 15; display: flex; flex-direction: column;
  background: var(--content-bg); border-left: 1px solid var(--border-light);
  box-shadow: -18px 0 40px -24px rgba(10, 25, 41, 0.45); animation: deslizar .18s ease;
}

/* Avatar */
.av { border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.badge-pros { background: var(--tint-blue-2); color: var(--accent-blue-deep); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px;
  border-radius: var(--radius-btn); font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: filter .14s, background .14s, transform .06s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: default; }
.btn-action { background: var(--accent-blue); color: var(--bg-dark); font-weight: 700; }
.btn-action:hover:not(:disabled) { filter: brightness(1.06); }
.btn-secondary { background: var(--content-bg); border-color: var(--border-light); color: var(--text-secondary); }
.btn-secondary:hover:not(:disabled) { background: var(--surface); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }
.btn-icon-sq { width: 38px; padding: 0; }

/* Tarjetas */
.card { background: var(--content-bg); border: 1px solid var(--border-light); border-radius: var(--radius-card); }

/* Inputs */
.input {
  width: 100%; height: 40px; padding: 0 13px; border-radius: var(--radius-btn);
  border: 1px solid var(--border-light); background: var(--content-bg);
  font-family: var(--font); font-size: 13px; color: var(--text-primary);
  outline: none; transition: border-color .14s, box-shadow .14s;
}
.input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59,158,235,0.14); }
textarea.input { height: auto; padding: 11px 13px; resize: vertical; line-height: 1.5; }

/* Chips de palabra clave */
.kw {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--text-secondary);
}

/* Píldoras de filtro */
.fpill {
  height: 30px; padding: 0 13px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; transition: background .14s; font-family: var(--font);
}

/* Modal */
.overlay {
  position: fixed; inset: 0; background: rgba(10,25,41,0.5); backdrop-filter: blur(2px);
  z-index: 200; display: grid; place-items: center; animation: fadeIn .18s ease;
}
.modal { background: var(--content-bg); border-radius: 16px; box-shadow: var(--shadow-pop); animation: popIn .2s cubic-bezier(.2,.8,.3,1); }

/* Animaciones */
@keyframes fadeUp { from { transform: translateY(9px); } to { transform: translateY(0); } }
@keyframes fadeIn { from { transform: translateY(2px); } to { transform: translateY(0); } }
@keyframes popIn { from { transform: scale(.97); } to { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-up { animation: fadeUp .34s cubic-bezier(.2,.7,.3,1) both; }
.fade-in { animation: fadeIn .3s ease both; }
.pop-in { animation: popIn .18s cubic-bezier(.2,.8,.3,1) both; }

.spinner {
  width: 15px; height: 15px; border: 2px solid rgba(59,158,235,0.25);
  border-top-color: var(--accent-blue-deep); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block;
}

/* ===================== LOGIN ===================== */
/* Dos paneles: marca a la izquierda (siempre en azul noche, con el mapa de
   territorios de fondo) y acceso a la derecha, que sigue el tema. En el móvil,
   ver el bloque de abajo: la marca pasa a franja y el acceso sube encima.

   .login es quien hace scroll. Los paneles llevan min-height 100% en vez de
   estirarse: estirados medirían justo la pantalla y, en una ventana baja, lo que
   no cupiera quedaría cortado en vez de poder desplazarse. */
.login {
  position: fixed; inset: 0; display: flex; overflow-y: auto;
  background: var(--content-bg); font-family: var(--font);
}

.login-marca {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 auto; min-width: 0; min-height: 100%; align-self: flex-start;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 44px 56px 36px; color: #fff;
  background: linear-gradient(160deg, #0C223A 0%, #0A1929 52%, #07121F 100%);
}
/* Luces de fondo y una trama de puntos que se desvanece hacia abajo */
.login-marca-fondo {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(720px 520px at 10% 6%, rgba(59, 158, 235, 0.26), transparent 62%),
    radial-gradient(640px 520px at 95% 100%, rgba(139, 92, 246, 0.22), transparent 60%),
    radial-gradient(460px 340px at 72% 45%, rgba(234, 88, 12, 0.07), transparent 70%);
}
.login-marca-fondo::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1.3px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}

/* El mapa va a la derecha y se desvanece hacia el texto: es decorado, y detrás
   del titular solo estorbaría la lectura. */
.login-mapa {
  position: absolute; z-index: -1; pointer-events: none;
  right: -14%; top: 50%; transform: translateY(-50%);
  width: min(86%, 780px); height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, 0.35) 30%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, 0.35) 30%, #000 58%);
}
.login-mapa-terr { fill: rgba(148, 190, 235, 0.05); stroke: rgba(170, 205, 245, 0.16); stroke-width: 1.2; stroke-linejoin: round; }
.login-mapa-punto { fill: #8FD0FF; }
.login-mapa-onda {
  fill: none; stroke: #8FD0FF; stroke-width: 2; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: loginLatido 3.4s ease-out infinite;
}
@keyframes loginLatido {
  0% { transform: scale(0.5); opacity: 0.85; }
  75%, 100% { transform: scale(3.4); opacity: 0; }
}

.login-marca-top { display: flex; align-items: center; gap: 14px; }
.login-logo { height: 30px; width: auto; display: block; }
.login-marca-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.18); }
.login-marca-producto { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(226, 236, 248, 0.62); }

.login-marca-cuerpo { max-width: 640px; }
/* balance: reparte las líneas en vez de dejar una palabra suelta al final */
.login-titular { font-size: clamp(32px, 3.2vw, 46px); font-weight: 800; line-height: 1.07; letter-spacing: -0.03em; text-wrap: balance; }
.login-titular-acento {
  background: linear-gradient(90deg, #8FD0FF 0%, #B7A2FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-lema { margin-top: 18px; max-width: 420px; font-size: 16px; line-height: 1.6; color: rgba(226, 236, 248, 0.72); }

.login-ventajas { list-style: none; margin-top: 36px; max-width: 430px; display: flex; flex-direction: column; gap: 18px; }
.login-ventajas li { display: flex; align-items: flex-start; gap: 14px; font-size: 13px; line-height: 1.5; color: rgba(226, 236, 248, 0.6); }
.login-ventajas b { display: block; margin-bottom: 1px; font-size: 14px; font-weight: 700; color: #fff; }
.login-ventaja-ico {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
  color: #8FD0FF; background: rgba(59, 158, 235, 0.13); border: 1px solid rgba(143, 208, 255, 0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.login-marca-pie { font-size: 12px; font-weight: 500; color: rgba(226, 236, 248, 0.4); }

.login-acceso {
  flex: 0 0 clamp(440px, 42vw, 620px); min-height: 100%; align-self: flex-start;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 48px 28px; background: var(--content-bg);
}
.login-form { width: 100%; max-width: 380px; margin: auto 0; display: flex; flex-direction: column; }

.login-eyebrow {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700;
  background: var(--tint-blue-2); color: var(--accent-blue-deep);
}
.login-h { margin-top: 18px; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; color: var(--text-primary); }
.login-sub { margin: 8px 0 30px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }

.login-campo { display: block; margin-bottom: 18px; }
.login-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.login-input {
  display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 6px 0 15px;
  border: 1.5px solid var(--border-light); border-radius: 12px; background: var(--surface); color: var(--text-muted);
  transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
}
.login-input:hover { border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border-light)); }
.login-input:focus-within {
  border-color: var(--accent-blue); background: var(--content-bg); color: var(--accent-blue-deep);
  box-shadow: 0 0 0 4px rgba(59, 158, 235, 0.16);
}
.login-input input {
  flex: 1; min-width: 0; height: 100%; padding-right: 9px; border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: 14.5px; font-weight: 500; color: var(--text-primary);
}
.login-input input::placeholder { color: var(--text-muted); font-weight: 400; }
/* El autocompletado de Chrome pinta el campo de amarillo o azul: se aplaza su
   color de fondo para que el campo siga siendo del mismo tono que los demás. */
.login-input input:-webkit-autofill { -webkit-text-fill-color: var(--text-primary); transition: background-color 99999s ease-out; }
.login-ver {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
  border: none; border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer;
}
.login-ver:hover { background: var(--surface-2); color: var(--text-secondary); }

.login-aviso { display: flex; align-items: center; gap: 7px; margin: -6px 0 16px; font-size: 12.5px; font-weight: 600; color: var(--warn-amber); }
.login-error {
  display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 11px 14px; border-radius: 11px;
  font-size: 13px; font-weight: 600; color: #B91C1C; background: #FEF2F2; border: 1px solid #FECACA;
  animation: fadeIn .2s ease;
}
[data-theme="dark"] .login-error { color: #FCA5A5; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); }

.login-boton {
  width: 100%; height: 50px; margin-top: 6px; gap: 9px; border-radius: 12px; font-size: 15px;
  box-shadow: 0 12px 26px -14px rgba(59, 158, 235, 0.95);
}
.login-boton:disabled { opacity: 0.85; }
.login-spinner { border-color: rgba(10, 25, 41, 0.25); border-top-color: var(--bg-dark); }

.login-ayuda {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--border-light); font-size: 12.5px; line-height: 1.55; color: var(--text-secondary);
}
.login-ayuda .msym { color: var(--text-muted); margin-top: 1px; }
.login-acceso-pie { display: flex; align-items: center; gap: 7px; margin-top: 28px; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }

/* ===================== MÓVIL ===================== */
/* Navegación de abajo: solo existe en el móvil (la pinta app.jsx). */
.nav-movil {
  flex: 0 0 auto; display: flex; z-index: 50;
  background: var(--bg-dark); border-top: 1px solid var(--border-dark);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.nav-movil-item {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 3px 2px; border: none; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.6);
}
.nav-movil-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-movil-ico { width: 48px; height: 28px; border-radius: 14px; display: grid; place-items: center; transition: background .14s; }
.nav-movil-item.active { color: #fff; }
.nav-movil-item.active .nav-movil-ico { background: var(--accent-blue); color: var(--bg-dark); }

/* Misma consulta que MQ_MOVIL en components.jsx: si se toca una, la otra. */
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .topbar {
    height: calc(var(--topbar-h) + env(safe-area-inset-top)); flex-basis: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 10px 0 14px; gap: 10px;
  }
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand-user { overflow: hidden; text-overflow: ellipsis; }

  /* iOS amplía la página al enfocar un campo con letra de menos de 16px, y ya
     no la devuelve a su tamaño. Va con !important porque muchos desplegables
     llevan el tamaño en línea. */
  input, select, textarea { font-size: 16px !important; }

  /* Objetivos táctiles: 30px se quedan cortos para un dedo */
  .btn-sm { height: 36px; }
  .icon-btn { width: 40px; height: 40px; }

  /* Las ventanas pasan a hojas que suben desde abajo, a todo el ancho: al
     centro y con ancho fijo no caben, y abajo quedan al alcance del pulgar. */
  .overlay { place-items: end stretch !important; }
  .modal {
    width: 100% !important; max-width: 100%; max-height: 92dvh; overflow-y: auto;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  }

  /* Login: la marca queda en una franja arriba, sin la lista de ventajas, y el
     acceso sube encima con las esquinas redondeadas de las hojas. */
  .login { flex-direction: column; }
  .login-marca, .login-acceso { align-self: stretch; min-height: 0; }
  .login-marca {
    flex: 0 0 auto; justify-content: flex-start; gap: 26px;
    padding: calc(22px + env(safe-area-inset-top)) 22px 50px;
  }
  .login-mapa {
    width: 118%; right: -52%; top: auto; bottom: -30%; transform: none; opacity: 0.7;
    -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 55%);
    mask-image: linear-gradient(90deg, transparent 8%, #000 55%);
  }
  .login-logo { height: 24px; }
  .login-titular { font-size: 28px; max-width: 320px; }
  .login-lema { margin-top: 10px; max-width: 300px; font-size: 14px; }
  .login-ventajas, .login-marca-pie { display: none; }
  .login-acceso {
    flex: 1 0 auto; position: relative; margin-top: -24px; border-radius: 24px 24px 0 0;
    padding: 28px 20px calc(20px + env(safe-area-inset-bottom));
  }
  .login-form { max-width: 460px; margin: 0; }
  .login-h { margin-top: 14px; font-size: 25px; }
  .login-sub { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}