/* ============================================================
   [UI-4] Portal de clientes · tema visual 2027 (solo estética)
   Mismo estilo que ARASYS (UI-2/UI-3). Se carga después de
   styles.css. Para volver al diseño anterior, quitar el <link>
   de este archivo en index.html.
   ============================================================ */

/* ---------- Tokens: tema claro ---------- */
:root {
  --tinta: #0f172a;
  --tinta-2: #475569;
  --tinta-3: #7b8aa1;
  --papel: #f3f5f9;
  --hoja: #ffffff;
  --linea: #e1e7ef;
  --linea-suave: #eef2f7;
  --azul: #1f6feb;
  --azul-fuerte: #1f6feb;
  --azul-tenue: #e6efff;
  --cielo: #0ea5c6;
  --ambar: #b45309;
  --ambar-tenue: #fdf3e2;
  --verde: #15803d;
  --verde-tenue: #e3f6ea;
  --rojo: #be123c;
  --rojo-tenue: #fde7ec;

  --r-chico: 12px;
  --r: 18px;
  --familia: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulos: "Inter Display", "Inter", system-ui, sans-serif;
  --grad: linear-gradient(135deg, #1f6feb 0%, #0ea5c6 100%);
  --sombra: 0 1px 2px rgba(15,23,42,.05), 0 6px 18px rgba(15,23,42,.06);
  --sombra-alta: 0 10px 30px rgba(15,23,42,.12);
  --enfoque: 0 0 0 3px color-mix(in srgb, var(--azul) 35%, transparent);
}

/* ---------- Tokens: tema oscuro ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #eaf0fa;
    --tinta-2: #9fadc4;
    --tinta-3: #6f7f99;
    --papel: #070b14;
    --hoja: #111a2e;
    --linea: #1f2b44;
    --linea-suave: #16213a;
    --azul: #2f8bff;
    --azul-fuerte: #6cb0ff;
    --azul-tenue: #12264a;
    --cielo: #38d3f5;
    --ambar: #f5b041;
    --ambar-tenue: #2a1f0b;
    --verde: #34d399;
    --verde-tenue: #0c2a20;
    --rojo: #fb7185;
    --rojo-tenue: #33121c;
    --grad: linear-gradient(135deg, #2f8bff 0%, #38d3f5 100%);
    --sombra: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
    --sombra-alta: 0 16px 40px rgba(0,0,0,.45);
  }
}

/* ---------- Base ---------- */
body {
  font-family: var(--familia);
  font-variation-settings: normal;
  background:
    radial-gradient(700px 420px at 100% -5%, color-mix(in srgb, var(--azul) 12%, transparent), transparent 65%),
    radial-gradient(600px 400px at -10% 100%, color-mix(in srgb, var(--cielo) 7%, transparent), transparent 65%),
    var(--papel);
  background-attachment: fixed;
}
h1, h2, h3, .titulo-seccion, .ficha-estado, .acceso h1 {
  font-family: var(--titulos);
  font-variation-settings: normal;
}
::selection { background: color-mix(in srgb, var(--azul) 30%, transparent); }

/* ---------- Barra superior ---------- */
.barra {
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--linea) 70%, transparent);
}
.boton-texto {
  border: 1px solid var(--linea); border-radius: 999px; padding: 6px 14px;
  background: var(--hoja); font-weight: 600; font-size: 14px;
}
.boton-texto:hover { border-color: color-mix(in srgb, var(--azul) 45%, var(--linea)); }

/* Pestañas: barra flotante en el celular */
.pestanas {
  left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 6px; gap: 4px;
  background: color-mix(in srgb, var(--hoja) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--linea);
  border-radius: 20px;
  box-shadow: var(--sombra-alta);
}
.pestanas a {
  min-height: 48px; border-top: 0; border-radius: 14px;
  transition: background .15s ease, color .15s ease;
}
.pestanas a[aria-current="page"] {
  color: var(--azul-fuerte);
  background: var(--azul-tenue);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--azul) 25%, transparent);
}
body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

@media (min-width: 760px) {
  body { padding-bottom: 32px; }
  .pestanas {
    padding: 4px; border-radius: 14px; box-shadow: none;
    background: var(--hoja); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .pestanas a { min-height: 36px; border-bottom: 0; border-radius: 10px; font-size: 14px; }
}

/* ---------- Títulos ---------- */
.titulo-seccion { font-size: 30px; font-weight: 750; letter-spacing: -.03em; }
.subtitulo { font-family: var(--titulos); font-size: 18px; letter-spacing: -.01em; }

/* ---------- Acceso ---------- */
.acceso h1 { font-weight: 800; letter-spacing: -.035em; }
.acceso h1::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: 14px;
  border-radius: 99px; background: var(--grad);
}
.campo label { color: var(--tinta); }

/* ---------- Campos ---------- */
.entrada {
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--hoja);
  box-shadow: var(--sombra);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.entrada:focus { border-color: var(--azul); box-shadow: var(--enfoque); }

