:root{
  --fondo:#f6f7f9; --tarjeta:#ffffff; --texto:#1f2a37; --suave:#5b6b82;
  --borde:#e3e8ef; --acento:#e8a317; --acento-suave:#fff6e0;
  --verde:#177245; --ambar:#b7791f; --rojo:#b42318;
}
@media (prefers-color-scheme: dark){
  :root{ --fondo:#12161d; --tarjeta:#1a2029; --texto:#e9eef5; --suave:#9fb0c6;
         --borde:#293340; --acento-suave:#2a2210; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);
     font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     font-size:15px;line-height:1.5}
a{color:#1f6feb}
header.barra{background:var(--tarjeta);border-bottom:1px solid var(--borde);padding:12px 18px;
     display:flex;align-items:center;gap:18px;flex-wrap:wrap}
header.barra .marca{font-weight:700;letter-spacing:.2px}
header.barra nav{display:flex;gap:14px;flex-wrap:wrap}
header.barra nav a{color:var(--suave);text-decoration:none;font-size:14px}
header.barra nav a:hover{color:var(--texto)}
header.barra .der{margin-left:auto;font-size:13px;color:var(--suave)}
main{max-width:1080px;margin:0 auto;padding:22px 18px 60px}
h1{font-size:22px;margin:0 0 16px}
h2{font-size:17px;margin:26px 0 10px}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;padding:18px;margin-bottom:16px}
.rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.dato{background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;padding:14px 16px}
.dato .n{font-size:26px;font-weight:700}
.dato .e{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.4px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;border-bottom:1px solid var(--borde);text-align:left;vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--suave)}
tbody tr:hover{background:var(--acento-suave)}
.pastilla{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.p-verde{background:#e6f4ea;color:#17683f}
.p-ambar{background:#fff3d6;color:#8a5a00}
.p-rojo{background:#fde8e6;color:#a3241a}
@media (prefers-color-scheme: dark){
  .p-verde{background:#16321f;color:#8fe0ab}.p-ambar{background:#33280d;color:#f2c46b}.p-rojo{background:#3a1713;color:#f3a09a}
}
form.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:14px}
label{font-size:13px;color:var(--suave);display:block;margin-bottom:4px}
input,select,textarea{font:inherit;color:inherit;background:var(--tarjeta);
  border:1px solid var(--borde);border-radius:8px;padding:8px 10px;width:100%}
input:focus,select:focus,textarea:focus,button:focus,a:focus{outline:2px solid var(--acento);outline-offset:2px}
button,.boton{font:inherit;background:var(--acento);color:#1f2a37;border:0;border-radius:8px;
  padding:9px 14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
button.sec{background:var(--tarjeta);color:var(--texto);border:1px solid var(--borde)}
.aviso{background:var(--acento-suave);border:1px solid var(--acento);border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:16px}
.error{background:#fde8e6;color:#a3241a;border-radius:10px;padding:10px 14px;margin-bottom:14px}
dl.datos{display:grid;grid-template-columns:190px 1fr;gap:8px 14px;margin:0}
dl.datos dt{color:var(--suave);font-size:13px}
dl.datos dd{margin:0}
.semaforo{font-size:30px;font-weight:700}
.grande{font-size:26px;font-weight:700}
ul.pasos,ul.limpia{padding-left:20px;margin:8px 0}
ul.limpia li{margin-bottom:6px}
.dos{display:grid;grid-template-columns:1fr 320px;gap:18px}
@media (max-width:900px){.dos{grid-template-columns:1fr}}
.pie{color:var(--suave);font-size:12px;margin-top:30px}
.login{max-width:360px;margin:8vh auto}
.login .tarjeta{padding:26px}

/* Costes: dos columnas en escritorio, una en móvil */
.rejilla-costes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px;align-items:start}
.rejilla-costes .tarjeta{margin:0}
@media (max-width:820px){.rejilla-costes{grid-template-columns:1fr}}