/* =====================================================================
   Hoja de estilo del Grupo Papelera FK & RR.

   Copiada TAL CUAL de la herramienta de conversion, que a su vez sigue el
   manual de marca (paleta 2.3, tipografia 2.4). No se toca aqui: si el manual
   cambia, cambia alla y se vuelve a copiar. Dos herramientas que se ven
   distinto se sienten como dos empresas.
   ===================================================================== */
/* Axiforma Regular, tipografia principal del Grupo (manual 2.4).
   Solo para titulares, navegacion y rotulos: el manual prohibe usarla en
   cuerpos de texto largos. */
@font-face{
  font-family:"Axiforma";
  src:url("Axiforma-Regular.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* Paleta del manual, seccion 2.3 */
  --azul:#001B8F;        /* azul profundo, institucional */
  --azul-op:#164A9D;     /* azul Grupo, variante operativa */
  --cian:#00A3E0;        /* acento, uso minimo */
  --verde:#2E7D52;
  --crema:#F5F1E8;       /* fondos secundarios */
  --carbon:#1A1A1A;      /* cuerpo de texto */
  --blanco:#fff;
  --rojo:#9B2C21;        /* fuera de paleta: errores. ver marca.py */
  --ambar:#8A5300;

  /* derivados: tintes muy suaves de la paleta para fondos de estado */
  --azul-f:#EDF1FA;
  --verde-f:#EAF3EE;
  --rojo-f:#F7ECE9;
  --ambar-f:#FDF3E3;
  --gris-f:#F3F0E9;

  --linea:#E3DED2;
  --linea-fuerte:#CFC9BA;
  --linea-azul:rgba(0,27,143,.16);
  --tenue:#66635C;
  --sombra:0 1px 2px rgba(26,26,26,.05),0 4px 14px rgba(0,27,143,.05);

  --radio:8px;
  --radio-chico:6px;

  /* Cadena de fuentes que exige el manual */
  --display:"Axiforma","Arial Nova",Arial,sans-serif;
  --texto:"Arial Nova",Arial,Helvetica,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--crema);color:var(--carbon);
     font:400 16px/1.55 var(--texto);-webkit-font-smoothing:antialiased}

/* ---------- cabecera ---------- */
header.barra{background:var(--blanco);border-bottom:3px solid var(--azul);
       padding:.6rem 1.4rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
       position:sticky;top:0;z-index:20}
header.barra img{height:34px;width:auto;display:block}
header.barra nav{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}
header.barra nav a{font:400 14px/1 var(--display);letter-spacing:.02em;
         color:var(--azul);text-decoration:none;padding:.55rem .8rem;
         border-radius:var(--radio-chico)}
header.barra nav a:hover{background:var(--azul-f)}
header.barra nav a.activo{background:var(--azul);color:var(--blanco)}
header.barra .yo{margin-left:auto;font:400 13px/1.35 var(--texto);color:var(--tenue);text-align:right}
header.barra .yo b{font-family:var(--display);color:var(--azul);font-weight:400;font-size:14px}
header.barra .yo a{font-size:13px;color:var(--tenue)}

main{max-width:1080px;margin:0 auto;padding:1.6rem 1.4rem 6rem}

/* ---------- tipografia ---------- */
h1{font:400 30px/1.15 var(--display);letter-spacing:-.01em;color:var(--azul);margin:0 0 .4rem}
h2{font:400 12px/1 var(--display);letter-spacing:.13em;text-transform:uppercase;
   color:var(--azul-op);margin:2.2rem 0 .8rem}
h3{font:400 18px/1.3 var(--display);color:var(--azul);margin:0 0 .5rem}
p{margin:0 0 .8rem}
a{color:var(--azul-op)}
.tenue{color:var(--tenue);font-size:14px}
.chico{font-size:13px}
b,.dato{font-weight:700}

/* Titulo de seccion con numero: las secciones de una orden van en el orden
   del trabajo (entran rollos, salen hojas, se cierra), y el numero lo dice. */
.seccion{display:flex;align-items:center;gap:.7rem;margin:2.2rem 0 .8rem}
.seccion .n{width:28px;height:28px;border-radius:50%;background:var(--azul);color:var(--blanco);
            font:400 13px/28px var(--display);text-align:center;flex:none}
.seccion h2{margin:0}
.seccion .tenue{margin-left:auto}

/* ---------- superficies ---------- */
.caja{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
      padding:1.1rem 1.3rem;margin-bottom:1rem;box-shadow:var(--sombra)}
.caja.suave{background:var(--gris-f);box-shadow:none}
.caja.plana{box-shadow:none}
.caja > :last-child{margin-bottom:0}
details.caja{padding:0}
details.caja > summary{padding:1rem 1.3rem;cursor:pointer;list-style:none;display:flex;gap:.3rem .6rem;align-items:center;flex-wrap:wrap}
details.caja > summary b{font-family:var(--display);font-weight:400;color:var(--azul);font-size:16px}
details.caja > summary .tenue{flex:1 1 auto}
details.caja > summary::-webkit-details-marker{display:none}
details.caja > summary::before{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--azul-op);
  border-bottom:2px solid var(--azul-op);transform:rotate(-45deg);transition:transform .15s;flex:none;margin:0 .2rem 0 .1rem}
details.caja[open] > summary::before{transform:rotate(45deg)}
details.caja > .interior{padding:0 1.3rem 1.2rem}
details.suelto > summary{cursor:pointer;color:var(--azul-op)}

/* ---------- el hilo de pasos ---------- */
.hilo{display:flex;gap:0;margin:.9rem 0 1.4rem;padding:0;list-style:none;
      overflow-x:auto;scrollbar-width:none}
.hilo::-webkit-scrollbar{display:none}
.hilo li{flex:1;min-width:92px;position:relative;text-align:center;
         font:400 11px/1.25 var(--display);letter-spacing:.04em;text-transform:uppercase;
         color:var(--tenue);padding-top:20px}
.hilo li::before{content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--linea-fuerte)}
.hilo li:first-child::before{left:50%} .hilo li:last-child::before{right:50%}
.hilo li::after{content:"";position:absolute;top:0;left:50%;width:14px;height:14px;margin-left:-7px;
                border-radius:50%;background:var(--blanco);border:2px solid var(--linea-fuerte)}
.hilo li.hecho{color:var(--azul-op)}
.hilo li.hecho::before,.hilo li.hecho::after{background:var(--azul-op);border-color:var(--azul-op)}
.hilo li.actual{color:var(--azul);font-weight:700}
.hilo li.actual::before{background:linear-gradient(90deg,var(--azul-op) 50%,var(--linea-fuerte) 50%)}
.hilo li.actual::after{background:var(--blanco);border:4px solid var(--azul);width:16px;height:16px;margin-left:-8px;top:-1px}
.hilo li.actual.pausa::after{border-color:var(--ambar)}
.hilo li.actual.pausa{color:var(--ambar)}
.hilo li.fin.hecho::after{background:var(--verde);border-color:var(--verde)}
.hilo li.fin.hecho{color:var(--verde)}

/* ---------- "ahora te toca" ---------- */
.siguiente{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;
           background:var(--azul-f);border:1px solid var(--linea-azul);border-left:5px solid var(--azul);
           border-radius:var(--radio);padding:1rem 1.3rem;margin-bottom:1.2rem}
.siguiente.quieto{background:var(--gris-f);border-left-color:var(--linea-fuerte)}
.siguiente.listo{background:var(--verde-f);border-left-color:var(--verde)}
.siguiente .que{flex:1;min-width:240px}
.siguiente .que .e{font:400 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
                   color:var(--azul-op);margin-bottom:.35rem}
.siguiente.quieto .que .e{color:var(--tenue)}
.siguiente.listo .que .e{color:var(--verde)}
.siguiente .que .t{font-size:17px;line-height:1.4}
.siguiente .que .t b{font-family:var(--display);font-weight:400;color:var(--azul)}
.siguiente a.ir{flex:none}

/* ---------- datos ---------- */
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font:400 11px/1.2 var(--display);letter-spacing:.1em;
   text-transform:uppercase;color:var(--tenue);
   padding:0 .7rem .55rem 0;border-bottom:1px solid var(--linea-fuerte);white-space:nowrap}
td{padding:.6rem .7rem .6rem 0;border-bottom:1px solid var(--linea);vertical-align:middle}
tr:last-child td{border-bottom:0}
/* Un numero partido en dos lineas siempre esta mal: '$2.250' arriba y 'M'
   abajo se lee como otra cifra. Si no cabe, que la tabla se desplace -- para
   eso esta el scroll de .tabla. */
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla{overflow-x:auto;margin:0 -.2rem}
/* Una tabla de catorce columnas -- el mes a mes de un producto -- no cabe en un
   celular. Sin ancho minimo el navegador la encoge en vez de desplazarla, y el
   nombre del producto termina partido en cinco lineas mientras los numeros se
   pegan. Con ancho minimo, el contenedor hace su scroll y cada columna respira. */
.tabla.ancha table{min-width:760px}
.tabla.ancha td:first-child,.tabla.ancha th:first-child{min-width:220px}
tr.marcada td{background:var(--verde-f)}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.9rem 1.4rem}
.kpi .v{font:700 24px/1.15 var(--texto);font-variant-numeric:tabular-nums;color:var(--azul)}
.kpi .e{font:400 11px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;
        color:var(--tenue);margin-top:.3rem}
.kpi .v .tenue{font-size:15px;font-weight:400}

/* ---------- formularios ---------- */
input,select,button,textarea{font:inherit;border-radius:var(--radio-chico)}
input,select,textarea{border:1px solid var(--linea-fuerte);padding:.6rem .75rem;min-height:44px;
                      background:var(--blanco);color:var(--carbon);width:100%}
input::placeholder{color:#A39E93}
input:focus,select:focus{outline:2px solid var(--cian);outline-offset:-1px;border-color:var(--cian)}
input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--azul);cursor:pointer;margin:0}
input[type=radio]{width:20px;height:20px;min-height:0;accent-color:var(--azul);cursor:pointer;margin:0 .3rem 0 0;vertical-align:-3px}
label{display:block;font:400 11px/1.2 var(--display);letter-spacing:.09em;
      text-transform:uppercase;color:var(--tenue);margin-bottom:.4rem}
button,a.boton{border:0;min-height:44px;padding:.6rem 1.3rem;background:var(--azul);color:var(--blanco);
       font:400 15px/1.2 var(--display);cursor:pointer;letter-spacing:.01em;text-decoration:none;
       display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
       border-radius:var(--radio-chico);transition:background .12s,transform .06s}
button:hover,a.boton:hover{background:var(--azul-op)}
button:active,a.boton:active{transform:translateY(1px)}
button.sec,a.boton.sec{background:var(--blanco);color:var(--azul);border:1.5px solid var(--azul)}
button.sec:hover,a.boton.sec:hover{background:var(--azul-f)}
button.suave{background:var(--gris-f);color:var(--azul);border:1px solid var(--linea)}
button.suave:hover{background:var(--azul-f)}
button.peligro{background:var(--blanco);color:var(--rojo);border:1px solid var(--linea);
               min-height:36px;padding:.3rem .7rem;font-size:13px}
button.peligro:hover{background:var(--rojo-f)}
button.chico{min-height:36px;padding:.3rem .8rem;font-size:13px}
button[disabled]{opacity:.4;cursor:not-allowed}
button[disabled]:hover{background:var(--azul)}
button.sec[disabled]:hover{background:var(--blanco)}
.fila{display:flex;gap:.85rem;flex-wrap:wrap;align-items:end}
.campo{flex:1;min-width:130px}
.ayuda{color:var(--tenue);font-size:13px;margin:.4rem 0 0}

/* ---------- estados ---------- */
.aviso{padding:.8rem 1.1rem;border-radius:var(--radio);margin-bottom:1rem;font-size:15px;
       border:1px solid transparent;border-left-width:5px}
.aviso.ok{background:var(--verde-f);border-color:var(--verde);border-right-color:transparent;border-top-color:transparent;border-bottom-color:transparent;color:#1F5A3A}
.aviso.error{background:var(--rojo-f);border-left-color:var(--rojo);color:var(--rojo)}
.aviso.info{background:var(--azul-f);border-left-color:var(--azul-op);color:var(--carbon)}
.aviso.ambar{background:var(--ambar-f);border-left-color:var(--ambar);color:#5E3A05}
.aviso ul{margin:.35rem 0 0 1.1rem;padding:0}
.aviso b{font-family:var(--display);font-weight:400}

.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .7rem;border-radius:999px;
      font:400 11px/1.5 var(--display);letter-spacing:.06em;text-transform:uppercase;
      background:var(--gris-f);color:var(--azul-op);border:1px solid var(--linea);white-space:nowrap;
      vertical-align:middle}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75}
.pill.verde{background:var(--verde-f);color:var(--verde);border-color:rgba(46,125,82,.25)}
.pill.rojo{background:var(--rojo-f);color:var(--rojo);border-color:rgba(155,44,33,.25)}
.pill.ambar{background:var(--ambar-f);color:#6B4104;border-color:rgba(138,83,0,.3)}
.pill.azul{background:var(--azul-f);color:var(--azul);border-color:var(--linea-azul)}
.pill.sin::before{display:none}

/* El archivo plano necesita monoespaciada: delimitado por barras, las columnas
   tienen que alinear. Es la unica excepcion a las dos familias del manual. */
pre{background:var(--azul);color:var(--blanco);padding:.9rem 1.1rem;border-radius:var(--radio-chico);
    overflow-x:auto;margin:.7rem 0;font:400 13px/1.75 var(--mono)}

/* listas de rollos: filas que se leen en celular sin desplazarse a lo ancho.
   Una tabla de 7 columnas en 375 px esconde justo lo que importa (kilos y el
   boton de marcar); una fila con lo importante a la izquierda y el numero a la
   derecha, no. */
.lista{display:flex;flex-direction:column;margin:0 -.3rem}
.lista .item{display:grid;grid-template-columns:auto 1fr auto auto;gap:.3rem 1rem;align-items:center;
             padding:.7rem .3rem;border-bottom:1px solid var(--linea)}
.lista .item:last-child{border-bottom:0}
.lista .item.marcada{background:var(--verde-f);border-radius:var(--radio-chico)}
.lista .item.recomendado{background:var(--azul-f);border-radius:var(--radio-chico)}
.lista .n{color:var(--tenue);font-size:13px;min-width:1.2rem;text-align:right}
.lista .lote{font:400 16px/1.2 var(--display);color:var(--carbon)}
.lista .desc{color:var(--tenue);font-size:13px;margin-top:.15rem}
.lista .kg{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lista .kg b{font-size:17px}
.lista .kg .tenue{display:block;font-size:12px}
.lista .accion{display:flex;gap:.4rem;align-items:center;justify-content:flex-end}
.lista .accion form{margin:0}
.lista .total{display:flex;justify-content:space-between;padding:.7rem .3rem 0;color:var(--tenue);font-size:14px}
.lista .total b{color:var(--carbon);font-size:16px}
.lista label.lote{cursor:pointer;letter-spacing:0;text-transform:none;margin:0}

/* lista de ordenes (panel) */
.ordenes{display:flex;flex-direction:column;gap:.6rem}
.orden{display:grid;grid-template-columns:1.3fr 1.6fr 1fr auto;gap:.6rem 1.2rem;align-items:center;
       background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
       padding:.9rem 1.2rem;box-shadow:var(--sombra);text-decoration:none;color:inherit;
       transition:border-color .12s,transform .06s}
.orden:hover{border-color:var(--azul-op)}
.orden .cons{font:400 17px/1.2 var(--display);color:var(--azul)}
.orden .sub{color:var(--tenue);font-size:13px;margin-top:.15rem}
.orden .det{font-size:15px}
.orden .est .tenue{display:block;margin-top:.3rem;font-size:13px}
.orden .ir{color:var(--azul-op);font-size:22px;line-height:1}
.orden.mia{border-left:5px solid var(--azul)}
/* Una accion dentro de la fila, para resolver sin abrir el documento. Existe
   porque el jefe rutea veintitantos pedidos al dia y casi todos por la misma
   via: obligarlo a entrar y salir de cada uno son dos viajes por pedido. El
   boton se queda a la derecha y el resto de la fila sigue siendo el enlace. */
.orden form{margin:0;justify-self:end}
.orden form button{white-space:nowrap}

/* El ciclo del inventario: las etapas en fila, con la flecha entre una y otra.
   Se agrega porque no habia forma de decir "esto se convierte en esto otro" con
   los componentes que ya existian -- una tabla o una lista muestran las cuatro
   cifras pero no que son la MISMA plata cambiando de forma, que es todo el
   punto de la pantalla. En celular se apila y las flechas se acuestan. */
.ciclo{display:flex;align-items:stretch;gap:.4rem;flex-wrap:wrap}
.ciclo .paso{flex:1;min-width:150px;background:var(--gris-f);border-radius:var(--radio-chico);
             padding:.8rem .9rem}
.ciclo .paso .e{font:400 11px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;
                color:var(--azul-op)}
.ciclo .paso .v{font:700 20px/1.2 var(--texto);font-variant-numeric:tabular-nums;
                color:var(--azul);margin:.25rem 0 .1rem}
.ciclo .flecha{align-self:center;color:var(--azul-op);font-size:26px;line-height:1}
@media (max-width:720px){
  .ciclo{flex-direction:column}
  .ciclo .flecha{align-self:center;transform:rotate(90deg)}
}

/* Toneladas que salieron cada mes. Serie unica, asi que no lleva leyenda: el
   titulo de la seccion ya dice que es. El valor va en tinta de texto y no en el
   azul de la barra -- el color identifica la barra, no el numero.
   El ultimo mes va a medias porque no ha terminado, y se dibuja distinto: una
   barra corta que se ve igual que las demas se lee como una caida de verdad. */
.meses{display:flex;align-items:flex-end;gap:2px;height:150px}
.meses .mes{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.meses .valor{font:400 12px/1 var(--texto);font-variant-numeric:tabular-nums;
              color:var(--tenue);margin-bottom:.25rem}
.meses .col{flex:1;width:100%;display:flex;align-items:flex-end;
            border-bottom:1px solid var(--linea)}
.meses .relleno{width:100%;background:var(--azul);border-radius:4px 4px 0 0;min-height:2px}
.meses .mes.parcial .relleno{background:var(--azul-f);border:1px solid var(--azul);
                             border-bottom:0}
.meses .rotulo{font:400 11px/1 var(--display);letter-spacing:.04em;color:var(--tenue);
               margin-top:.35rem}
/* El maximo de la escala, escrito. Cada grafica se reescala a SU maximo -- si
   no, la ciudad chica se veria como una linea plana pegada al piso -- y sin
   decir cual es, dos graficas de alturas iguales y totales muy distintos se
   leen como la misma. */
.meses-tope{font:400 11px/1 var(--display);letter-spacing:.04em;color:var(--tenue);
            text-align:right;margin-bottom:.3rem}

@media (max-width:560px){
  /* No caben doce rotulos: se deja uno de cada dos y la barra manda. El VALOR
     no se esconde -- es el dato, y sin el la grafica de una ciudad y la de otra
     se ven iguales porque cada una esta escalada a su propio maximo. */
  .meses{height:120px}
  .meses .valor{font-size:11px}
  .meses .mes:nth-child(even) .rotulo{visibility:hidden}
}

/* --------------------------------------------------------------------------
   Tablero: la fila de filtros, las tarjetas de arriba y el panel de a dos.
   Un tablero no es una pantalla de trabajo -- no hay un paso siguiente ni una
   accion principal, hay una pregunta que se acota. Por eso no lleva secciones
   numeradas (el numero es el orden del trabajo) y por eso los filtros van
   ARRIBA de todo: son la unica interaccion, y despues solo se lee.
   -------------------------------------------------------------------------- */
.filtros{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:flex-end;
         background:var(--blanco);border:1px solid var(--linea);
         border-radius:var(--radio);padding:.8rem 1rem;margin:1rem 0 1.1rem;
         box-shadow:var(--sombra);position:sticky;z-index:5;
         /* Debajo de la cabecera, que tambien es pegajosa y va en z-index 20.
            La altura la mide el JS del tablero y la deja en --alto-barra: la
            cabecera se parte en dos lineas cuando la ventana es angosta, asi
            que un numero fijo aqui esconderia los filtros justo donde mas se
            necesitan. En celular la cabecera no es pegajosa y esto da .4rem. */
         top:calc(var(--alto-barra, 0px) + .4rem)}
.filtros label{display:flex;flex-direction:column;gap:.25rem;
               font:400 11px/1.2 var(--display);letter-spacing:.09em;
               text-transform:uppercase;color:var(--tenue)}
.filtros select{min-width:150px}
.filtros #f-resumen{margin-left:auto;text-align:right}

/* Las cifras de cabecera. Se repiten las mismas cuatro siempre, en el mismo
   orden y en el mismo sitio: un tablero se lee de reojo, y lo que se mueve de
   posicion hay que volver a buscarlo cada vez. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
      gap:.7rem;margin-bottom:1.1rem}
.kpis .tarjeta{background:var(--blanco);border:1px solid var(--linea);
               border-left:4px solid var(--azul);border-radius:var(--radio);
               padding:.8rem 1rem;box-shadow:var(--sombra)}
.kpis .e{font:400 11px/1.2 var(--display);letter-spacing:.09em;
         text-transform:uppercase;color:var(--azul-op)}
.kpis .v{font:700 26px/1.15 var(--texto);font-variant-numeric:tabular-nums;
         color:var(--azul);margin:.3rem 0 .15rem}
.kpis .sub{font-size:12px;color:var(--tenue);line-height:1.3}

/* Dos bloques que se leen juntos -- la grafica y la tabla de bodegas -- y que
   en celular se apilan. */
.panel{display:grid;gap:.9rem;margin-bottom:.9rem}
@media(min-width:900px){.panel{grid-template-columns:1fr 1fr}}
.panel .caja{margin:0}
.panel h3,.caja>.fila h3{font:400 15px/1.2 var(--display);color:var(--azul);
                         margin:0 0 .7rem}

/* La barra de participacion dentro de la celda. Un porcentaje escrito obliga a
   comparar de memoria trece numeros; la barra deja ver de un vistazo que
   cartulinas y esmaltados son dos terceras partes de todo lo que sale. */
td.parte{min-width:130px}
td.parte span{display:inline-block;height:9px;background:var(--azul);
              border-radius:0 3px 3px 0;vertical-align:middle;min-width:2px}
td.parte i{font-style:normal;font-size:12px;color:var(--tenue);
           font-variant-numeric:tabular-nums;margin-left:.4rem}

/* Una familia se toca para ver solo esa. Se marca la escogida para que no haya
   que ir a mirar el filtro de arriba y volver. */
tr.familia{cursor:pointer}
tr.familia:hover{background:var(--azul-f)}
tr.familia.marcada{background:var(--azul-f);box-shadow:inset 3px 0 0 var(--azul)}

/* Los tramos de antiguedad: barras horizontales, una por rango. Horizontales y
   no verticales porque el rotulo es largo ("181 d - 1 ano") y de pie no cabe, y
   porque el orden aqui es una escala y se lee de arriba abajo como una lista.
   Los tramos de mas de 120 dias van en ambar: es donde esta el problema. */
.tramos{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.tramos .tramo{display:grid;grid-template-columns:104px 1fr 62px;gap:.6rem;
               align-items:center}
.tramos .r{font:400 11px/1.2 var(--display);letter-spacing:.04em;color:var(--tenue);
           text-align:right}
.tramos .b{background:var(--gris-f);border-radius:3px;height:16px;overflow:hidden}
.tramos .b span{display:block;height:100%;background:var(--azul);
                border-radius:0 3px 3px 0;min-width:2px}
.tramos .viejo .b span{background:var(--ambar)}
.tramos .v{font:400 13px/1 var(--texto);font-variant-numeric:tabular-nums;
           text-align:right}
@media (max-width:560px){
  .tramos .tramo{grid-template-columns:86px 1fr 54px;gap:.4rem}
  .tramos .r{font-size:10px}
}

:focus-visible{outline:2px solid var(--cian);outline-offset:2px}
@media (max-width:720px){
  /* en celular la cabecera no se pega ni se estira: una sola linea con el
     logo y las secciones, y el nombre debajo a la derecha */
  header.barra{position:static;gap:.3rem .6rem;padding:.45rem .8rem}
  header.barra img{height:26px}
  header.barra nav{gap:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  header.barra nav a{padding:.45rem .55rem;font-size:13px;white-space:nowrap}
  header.barra .yo{flex-basis:100%;text-align:left;font-size:12px;line-height:1.3}
  header.barra .yo br{display:none}
  header.barra .yo b{font-size:13px;margin-right:.3rem}
  .hilo{margin-left:-.3rem;margin-right:-.3rem}
  .hilo li{min-width:62px;font-size:9px;letter-spacing:0;padding-left:2px;padding-right:2px}
  details.caja > summary .tenue{flex-basis:100%;padding-left:1.3rem}
  .lista .item{grid-template-columns:auto 1fr auto;gap:.25rem .7rem}
  .lista .item .accion{grid-column:2 / -1;justify-content:flex-start;padding-top:.2rem}
  .lista .accion button,button.peligro,button.chico{width:auto}
  main{padding:1rem .9rem 5rem} h1{font-size:24px}
  .caja{padding:.95rem 1rem} details.caja > summary{padding:.9rem 1rem} details.caja > .interior{padding:0 1rem 1rem}
  .kpi{grid-template-columns:repeat(2,1fr)} .kpi .v{font-size:21px}
  .orden{grid-template-columns:1fr auto;padding:.85rem 1rem}
  .orden .det{grid-column:1 / -1;font-size:14px}
  .orden .est{grid-column:1 / -1}
  .orden .ir{grid-column:2;grid-row:1;align-self:start}
  .siguiente{padding:.9rem 1rem}
  .siguiente a.ir{width:100%}
  button,a.boton{width:100%}
  .fila > div:not(.campo){width:100%}
  .fila form{width:100%}
  table{font-size:14px} th{font-size:10px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}