/* ---------- Botones ---------- */
.boton {
  border-radius: 14px;
  background: var(--grad);
  color: #fff;
  font-weight: 650;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--azul) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s ease, filter .15s ease;
}
@media (prefers-color-scheme: dark) { .boton { background: var(--grad); color: #fff; } }
.boton:hover { filter: brightness(1.07); transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton-secundario,
.boton.boton-secundario {
  background: var(--hoja); color: var(--tinta);
  border: 1px solid var(--linea); box-shadow: var(--sombra);
}
@media (prefers-color-scheme: dark) { .boton.boton-secundario { background: var(--hoja); color: var(--tinta); } }
.boton.boton-whatsapp {
  background: linear-gradient(135deg, #1fa855 0%, #25d366 100%); color: #fff;
  box-shadow: 0 8px 20px rgba(37,211,102,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
.enc-google { background: #fff !important; color: #202124 !important; }

/* ---------- Tarjetas informativas ---------- */
.nota-qr {
  border: 1px solid var(--linea); border-left: 0; border-radius: var(--r);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--azul) 10%, transparent), transparent 60%),
    var(--hoja);
  box-shadow: var(--sombra);
  position: relative; padding-left: 20px;
}
.nota-qr::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--grad);
}

/* ---------- Listas como tarjetas ---------- */
.lista { border-top: 0; display: grid; gap: 10px; }
.lista > li {
  border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--hoja); box-shadow: var(--sombra);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lista > li:hover {
  border-color: color-mix(in srgb, var(--azul) 40%, var(--linea));
  transform: translateY(-1px); box-shadow: var(--sombra-alta);
}
.renglon { padding: 16px 16px; }
.renglon-titulo { letter-spacing: -.01em; }

/* Etiquetas de estado con punto */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-weight: 600;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.etiqueta::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* ---------- Ficha del equipo ---------- */
.volver {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--hoja); font-size: 14px;
}
.volver::before { content: "←"; }
.ficha-folio {
  display: inline-block; margin-top: 18px; padding: 3px 10px; border-radius: 999px;
  background: var(--azul-tenue); color: var(--azul-fuerte); font-weight: 600; font-size: 13px;
}
.ficha-estado { font-weight: 800; letter-spacing: -.035em; }

.pista li::before { height: 8px; border-radius: 99px; }
.pista li.hecho::before { background: var(--grad); }
.pista li.actual::before {
  background: var(--grad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 22%, transparent), 0 0 14px color-mix(in srgb, var(--azul) 45%, transparent);
}
.pista.terminado li::before { background: var(--verde); box-shadow: none; }
.pista.detenido li.actual::before { background: var(--rojo); }

.datos {
  border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--hoja); box-shadow: var(--sombra);
  padding: 4px 16px;
}
.datos > div:nth-last-child(-n+2) { border-bottom: 0; }

.saldo {
  border: 1px solid color-mix(in srgb, var(--ambar) 30%, transparent);
  border-radius: var(--r);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--ambar) 18%, transparent), transparent 60%),
    var(--ambar-tenue);
}
.saldo.liquidado {
  border-color: color-mix(in srgb, var(--verde) 30%, transparent);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--verde) 18%, transparent), transparent 60%),
    var(--verde-tenue);
}
.saldo strong { font-family: var(--titulos); font-size: 28px; letter-spacing: -.02em; font-variation-settings: normal; }

.tiempo { border-left-color: var(--linea); }
.tiempo li::before { border-color: var(--azul); }
.tiempo li:first-child::before {
  background: var(--grad); border-color: transparent;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 20%, transparent);
}

.fotos a { border-radius: 14px; border: 1px solid var(--linea); }

.invitacion { border: 1px dashed color-mix(in srgb, var(--azul) 40%, var(--linea)); border-radius: var(--r); background: var(--hoja); }

/* ---------- Ayuda / conversación ---------- */
.globo { border-radius: 18px; box-shadow: var(--sombra); }
.globo.mio { background: var(--azul-tenue); }
.redactar { background: color-mix(in srgb, var(--papel) 92%, transparent); bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 760px) { .redactar { bottom: 0; } }
.icono-boton { border-radius: var(--r-chico); border: 1px solid var(--linea); }
.archivos button { border-color: var(--linea); }

/* ---------- Aviso flotante ---------- */
.aviso {
  border-radius: 14px; box-shadow: var(--sombra-alta);
  bottom: calc(100px + env(safe-area-inset-bottom));
}
@media (min-width: 760px) { .aviso { bottom: 24px; } }

/* ---------- Encuesta ---------- */
.enc-equipo { border: 1px solid color-mix(in srgb, var(--azul) 20%, transparent); }
.enc-nps-b { border-radius: 10px; }
.enc-nps-b.on { background: var(--grad); border-color: transparent; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .lista > li, .boton { transition: none; }
  .lista > li:hover, .boton:hover { transform: none; }
}

/* El contenido recibe el foco al cambiar de sección: sin marco visible */
main:focus, main:focus-visible { box-shadow: none; outline: none; }