:root{
	--navy:#0B2545;
	--navy-2:#143A63;
	--gold:#C9A24B;
	--bg:#F2F4F7;
	--card:#fff;
	--txt:#1B2430;
	--txt-2:#5B6775;
	--linea:#E2E6EC;
	--ok:#1E874B;
	--warn:#C77700;
	--mal:#C0392B;
	--safe-t:env(safe-area-inset-top,0px);
	--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	background:var(--bg);color:var(--txt);font-size:15px;line-height:1.45;
	overscroll-behavior-y:none;
}
button{font-family:inherit;font-size:inherit}

/* ---------------------------------------------------------- Login */
.gpi-login{background:linear-gradient(160deg,var(--navy) 0%,#06192F 100%);min-height:100vh;min-height:100dvh}
.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:#fff;border-radius:18px;padding:28px 24px;width:100%;max-width:380px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.login-logo{width:64px;height:64px;display:block;margin:0 auto 12px;border-radius:14px}
.login-card h1{margin:0 0 20px;font-size:20px;text-align:center;color:var(--navy)}
.login-card label{display:block;font-size:13px;font-weight:600;color:var(--txt-2);margin:14px 0 5px}
.login-card input[type=text],.login-card input[type=password]{
	width:100%;padding:13px 14px;border:1.5px solid var(--linea);border-radius:11px;font-size:16px;background:#fff;color:var(--txt)
}
.login-card input:focus{outline:none;border-color:var(--navy)}
.pass-wrap{position:relative}
.pass-wrap input{padding-right:48px!important}
.pass-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;color:var(--txt-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.login-error{display:none;margin:12px 0 0;padding:10px 12px;background:#FDECEA;color:var(--mal);border-radius:9px;font-size:13.5px}
.login-error.visible{display:block}
.login-pie{text-align:center;color:#9AA5B1;font-size:12px;margin:16px 0 0}

/* --------------------------------------------------------- Botones */
.btn{display:block;width:100%;padding:13px 16px;border:0;border-radius:11px;font-size:15.5px;font-weight:600;cursor:pointer;margin-top:16px;text-align:center;text-decoration:none}
.btn-pri{background:var(--navy);color:#fff}
.btn-pri:disabled{opacity:.55}
.btn-sec{background:#EDF0F4;color:var(--navy)}
.btn-gold{background:var(--gold);color:#25200F}
.btn-mal{background:#FDECEA;color:var(--mal)}
.btn-row{display:flex;gap:10px}
.btn-row .btn{margin-top:0}

/* -------------------------------------------------------- Topbar */
.gpi-app{padding-top:calc(56px + var(--safe-t));padding-bottom:calc(62px + var(--safe-b))}
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;background:var(--navy);color:#fff;padding-top:var(--safe-t)}
.topbar-in{height:56px;display:flex;align-items:center;gap:10px;padding:0 12px}
.topbar-logo{width:32px;height:32px;border-radius:8px;flex:0 0 auto}
.topbar-tit{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.topbar-tit strong{font-size:16px}
.topbar-tit span{font-size:12px;color:#A9BBD0;text-transform:capitalize}
.icon-btn{width:40px;height:40px;border:0;background:rgba(255,255,255,.10);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}

/* -------------------------------------------------------- Tabbar */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:40;background:#fff;border-top:1px solid var(--linea);display:flex;padding-bottom:var(--safe-b)}
.tabbar button{flex:1;border:0;background:none;padding:9px 4px 8px;color:var(--txt-2);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.tabbar button.on{color:var(--navy);font-weight:700}
.tabbar button.on svg{stroke:var(--navy)}
.tabbar svg{stroke:#8A95A3}

/* --------------------------------------------------------- Vistas */
main{padding:14px 12px 20px;max-width:820px;margin:0 auto}
.seccion-tit{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2);margin:18px 4px 8px}
.seccion-tit:first-child{margin-top:2px}
.card{background:var(--card);border-radius:14px;border:1px solid var(--linea);margin-bottom:10px;overflow:hidden}
.card-pad{padding:14px}

.fila{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--linea);cursor:pointer;background:#fff}
.fila:last-child{border-bottom:0}
.fila-av{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.fila-txt{flex:1;min-width:0}
.fila-txt b{display:block;font-size:15px;font-weight:600}
.fila-txt small{color:var(--txt-2);font-size:12.5px}
.fila-der{text-align:right;flex:0 0 auto}
.nota-num{font-size:19px;font-weight:800;line-height:1}
.nota-num small{font-size:11px;font-weight:600;color:var(--txt-2)}

.chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em}
.chip-pendiente{background:#EDF0F4;color:#5B6775}
.chip-borrador{background:#FFF4E0;color:#8A5A00}
.chip-devuelta{background:#FDECEA;color:var(--mal)}
.chip-enviada{background:#E3EEFB;color:#14559B}
.chip-aprobada{background:#E4F5EA;color:var(--ok)}
.chip-excluido{background:#3B0A05;color:#fff}

/* ----------------------------------------------------- Valoración */
.res-box{background:linear-gradient(150deg,var(--navy),var(--navy-2));color:#fff;border-radius:14px;padding:16px;margin-bottom:12px}
.res-top{display:flex;align-items:flex-end;gap:14px}
.res-nota{font-size:42px;font-weight:800;line-height:.95}
.res-nota span{font-size:16px;font-weight:600;opacity:.65}
.res-meta{flex:1}
.res-tramo{font-size:13.5px;font-weight:700;color:var(--gold)}
.res-sub{font-size:12px;color:#A9BBD0}
.res-barra{height:7px;border-radius:6px;background:rgba(255,255,255,.18);margin-top:12px;overflow:hidden}
.res-barra i{display:block;height:100%;background:var(--gold);border-radius:6px;transition:width .25s}
.res-bloques{display:flex;gap:6px;margin-top:12px}
.res-bloques div{flex:1;background:rgba(255,255,255,.10);border-radius:9px;padding:7px 6px;text-align:center}
.res-bloques b{display:block;font-size:15px}
.res-bloques small{font-size:9.5px;color:#A9BBD0;letter-spacing:.03em}

.bloque-h{display:flex;align-items:center;gap:10px;padding:13px 14px;cursor:pointer;background:#fff}
.bloque-h b{flex:1;font-size:15px}
.bloque-peso{font-size:11px;font-weight:700;color:var(--txt-2);background:#EDF0F4;padding:3px 8px;border-radius:999px}
.bloque-prog{font-size:12px;color:var(--txt-2);min-width:38px;text-align:right}
.bloque-body{border-top:1px solid var(--linea)}
.bloque-body[hidden]{display:none}

.param{padding:13px 14px;border-bottom:1px solid var(--linea)}
.param:last-child{border-bottom:0}
.param-n{font-size:14.5px;font-weight:600;margin-bottom:2px}
.param-g{font-size:12.5px;color:var(--txt-2);margin-bottom:10px}
.escala{display:flex;gap:6px}
.escala button{flex:1;height:42px;border:1.5px solid var(--linea);background:#fff;border-radius:10px;font-size:16px;font-weight:700;color:var(--txt-2);cursor:pointer;transition:.12s}
.escala button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.escala button.on.n1,.escala button.on.n2{background:var(--mal);border-color:var(--mal)}
.escala button.on.n4,.escala button.on.n5{background:var(--ok);border-color:var(--ok)}
.escala-txt{font-size:12px;color:var(--txt-2);margin-top:7px;min-height:16px}
.param-nota{width:100%;margin-top:8px;padding:9px 11px;border:1.5px solid var(--linea);border-radius:9px;font-size:14px;resize:vertical;font-family:inherit}
.param-nota:focus{outline:none;border-color:var(--navy)}

/* -------------------------------------------------------- Hechos */
.hecho{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--linea);align-items:flex-start}
.hecho:last-child{border-bottom:0}
.hecho-p{font-weight:800;font-size:15px;min-width:38px;text-align:center;padding-top:1px}
.hecho-p.pos{color:var(--ok)}
.hecho-p.neg{color:var(--mal)}
.hecho-c{flex:1;min-width:0}
.hecho-c b{font-size:14px;font-weight:600;display:block}
.hecho-c small{color:var(--txt-2);font-size:12px}
.hecho-x{border:0;background:none;color:#B7C0CB;font-size:20px;padding:0 4px;cursor:pointer;line-height:1}

.vacio{text-align:center;color:var(--txt-2);padding:34px 20px;font-size:14px}
.vacio svg{stroke:#C3CBD5;margin-bottom:10px}

/* -------------------------------------------------------- Resumen */
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-2);padding:10px 12px;border-bottom:1px solid var(--linea)}
.tabla td{padding:11px 12px;border-bottom:1px solid var(--linea)}
.tabla tr:last-child td{border-bottom:0}
.tabla .num{text-align:right;font-weight:700;white-space:nowrap}
.tramo-max{color:var(--ok)} .tramo-alto{color:var(--ok)} .tramo-base{color:var(--navy)}
.tramo-nulo{color:var(--warn)} .tramo-bajo{color:var(--mal)}
.total-caja{display:flex;justify-content:space-between;align-items:center;padding:14px;background:var(--navy);color:#fff;border-radius:12px;margin-top:10px}
.total-caja b{font-size:20px;color:var(--gold)}

/* --------------------------------------------------- Modal / sheet */
.modal-bg{position:fixed;inset:0;background:rgba(10,18,30,.55);z-index:60}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:#fff;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + var(--safe-b));max-height:88dvh;overflow-y:auto;box-shadow:0 -8px 40px rgba(0,0,0,.25)}
.sheet h3{margin:0 0 4px;font-size:17px;color:var(--navy)}
.sheet p.sub{margin:0 0 14px;font-size:13px;color:var(--txt-2)}
.sheet label{display:block;font-size:13px;font-weight:600;color:var(--txt-2);margin:13px 0 5px}
.sheet input[type=text],.sheet input[type=date],.sheet input[type=number],.sheet select,.sheet textarea{
	width:100%;padding:12px 13px;border:1.5px solid var(--linea);border-radius:10px;font-size:16px;font-family:inherit;background:#fff;color:var(--txt)
}
.sheet input:focus,.sheet select:focus,.sheet textarea:focus{outline:none;border-color:var(--navy)}
.seg{display:flex;gap:8px;margin-top:6px}
.seg button{flex:1;padding:11px;border:1.5px solid var(--linea);background:#fff;border-radius:10px;font-weight:600;color:var(--txt-2);cursor:pointer}
.seg button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.seg button.on.neg{background:var(--mal);border-color:var(--mal)}
.check{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:14px}
.check input{width:20px;height:20px;margin-top:1px;flex:0 0 auto}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + var(--safe-b));z-index:80;background:#1B2430;color:#fff;padding:11px 18px;border-radius:999px;font-size:14px;max-width:88vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.toast.mal{background:var(--mal)}

.aviso{background:#FFF4E0;border:1px solid #F0D9A8;color:#7A5200;padding:11px 13px;border-radius:11px;font-size:13.5px;margin-bottom:12px}
.aviso.mal{background:#FDECEA;border-color:#F3C4BE;color:#93251A}
.aviso.ok{background:#E4F5EA;border-color:#B6E0C4;color:#146436}

@media (min-width:720px){
	main{padding:20px 16px 30px}
	.escala button{height:46px}
}

/* --------------------------------------------------- pantalla inicial */
.arranque{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,var(--navy) 0%,#06192F 100%)}
.oculto{display:none!important}
.rol-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#EDF0F4;color:#5B6775;margin-left:6px}
.rol-admin{background:#E3EEFB;color:#14559B}
.rol-direccion{background:#FFF4E0;color:#8A5A00}

#pantallaApp{padding-top:calc(56px + var(--safe-t));padding-bottom:calc(62px + var(--safe-b))}