/*
  El aspecto del backoffice.

  Se sirve desde la propia aplicación y no desde un CDN, y las tipografías son las del sistema.
  No es purismo: la aplicación se usa desde China, donde Google Fonts está bloqueado y los CDN
  habituales van de irregulares a inalcanzables. Una hoja de estilos que no carga deja la
  pantalla en HTML sin formato, que es exactamente el "queda feo" que hay que evitar.

  La pila de fuentes incluye PingFang y Microsoft YaHei porque los datos traen texto chino: los
  nombres de carpeta del histórico están en chino y algunas direcciones también.
*/

:root {
  --ground: #f5f8f9;
  --surface: #ffffff;
  --surface-2: #eef3f5;
  --border: #dce5e9;
  --border-strong: #c3d1d7;
  --ink: #14212a;
  --muted: #5d7280;
  --accent: #0c6d87;
  --accent-ink: #ffffff;
  --accent-soft: #e1f0f4;
  --bad: #a33427;
  --bad-soft: #fbe6e2;
  --bad-border: #e8b7ae;
  --cambia: #8a5a00;
  --cambia-soft: #fdf0cf;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Consolas,
          "Liberation Mono", "Microsoft YaHei", monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0c1216;
    --surface: #131c21;
    --surface-2: #18242a;
    --border: #22303a;
    --border-strong: #33454f;
    --ink: #dbe6eb;
    --muted: #8699a5;
    --accent: #58bedb;
    --accent-ink: #06212a;
    --accent-soft: #16333d;
    --bad: #ee8878;
    --bad-soft: #38201c;
    --bad-border: #6b3730;
    --cambia: #f0c060;
    --cambia-soft: #3a2e12;

    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

code {
  font-family: var(--mono);
  font-size: 0.92em;
}

/* ---------- estructura ---------- */

.shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}

