/* Hoja de estilo de la web. Los colores salen de la propia marca
   (web/static/marca.png): el azul #0060b0 y el naranja #f05000. No hay un
   tema inventado por encima de la identidad que la app ya tenía.

   Tres reglas que explican casi todo lo de abajo:

   1. El naranja es de UNA cosa: lo que está en marcha. Si se usara también
      para botones o enlaces dejaría de significar nada, y lo que el usuario
      busca al abrir la pantalla es precisamente qué se está codificando.
      Lo interactivo es azul; verde y rojo solo dicen hecho y error.
   2. Las cifras van en versales tabulares. La cola se repinta cada segundo
      y, con cifras proporcionales, «1:11» y «0:08» miden distinto: la línea
      entera baila a cada tic. Es la razón de font-variant-numeric, no un
      adorno tipográfico.
   3. Líneas antes que sombras. Esto es un panel de instrumentos de una
      herramienta de taller, no una web de tarjetas: la jerarquía la hacen el
      espacio y el peso del texto.

   Claro y oscuro son los dos de primera: la app declara color-scheme y se usa
   tanto de día en el portátil como de noche en el móvil. */

:root {
  color-scheme: light dark;

  /* marca */
  --azul: #005a9e;            /* interactivo: enlaces, foco, acción primaria */
  --azul-vivo: #0060b0;       /* el del logotipo, para rellenos */
  --naranja: #d94800;         /* SOLO «en marcha» */
  --verde: #1d7a43;
  --rojo: #b3261e;
  --ambar: #8a5a00;           /* espera a que el usuario haga algo */

  /* neutros con un punto de azul, para que convivan con la marca */
  --papel: #f7f8fa;
  --superficie: #ffffff;
  --superficie-2: #f0f2f5;
  --linea: #d8dde4;
  --linea-suave: #e7eaef;
  --tinta: #10151b;
  --tinta-suave: #59636f;

  /* escala tipográfica (tercera menor desde 15px) */
  --t-xs: 0.8rem;             /* 12.8 */
  --t-s: 0.875rem;            /* 14 */
  --t-m: 1rem;                /* 16 base del cuerpo */
  --t-l: 1.25rem;
  --t-xl: 1.5rem;
  --t-xxl: 1.9rem;

  /* espaciado: una sola progresión, para que el ritmo sea reconocible */
  --e1: .25rem;
  --e2: .5rem;
  --e3: .75rem;
  --e4: 1.25rem;
  --e5: 2rem;
  --e6: 3rem;
  --gap: var(--e3);           /* el nombre viejo, que usan las plantillas */

  --radio: 7px;
  --medida: 68ch;             /* largo de línea máximo del texto corrido */
}

@media (prefers-color-scheme: dark) {
  :root {
    --azul: #58a6f0;
    --azul-vivo: #1f74c4;
    --naranja: #ff7a33;
    --verde: #46c07a;
    --rojo: #ef6f66;
    --ambar: #e0a53f;
    --papel: #0d1117;
    --superficie: #151b23;
    --superficie-2: #1c232c;
    --linea: #2b333d;
    --linea-suave: #222a33;
    --tinta: #e6eaf0;
    --tinta-suave: #9aa5b1;
  }
}

* { box-sizing: border-box; }

/* El atributo `hidden` tiene que ganar siempre. Varias reglas de aquí dan
   display a elementos que el servidor pinta ocultos (el recuadro de
   progreso, los botones de la cola de subidas), y un display de autor pisa
   el del navegador: sin esto se ve un recuadro vacío en cada pantalla. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: var(--t-m)/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Todo lo que es una medida de la máquina —tiempos, tamaños, porcentajes,
   bitrates— con cifras de ancho fijo. Ver la regla 2 de arriba. */
.detalle, .cifras, .tiempos, .carpeta, ul.files, ul.cola-subidas,
td.progreso-celda, .progreso, input[type="number"], .nombre {
  font-variant-numeric: tabular-nums;
}

a { color: var(--azul); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- cabecera ---------------------------------------------------------- */

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}

a.marca {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-weight: 600;
  letter-spacing: -.01em;
  color: inherit;
  text-decoration: none;
}
a.marca img { display: block; width: 24px; height: 24px; }

nav { flex: 1; display: flex; gap: var(--e1); }
nav a {
  padding: var(--e1) var(--e3);
  border-radius: var(--radio);
  color: var(--tinta-suave);
  text-decoration: none;
  font-weight: 500;
}
nav a:hover { background: var(--superficie-2); color: var(--tinta); }

