/* Maquetación de las consolas de gestión. CSS escrito a mano y servido tal cual.
 *
 * Sin Tailwind y sin paso de compilación a propósito: meter Node en seis repositorios que hoy no lo
 * necesitan es pagar una cadena de construcción entera para no escribir unas cuantas reglas. Y lo que
 * se paga no es la instalación: es que a partir de ahí nadie puede tocar un color sin levantar el
 * entorno de front.
 *
 * Son formularios y tablas para decenas de personas identificadas. No hace falta más. */

:root {
  --tinta: #1a1d21;
  --tinta-suave: #5b636e;
  --fondo: #f6f7f9;
  --papel: #ffffff;
  --borde: #d8dce2;
  --acento: #14507d;
  --acento-claro: #e8f0f7;
  --peligro: #a3231d;
  --aviso: #8a5a00;
  --bien: #1d6b3f;
  --radio: 6px;
  --sombra: 0 1px 2px rgba(26, 29, 33, .06), 0 1px 8px rgba(26, 29, 33, .04);
  /* Para que los controles del navegador —campos, casillas, barras de scroll, selector de fecha— sigan el
   * tema. Sin esto, en modo oscuro salían en claro: cajas blancas sobre una página oscura. */
  color-scheme: light dark;
}

/* Se respeta el tema del sistema. No es un adorno: mucha gente trabaja ocho horas seguidas con esto */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e6e8ea; --tinta-suave: #a2aab4; --fondo: #14171a; --papel: #1c2024;
    --borde: #2f353c; --acento: #6fb3e8; --acento-claro: #1b2a37;
    --peligro: #f08a84; --aviso: #e0aa4a; --bien: #6cc48d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}

/* ── La barra ─────────────────────────────────────────────────────────────────────────────── */
.barra {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1.2rem;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 700; letter-spacing: .04em; color: var(--tinta); text-decoration: none; }
.organizacion {
  padding: .2rem .6rem;
  background: var(--acento-claro);
  color: var(--acento);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
}
.acciones { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.acciones a, .enlace {
  color: var(--tinta-suave); text-decoration: none; font-size: .9rem;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.acciones a:hover, .enlace:hover { color: var(--acento); text-decoration: underline; }
.en-linea { display: inline; }

main { max-width: 62rem; margin: 0 auto; padding: 2rem 1.2rem; }
h1 { font-size: 1.5rem; margin: 0 0 .4rem; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
p.guia { color: var(--tinta-suave); margin: 0 0 1.4rem; }

/* ── Campos de formulario ───────────────────────────────────────────────────────────────────
 * El sistema estilaba botones, tablas y tarjetas pero NO los campos, que salían con el aspecto por
 * defecto del navegador —descuadrados con lo demás y, en oscuro, en claro—. Se les da los mismos
 * tokens. Las casillas y el selector de fichero se quedan como están (su estilo propio funciona). */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  font: inherit; font-size: .95rem;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: .4rem .55rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); }

/* ── Filtros (pestañas de estado, p.ej. las cargas por estado) ──────────────────────────────
 * Iban con `.en-linea` (display:inline) y se pegaban unos a otros; y el estado ACTIVO usaba una
 * clase `activo` que no existía, así que no se distinguía cuál estabas mirando. */
.filtros { display: flex; flex-wrap: wrap; gap: .3rem .45rem; margin: 0 0 1.4rem; }
.filtros a {
  color: var(--tinta-suave); text-decoration: none; white-space: nowrap;
  padding: .25rem .65rem; border-radius: 999px; border: 1px solid transparent; font-size: .9rem;
}
.filtros a:hover { color: var(--acento); background: var(--acento-claro); }
.filtros a.activo {
  color: var(--acento); background: var(--acento-claro);
  border-color: var(--borde); font-weight: 600;
}

/* ── Tarjetas ─────────────────────────────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 1.2rem 1.4rem;
}
.estrecha { max-width: 34rem; margin: 3rem auto; }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.tarjeta-app { display: block; text-decoration: none; color: inherit; transition: border-color .12s; }
.tarjeta-app:hover { border-color: var(--acento); }
.tarjeta-app h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--acento); }
.tarjeta-app p { margin: 0; color: var(--tinta-suave); font-size: .9rem; }

/* ── Botones ──────────────────────────────────────────────────────────────────────────────── */
.boton {
  display: inline-block; padding: .5rem 1rem;
  background: var(--acento); color: #fff; border: 0;
  border-radius: var(--radio); text-decoration: none;
  font: inherit; font-size: .95rem; cursor: pointer;
}
.boton:hover { filter: brightness(1.08); }
.boton.secundario { background: transparent; color: var(--acento); border: 1px solid var(--borde); }
.boton.peligro { background: transparent; color: var(--peligro); border: 1px solid var(--borde); }

/* Una fila de acciones: varios botones, o varios formularios de un solo botón, con aire entre ellos y
 * que bajan de línea si no caben. Antes se agrupaban con `.en-linea` (display:inline), que ni separa
 * los botones ni pone en fila los formularios —que son de bloque y se apilaban—. Ojo: `.en-linea` en
 * un formulario SUELTO (una etiqueta y su botón en la misma línea del texto) es otra cosa y se queda. */
.botonera { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1rem; }
.botonera form { margin: 0; }

/* ── Tablas ───────────────────────────────────────────────────────────────────────────────── */
/* Una tabla ancha metida en un `.desliza` se desplaza dentro de su caja en vez de empujar la página
 * entera de lado. Es un envoltorio, no la tabla: <div class="desliza"><table>…</table></div>. Antes
 * iba como `style="overflow-x:auto"` suelto y repetido; una clase deja un único sitio donde tocarlo. */
.desliza { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--borde); }
th { color: var(--tinta-suave); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
tr.esta-sesion { background: var(--acento-claro); }
.tenue { color: var(--tinta-suave); }

/* ── Avisos ───────────────────────────────────────────────────────────────────────────────── */
.aviso {
  padding: .7rem 1rem; border-radius: var(--radio);
  border: 1px solid var(--borde); background: var(--papel);
  border-left: 3px solid var(--tinta-suave);
  margin: 0 0 1.4rem;
}
.aviso.error { border-left-color: var(--peligro); color: var(--peligro); }
.aviso.cuidado { border-left-color: var(--aviso); color: var(--aviso); }
.aviso.bien { border-left-color: var(--bien); color: var(--bien); }
.sugerencia { color: var(--tinta-suave); font-size: .92rem; }

/* Un foco visible SIEMPRE. Quitarlo porque "queda mejor" deja la aplicación inutilizable con teclado,
 * y es de las cosas que en una administración pública no son opinables. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }