/* Registro de trazabilidad — CRT
   Rediseño de septiembre de 2026. Tres decisiones de fondo:

   1. La navegación va en una barra lateral. Antes ocupaba la cabecera y
      empujaba el contenido hacia abajo en cada pantalla.
   2. Naranja para la identidad del CRT y para lo que se puede pulsar. El
      «pendiente» pasa a azul y el problema real a rojo frío: tres colores
      con tres significados, sin que ninguno se confunda con otro.
   3. Jerarquía por tamaño y peso, no por versalitas espaciadas.

   Tamaños en rem y mínimo de 13 px, para que la letra del navegador mande.
*/

:root{
  --naranja:#D4500D; --naranja-o:#A63B08; --naranja-cl:#FFF1E8; --naranja-bd:#F5D5C0;
  --tinta:#17140F; --tinta2:#6E6459; --tinta3:#9A9187;
  --papel:#FAF8F5; --sup:#FFFFFF; --linea:#E8E2D9; --linea2:#D6CEC2;
  --azul:#1F5673; --azul-cl:#E8F1F6; --azul-bd:#C7DDE9;
  --rojo:#9F1239; --rojo-cl:#FDE9EF; --rojo-bd:#F3C9D6;
  --s:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --m:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}

body{margin:0;background:var(--papel);color:var(--tinta);
     font:1rem/1.5 var(--s);-webkit-font-smoothing:antialiased;
     display:flex;min-height:100vh}

a{color:var(--naranja-o);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid rgba(212,80,13,.3);outline-offset:1px;border-radius:6px}

/* ------------------------------------------------------------ barra lateral */

aside{width:232px;flex-shrink:0;background:var(--sup);border-right:1px solid var(--linea);
      padding:22px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.marca{display:flex;align-items:center;gap:10px;padding:0 10px 20px;
       border-bottom:1px solid var(--linea)}
.marca a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px}
.logo{width:30px;height:30px;border-radius:8px;background:var(--naranja);color:#fff;
      display:grid;place-items:center;font:700 .8125rem var(--s);letter-spacing:-.02em;flex-shrink:0}
.marca b{font-size:.9375rem;font-weight:600;letter-spacing:-.02em;display:block;line-height:1.2}
.marca span{font-size:.75rem;color:var(--tinta2)}
nav{margin-top:14px}
.nav-t{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
       color:var(--tinta3);padding:0 10px;margin:16px 0 6px}
nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--tinta);
      text-decoration:none;font-size:.90625rem;cursor:pointer}
nav a:hover{background:var(--papel);text-decoration:none}
nav a.on{background:var(--naranja-cl);color:var(--naranja-o);font-weight:500}
.pie-l{margin-top:24px;padding:12px 10px;border-top:1px solid var(--linea);
       font-size:.8125rem;color:var(--tinta2)}
.pie-l b{display:block;color:var(--tinta);font-weight:500}

/* ----------------------------------------------------------------- contenido */

main{flex:1;min-width:0}
.top{position:sticky;top:0;z-index:5;background:rgba(250,248,245,.9);
     backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--linea);
     padding:16px 34px;display:flex;justify-content:space-between;align-items:center;
     gap:16px;flex-wrap:wrap}
.top h1{font-size:1.1875rem;font-weight:600;margin:0;letter-spacing:-.02em}
.top .sub{font-size:.8125rem;color:var(--tinta2);margin-top:1px}
.cuerpo{padding:26px 34px 70px;max-width:1180px}
.intro{margin-bottom:22px}
.intro h2{font-size:1.5rem;font-weight:600;letter-spacing:-.025em;margin:0 0 6px}
.intro p{color:var(--tinta2);margin:0}

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

.boton,.btn{font:500 .90625rem var(--s);padding:8px 16px;border-radius:8px;
     border:1px solid var(--linea2);background:var(--sup);color:var(--tinta);
     cursor:pointer;text-decoration:none;display:inline-block}