header form { margin: 0; margin-left: auto; }

/* en móvil la marca y «Salir» llenan la primera línea: la navegación baja a
   la suya en vez de partirse en dos */
@media (max-width: 32rem) {
  header { gap: var(--e2); }
  nav { order: 3; flex-basis: 100%; }
}

main { padding: var(--e5) var(--e4) var(--e6); max-width: 72rem; margin: 0 auto; }

/* --- texto -------------------------------------------------------------- */

h1 {
  margin: 0 0 var(--e4);
  font-size: var(--t-xxl);
  font-weight: 600;
  letter-spacing: -.02em;
}
h2 { font-size: var(--t-l); font-weight: 600; letter-spacing: -.01em; }

main > p, p.nota, fieldset > p { max-width: var(--medida); }
p.nota { font-size: var(--t-s); color: var(--tinta-suave); }
small.detalle { display: block; font-size: var(--t-s); color: var(--tinta-suave); }
.error { color: var(--rojo); }
code {
  font-size: .9em;
  padding: .1em .35em;
  background: var(--superficie-2);
  border-radius: 4px;
}

/* El hueco de avisos: pegado arriba y con sitio propio solo cuando dice
   algo, para que no deje un salto en blanco en todas las pantallas. */
#avisos {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--papel);
}
#avisos:not(:empty) {
  margin-bottom: var(--e4);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--rojo);
  border-left-width: 4px;
  border-radius: var(--radio);
  background: var(--superficie);
}
#avisos p { margin: 0; }

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

button {
  font: inherit;
  font-weight: 500;
  padding: .45em 1em;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
}
button:hover { background: var(--superficie-2); border-color: var(--tinta-suave); }
button:disabled { opacity: .5; cursor: default; }

/* La acción de la pantalla —encolar el trabajo, subir el archivo— en azul.
   Las que mandan un formulario de servicio (guardar un perfil, limpiar los
   terminados) se quedan en gris: si todo es primario, nada lo es. */