.brand span {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rastreo {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.sesion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

.sesion-nombre {
  font-size: 13px;
  color: var(--muted);
}

/* ---------- accesos rápidos ---------- */

.atajos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}

.atajos-label {
  font: 500 10px/1 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.atajo {
  font: 500 12.5px/1 var(--sans);
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
}

.atajo:hover {
  background: var(--accent-soft);
}

.atajo.activo {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ---------- reenvíos ---------- */

.aviso-reenvios {
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 13px;
  max-width: 110ch;
}

/* Cada línea reenviada empieza con una raya más marcada: se leen como grupos. */
tbody tr.grupo-inicio td {
  border-top: 2px solid var(--border-strong);
}

tbody tr.vigente td {
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}

.tag-vigente {
  display: inline-block;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 4px;
  padding: 3px 5px;
  margin-right: 4px;
  vertical-align: 1px;
}

/* El estado de una fila en los maestros de prueba: se queda o sobra. */
.tag-estado {
  display: inline-block;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 6px;
}

.tag-keep {
  color: var(--accent-ink);
  background: var(--accent);
}

.tag-delete {
  color: var(--bad);
  background: var(--bad-soft);
  border: 1px solid var(--bad-border);
}

/* Lo que cambia entre versiones: en la vigente, el valor que se queda; en las
   anteriores, el que había. */
td.cambia-nuevo,
.cambia-muestra {
  background: var(--cambia-soft) !important;
  color: var(--cambia);
  font-weight: 600;
}

td.cambia-antiguo {
  background: var(--cambia-soft) !important;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--cambia);
}

.cambia-muestra {
  padding: 1px 4px;
  border-radius: 3px;
}

tbody td a {
  color: var(--accent);
  text-decoration: none;
}

tbody td a:hover {
  text-decoration: underline;
}

.rail a.rail-maestro {
  font-weight: 600;
}

.tarjeta-maestro {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ---------- entrar ---------- */

.shell.sin-rail {
  grid-template-columns: minmax(0, 1fr);
}

.entrar {
  display: flex;
  justify-content: center;
  padding-top: 8vh;
}

.entrar-panel {
  width: min(100%, 360px);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 42, 0.06), 0 12px 28px -16px rgba(20, 33, 42, 0.25);
}

.entrar-brand {
  margin-bottom: 14px;
}

.entrar-panel label {
  font: 500 10px/1 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

.entrar-panel input[type="text"],
.entrar-panel input[type="password"] {
  font: 400 14px/1.3 var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 9px 10px;
  width: 100%;
}

.entrar-panel .btn {
  margin-top: 16px;
  padding: 10px 13px;
  font-size: 14px;
}

.entrar-error {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 6px;
  background: var(--bad-soft);
  border: 1px solid var(--bad-border);
  color: var(--bad);
  font-size: 13px;
}

.rastreo input {
  width: 240px;
}

.rail {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.rail-label {
  font: 500 10px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 10px 8px;
}

.rail-label:first-child {
  padding-top: 2px;
}

.rail a {
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13.5px;
}

.rail a:hover {
  background: var(--surface-2);
}

.rail a[aria-current] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.main {
  padding: 22px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---------- cabecera de página ---------- */

.head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.head h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.head code {
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 3px;
}

.descripcion {
  margin: -8px 0 0;
  color: var(--muted);
  max-width: 72ch;
}

/* ---------- paneles ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.filtros {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filtros form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.errores {
  padding: 14px 18px 18px;
  border-color: var(--bad-border);
  background: var(--bad-soft);
}

.errores h2 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--bad);
}

.errores p {
  margin: 0 0 10px;
  color: var(--ink);
  max-width: 72ch;
}

.errores ul {
  margin: 0;
  padding-left: 18px;
}

.errores li {
  margin-bottom: 4px;
}

.errores code {
  color: var(--bad);
  margin-right: 6px;
}

.vacio {
  margin: 0;
  padding: 28px 18px;
  color: var(--muted);
  text-align: center;
}

/* ---------- controles ---------- */

.builder {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

select,
input[type="text"],
input[type="date"] {
  font: 400 13px/1 var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 8px 9px;
  min-width: 0;
}

select {
  cursor: pointer;
}

input[type="text"] {
  font-family: var(--mono);
  font-size: 12.5px;
}

#valor {
  width: 220px;
}

::placeholder {
  color: var(--muted);
  opacity: 1;
}

.btn {
  font: 500 13px/1 var(--sans);
  border-radius: 6px;
  padding: 8px 13px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  background: var(--surface-2);
}

.btn.inerte {
  opacity: 0.4;
  cursor: default;
}

.wire {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  min-width: 0;
}

.wire-label {
  font: 500 10px/1 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.wire input[type="text"] {
  flex: 1;
  min-width: 0;
}

.chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 12px/1 var(--mono);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 5px 6px 5px 8px;
}

.chip a {
  text-decoration: none;
  opacity: 0.65;
  padding: 1px 3px;
  border-radius: 3px;
}

.chip a:hover {
  opacity: 1;
  background: var(--surface-2);
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn-buscar {
  padding-left: 18px;
  padding-right: 18px;
}

/* ---------- filtros fijos ---------- */

.fijos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.fijo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  min-width: 0;
}

.fijo-titulo {
  font: 500 10px/1 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.fijo-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fijo-que {
  font-size: 13px;
  font-weight: 500;
}

.fijo-nota {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
}

.fecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.fecha input {
  padding: 6px 8px;
  font-variant-numeric: tabular-nums;
}

.quitar-fechas {
  font: 400 12px/1 var(--sans);
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 5px 7px;
  cursor: pointer;
}

.quitar-fechas:hover {
  color: var(--ink);
  border-color: var(--border-strong);
  background: var(--surface);
}

.rangos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rango {
  font: 500 12px/1 var(--sans);
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
}

.rango:hover {
  background: var(--accent-soft);
}

.rango.activo {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.fijo-cliente select {
  min-width: 220px;
}

.casilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px 4px 6px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.casilla:hover {
  border-color: var(--border-strong);
}

/* Las marcas, una debajo de otra: así los tres grupos caben en una fila. */
.fijo-marcas .fijo-fila {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.fijo-marcas .casilla {
  border: 0;
  background: transparent;
  padding: 2px 0;
}

.fijo-marcas .casilla:hover {
  color: var(--accent);
}

.casilla input,
.columnas-lista input,
.exportar-lista input {
  accent-color: var(--accent);
  margin: 0;
}

/* Con filtros fijos encima, el constructor queda separado igual que la caja conditions. */
.fijos + .builder {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}

/* ---------- antes de buscar ---------- */

.espera {
  padding: 30px 18px 32px;
  text-align: center;
  border-style: dashed;
}

.espera-titulo {
  margin: 0 0 6px;
  font-size: 15px;
}

.espera-texto {
  margin: 0;
  color: var(--muted);
}

.aviso-columnas {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  align-self: flex-start;
}

/* ---------- columnas ---------- */

.columnas {
  position: relative;
}

.columnas > summary {
  list-style: none;
  user-select: none;
}

.columnas > summary::-webkit-details-marker {
  display: none;
}

.columnas[open] > summary {
  background: var(--surface-2);
  border-color: var(--accent);
}

.cuenta {
  font: 400 11.5px/1 var(--sans);
  color: var(--muted);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

.columnas-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: 340px;
  max-height: min(70vh, 620px);
  overflow-y: auto;
  padding: 12px 12px 0;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 33, 42, 0.06), 0 16px 32px -18px rgba(20, 33, 42, 0.35);
}

.columnas-nota {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
}

.columnas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.columnas-lista li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 5px;
}

.columnas-lista li:hover {
  background: var(--surface-2);
}

.columnas-lista label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  font-size: 12.5px;
}

.columnas-lista code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.columnas-lista li.fija label {
  cursor: default;
  color: var(--muted);
}

.siempre {
  font-size: 11px;
  color: var(--muted);
}

.mover {
  display: flex;
  gap: 2px;
}

.mover button {
  font: 400 12px/1 var(--sans);
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
}

.mover button:hover {
  color: var(--accent);
  border-color: var(--border-strong);
  background: var(--surface);
}

.columnas-acciones {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 0 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.columnas-acciones .btn:first-child {
  margin-right: auto;
}

/* ---------- exportar ---------- */

.dialogo {
  width: min(620px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 24px 48px -24px rgba(20, 33, 42, 0.45);
}

.dialogo::backdrop {
  background: rgba(10, 20, 26, 0.45);
}

.dialogo form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.dialogo-cabecera {
  padding: 18px 20px 4px;
}

.dialogo-cabecera h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}

.dialogo-cabecera p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.dialogo-atajos {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}

.dialogo-atajos .btn {
  padding: 6px 11px;
  font-size: 12.5px;
}

.dialogo-atajos .dim {
  margin-left: auto;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.exportar-lista {
  list-style: none;
  margin: 0;
  padding: 10px 20px;
  overflow-y: auto;
  columns: 2 220px;
  column-gap: 20px;
}

.exportar-lista li {
  break-inside: avoid;
  padding: 3px 0;
}

.exportar-lista label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12.5px;
}

.dialogo-pie {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}

/* ---------- meta ---------- */

.meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.meta strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.sep {
  color: var(--border-strong);
}

.dim {
  color: var(--muted);
}

.meta-end {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* ---------- tabla ---------- */

.table-wrap {
  overflow-x: auto;
  border-radius: 8px 8px 0 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  text-align: left;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  white-space: nowrap;
}

thead th a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

thead th a:hover {
  color: var(--ink);
}

thead th .arrow {
  opacity: 0;
  margin-left: 5px;
  font-size: 9px;
}

thead th[data-dir="asc"],
thead th[data-dir="desc"] {
  color: var(--accent);
}

thead th[data-dir="asc"] .arrow,
thead th[data-dir="desc"] .arrow {
  opacity: 1;
}

tbody td {
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  vertical-align: baseline;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  /* Los valores en bruto pueden ser largos: se recortan y el valor entero queda en el title. */
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

tbody tr:hover td {
  background: var(--surface-2);
}

.foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
}

.pager {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}

.pager .btn {
  padding: 6px 11px;
  font-size: 12.5px;
}

/* ---------- inicio ---------- */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px 16px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tarjeta:hover {
  border-color: var(--accent);
}

.tarjeta h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.tarjeta code {
  font-size: 11.5px;
  color: var(--muted);
}

.tarjeta p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.gramatica {
  padding: 16px 18px 18px;
}

.gramatica h2 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
}

.gramatica p {
  margin: 0 0 12px;
  max-width: 72ch;
  color: var(--muted);
}

.gramatica tbody td {
  max-width: none;
}

.nota {
  margin: 12px 0 0 !important;
  font-size: 12.5px;
}

.head-tramo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.head-tramo h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.head-tramo code {
  font-size: 12px;
  color: var(--muted);
}

.head-tramo span {
  margin-left: auto;
  font-size: 12.5px;
}

@media (max-width: 860px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail {
    display: none;
  }

  .main {
    padding: 18px 14px 32px;
  }

  .rastreo input {
    width: 150px;
  }

  .columnas-panel {
    width: min(340px, calc(100vw - 32px));
  }
}