/* Base: variables de marca (Manual gráfico Banco Internacional), fondo,
   layout, botones, formularios y utilidades.
   Los colores de :root se pueden sobrescribir desde config.js (MARCA.colores).
   Tipografía del manual: Open Sans Regular / Semibold / Extrabold italic. */

:root{
  /* marca */
  --navy:#2B1B71; --indigo:#413BBC; --cian:#22ACCC; --cian-claro:#6EC6CF; --purpura:#953CBA;
  /* valores */
  --agilidad:#89A7CF; --valentia:#A5D65A; --excelencia:#F48B8C; --transparencia:#6EC6CF; --empatia:#D98EC5;
  /* nombres heredados de la versión anterior (los usa el resto del CSS/JS) */
  --azul:var(--indigo); --azul-deep:var(--navy); --aqua:var(--cian); --lima:var(--valentia);
  --celeste:var(--agilidad); --amarillo:var(--excelencia);
  --ink:#2B1B71; --ink-soft:#6A6390; --line:#E3E0F0; --card:#FFFFFF;
  --ok:#4C7F17; --bad:#D9506A;
  --radius:22px;
  --fondo-1:#3A2A8A; --fondo-2:#2B1B71; --fondo-3:#22165E; --fondo-4:#1A1049;
  --shadow:0 10px 30px rgba(20,10,60,.28);
  --font:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);min-height:100vh;line-height:1.5;background:var(--fondo-2)}
/* Fondo: navy con los círculos superpuestos del manual (recurso gráfico) */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:linear-gradient(180deg,var(--fondo-1) 0%,var(--fondo-2) 38%,var(--fondo-3) 80%,var(--fondo-4) 100%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(circle at 0 0,transparent 58px,rgba(255,255,255,.07) 59px,rgba(255,255,255,.07) 62px,transparent 63px),
    radial-gradient(circle at 100% 0,transparent 58px,rgba(255,255,255,.07) 59px,rgba(255,255,255,.07) 62px,transparent 63px),
    radial-gradient(circle at 0 100%,transparent 58px,rgba(255,255,255,.07) 59px,rgba(255,255,255,.07) 62px,transparent 63px),
    radial-gradient(circle at 100% 100%,transparent 58px,rgba(255,255,255,.07) 59px,rgba(255,255,255,.07) 62px,transparent 63px);
  background-size:120px 120px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 55%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 55%)}
.display{font-family:var(--font);font-weight:700;letter-spacing:-.01em}

#app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative}
main{flex:1;padding:16px 18px 100px}
header.top{padding:18px 18px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
header.top .brand-logo{height:30px;width:auto;display:block}
header.top .rgt{display:flex;align-items:center;gap:8px}
header.top .day-pill{font-size:.74rem;font-weight:700;padding:6px 13px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;white-space:nowrap}
/* Franja superior con los 5 colores de los valores */
.top-franja{display:flex;width:100%;height:6px;flex-shrink:0}
.top-franja i{flex:1}
.top-franja i:nth-child(1){background:var(--agilidad)} .top-franja i:nth-child(2){background:var(--valentia)}
.top-franja i:nth-child(3){background:var(--excelencia)} .top-franja i:nth-child(4){background:var(--transparencia)}
.top-franja i:nth-child(5){background:var(--empatia)}
.snd-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:99px;width:32px;height:32px;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center}
nav.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;border-top:1px solid var(--line);display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 24px rgba(20,10,60,.18)}
nav.tabs button{flex:1;background:none;border:none;padding:11px 4px 9px;cursor:pointer;font-family:var(--font);font-size:.7rem;font-weight:600;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
nav.tabs button .ico{font-size:1.1rem;line-height:1}
nav.tabs button.active{color:var(--navy);font-weight:800}
nav.tabs button.active::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--cian)}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
/* Botón principal: píldora cian con texto navy (como el destacado del manual) */
.btn{display:block;width:100%;padding:15px 18px;border:none;border-radius:99px;background:var(--cian);color:var(--navy);font-family:var(--font);font-size:1rem;font-weight:800;cursor:pointer;transition:transform .1s,filter .15s}
.btn:active{transform:scale(.98);filter:brightness(.95)}
.btn:focus-visible,.btn-link:focus-visible,nav.tabs button:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--navy)}
.btn[disabled]{opacity:.45;cursor:default}
.btn.dark{background:var(--navy);color:#fff}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff}
.btn.ghost-dark{background:#F1EFF8;color:var(--navy);border:1.5px solid var(--line)}
.btn.light{background:#fff;color:var(--navy)}
.btn-link{background:none;border:none;color:var(--indigo);font-family:var(--font);font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:underline;padding:4px}
.btn-link[disabled]{opacity:.5;cursor:default;text-decoration:none}
label{display:block;font-size:.8rem;font-weight:700;margin:16px 0 6px;color:var(--ink)}
input,textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--font);font-size:1rem;background:#F7F6FB;color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--cian);outline-offset:1px;border-color:var(--cian);background:#fff}
input:disabled{opacity:.7}
.hint{font-size:.8rem;color:var(--ink-soft);margin-top:6px}
.err{font-size:.84rem;color:var(--bad);font-weight:700;margin-top:8px;display:none}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.action-line{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.action-line button,.refresh-line button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:7px 16px;font-family:var(--font);font-size:.8rem;font-weight:600;color:#fff;cursor:pointer;white-space:nowrap}
.refresh-line{text-align:center;margin-top:16px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#fff;border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.stat b{font-size:1.5rem;font-weight:800;color:var(--navy)}
.stat small{display:block;font-size:.72rem;color:var(--ink-soft);margin-top:2px}

.demo-banner{background:#FFF1F1;border:1px solid #F6C2C3;color:#8A2C2D;font-size:.78rem;font-weight:700;padding:10px 12px;border-radius:12px;margin-bottom:16px}
.screen{display:none}
.screen.active{display:block;animation:fadein .25s}
.spinner{width:26px;height:26px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:99px;margin:40px auto;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}