button[type="submit"] {
  color: #fff;
  background: var(--azul-vivo);
  border-color: transparent;
}
button[type="submit"]:hover {
  background: var(--azul);
  border-color: transparent;
}
@media (prefers-color-scheme: dark) {
  button[type="submit"] { color: #06121e; background: var(--azul); }
}

.perfiles button[type="submit"],
form.limpiar button[type="submit"] {
  color: var(--tinta);
  background: var(--superficie);
  border-color: var(--linea);
}
.perfiles button[type="submit"]:hover,
form.limpiar button[type="submit"]:hover {
  background: var(--superficie-2);
  border-color: var(--tinta-suave);
}

input, select, textarea {
  font: inherit;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .4em .55em;
}
input::placeholder { color: var(--tinta-suave); opacity: .85; }

/* La etiqueta encima del control, con un ancho de control constante: así los
   formularios tienen una columna de verdad en vez de un borde izquierdo
   dentado. Las casillas y los radios NO: ahí el texto va al lado. */
label { display: block; margin: 0 0 var(--e3); }
label > input:not([type="checkbox"]):not([type="radio"]),
label > select,
label > textarea {
  display: block;
  width: 100%;
  max-width: 24rem;
  margin-top: var(--e1);
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
}

fieldset {
  margin: 0 0 var(--e4);
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
/* Un fieldset dentro de otro (en Edición, «Salida» dentro de cada acción) no
   vuelve a pintar una tarjeta: solo se separa con su línea. */
fieldset fieldset { background: transparent; margin-bottom: 0; }

legend {
  padding: 0 var(--e2);
  margin-left: calc(var(--e2) * -1);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* --- la cola de trabajos ------------------------------------------------ */

table {
  width: 100%;
  /* fija: sin esto los porcentajes de abajo son una sugerencia y el
     navegador le da al nombre del archivo una columna de dos palabras */
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: var(--e3) var(--e3);
  border-bottom: 1px solid var(--linea-suave);
  vertical-align: top;
}
thead th {
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--tinta-suave);
  background: var(--superficie-2);
  border-bottom-color: var(--linea);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }

/* Proporciones fijas: sin esto el navegador le da al nombre del archivo una
   columna de dos palabras de ancho y parte «Blade Runner 2049» en tres
   líneas mientras la celda de progreso se queda estrecha. */
th:nth-child(1), td:nth-child(1) { width: 22%; }
th:nth-child(2), td:nth-child(2) { width: 24%; }
th:nth-child(3), td:nth-child(3) { width: 10%; }
th:nth-child(4), td:nth-child(4) { width: 32%; }
th:nth-child(5), td:nth-child(5) { width: 12%; }

td.nombre { font-weight: 500; overflow-wrap: anywhere; }
td.ajustes { font-size: var(--t-s); }
/* los parámetros son la letra pequeña del trabajo: se consultan, no se leen
   de corrido, así que bajan un escalón y ceden el ancho al progreso */
td.ajustes .detalle { margin-top: var(--e1); font-size: var(--t-xs); line-height: 1.45; }

/* la fase que da el núcleo («encode (CRF, una pasada)») ya trae sus propios
   paréntesis: aquí solo se separa del porcentaje */
.fase { font-weight: 400; color: var(--tinta-suave); }
.fase::before { content: " · "; }

/* El estado, con su punto: se lee de un vistazo bajando por la columna. */
td[class^="status-"] { white-space: nowrap; font-weight: 500; }
td[class^="status-"]::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-right: .5em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: .08em;
}
.status-running { color: var(--naranja); }
.status-done { color: var(--verde); }
.status-error { color: var(--rojo); }
.status-cancelled { color: var(--ambar); }
.status-pending { color: var(--tinta-suave); }

td.acciones { text-align: right; }
td.acciones form { display: inline; }
td.acciones button { padding: .3em .7em; font-size: var(--t-s); }
td form { margin: 0; }

/* La barra de transporte: es lo que se mira al volver horas después, así que
   ocupa el ancho de su celda y el porcentaje va pegado a ella. */
progress {
  display: block;
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  margin: var(--e1) 0;
  border: none;
  border-radius: 999px;
  background: var(--superficie-2);
  appearance: none;
}
progress::-webkit-progress-bar {
  background: var(--superficie-2);
  border-radius: 999px;
}
progress::-webkit-progress-value {
  background: var(--naranja);
  border-radius: 999px;
}
progress::-moz-progress-bar { background: var(--naranja); border-radius: 999px; }
/* indeterminada (sin value): la subida antes del primer aviso de bytes */
progress:not([value])::-webkit-progress-bar { background: var(--superficie-2); }

/* --- limpiar terminados ------------------------------------------------- */

form.limpiar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin: 0 0 var(--e4);
}
form.limpiar small { color: var(--tinta-suave); max-width: var(--medida); }

/* --- explorador de archivos --------------------------------------------- */

.pestanas { display: flex; gap: var(--e2); margin: 0 0 var(--e3); }

p.carpeta {
  margin: 0 0 var(--e2);
  padding: var(--e2) var(--e3);
  background: var(--superficie-2);
  border-radius: var(--radio);
  font-size: var(--t-s);
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}

ul.files { list-style: none; padding: 0; margin: 0; }
ul.files li { overflow-wrap: anywhere; border-bottom: 1px solid var(--linea-suave); }
ul.files li:last-child { border-bottom: none; }
ul.files label, ul.files a {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  margin: 0;
  padding: var(--e2) var(--e2);
  border-radius: 5px;
}
ul.files a { color: inherit; text-decoration: none; font-weight: 500; }
ul.files label:hover, ul.files a:hover { background: var(--superficie-2); }
/* la casilla que sigue a la lista no es una fila más de la lista */
ul.files + label { margin-top: var(--e3); }

ul.files label:has(:checked) {
  background: color-mix(in srgb, var(--azul) 12%, transparent);
  font-weight: 500;
}

/* --- subidas ------------------------------------------------------------ */

p.archivo, span.archivo {
  margin: var(--e1) 0;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}

