:root{
  --azul:#0d3b9e; --azul-claro:#1b4fc0; --amarillo:#f5c400;
  --texto:#1f2a44; --muted:#7b849a; --borde:#e6e8ee; --fondo:#f3f4f8;
  --verde:#2e8b57; --naranja:#e08a1e; --rojo:#c8102e;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Fira Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  background:#ededed;color:var(--texto);overscroll-behavior:none;
}
.app{
  width:100%;max-width:480px;margin:0 auto;min-height:100dvh;
  display:flex;flex-direction:column;background:#ededed;position:relative;overflow:hidden;
}
@media (min-width:520px){
  body{background:#e3e5ea}
  .app{box-shadow:0 12px 40px rgba(0,0,0,.25)}
}
.pantalla{flex:1;display:flex;flex-direction:column;min-height:100dvh}
button{font-family:inherit}

/* ---------- LOGIN ---------- */
.login{
  background:radial-gradient(ellipse at 50% 30%,#1b4fc0 0%,#0d3b9e 40%,#072a7a 100%);
  color:#fff;padding:calc(56px + env(safe-area-inset-top)) 20px 20px;
}
.login .marca{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:28px}
.login .marca .arpa{width:56px;height:56px;object-fit:contain;margin-bottom:6px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.login .marca h1{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.5px;margin:0;text-align:center}
.login .marca .sub{font-size:11px;letter-spacing:2.5px;color:rgba(255,255,255,.7);font-weight:500}
.tarjeta-login{background:#fff;color:#1a1a1a;padding:22px 20px 18px;display:flex;flex-direction:column;gap:14px;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.grupo{display:flex;flex-direction:column;gap:6px}
.grupo label{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.3px}
.campo{width:100%;height:46px;border:1px solid #dde1ea;background:#fff;padding:0 14px;border-radius:10px;font-size:16px;color:#1a1a1a;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.campo:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(13,59,158,.12)}
.campo-pass{position:relative}
.campo-pass .campo{padding-right:44px;letter-spacing:1px}
.ojo{position:absolute;right:6px;top:5px;width:36px;height:36px;border:none;background:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ojo:active{background:#f1f3f8}
.fila-opciones{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-2px}
.recordar{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:#3b4560}
.check{width:20px;height:20px;border:1.5px solid #c3c9d6;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.check.on{background:var(--azul);border-color:var(--azul)}
.olvido{font-size:13px;color:var(--azul);text-decoration:none;font-weight:500}
.olvido:hover{text-decoration:underline}
.btn-acceder{width:100%;height:48px;background:var(--azul);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;margin-top:4px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.btn-acceder:active{background:var(--azul-claro)}
.huella{display:flex;align-items:center;justify-content:center;gap:8px;background:none;border:1px dashed #d5dae5;border-radius:10px;height:42px;cursor:pointer;padding:0;font-size:13px;font-weight:500;color:var(--azul)}
.huella:active{background:#f3f6fc}
.login .pie{text-align:center;font-size:13px;color:rgba(255,255,255,.75);padding:12px 0 calc(0px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.2);margin:0 8px}
.login .pie a{color:#fff;text-decoration:none}
.login .logo{width:120px;height:38px;display:block;margin:0 auto 14px;object-fit:contain}

/* ---------- MAIN ---------- */
.main{background:var(--fondo)}
.cabecera{background:#fff;padding:calc(14px + env(safe-area-inset-top)) 18px 14px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--borde)}
.cabecera img.av{width:40px;height:40px;object-fit:contain;display:block;flex:none}
.saludo{padding:22px 18px 0;display:flex;flex-direction:column;gap:2px}
.saludo b{font-size:20px;font-weight:700;color:var(--texto);letter-spacing:-.2px}
.saludo small{font-size:13px;color:var(--muted)}
.cabecera .tit{flex:1;min-width:0}
.cabecera .tit b{font-size:16px;font-weight:700;color:var(--azul);line-height:1.1;display:block;white-space:nowrap;letter-spacing:-.2px}
.cabecera .tit small{font-size:11px;letter-spacing:2px;color:var(--muted);margin-top:2px;display:block}
.ico-btn{background:none;border:none;cursor:pointer;padding:6px;display:flex;position:relative}
.globo{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--amarillo);color:var(--azul);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.avatar-txt{width:36px;height:36px;border-radius:50%;background:var(--azul);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.buscador{margin:16px 18px 0;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e3e6ee;border-radius:999px;padding:0 18px;height:46px}
.buscador input{flex:1;border:none;background:none;font-size:15px;color:#1a1a1a;min-width:0;outline:none}
.rejilla{padding:20px 18px 24px;flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}
.accion{position:relative;background:#fff;border:1px solid var(--borde);border-radius:18px;padding:22px 12px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.accion:active{background:#f7f9fd}
.accion .ico{width:48px;height:48px;border-radius:14px;background:#e8effb;display:flex;align-items:center;justify-content:center}
.accion .et{color:var(--texto);font-weight:700;font-size:15px;text-align:center;line-height:1.2}
.accion .badge{position:absolute;right:12px;top:12px;min-width:22px;height:22px;border-radius:11px;background:var(--amarillo);color:var(--azul);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px}
.sin-resultados{grid-column:1/-1;text-align:center;color:var(--muted);font-size:14px;padding:30px 0}
.barra-inf{background:#fff;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:10px 0 calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--borde);position:sticky;bottom:0}
.tab{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-size:11px;cursor:pointer}
.tab.act{color:var(--azul);font-weight:600}
.fab{width:56px;height:56px;border-radius:50%;background:var(--azul);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:-30px auto 0;box-shadow:0 6px 16px rgba(13,59,158,.35)}

/* ---------- DETALLE ---------- */
.detalle{background:#f6f7fa}
.cab-det{background:#fff;color:var(--azul);padding:calc(12px + env(safe-area-inset-top)) 10px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--borde)}
.cab-det .t{font-size:18px;font-weight:600}
.fecha{padding:6px 18px 0;font-size:13px;color:var(--muted)}
.stats{padding:14px 18px 0;display:grid;gap:8px}
.stats.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stat{border:2px solid transparent;border-radius:14px;padding:10px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;background:var(--bg);color:var(--c);opacity:.72;transition:opacity .15s,transform .1s}
.stat.act{opacity:1;border-color:var(--c);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.stat:active{transform:scale(.97)}
.stat small{font-size:10.5px;font-weight:600;text-align:center;line-height:1.1;letter-spacing:-.1px}
.stat b{font-size:22px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tit-lista{padding:22px 18px 8px;font-size:18px;font-weight:700;color:var(--texto);display:flex;align-items:center;gap:8px}
.tit-lista .conteo{font-size:12px;font-weight:700;color:var(--muted);background:#e9ecf3;border-radius:999px;padding:2px 8px}
.lista{margin:0 18px calc(24px + env(safe-area-inset-bottom));background:#fff;border:1px solid var(--borde);border-radius:18px;overflow:hidden}
.fila{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid #eef0f4}
.fila:last-child{border-bottom:none}
.fila .ini{width:46px;height:46px;border-radius:50%;color:var(--texto);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.fila .datos{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fila .datos b{font-size:15px;font-weight:700;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .datos small{font-size:13px;color:var(--muted)}
.fila .estado{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.fila .estado .e{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}
.fila .estado .e i{width:10px;height:10px;border-radius:50%;display:block}
.fila .estado small{font-size:12px;color:var(--muted)}
.vacio{padding:22px 16px;font-size:14px;color:var(--muted);text-align:center}

/* ---------- QR de la demo ---------- */
/* Por defecto (móvil/tablet): botón + modal. El bloque en línea se reserva para PC. */
.qr-inline{display:none}
.abrir-qr{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 16px;padding:9px 16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;font-size:13px;font-weight:500;cursor:pointer}
.abrir-qr:active{background:rgba(255,255,255,.22)}
.velo{position:fixed;inset:0;z-index:40;background:rgba(6,20,58,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-qr{position:relative;background:#fff;border-radius:18px;padding:26px 22px 22px;max-width:320px;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.modal-qr .cerrar{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;border-radius:8px;background:var(--rojo);display:flex;align-items:center;justify-content:center;cursor:pointer}
.modal-qr .ttl{font-size:17px;font-weight:700;color:var(--texto);padding-right:36px;align-self:flex-start}
.modal-qr img{display:block;width:220px;height:220px;max-width:100%}
.modal-qr .url{font-size:13px;font-weight:600;color:var(--azul);word-break:break-all;text-align:center}
.modal-qr .ayuda{font-size:12px;color:var(--muted);text-align:center;line-height:1.4}

/* PC: ratón, sin táctil y con sitio de sobra → el QR se ve directamente en el login */
@media (min-width:820px) and (hover:hover) and (pointer:fine){
  .abrir-qr{display:none}
  .qr-inline{display:flex;justify-content:center;margin:0 0 16px}
  .qr-inline img{width:116px;height:116px;display:block;background:#fff;border-radius:8px;padding:5px}
}
/* Portátil (ventana baja): se recorta el aire, no el QR */
@media (min-width:820px) and (hover:hover) and (pointer:fine) and (max-height:900px){
  .login{padding-top:calc(30px + env(safe-area-inset-top))}
  .login .marca{margin-bottom:16px}
  .login .marca .arpa{width:46px;height:46px;margin-bottom:2px}
  .login .marca h1{font-size:30px}
  .qr-inline img{width:100px;height:100px}
}

/* ---------- Diálogo de instalación ---------- */
.modal-inst{position:relative;background:#fff;border-radius:20px;max-width:330px;width:100%;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.42);animation:surge .28s cubic-bezier(.2,.9,.3,1.3)}
@keyframes surge{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.modal-inst .cerrar{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;border-radius:8px;background:var(--rojo);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.cabecera-inst{background:radial-gradient(ellipse at 50% 120%,#1b4fc0 0%,#0d3b9e 55%,#072a7a 100%);padding:26px 0 22px;display:flex;justify-content:center}
.cabecera-inst .halo{width:104px;height:104px;border-radius:26px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.cabecera-inst .halo2{width:84px;height:84px;border-radius:21px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.cabecera-inst img{width:64px;height:64px;border-radius:16px;display:block;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.cuerpo-inst{padding:20px 22px 4px;text-align:center}
.cuerpo-inst .ttl{font-size:19px;font-weight:800;color:var(--texto);letter-spacing:-.3px}
.cuerpo-inst p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.cabecera-inst.ok{background:radial-gradient(ellipse at 50% 120%,#3aa76d 0%,#2e8b57 55%,#1d6640 100%)}
.pasos{margin:12px 0 0;padding:0 0 0 20px;text-align:left;font-size:13px;color:#3b4560;line-height:1.7}
.pasos li{padding-left:2px}
.pasos b{color:var(--texto)}
.pasos-ios{margin-top:14px;background:#eef2fb;border-radius:12px;padding:10px 12px;font-size:12.5px;color:#3b4560;line-height:1.5}
.pasos-ios svg{vertical-align:-3px;margin:0 1px}
.pie-inst{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px 20px}
.btn-sec{height:42px;padding:0 16px;border:1px solid #d5dae5;background:#fff;border-radius:10px;font-size:14px;font-weight:600;color:#3b4560;cursor:pointer}
.btn-sec:active{background:#f1f3f8}
.btn-pri{height:42px;padding:0 22px;border:none;background:var(--azul);color:#fff;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.btn-pri:active{background:var(--azul-claro)}