/* PEDIAL piloto — mismo lenguaje visual que la app FACSA (TRANSPENEDES):
   cabecera verde, tarjetas blancas, tablas limpias, móvil primero.
   Solo presentación: no cambia ninguna lógica, ruta ni dato. */
:root{
  --brand:#14532d; --brand-2:#1c6b3c; --brand-dark:#0c3a1f;
  --ink:#1c262e; --muted:#64748b; --line:#dfe6e1; --line-soft:#edf1ee;
  --bg:#e9edea; --bg-soft:#f4f7f4; --card:#ffffff;
  --ok-bg:#dcfce7; --ok:#166534; --warn-bg:#fef3c7; --warn:#92400e;
  --err-bg:#fee2e2; --err:#991b1b; --field-line:#c3cdc6;
  --radius:14px; --shadow:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.06);
  --th-bg:#f6f9f6; --th-ink:#52616f; --field:#ffffff;
}
[data-theme="dark"]{
  --brand:#ff7b72; --brand-2:#e5484d; --brand-dark:#7a0c14;
  --ink:#e6edf3; --muted:#8b949e; --line:#262d36; --line-soft:#1c232c;
  --bg:#0d1117; --bg-soft:#0d1117; --card:#161b22; --field:#161b22; --field-line:#30363d;
  --th-bg:#1c2128; --th-ink:#8b949e;
  --ok-bg:#0e2a1b; --ok:#4ade80; --warn-bg:#29200c; --warn:#fbbf24;
  --err-bg:#2a1215; --err:#f87171;
  --shadow:0 1px 2px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg-soft) 0,var(--bg) 240px) fixed,var(--bg);
  margin:0;color:var(--ink);font-size:15px;line-height:1.45;
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--brand)}
:focus-visible{outline:3px solid rgba(20,83,45,.45);outline-offset:2px;border-radius:6px}

/* Cabecera, como FACSA */
.top{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(90deg,var(--brand-dark),var(--brand) 55%,var(--brand-2));
  color:#fff;padding:11px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  box-shadow:0 2px 10px rgba(12,58,31,.35);
}
.top b{font-size:16.5px;letter-spacing:.01em;white-space:nowrap}
.top span{font-size:13px;color:#e7f4ec;opacity:.95}

.wrap{max-width:1060px;margin:22px auto 40px;padding:0 16px}
.wrap.medium{max-width:820px}
.wrap.narrow{max-width:480px}
.wrap.center{text-align:center}

h1{font-size:22px;margin:.2em 0 .6em}
h2{font-size:18px;margin:1.4em 0 .5em}
p{margin:.6em 0}
small{color:var(--muted)}

/* Formularios: campos grandes, cómodos en el móvil */
label{display:block;margin:.9em 0 .25em;font-weight:600}
input,select,textarea{
  width:100%;padding:.65em .8em;font-size:15px;border:1px solid var(--field-line);
  border-radius:10px;background:var(--field);color:var(--ink);
}
input[type=checkbox]{width:auto}
/* Cuadros a medida del contenido, no alargados a todo el ancho:
   DNI, matrícula, fecha, hora, km y cifras = cortos; nombre y email = medios.
   Las notas y los archivos mantienen más ancho porque lo necesitan. */
.w-short{width:200px;max-width:100%}
.w-med{width:360px;max-width:100%}
input[type=date],input[type=time]{width:180px;max-width:100%}
input[type=file]{max-width:520px}
/* Formularios de búsqueda en línea, copiados de rutas.php de FACSA:
   fila en rejilla (.row de FACSA: columnas de mínimo 170px que se reparten
   la fila y saltan solas en móvil). El cuadro ocupa el ancho de su columna,
   no el de toda la página: por eso en FACSA no se ven alargados. */
.form-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px 14px;align-items:end}
.form-inline label{display:block;margin:0}
.form-inline .w-short,.form-inline .w-med{width:100%}
.form-inline button{justify-self:start;margin:0}
.form-inline a{align-self:end}
textarea{min-height:90px;resize:vertical}
/* Botones recogidos, como en la app web FACSA: rectangulares, no píldoras grandes */
button{
  background:var(--brand);color:#fff;border:0;border-radius:8px;
  padding:.45em 1em;font-size:14px;font-weight:600;cursor:pointer;min-height:36px;
}
button:hover{background:var(--brand-2)}
td button{padding:.35em .8em;font-size:13px;min-height:30px}
form{display:block}

/* Tablas, como FACSA */
table{
  width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);margin:14px 0;font-size:14px;
}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{background:var(--th-bg);color:var(--th-ink);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
tr:last-child td{border-bottom:0}

/* Mensajes */
.msg,.ok{background:var(--ok-bg);color:var(--ok);padding:1em;border-radius:12px}
.err{background:var(--err-bg);color:var(--err);padding:1em;border-radius:12px}
.warn{background:var(--warn-bg);color:var(--warn);padding:1em;border-radius:12px}
.bigcheck{font-size:3em;color:var(--brand);line-height:1}

@media (max-width:640px){
  .top{padding:8px 12px;gap:8px}
  .top b{font-size:15px}
  .top span{font-size:12px}
  .wrap{margin:12px auto 24px;padding:0 12px}
  h1{font-size:20px}
  /* En móvil, los formularios del panel apilan y el botón principal ocupa el ancho */
  .wrap>form button[type=submit]{width:100%}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13px}
  th,td{white-space:nowrap;padding:8px 10px}
  th,td:first-child{white-space:normal}
}

/* Botón de tema, como FACSA */
.theme-btn{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
  color:#fff;min-height:32px;padding:4px 12px;font-size:12.5px;border-radius:999px;
  box-shadow:none;white-space:nowrap;margin-left:auto;cursor:pointer;
}
.theme-btn:hover{background:rgba(255,255,255,.24)}
[data-theme="dark"] .top{background:#0d1117;box-shadow:none;border-bottom:2px solid #e5484d}
[data-theme="dark"] button:not(.theme-btn){background:linear-gradient(180deg,#e5484d,#cf363c);box-shadow:none}