.boton:hover,.btn:hover{border-color:var(--tinta3);text-decoration:none}
.boton{background:var(--naranja);border-color:var(--naranja);color:#fff}
.boton:hover{background:var(--naranja-o);border-color:var(--naranja-o)}
.boton--claro{background:var(--sup);border-color:var(--linea2);color:var(--tinta)}
.boton--claro:hover{background:var(--papel);border-color:var(--tinta3)}
.boton:disabled{opacity:.55;cursor:progress}
.pila{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:22px}

input[type=text],input[type=password],input[type=file],select{
  font:.9375rem var(--s);padding:8px 11px;border:1px solid var(--linea2);
  border-radius:8px;background:var(--sup);color:var(--tinta)}
.buscador{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.buscador input{min-width:150px}

/* -------------------------------------------------------------------- cifras */

.datos,.cifras{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--linea);
       border-radius:12px;background:var(--sup);overflow:hidden;margin-bottom:22px}
.dato,.cifra{flex:1;min-width:132px;padding:14px 18px;border-right:1px solid var(--linea)}
.dato:last-child,.cifra:last-child{border-right:0}
.dato b,.cifra__valor{display:block;font:600 1.4375rem var(--s);letter-spacing:-.03em;
        font-variant-numeric:tabular-nums;line-height:1.2}
.dato span,.cifra__etiqueta{font-size:.78125rem;color:var(--tinta2);
        text-transform:none;letter-spacing:0;font-family:var(--s);margin-top:2px}
.dato.al b,.cifra__valor.alerta{color:var(--rojo)}

/* --------------------------------------------------------- lista y detalle */

.split{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.lista{background:var(--sup);border:1px solid var(--linea);border-radius:12px;
       overflow:hidden;max-height:74vh;display:flex;flex-direction:column}
.busca{padding:10px;border-bottom:1px solid var(--linea)}
.busca input{width:100%;background:var(--papel)}
.items{overflow-y:auto;flex:1}
.item{padding:11px 14px;border-bottom:1px solid var(--linea);cursor:pointer;
      display:block;border-left:3px solid transparent;width:100%;text-align:left;
      background:none;border-top:0;border-right:0;font:inherit;color:inherit}
.item:hover{background:var(--papel)}
.item.on{background:var(--naranja-cl);border-left-color:var(--naranja)}
.item .l1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.item .n{font-weight:500;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .k{font:500 .8125rem var(--m);color:var(--tinta2);
         font-variant-numeric:tabular-nums;flex-shrink:0}
.item .l2{font-size:.78125rem;color:var(--tinta2);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}

.panel,.bloque{background:var(--sup);border:1px solid var(--linea);border-radius:12px;
       padding:22px 24px;margin-bottom:18px}
.panel h2{font-size:1.3125rem;font-weight:600;letter-spacing:-.025em;margin:0 0 4px}
.panel .meta{font-size:.84375rem;color:var(--tinta2);margin-bottom:16px}
h3{font-size:.8125rem;font-weight:600;color:var(--tinta2);margin:22px 0 8px;
   letter-spacing:-.01em;text-transform:none;border:0;padding:0;font-family:var(--s)}
.panel h3:first-of-type{margin-top:0}

/* --------------------------------------------------------------- distintivos */

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.chip,.distintivo{font:500 .78125rem var(--s);padding:3px 10px;border-radius:6px;
      background:var(--papel);color:var(--tinta2);border:1px solid var(--linea);
      white-space:nowrap;letter-spacing:0}
.chip-n,.distintivo--acento{background:var(--naranja-cl);color:var(--naranja-o);border-color:var(--naranja-bd)}
.chip-r,.distintivo--alerta{background:var(--rojo-cl);color:var(--rojo);border-color:var(--rojo-bd)}
.chip-a,.distintivo--ambar{background:var(--azul-cl);color:var(--azul);border-color:var(--azul-bd)}

.marca-peligroso{display:inline-block;margin-left:6px;padding:0 6px;border-radius:5px;
      background:var(--rojo-cl);color:var(--rojo);font:500 .65625rem var(--s);
      vertical-align:1px;letter-spacing:0;text-transform:none;border:0}
.peligroso,.pel{color:var(--rojo);font-weight:500}
.vacio{color:var(--tinta3)}

/* ------------------------------------------------------------------- tablas */

table{width:100%;border-collapse:collapse;font-size:.84375rem;background:transparent}
th{text-align:left;font:500 .75rem var(--s);color:var(--tinta3);padding:6px 9px;
   border-bottom:1px solid var(--linea2);background:transparent;
   text-transform:none;letter-spacing:0}
td{padding:8px 9px;border-bottom:1px solid var(--linea);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--papel)}
td.mono,.mono{font-family:var(--m);font-size:.78125rem;font-variant-numeric:tabular-nums}
.num{text-align:right}
.pendiente-fila td:first-child{color:var(--azul)}
.scroll,.tabla-ancha{overflow-x:auto}
.panel .scroll{margin:0 -24px;padding:0 24px}
.tabla-ancha td{white-space:nowrap}

/* ------------------------------------------------------------------- avisos */

.aviso,.caja-info,.aviso-grande{padding:13px 16px;border-radius:10px;border:0;
  border-left:3px solid;font-size:.90625rem;margin-bottom:18px}
.aviso--error,.aviso-grande{background:var(--rojo-cl);border-color:var(--rojo);color:#7A0F2C}
.aviso--ok{background:var(--naranja-cl);border-color:var(--naranja);color:var(--naranja-o)}
.caja-info{background:var(--azul-cl);border-color:var(--azul);color:#14415A}
.aviso-grande__titulo{font-weight:600;margin:0 0 6px}
.nota{font-size:.8125rem;color:var(--tinta2)}
.pie{color:var(--tinta2);font-size:.8125rem;border-top:1px solid var(--linea);
     padding-top:18px;margin-top:36px}

.cinta{display:flex;height:6px;border:0;border-radius:980px;overflow:hidden;
       background:var(--linea);margin:4px 0 20px}
.cinta span{display:block}
.cinta .ok{background:var(--naranja)}
.cinta .pendiente{background:var(--azul-bd)}

/* ------------------------------------------------- pasos de subida de archivos */

.pasos{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}

/* Cada informe es una tarjeta con su número a la izquierda, en columna propia,
   para que los cinco queden alineados y se distingan de un vistazo. */
.paso{background:var(--sup);border:1px solid var(--linea);border-radius:12px;
      padding:20px 24px;display:grid;grid-template-columns:44px 1fr;gap:18px;
      align-items:start;transition:border-color .15s}
.paso:hover{border-color:var(--linea2)}

.paso__indice{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
      font:600 .875rem var(--s);font-variant-numeric:tabular-nums;
      background:var(--naranja);color:#fff;letter-spacing:-.01em}
/* Los que no son obligatorios llevan el número en hueco, no macizo. */
.paso--opcional .paso__indice{background:var(--papel);color:var(--tinta2);
      border:1px solid var(--linea2)}

.paso__titulo{margin:0 0 6px;font:600 1.0625rem var(--s);letter-spacing:-.02em;
      display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.3}

.etiqueta{font:500 .6875rem var(--s);padding:2px 9px;border-radius:980px;
      text-transform:none;letter-spacing:0;white-space:nowrap}
.etiqueta--necesario{background:var(--naranja-cl);color:var(--naranja-o)}
.etiqueta--opcional{background:var(--papel);color:var(--tinta2);border:1px solid var(--linea)}

/* La ruta dentro de Teixo: en monoespaciada y sobre fondo, porque es algo que
   se sigue con el dedo por los menús del programa. */
.ruta{display:inline-block;font-family:var(--m);font-size:.78125rem;color:var(--tinta2);
      background:var(--papel);border:1px solid var(--linea);border-radius:6px;
      padding:3px 9px;margin:0 0 10px}
.ruta b{color:var(--tinta);font-weight:600}

.paso__ayuda{margin:0;font-size:.875rem;color:var(--tinta2);max-width:68ch;line-height:1.55}
.paso__ayuda code{font-family:var(--m);font-size:.8125rem;background:var(--papel);
      border:1px solid var(--linea);border-radius:4px;padding:0 4px}
.paso__ayuda b{color:var(--tinta)}

.soltar{display:flex;align-items:center;gap:10px;border:1px dashed var(--linea2);
      border-radius:9px;padding:12px 14px;font-family:var(--m);font-size:.8125rem;
      color:var(--tinta2);cursor:pointer;background:var(--papel);margin-top:14px}
.soltar:hover{border-color:var(--naranja);color:var(--naranja-o);background:var(--naranja-cl)}
.soltar input[type=file]{position:absolute;opacity:0;width:.1px;height:.1px}
.soltar:before{content:"";width:16px;height:16px;flex-shrink:0;border-radius:3px;
      border:1.5px solid currentColor;opacity:.55}
/* Cuando ya hay archivo elegido, la zona deja de pedir y pasa a confirmar. */
.soltar.tiene{border-style:solid;border-color:var(--naranja);background:var(--naranja-cl);
      color:var(--naranja-o)}
.soltar.tiene:before{background:var(--naranja);border-color:var(--naranja);opacity:1}

/* Rótulo que separa los dos informes obligatorios de los demás. */
.grupo-pasos{display:flex;align-items:center;gap:12px;margin:12px 2px 0;
      font:600 .75rem var(--s);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta3)}
.grupo-pasos:after{content:"";flex:1;height:1px;background:var(--linea)}

.accion{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
      background:var(--sup);border:1px solid var(--linea);border-radius:12px;padding:18px 24px}

.recordatorio{background:var(--azul-cl);border-left:3px solid var(--azul);
              padding:14px 18px;border-radius:10px;margin-bottom:22px;font-size:.90625rem}
.recordatorio .mono{background:var(--sup);border:1px solid var(--azul-bd);
              border-radius:5px;padding:1px 6px}

.datos-ficha th{width:200px;font-weight:400;color:var(--tinta2)}
.datos-ficha td{font-family:var(--m);font-size:.8125rem}

/* -------------------------------------------------------------- modo oscuro */

@media (prefers-color-scheme: dark){
  :root{
    --naranja:#F0741F; --naranja-o:#FF9052; --naranja-cl:#33190B; --naranja-bd:#5C3315;
    --tinta:#F2EDE7; --tinta2:#A79C90; --tinta3:#7D746A;
    --papel:#12100E; --sup:#1C1917; --linea:#2C2724; --linea2:#453E38;
    --azul:#7EB8D6; --azul-cl:#10242E; --azul-bd:#2C566B;
    --rojo:#FF8FA8; --rojo-cl:#33131F; --rojo-bd:#5C2437;
  }
  .top{background:rgba(18,16,14,.9)}
  .boton{color:#1A0C05}
  .aviso--error,.aviso-grande{color:var(--rojo)}
  .caja-info{color:var(--azul)}
}

/* --------------------------------------------------------------- impresión */

@media print{
  aside,.top,.pila,.busca,.buscador{display:none}
  body{background:#fff;display:block}
  .cuerpo{padding:0;max-width:none}
  .panel,.bloque{border:0;padding:0;box-shadow:none}
  .split{display:block}
  table{font-size:9pt}
}

/* ------------------------------------------------------- pantallas estrechas */

@media(min-width:561px) and (max-width:900px){
  aside{width:186px;padding:18px 10px}
  .top,.cuerpo{padding-left:20px;padding-right:20px}
  .split{grid-template-columns:280px 1fr}
}

@media(max-width:560px){
  body{display:block}
  aside{width:auto;height:auto;position:static;border-right:0;
        border-bottom:1px solid var(--linea);padding:14px 18px}
  aside nav{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
  .nav-t{display:none}
  .pie-l{border-top:0;padding:8px 0 0;margin-top:8px}
  .top,.cuerpo{padding-left:18px;padding-right:18px}
}

/* Las cifras con unidad no deben partirse en dos líneas: «15.007 kg» se leía
   como «15.007» y debajo «kg». */
.num,td.mono.num,.item .k{white-space:nowrap}
.dato b,.cifra__valor{white-space:nowrap}

/* Los enlaces de vista de la barra lateral no navegan: cambian de vista. */
aside nav a[data-vista]{cursor:pointer}