:root{--fondo:#f5f6f8;--superficie:#fff;--borde:#dfe3e0;--texto:#16221c;--tenue:#5d6b64;--agua:#2f4b7c;--agua-suave:#e8edf5;--alerta:#a4342a;--alerta-suave:#fbeae8;--aviso:#8a6100;--aviso-suave:#fdf3df;--radio:8px}*{box-sizing:border-box}body{background:var(--fondo);color:var(--texto);margin:0;font:15px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}a{color:var(--agua)}.contenedor{max-width:1040px;margin:0 auto;padding:24px 20px 64px}.contenedor-angosto{max-width:560px;margin:0 auto;padding:40px 20px 64px}.tarjeta{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);margin-bottom:16px;padding:20px}h1{margin:0 0 4px;font-size:22px}h2{margin:0 0 12px;font-size:17px}.tenue{color:var(--tenue);font-size:13px}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;border-bottom:1px solid var(--borde);padding:9px 10px}th{color:var(--tenue);text-transform:uppercase;font-size:12px;font-weight:600}td.numero,th.numero{text-align:right;font-variant-numeric:tabular-nums}label{color:var(--tenue);margin-bottom:14px;font-size:13px;display:block}input,select{border:1px solid var(--borde);background:#fff;border-radius:6px;width:100%;margin-top:5px;padding:9px 10px;font-size:15px;display:block}input:focus,select:focus{outline:2px solid var(--agua);outline-offset:-1px}.error-campo{color:var(--alerta);margin-top:4px;font-size:13px;display:block}button{border:1px solid var(--agua);background:var(--agua);color:#fff;cursor:pointer;border-radius:6px;padding:9px 16px;font-size:15px}button:disabled{opacity:.55;cursor:not-allowed}button.secundario{color:var(--agua);background:#fff}.aviso{border-radius:var(--radio);margin-bottom:16px;padding:12px 14px;font-size:14px}.aviso.error{background:var(--alerta-suave);color:var(--alerta)}.aviso.atencion{background:var(--aviso-suave);color:var(--aviso)}.aviso.dato{background:var(--agua-suave);color:var(--agua)}.etiqueta{border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;display:inline-block}.etiqueta.pendiente{background:var(--aviso-suave);color:var(--aviso)}.etiqueta.pagada{background:var(--agua-suave);color:var(--agua)}.etiqueta.vencida{background:var(--alerta-suave);color:var(--alerta)}nav.barra{background:var(--superficie);border-bottom:1px solid var(--borde);align-items:center;gap:18px;padding:12px 20px;display:flex}nav.barra .marca{font-weight:700}nav.barra a{color:var(--tenue);font-size:14px;text-decoration:none}nav.barra a:hover{color:var(--agua)}