/* Hoja de estilo del panel.
 *
 * Paleta tomada de OROIZA para que las dos plataformas se sientan de la misma casa. Sin
 * compartir código: son 90 líneas de CSS frente a arrastrar un sistema de diseño entero.
 */

:root {
  --ambar: #e2822c;
  --pizarra: #141a21;
  --papel: #f6f4f0;
  --exito: #2e7d5b;
  --aviso: #b5761a;
  --peligro: #b3402f;

  --fondo: var(--papel);
  --superficie: #fff;
  --texto: var(--pizarra);
  --tenue: #5f6b78;
  --borde: #dcd7cf;
  --radio: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e1216;
    --superficie: #171d24;
    --texto: #e8e6e2;
    --tenue: #97a2ad;
    --borde: #2a333d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--fondo);
}

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

header.principal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.5rem;
  background: var(--pizarra);
  color: var(--papel);
}
header.principal a { color: var(--papel); text-decoration: none; opacity: 0.85; }
header.principal a:hover, header.principal a[aria-current] { opacity: 1; text-decoration: underline; }
header.principal .marca { font-weight: 700; letter-spacing: 0.02em; color: var(--ambar); }
header.principal .separador { margin-left: auto; }

/* El entorno va siempre a la vista: confundir pruebas con producción es el error
 * operativo más caro posible. */
.entorno {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}
.entorno.sandbox { background: var(--aviso); color: #fff; }
.entorno.production { background: var(--exito); color: #fff; }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; }

.tarjetas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.tarjeta {
  flex: 1 1 160px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem;
}
.tarjeta .cifra { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.tarjeta .rotulo { color: var(--tenue); font-size: 0.85rem; }
.tarjeta.alerta { border-color: var(--peligro); }
.tarjeta.alerta .cifra { color: var(--peligro); }

table { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
th, td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--borde); }
th { font-size: 0.8rem; text-transform: uppercase; color: var(--tenue); letter-spacing: 0.03em; }
tbody tr:last-child td { border-bottom: none; }
td.numero { font-variant-numeric: tabular-nums; text-align: right; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; }

.estado {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.estado.aceptada { background: #dcefe5; color: var(--exito); }
.estado.aceptada_con_errores { background: #f6e9d2; color: var(--aviso); }
.estado.rechazada, .estado.envio_fallido { background: #f6dcd7; color: var(--peligro); }
.estado.pendiente_envio, .estado.en_envio, .estado.firmada { background: #e5e7ea; color: var(--tenue); }
.estado.anulada { background: var(--pizarra); color: var(--papel); }

@media (prefers-color-scheme: dark) {
  .estado.aceptada { background: #14382a; }
  .estado.aceptada_con_errores { background: #3b2f16; }
  .estado.rechazada, .estado.envio_fallido { background: #3d1d17; }
  .estado.pendiente_envio, .estado.en_envio, .estado.firmada { background: #232b34; }
}

form.ficha { display: grid; gap: 0.9rem; max-width: 520px; }
label { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--tenue); }
input, select, textarea {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
}
button {
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: var(--radio);
  background: var(--ambar);
  color: #fff;
  cursor: pointer;
}
button.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
/* Dentro de la cabecera oscura el color normal del texto no se ve. */
header.principal button.secundario { color: var(--papel); border-color: rgba(246, 244, 240, 0.35); }
header.principal button.secundario:hover { border-color: var(--papel); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.aviso {
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  border-left: 4px solid;
  margin-bottom: 1rem;
  background: var(--superficie);
}
.aviso.error { border-color: var(--peligro); }
.aviso.correcto { border-color: var(--exito); }
.aviso.atencion { border-color: var(--aviso); }

.secreto {
  padding: 0.75rem;
  background: var(--pizarra);
  color: var(--papel);
  border-radius: var(--radio);
  word-break: break-all;
}

dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; }
dl.datos dt { color: var(--tenue); font-size: 0.9rem; }
dl.datos dd { margin: 0; }

.barras { display: grid; gap: 0.35rem; }
.barra { display: grid; grid-template-columns: 5rem 1fr 3rem; gap: 0.6rem; align-items: center; }
.barra .pista { background: var(--borde); border-radius: 999px; height: 0.7rem; overflow: hidden; }
/* En línea, un elemento ignora la anchura: sin `block` la barra se queda vacía. */
.barra .relleno { display: block; background: var(--ambar); height: 100%; }

.vacio { color: var(--tenue); padding: 2rem; text-align: center; }
.tenue { color: var(--tenue); }
footer { color: var(--tenue); font-size: 0.85rem; padding: 2rem 1.5rem; text-align: center; }