:root{--azul: #1B5FAF;--azul-oscuro: #144a8a;--oscuro: #1a1a1a;--gris: #6b7280;--fondo: #f3f5f9;--blanco: #ffffff;--verde: #16a34a;--naranja: #ea580c;--rojo: #dc2626;--borde: #e2e8f0}*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--fondo);color:var(--oscuro);-webkit-tap-highlight-color:transparent;overflow-x:hidden;width:100%}#root{min-height:100dvh;overflow-x:clip}.app{min-height:100dvh;display:flex;flex-direction:column;max-width:640px;width:100%;margin:0 auto;background:var(--fondo);overflow-x:clip}.topbar{position:fixed;top:0;left:50%;transform:translate(-50%);width:100%;max-width:640px;z-index:15;background:var(--azul);color:#fff;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top));display:flex;align-items:center;gap:10px}.topbar img{height:32px}.topbar h1{font-size:18px;font-weight:700;flex:1}.topbar button{background:#ffffff26;border:none;color:#fff;border-radius:8px;padding:8px 12px;font-size:13px}.content{flex:1;padding:16px;padding-top:calc(76px + env(safe-area-inset-top));padding-bottom:calc(84px + env(safe-area-inset-bottom));overflow-x:clip}.bottomnav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:640px;background:var(--blanco);border-top:1px solid var(--borde);display:flex;padding-bottom:env(safe-area-inset-bottom);z-index:10}.bottomnav button{flex:1;background:none;border:none;padding:10px 4px 12px;font-size:11px;color:var(--gris);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}.bottomnav button .icon{display:flex;align-items:center;justify-content:center;height:25px}.bottomnav button .icon svg{width:25px;height:25px;display:block}.bottomnav button.active{color:var(--azul);font-weight:700}.card{background:var(--blanco);border-radius:14px;padding:14px 16px;margin-bottom:10px;border:1px solid var(--borde);box-shadow:0 1px 2px #0000000a}.card h3{font-size:16px;margin-bottom:2px}.card .sub{color:var(--gris);font-size:13px}.card .row{display:flex;justify-content:space-between;align-items:center;gap:8px}.badge{display:inline-block;font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap}.badge.verde{background:#dcfce7;color:var(--verde)}.badge.azul{background:#dbeafe;color:var(--azul)}.badge.naranja{background:#ffedd5;color:var(--naranja)}.badge.rojo{background:#fee2e2;color:var(--rojo)}.badge.gris{background:#f1f5f9;color:var(--gris)}.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.kpi{background:var(--blanco);border-radius:14px;padding:14px;border:1px solid var(--borde)}.kpi .valor{font-size:24px;font-weight:800;color:var(--azul)}.kpi .etiqueta{font-size:12px;color:var(--gris);margin-top:2px}.form label{display:block;font-size:13px;font-weight:600;color:var(--gris);margin:12px 0 4px}.form input,.form select,.form textarea{width:100%;padding:12px;font-size:16px;border:1px solid var(--borde);border-radius:10px;background:var(--blanco)}.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--azul);border-color:transparent}.btn{display:block;width:100%;padding:14px;font-size:16px;font-weight:700;border:none;border-radius:12px;background:var(--azul);color:#fff;margin-top:16px;cursor:pointer}.btn:active{background:var(--azul-oscuro)}.btn.secundario{background:#eef2f7;color:var(--azul)}.btn.peligro{background:#fee2e2;color:var(--rojo)}.fab{position:fixed;bottom:calc(76px + env(safe-area-inset-bottom));right:max(16px,calc(50% - 304px));width:56px;height:56px;border-radius:50%;background:var(--azul);color:#fff;font-size:28px;border:none;box-shadow:0 4px 12px #1b5faf66;z-index:10;cursor:pointer}.login{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:24px;max-width:420px;margin:0 auto}.login img{width:160px;margin:0 auto 24px}.login h2{text-align:center;margin-bottom:8px}.login .sub{text-align:center;color:var(--gris);font-size:14px;margin-bottom:16px}.error{background:#fee2e2;color:var(--rojo);padding:10px 14px;border-radius:10px;font-size:14px;margin-top:12px}.aviso{background:#fef9c3;color:#854d0e;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.5}.buscador{width:100%;padding:12px 14px;font-size:16px;border:1px solid var(--borde);border-radius:12px;margin-bottom:12px;background:var(--blanco)}.vacio{text-align:center;color:var(--gris);padding:40px 20px;font-size:14px}.modal-fondo{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:20;display:flex;align-items:flex-end;justify-content:center}.modal{background:var(--fondo);width:100%;max-width:640px;max-height:92dvh;overflow-y:auto;border-radius:20px 20px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}.modal .cabecera{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.modal .cabecera h2{font-size:18px}.modal .cerrar{background:none;border:none;font-size:26px;color:var(--gris);cursor:pointer}.bloqueo{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:var(--fondo);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px calc(24px + env(safe-area-inset-bottom))}.bloqueo img{height:54px;margin-bottom:4px}.bloqueo h2{font-size:18px;font-weight:700;color:var(--oscuro)}.pin-dots{display:flex;gap:16px}.pin-dots span{width:16px;height:16px;border-radius:50%;border:2px solid var(--azul);background:transparent}.pin-dots span.lleno{background:var(--azul)}.pin-dots.shake{animation:shake .4s}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.pin-error{min-height:18px;font-size:13px;color:var(--rojo)}.pin-pad{display:grid;grid-template-columns:repeat(3,74px);gap:14px;justify-content:center}.pin-pad button{width:74px;height:74px;border-radius:50%;border:1px solid var(--borde);background:var(--blanco);font-size:26px;color:var(--oscuro);cursor:pointer}.pin-pad button:active{background:#eef2f7}.pin-pad button.borrar{font-size:22px;border:none;background:transparent}.pin-pad span{width:74px;height:74px}.topbar .candado{background:none;border:none;font-size:20px;padding:4px 6px;cursor:pointer}@media (min-width: 900px){.app{max-width:none;margin:0}.topbar{max-width:none;left:0;transform:none;padding-left:28px;padding-right:28px;z-index:15}.content{max-width:1200px;margin-left:220px;padding:84px 32px 48px}.bottomnav{top:60px;bottom:0;left:0;transform:none;width:220px;max-width:220px;height:calc(100dvh - 60px);flex-direction:column;justify-content:flex-start;gap:4px;border-top:none;border-right:1px solid var(--borde);padding:18px 10px;background:var(--blanco);z-index:9}.bottomnav button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 16px;font-size:14px;border-radius:10px}.bottomnav button .icon{height:22px}.bottomnav button .icon svg{width:22px;height:22px}.bottomnav button.active{background:#eef2f7}.fab{right:32px;bottom:32px}.modal-fondo{align-items:center}.modal{max-width:580px;max-height:88dvh;border-radius:18px;padding:24px}.kpis{grid-template-columns:repeat(4,1fr)}.card{transition:box-shadow .15s ease}}