.progreso {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--e1) var(--e3);
  margin: var(--e3) 0 0;
  padding: var(--e3);
  background: var(--superficie-2);
  border-radius: var(--radio);
}
.progreso progress { grid-column: 1; margin: 0; }
.progreso button { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.progreso .cifras { grid-column: 1; font-weight: 500; }
/* lleva el nombre del archivo que está subiendo: no puede ir en el gris de
   lo accesorio, que es justo lo que se quiere leer */
.progreso .tiempos {
  grid-column: 1;
  font-size: var(--t-s);
  overflow-wrap: anywhere;
}

ul.cola-subidas { list-style: none; padding: 0; margin: var(--e3) 0 0; }
ul.cola-subidas li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--linea-suave);
}
ul.cola-subidas li:last-child { border-bottom: none; }
ul.cola-subidas .nombre { flex: 1; min-width: 12rem; overflow-wrap: anywhere; }
ul.cola-subidas button { padding: .25em .6em; font-size: var(--t-s); }
ul.cola-subidas .estado-subiendo .nombre { color: var(--naranja); }
ul.cola-subidas .estado-hecho .nombre { color: var(--verde); }
ul.cola-subidas .estado-error .nombre { color: var(--rojo); }
ul.cola-subidas .estado-cancelado .nombre,
ul.cola-subidas .estado-permiso .nombre { color: var(--ambar); }

/* --- carátula ----------------------------------------------------------- */

#soltar-caratula {
  padding: var(--e4);
  margin-bottom: var(--e4);
  border: 2px dashed var(--linea);
  border-radius: var(--radio);
  text-align: center;
}
#soltar-caratula p { margin: 0 0 var(--e2); color: var(--tinta-suave); }
#soltar-caratula.soltando {
  border-style: solid;
  border-color: var(--azul);
  background: color-mix(in srgb, var(--azul) 8%, transparent);
}

.caratula-vista { overflow-wrap: anywhere; }
.caratula-vista img {
  max-width: 100%;
  border: 1px solid var(--linea);
  border-radius: 5px;
}

/* --- perfiles ----------------------------------------------------------- */

.perfiles {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--e3);
  margin-bottom: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.perfiles form { display: flex; align-items: end; gap: var(--e3); margin: 0; }
.perfiles label { margin: 0; }
.perfiles .exito { margin: 0; color: var(--verde); font-weight: 500; }

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

body.login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--e4);
}
body.login form {
  display: grid;
  gap: var(--e3);
  width: min(22rem, 100%);
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 12px;
}
h1.logotipo { margin: 0 0 var(--e4); line-height: 0; }
h1.logotipo img { display: block; width: 100%; height: auto; }
/* el nombre del logotipo es azul marino: sobre fondo oscuro se perdería */
@media (prefers-color-scheme: dark) {
  h1.logotipo img {
    background: #fff;
    border-radius: 10px;
    padding: var(--e3);
    box-sizing: border-box;
  }
}

/* --- móvil -------------------------------------------------------------- */

@media (max-width: 46rem) {
  main { padding: var(--e4) var(--e3) var(--e5); }
  h1 { font-size: var(--t-xl); }

  /* La cola deja de ser una tabla y pasa a ser una ficha por trabajo: en
     360 px, cinco columnas dejan el nombre en una tira de dos letras. */
  table, thead, tbody, tr, th, td { display: block; width: auto; }
  thead { display: none; }
  table { border-radius: var(--radio); }
  tbody tr {
    padding: var(--e3);
    border-bottom: 1px solid var(--linea);
  }
  tbody tr:last-child { border-bottom: none; }
  td { padding: var(--e1) 0; border: none; }
  th:nth-child(n), td:nth-child(n) { width: auto; }
  td.acciones { text-align: left; padding-top: var(--e2); }
  td:empty { display: none; }
}

/* --- pantalla de Archivos ------------------------------------------------ */
/* Una fila por archivo con sus acciones. El botón que borra va en rojo y
   separado del resto: es lo único de la app que destruye algo. */
ul.archivos li { display: flex; flex-wrap: wrap; align-items: center;
                 gap: var(--e2); padding: var(--e2); }
ul.archivos .nombre { flex: 1; min-width: 14rem; overflow-wrap: anywhere; }
ul.archivos .peso { color: var(--tinta-suave); font-size: var(--t-s); }
ul.archivos .en-uso { color: var(--ambar); font-size: var(--t-s); }
ul.archivos form { display: flex; align-items: center; gap: var(--e2);
                   margin: 0; }
ul.archivos input[name="nombre"] { width: 16rem; font-size: var(--t-s);
                                   padding: .25em .4em; }
ul.archivos button { padding: .3em .7em; font-size: var(--t-s); }
ul.archivos a.descargar { font-size: var(--t-s); white-space: nowrap; }
button.peligro { color: var(--rojo); border-color: var(--rojo); }
button.peligro:hover { color: #fff; background: var(--rojo);
                       border-color: var(--rojo); }
.exito { color: var(--verde); font-weight: 500; }