/* ============================================================
   CREDICELL · Sistema visual (todas las páginas)
   Colores oficiales de la tienda Credicell. Se carga DESPUÉS
   del <style> de cada página y lo reemplaza.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Marca */
  --azul:#0085C7; --turquesa:#00C7BE; --coral:#FF5E3A; --amarillo:#FFDD00; --fucsia:#FF007B;
  /* Sitio */
  --navy:#001B3F; --navy2:#0A1633; --real:#0B3A7E; --real2:#2D8BFF;
  --cian:#00B8D4; --cian2:#00DFF0; --amar2:#FFCF00;
  --ok:#0E7A43; --ok-bg:#E8F8EF; --err:#D93A1F; --err-bg:#FFF0EC;
  --txt:#0A1633; --sub:#4A5168; --sub2:#33415C;
  --gris:#F6F8FC; --gris2:#EEF2F8; --borde:#E6E9F2;
  /* Compatibilidad: las páginas usan --morado / --morado2 */
  --morado:#0B3A7E; --morado2:#2D8BFF; --morado3:#00B8D4;
  --grad:linear-gradient(135deg,#0B3A7E 0%,#0085C7 60%,#00B8D4 100%);
  --grad-btn:linear-gradient(135deg,#0B3A7E 0%,#2D8BFF 100%);
  --grad-marca:linear-gradient(90deg,#0085C7,#00C7BE,#FFDD00,#FF5E3A,#FF007B);
  --sombra:0 1px 2px rgba(0,27,63,.05), 0 14px 36px rgba(0,27,63,.08);
  --radio:18px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif !important;
  color:var(--txt) !important;
  background:
    radial-gradient(1000px 420px at 100% -180px, rgba(0,184,212,.10) 0%, rgba(0,184,212,0) 70%),
    radial-gradient(800px 380px at -10% -60px, rgba(45,139,255,.09) 0%, rgba(45,139,255,0) 60%),
    var(--gris) !important;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,strong.marca,.titulo{ font-family:'Poppins','Segoe UI',system-ui,sans-serif; }

/* ---------- Cabecera ---------- */
header{
  background:var(--navy) !important;
  color:#fff !important;
  padding:12px 26px !important;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  box-shadow:0 10px 30px rgba(0,27,63,.25) !important;
  border:0 !important;
  position:sticky; top:0; z-index:40;
}
header::after{ /* franja con los colores de la marca */
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:var(--grad-marca);
}
header img{ height:40px !important; width:auto; border-radius:0 !important; background:none !important; padding:0 !important; }
header strong{
  font-family:'Poppins',sans-serif; font-weight:800 !important; font-size:20px !important; letter-spacing:.2px; color:#fff;
}
header h1{
  font-family:'Inter',sans-serif; font-size:14px !important; font-weight:500 !important; margin:0 !important;
  color:var(--cian2) !important; opacity:1 !important;
  padding-left:14px; border-left:1px solid rgba(255,255,255,.18);
}
header small{ color:rgba(255,255,255,.75) !important; font-size:12.5px; }
header a, header .u, header span.u{
  color:#fff !important; opacity:1 !important; font-size:14px !important; font-weight:600;
  text-decoration:none !important; padding:8px 14px !important; border-radius:999px !important;
  background:rgba(255,255,255,.08); transition:background .15s, transform .12s; cursor:pointer;
}
header a:hover{ background:rgba(0,184,212,.25) !important; transform:translateY(-1px); }
header .sp{ margin-left:auto !important; }
header a{ margin-left:0 !important; }
header #userLabel{ color:rgba(255,255,255,.75) !important; font-size:13px !important; }
.row button{ white-space:nowrap; }
header #estadoServidor{ background:rgba(255,255,255,.08); padding:5px 11px; border-radius:999px; }

/* ---------- Layout ---------- */
main{ max-width:1100px !important; margin:30px auto !important; padding:0 18px !important; }

/* ---------- Tarjetas ---------- */
.card{
  background:#fff !important;
  border:1px solid var(--borde) !important;
  border-radius:var(--radio) !important;
  padding:26px 28px !important;
  margin-bottom:20px !important;
  box-shadow:var(--sombra) !important;
}
.card > h2{
  font-family:'Poppins',sans-serif;
  font-size:17px !important; font-weight:700 !important; color:var(--navy) !important;
  text-transform:none !important; letter-spacing:0 !important;
  margin:0 0 18px !important; padding:0 0 14px 16px !important;
  border-bottom:1px solid var(--gris2) !important; position:relative;
}
.card > h2::before{
  content:""; position:absolute; left:0; top:2px; width:5px; height:20px; border-radius:4px;
  background:linear-gradient(180deg,var(--azul),var(--turquesa));
}

/* ---------- Textos ---------- */
label{ font-size:12.5px !important; font-weight:600 !important; color:var(--sub2) !important; letter-spacing:.15px; }
.muted, .hint{ color:var(--sub) !important; }
a{ color:var(--real2); }

/* ---------- Campos ---------- */
input, select, textarea{
  border:1.5px solid var(--borde) !important; border-radius:12px !important;
  background:#fff !important; padding:12px 14px !important; font-size:15px !important;
  color:var(--txt) !important; font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover{ border-color:#C9D2E6 !important; }
input:focus, select:focus, textarea:focus{
  outline:none !important; border-color:var(--real2) !important;
  box-shadow:0 0 0 4px rgba(45,139,255,.16) !important;
}
input.err, select.err{ border-color:var(--err) !important; box-shadow:0 0 0 4px rgba(217,58,31,.12) !important; }
input[readonly]{ background:var(--gris) !important; }

/* ---------- Botones ---------- */
button, .btn{
  background:var(--grad-btn) !important; color:#fff !important; border:0 !important;
  border-radius:12px !important; padding:12px 22px !important;
  font-family:'Poppins',sans-serif; font-size:15px !important; font-weight:600 !important; letter-spacing:.2px;
  cursor:pointer; box-shadow:0 8px 18px rgba(11,58,126,.25);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover, .btn:hover{ filter:brightness(1.07); box-shadow:0 12px 26px rgba(11,58,126,.32); transform:translateY(-2px); }
button:active, .btn:active{ transform:translateY(0); box-shadow:0 5px 12px rgba(11,58,126,.28); }
button:disabled{ opacity:.5; box-shadow:none; transform:none; filter:none; cursor:not-allowed; }
button.ghost, button.gris{ background:var(--gris2) !important; color:var(--sub2) !important; box-shadow:none !important; }
button.ghost:hover, button.gris:hover{ background:var(--borde) !important; filter:none; }
button.rojo, #dEliminar{ background:linear-gradient(135deg,#FF5E3A,#D93A1F) !important; box-shadow:0 8px 18px rgba(217,58,31,.25) !important; }
button.cat{
  background:#fff !important; color:var(--navy) !important; border:2px solid var(--borde) !important;
  box-shadow:none !important; text-align:left; padding:15px 18px !important;
}
button.cat:hover{ border-color:var(--cian) !important; background:#F0FBFD !important; }

/* ---------- Estadísticas ---------- */
.stats{ gap:14px !important; }
.stat{
  background:#fff !important; border:1px solid var(--borde) !important;
  border-radius:16px !important; padding:16px 20px !important; min-width:128px !important;
  box-shadow:0 6px 16px rgba(0,27,63,.05); transition:.15s; cursor:pointer;
}
.stat:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,27,63,.10); border-color:#BFE9F2 !important; }
.stat b{ font-family:'Poppins',sans-serif; font-size:27px !important; font-weight:700 !important; color:var(--real) !important; }
.stat span{ color:var(--sub) !important; }
.stat.activo{ background:var(--grad) !important; border-color:transparent !important; }
.stat.activo b, .stat.activo span{ color:#fff !important; }

/* ---------- Chips ---------- */
.chip{
  background:#fff !important; border:1.5px solid var(--borde) !important; color:var(--sub2) !important;
  border-radius:999px !important; padding:8px 16px !important; font-weight:600 !important; transition:.12s;
}
.chip:hover{ border-color:var(--cian) !important; color:var(--real) !important; }
.chip.activo{ background:var(--navy) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 6px 14px rgba(0,27,63,.22); }

/* ---------- Badges / estados ---------- */
.badge{ border-radius:999px !important; padding:4px 12px !important; font-weight:700 !important; }
.b-ok{ background:var(--ok-bg) !important; color:var(--ok) !important; }
.b-err{ background:var(--err-bg) !important; color:var(--err) !important; }
.b-otro{ background:#EAF3FF !important; color:var(--real) !important; }
.estado.info{ background:#EAF3FF !important; color:var(--real) !important; }
.estado.ok{ background:var(--ok-bg) !important; color:var(--ok) !important; border-color:#BFE6CF !important; }
.estado.err{ background:var(--err-bg) !important; color:var(--err) !important; border-color:#FFD0C4 !important; }
.pill{ background:var(--gris2) !important; color:var(--sub2); }
.ok{ color:var(--ok) !important; } .bad{ color:var(--err) !important; }

/* ---------- Tablas ---------- */
table{ border-collapse:separate !important; border-spacing:0 !important; }
th{ color:#7B849C !important; font-weight:700 !important; font-size:11px !important; text-transform:uppercase; letter-spacing:.6px; padding:12px !important; }
td{ padding:13px 12px !important; border-bottom:1px solid var(--gris2) !important; }
tbody tr[data-id]{ transition:background .12s; cursor:pointer; }
tbody tr[data-id]:hover{ background:#F2F8FF !important; }

/* ---------- Autoestudio del cliente ---------- */
.card .center h2, .card h2{ color:var(--navy); }
.prog{ background:var(--gris2) !important; border-radius:999px !important; height:10px !important; }
.prog-fill{ background:linear-gradient(90deg,var(--azul),var(--turquesa)) !important; border-radius:999px !important; }
.prog-pct{ color:var(--sub) !important; }
.spin{ border-color:var(--gris2) !important; border-top-color:var(--cian) !important; }
.fotoBtn{
  border-radius:16px !important; background:#F0FBFD !important; color:var(--real) !important;
  border:2px dashed var(--cian) !important;
}
.fotoBtn:hover{ background:#E2F7FA !important; }
.guia{ background:var(--gris) !important; border:1px solid var(--borde) !important; color:var(--sub) !important; }
.toast{ background:var(--navy) !important; }
.otp{ color:var(--navy); }

/* Página del cliente: cabecera compacta centrada */
body.cliente header{ justify-content:center; padding:12px 16px !important; }
body.cliente header img{ height:44px !important; }
body.cliente main{ margin:0 auto !important; }
.pie-marca{ text-align:center; font-size:12px; color:var(--sub); padding:14px 0 22px; }
.pie-marca b{ color:var(--navy); }

/* Login */
body.login{ display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(700px 500px at 85% 10%, rgba(0,184,212,.28), rgba(0,184,212,0) 60%),
    radial-gradient(600px 500px at 10% 90%, rgba(255,0,123,.18), rgba(255,0,123,0) 60%),
    var(--navy) !important; }
body.login .card{ width:360px; border:0 !important; position:relative; overflow:hidden; }
body.login .card::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--grad-marca); }
body.login h1{ color:var(--navy) !important; font-family:'Poppins',sans-serif; }
body.login #verPass{ color:var(--real2) !important; }

/* ============================================================
   Movimiento (más dinámico) — se respeta "reducir movimiento"
   ============================================================ */
@keyframes ui-sube{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes ui-entra{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
@keyframes ui-brillo{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }
@keyframes ui-onda{ from{ transform:scale(0); opacity:.35; } to{ transform:scale(1); opacity:0; } }
@keyframes ui-pulso{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,184,212,.45); } 50%{ box-shadow:0 0 0 8px rgba(0,184,212,0); } }

/* Franja de marca animada */
header::after{ background-size:200% 100% !important; background-image:linear-gradient(90deg,#0085C7,#00C7BE,#FFDD00,#FF5E3A,#FF007B,#0085C7,#00C7BE) !important; animation:ui-brillo 8s linear infinite; }
header{ transition:padding .2s ease, box-shadow .2s ease; }
body.ui-scroll header{ padding-top:8px !important; padding-bottom:8px !important; box-shadow:0 6px 18px rgba(0,27,63,.35) !important; }
header img{ transition:transform .3s ease; }
header img:hover{ transform:rotate(-8deg) scale(1.08); }

/* Tarjetas y estadísticas entran escalonadas */
main > .card, main > div > .card, main .card{ animation:ui-sube .45s ease both; }
main .card:nth-of-type(2){ animation-delay:.06s; } main .card:nth-of-type(3){ animation-delay:.12s; }
main .card:nth-of-type(4){ animation-delay:.18s; } main .card:nth-of-type(5){ animation-delay:.24s; }
.card{ transition:box-shadow .2s ease, transform .2s ease; }
.stats .stat{ animation:ui-sube .45s ease both; position:relative; overflow:hidden; }
.stats .stat:nth-child(2){ animation-delay:.05s; } .stats .stat:nth-child(3){ animation-delay:.10s; }
.stats .stat:nth-child(4){ animation-delay:.15s; } .stats .stat:nth-child(5){ animation-delay:.20s; } .stats .stat:nth-child(6){ animation-delay:.25s; }
.stat::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--azul),var(--turquesa)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.stat:hover::after, .stat.activo::after{ transform:scaleX(1); }
.stat.activo::after{ background:var(--amarillo); }

/* Filas de tabla aparecen en cascada */
tbody tr{ animation:ui-entra .35s ease both; }
tbody tr:nth-child(1){animation-delay:.02s} tbody tr:nth-child(2){animation-delay:.04s} tbody tr:nth-child(3){animation-delay:.06s}
tbody tr:nth-child(4){animation-delay:.08s} tbody tr:nth-child(5){animation-delay:.10s} tbody tr:nth-child(6){animation-delay:.12s}
tbody tr:nth-child(7){animation-delay:.14s} tbody tr:nth-child(8){animation-delay:.16s} tbody tr:nth-child(9){animation-delay:.18s}
tbody tr:nth-child(n+10){animation-delay:.2s}
tbody tr[data-id]:hover td:first-child{ box-shadow:inset 4px 0 0 var(--cian); }

/* Botones / chips: onda al tocar y brillo */
button, .btn, .chip{ position:relative; overflow:hidden; }
.ui-onda{ position:absolute; border-radius:50%; background:rgba(255,255,255,.7); pointer-events:none; animation:ui-onda .6s ease-out forwards; }
.chip .ui-onda, button.ghost .ui-onda, button.gris .ui-onda, button.cat .ui-onda, .stat .ui-onda{ background:rgba(0,133,199,.25); }
.chip.activo{ animation:ui-pulso 2.4s ease-in-out 2; }

/* Campos: etiqueta se ilumina al escribir */
label{ transition:color .15s; }
div:focus-within > label, label:focus-within{ color:var(--real2) !important; }

/* Badges con un toque */
.badge{ transition:transform .15s; display:inline-block; }
tr:hover .badge{ transform:translateY(-1px); }

/* Autoestudio: cada pantalla entra suave */
body.cliente #content > *{ animation:ui-sube .4s ease both; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

@media (max-width:640px){
  header{ padding:10px 14px !important; gap:8px; }
  header h1{ display:none; }
  header a{ padding:7px 11px !important; font-size:13px !important; }
  .card{ padding:20px 18px !important; }
}