@font-face{font-family:'Libre Baskerville';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/libre-baskerville-700.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/atkinson-400.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/atkinson-700.woff2) format('woff2')}

:root{
  --rey:#1B3A9E; --rey-osc:#142c7a; --claro:#1E78C0; --claro-txt:#1667A8;
  --tinta:#16213f; --gris:#56617a; --linea:#dbe2ef; --fondo:#f3f6fb; --blanco:#fff;
  --ok:#17663f; --ok-bg:#e5f5ec; --err:#a8271d; --err-bg:#fdecea; --amb:#7a4f00; --amb-bg:#fff3d6;
  --serif:'Libre Baskerville',Georgia,serif;
  --texto:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--texto);font-size:16px;line-height:1.5;color:var(--tinta);background:var(--fondo);min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--claro-txt)}
.hidden{display:none!important}

/* ---------- Marca ---------- */
.marca{display:flex;align-items:center;gap:10px;min-width:0}
.marca img{width:36px;height:36px;flex:none}
.marca .nom{font-family:var(--serif);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--rey);line-height:1.15;font-size:13px}
.marca .nom small{display:block;font-family:var(--texto);font-weight:700;letter-spacing:.12em;color:var(--claro-txt);font-size:10.5px}

/* ---------- Login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login .caja{width:100%;max-width:380px;background:var(--blanco);border:1px solid var(--linea);border-radius:20px;padding:28px 22px;box-shadow:0 18px 40px -24px rgba(27,58,158,.35)}
.login .logo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:22px}
.login .logo img{width:64px;height:64px}
.login .logo .nom{font-family:var(--serif);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--rey);font-size:17px;line-height:1.3}
.login .logo .sub{color:var(--claro-txt);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.login .pie{margin-top:18px;font-size:13px;color:var(--gris);text-align:center}

label{display:block;font-weight:700;font-size:14px;margin:14px 0 6px}
input[type=text],input[type=password],input[type=search],input[type=tel],textarea,select{
  width:100%;background:var(--blanco);border:1.5px solid var(--linea);border-radius:12px;padding:12px 13px;font-size:16px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--claro);box-shadow:0 0 0 3px rgba(30,120,192,.15)}
textarea{min-height:90px;resize:vertical}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 16px;border-radius:12px;border:0;
  background:var(--rey);color:#fff;font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){background:var(--rey-osc)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.full{width:100%;margin-top:20px}
.btn.sec{background:var(--blanco);color:var(--rey);border:1.5px solid var(--linea)}
.btn.sec:hover:not(:disabled){background:#eef3fb}
.btn.peligro{background:var(--blanco);color:var(--err);border:1.5px solid #f0c9c4}
.btn.ok{background:var(--ok)}
.btn.chico{min-height:38px;padding:7px 12px;font-size:14px}
.lnk{background:none;border:0;color:var(--claro-txt);font-weight:700;cursor:pointer;padding:4px 0;font-size:14px;text-decoration:underline}

.aviso{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:15px}
.aviso.err{background:var(--err-bg);color:var(--err)}
.aviso.ok{background:var(--ok-bg);color:var(--ok)}
.aviso.info{background:#e8f1fb;color:var(--claro-txt)}

/* ---------- App ---------- */
header.top{position:sticky;top:0;z-index:20;background:var(--blanco);border-bottom:1px solid var(--linea)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;max-width:900px;margin:0 auto}
.usr{position:relative}
.usr>button{background:#eef3fb;border:0;border-radius:999px;min-height:40px;padding:6px 12px;font-weight:700;color:var(--rey);cursor:pointer;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu{position:absolute;right:0;top:46px;background:var(--blanco);border:1px solid var(--linea);border-radius:12px;box-shadow:0 12px 30px -12px rgba(0,0,0,.25);min-width:200px;padding:6px;z-index:30}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:12px;border-radius:8px;cursor:pointer;font-size:15px}
.menu button:hover{background:#eef3fb}
.menu .quien{padding:8px 12px;color:var(--gris);font-size:13px;border-bottom:1px solid var(--linea);margin-bottom:4px}

nav.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 12px;max-width:900px;margin:0 auto}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{flex:none;background:none;border:0;border-bottom:3px solid transparent;padding:10px 10px 9px;font-weight:700;color:var(--gris);cursor:pointer;font-size:15px;white-space:nowrap}
nav.tabs button.on{color:var(--rey);border-bottom-color:var(--rey)}
.badge{display:inline-block;min-width:20px;padding:0 6px;margin-left:5px;border-radius:999px;background:var(--claro);color:#fff;font-size:12px;line-height:20px;text-align:center}
.badge.alerta{background:var(--err)}

main{max-width:900px;margin:0 auto;padding:16px 16px 60px}
h1{font-family:var(--serif);font-size:20px;color:var(--rey);margin:4px 0 4px}
h2{font-size:17px;margin:22px 0 8px;color:var(--tinta)}
h3{font-size:15px;margin:18px 0 8px;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}
p.sub{color:var(--gris);font-size:14.5px;margin-bottom:12px}
.act{color:var(--gris);font-size:12.5px}

.item{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:14px;margin-bottom:10px}
.item.hecho{opacity:.7}
.item .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-weight:700;font-size:16px}
.item .meta{color:var(--gris);font-size:14.5px;margin-top:3px;word-break:break-word}
.item ul{list-style:none;margin-top:8px}
.item li{padding:3px 0;font-size:15px}
.item li small,.item small{display:block;color:var(--gris);font-size:13.5px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.acciones .btn{flex:1 1 auto}
.chip{flex:none;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:#eef1f6;color:var(--gris);white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.err{background:var(--err-bg);color:var(--err)}
.chip.amb{background:var(--amb-bg);color:var(--amb)}
.vacio{background:var(--blanco);border:1px dashed var(--linea);border-radius:var(--r);padding:22px 16px;text-align:center;color:var(--gris)}

.seg{display:inline-flex;background:#e7ecf5;border-radius:12px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:8px 13px;border-radius:9px;font-weight:700;color:var(--gris);cursor:pointer;min-height:38px}
.seg button.on{background:var(--blanco);color:var(--rey);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.fila{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}

/* Precios */
.caja{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:14px;margin-bottom:14px}
.caja.sync{border-left:4px solid var(--claro)}
.caja .tit{font-weight:700;font-size:16px}
.cambio{padding:10px 0;border-bottom:1px solid var(--linea);font-size:15px}
.cambio:last-child{border-bottom:0}
.cambio small{display:block;color:var(--gris);font-size:13.5px}
.cambio small.warn{color:var(--amb)}
.antes{text-decoration:line-through;color:var(--gris)}
details{margin-top:8px}
details>summary{cursor:pointer;font-weight:700;color:var(--claro-txt);padding:8px 0;list-style-position:inside}
.examen{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;margin-bottom:8px}
.examen>button.res{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;background:none;border:0;padding:12px 14px;text-align:left;cursor:pointer;min-height:52px}
.examen .n{font-weight:700;font-size:15px}
.examen .n small{display:block;font-weight:400;color:var(--gris);font-size:13px}
.examen .p{font-weight:700;color:var(--rey);white-space:nowrap}
.examen .p.sin{color:var(--gris);font-weight:400;font-size:14px}
.examen .ed{padding:0 14px 14px;border-top:1px solid var(--linea)}
.examen.abierto{border-color:var(--claro)}
.dinero{position:relative}
.dinero input{padding-left:28px}
.dinero::before{content:"$";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--gris)}
.buscador{position:sticky;top:104px;z-index:5;background:var(--fondo);padding:6px 0 10px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.pill{font-size:13px;border:1px solid var(--linea);border-radius:999px;padding:3px 10px;background:var(--blanco)}
.chk{display:flex;align-items:center;gap:8px;font-weight:400;margin:0;cursor:pointer}
.chk input{width:20px;height:20px}
table.muestra{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px;display:block;overflow-x:auto}
table.muestra td,table.muestra th{border-bottom:1px solid var(--linea);padding:5px 6px;text-align:left;white-space:nowrap}
.grid2{display:grid;grid-template-columns:1fr;gap:0 12px}
@media (min-width:620px){.grid2{grid-template-columns:1fr 1fr}}

/* Resultados */
.pronto{text-align:center;padding:40px 18px}
.pronto img{width:72px;height:72px;opacity:.85;margin-bottom:12px}

/* Diálogo */
.velo{position:fixed;inset:0;background:rgba(15,25,55,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:0}
.velo .dlg{background:var(--blanco);width:100%;max-width:440px;border-radius:20px 20px 0 0;padding:22px 18px 26px;max-height:92vh;overflow:auto}
@media (min-width:620px){.velo{align-items:center}.velo .dlg{border-radius:20px}}
.dlg h2{margin-top:0}

.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;max-width:calc(100% - 32px);padding:12px 16px;border-radius:12px;font-weight:700;box-shadow:0 10px 30px -10px rgba(0,0,0,.35)}
.toast.ok{background:var(--ok);color:#fff}
.toast.err{background:var(--err);color:#fff}
.toast.info{background:var(--rey);color:#fff}
.spin{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:sp .7s linear infinite}
.btn.sec .spin,.btn.peligro .spin{border-color:rgba(27,58,158,.2);border-top-color:var(--rey)}
@keyframes sp{to{transform:rotate(360deg)}}
.cargando{padding:30px;text-align:center;color:var(--gris)}