/* =====================================================================
   FS - Pantallas chicas
   Lo que cambia cuando la ventana no da: la tabla se vuelve tarjetas.

   Parte de la hoja de estilos de FS, que se sirve en varios archivos
   enlazados en orden desde src/views/_estilos.php. El orden importa:
   la cascada es la concatenacion de todos ellos.
   ===================================================================== */
/* --------------------------------------------------------------------
   Pantallas chicas
   -------------------------------------------------------------------- */
/* En pantalla ancha el orden se elige clickeando el encabezado de la tabla, no
   con un selector. El selector sigue existiendo en el formulario -es lo que
   lleva el orden actual cuando filtras- pero no se muestra: dos controles
   visibles para lo mismo terminan contradiciendose.

   Va ANTES de la media query que lo muestra: las dos reglas tienen la misma
   especificidad, asi que gana la ultima que se lee. Al reves, el selector no
   apareceria nunca en el telefono. */
.solo-angosto { display: none; }
.solo-angosto-inline { display: none; }
/* La etiqueta corta de un boton, para el telefono, y la larga para la pantalla
   ancha. Mismo truco que .solo-angosto: la regla de abajo, en la media query,
   las da vuelta. */
.texto-corto { display: none; }

/* El boton de sacar la foto. El campo de archivo real esta oculto y este label
   hace de boton: un <label for> abre el selector igual que el campo, y de paso
   sigue siendo alcanzable con el teclado.

   Ancho completo y alto comodo porque se aprieta con el pulgar, parado frente a
   una maquina y probablemente con una mano sola. */
.btn-camara {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  font-size: 1rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------
   Ventana angosta pero todavia con tabla: la columna del UID queda fija

   Entre 700 y 1360px la tabla sigue siendo tabla y, según el ancho y los
   datos, puede scrollearse de costado. El tope era 980 hasta que llegó el
   menú lateral, que le come a la tabla el ancho que antes tenía.
   Sin esto, al correrse para ver Estado se pierde de vista de QUE maquina
   es cada fila, que es el unico dato que permite orientarse. Fijandola,
   el UID viaja con el scroll y las otras columnas pasan por debajo.

   El fondo es obligatorio: una celda sticky sin fondo deja ver el texto
   que pasa por atras.
   -------------------------------------------------------------------- */
/* El UID es la referencia principal para ubicar una reparacion. Estas dos
   lineas lo separan visualmente del REQUI y de la ZONA sin sumar color ni
   ruido a cada fila. En telefono la tabla pasa a tarjetas y no hacen falta. */
@media (min-width: 701px) {
  .tabla-cards th:nth-child(4),
  .tabla-cards td:nth-child(4) {
    border-left: 2px solid var(--acento);
    border-right: 2px solid var(--acento);
  }

  /* Vendor y Modelo, encerrados juntos con las mismas líneas: son la máquina,
     el otro dato con el que se reconoce una fila. Un solo bloque y no dos,
     para no cortar la tabla en más tramos. Las posiciones no se mueven: las
     columnas que aparecen según el usuario van después. Sólo en el listado;
     la ficha de máquina también usa .tabla-cards y ahí la 8 y la 9 son otras. */
  .tabla-reparaciones th:nth-child(8),
  .tabla-reparaciones td:nth-child(8) { border-left: 2px solid var(--acento); }
  .tabla-reparaciones th:nth-child(9),
  .tabla-reparaciones td:nth-child(9) { border-right: 2px solid var(--acento); }

  /* Trece columnas: tres píxeles menos a cada lado de cada celda son casi
     80 px, lo que le faltaba para entrar sin desplazarse con el menú lateral
     abierto en una pantalla de 1366. */
  .tabla-reparaciones th,
  .tabla-reparaciones td { padding-left: 6px; padding-right: 6px; }
}

@media (min-width: 701px) and (max-width: 1360px) {
  .tabla-cards th:nth-child(4),
  .tabla-cards td:nth-child(4) {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--fondo-panel);
    box-shadow: 1px 0 0 var(--borde);
  }

  .tabla-reparaciones th:nth-child(4) { background: var(--fondo-suave); }
  .tabla-reparaciones th:nth-child(4).th-activa { background: var(--acento-suave); }

  /* La celda fija lleva su propio fondo, así que también alterna: si no, en
     las filas pares quedaba un corte blanco a la altura del UID. */
  .tabla-reparaciones tbody tr:nth-child(even) td:nth-child(4) { background: var(--fondo); }

  .tabla-cards tr:hover td:nth-child(4),
  .tabla-reparaciones tbody tr:hover td:nth-child(4) { background: var(--fondo-hover); }
}

@media (max-width: 700px) {
  /* Las tres vistas de TOTAL FS caben en una sola franja táctil; el total y
     la mayor demora conservan la suya sin agrandar la tarjeta. */
  .resumen-total-fs {
    display: block;
    padding: 6px 9px;
  }
  .resumen-total-fs .resumen-cifra {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 6px;
    width: 100%;
  }
  .resumen-total-fs .resumen-num { font-size: 1.9rem; }
  .resumen-total-fs .resumen-rot { display: contents; }
  .resumen-total-fs .resumen-titulo {
    align-self: center;
    font-size: .85rem;
    line-height: 1.25;
  }
  .resumen-total-fs .resumen-desglose {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin: 2px 0 0;
  }
  .resumen-total-fs .resumen-punto { display: none; }
  .resumen-total-fs .resumen-desglose a {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 2px 3px;
    white-space: normal;
    text-decoration: none;
  }
  .resumen-total-fs .resumen-desglose-num {
    font-size: .95rem;
    line-height: 1;
    color: var(--acento);
  }
  .resumen-total-fs .resumen-desglose-etq {
    font-size: .72rem;
    line-height: 1.2;
    color: var(--acento);
  }
  .resumen-total-fs .resumen-detalle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 0;
    padding-top: 4px;
    border-top: 1px solid var(--borde);
  }
  .resumen-total-fs .resumen-peor {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }
  .resumen-total-fs .resumen-peor-caso {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
  }
  .resumen-total-fs .resumen-peor-etiqueta {
    color: var(--texto-suave);
    font-size: .75rem;
    font-weight: 400;
  }
  .resumen-total-fs .resumen-peor-dias { white-space: nowrap; }
  .resumen-total-fs .resumen-cola { align-self: flex-start; }

  /* --- Pestañas de reparaciones: una fila de casillas ----------------
     Las cuatro de primer nivel y "Más" tenian anchos distintos y se
     acomodaban en tres renglones desparejos, con "Más" sola abajo. Van en
     una fila de casillas iguales: el numero arriba, que es lo que se mira,
     y el nombre corto abajo.

     Solo con JavaScript, igual que el desplegable de "Más": sin el, las
     siete pestañas quedan a la vista y en siete casillas no entrarian.

     Van a los hijos directos (>) a proposito: las pestañas de adentro del
     menu de "Más" tambien son .tab, y ahi siguen siendo renglones. */
  html.js .tabs-reparaciones {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 0;
  }
  html.js .tabs-reparaciones > .tab,
  html.js .tabs-reparaciones > .tabs-mas > .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    box-sizing: border-box;
    height: 100%;
    min-height: 52px;
    margin: 0;
    padding: 6px 2px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--fondo-panel);
    font-size: .68rem;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
    color: var(--texto-suave);
  }
  html.js .tabs-reparaciones > .tab.activa,
  html.js .tabs-reparaciones > .tabs-mas > .tab.activa {
    color: var(--tab-color, var(--acento));
    background: var(--tab-bg, var(--acento-suave));
    border-color: var(--tab-color, var(--acento));
  }
  html.js .tabs-reparaciones > .tabs-mas[open] > .tab {
    color: var(--acento);
    background: var(--acento-suave);
    border-color: var(--acento);
  }

  /* El numero pasa arriba y en grande, sin la pastilla: en una casilla la
     pastilla era un recuadro adentro de otro. */
  html.js .tabs-reparaciones > .tab .tab-num,
  html.js .tabs-reparaciones > .tabs-mas > .tab .tab-num {
    order: -1;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--texto);
  }
  html.js .tabs-reparaciones > .tab.activa .tab-num,
  html.js .tabs-reparaciones > .tabs-mas > .tab.activa .tab-num { color: inherit; }

  /* TOTAL FS sigue siendo la unica encendida sin estar elegida: borde y
     numero rojos, y abierta, rojo lleno. */
  html.js .tabs-reparaciones > .tab-total_fs {
    color: var(--rojo);
    background: var(--rojo-bg);
    border-color: var(--rojo);
  }
  html.js .tabs-reparaciones > .tab-total_fs .tab-num { color: var(--rojo); }
  html.js .tabs-reparaciones > .tab-total_fs.activa {
    color: var(--fondo-panel);
    background: var(--rojo);
  }
  html.js .tabs-reparaciones > .tab-total_fs.activa .tab-num { color: var(--fondo-panel); }

  /* El nombre largo queda para el lector de pantalla; se ve el corto. */
  html.js .tabs-reparaciones > .tab .tab-nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.js .tabs-reparaciones > .tab .tab-corto { display: block; }

  /* En la casilla, los tres puntos ya dicen "aca hay mas": el triangulito
     con su linea sobra. */
  html.js .tabs-reparaciones .tab-mas-icono { display: block; order: -1; }
  html.js .tabs-reparaciones > .tabs-mas > .tab .tab-mas-flecha { display: none; }

  /* Plegada queda solo el numero: el desglose y la mayor demora se abren con
     la flecha. Toda la tarjeta la abre, no solo la flecha (fs.js), porque se
     toca con el pulgar. Solo con JavaScript: sin el, ni la flecha ni el
     plegado existen y la tarjeta se ve entera. */
  html.js .resumen-total-fs .resumen-cifra,
  .resumen-plegada { cursor: pointer; }
  html.js .resumen-total-fs .resumen-plegar {
    /* En el HTML va despues del desglose, que ocupa su propio renglon: sin
       ubicarla, el grid la mandaba abajo de todo. */
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: center;
    min-height: 44px;
    padding: 0 0 0 8px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .resumen-plegar:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
    border-radius: var(--radio-chico);
  }
  .resumen-flecha {
    display: block;
    color: var(--acento);
    transition: transform .15s ease;
  }
  .resumen-total-fs:not(.resumen-plegada) .resumen-flecha {
    transform: scaleY(-1);
  }
  .resumen-plegada .resumen-desglose,
  .resumen-plegada .resumen-detalle { display: none; }

  /* El aviso de que adentro hay partes a recibir de Sala. Abierta, la linea
     de las partes ya se ve, asi que el punto sobra. */
  .resumen-aviso {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ambar);
  }
  .resumen-total-fs:not(.resumen-plegada) .resumen-aviso { display: none; }

  /* --- Bitácora: el área con desplegable ----------------------------
     Los cuatro chips de área ocupaban dos renglones antes de la primera
     entrada. En el teléfono se elige con un desplegable, igual que el
     tipo de entrada. */
  .bit-area-chips  { display: none; }
  .bit-area-select { display: inline-block; }

  /* --- Banda de arriba, barra inferior y hoja «Más» -----------------
     El menú del teléfono dejó la hamburguesa de arriba y bajó a una barra
     fija al pie de la pantalla, a la altura del pulgar: Panel,
     Reparaciones y lo que corresponda al área (ver $fs_barra en
     layout.php), más «Más», que sube una hoja con el usuario y el menú
     entero. La banda de arriba queda en un renglón: la marca, la sala, la
     lupa de «Ir a UID» y la campanita.

       - SIN JavaScript: la lupa no está y el buscador queda a la vista;
         «Más» es un enlace a #fs-mas, la hoja, que queda al pie de la
         página con el usuario y el menú apilado. Todo alcanzable.
       - CON JavaScript (fs.js le pone `js` al <html>): el buscador se abre
         con la lupa, y la hoja sube sobre la pantalla al tocar «Más»
         (`mas-abierto` en el <html>); el fondo oscuro la cierra.

     El primer renglón -marca, sala, lupa y campanita- es una caja propia,
     .cabecera-barra, que acá se enciende y no se envuelve: ver armazón. */
  :root { --alto-barra: 58px; }

  /* La banda de arriba se queda pegada, como en escritorio (la regla es
     `html.js .cabecera` de armazón). Antes acá no se pegaba: con la
     hamburguesa abierta ocupaba media pantalla. Ahora es un renglón, y la
     sala y la lupa tienen que estar a la vista en cualquier parte de una
     lista larga. Lo que se pega dentro del contenido se cuelga debajo:
     fs.js mide la banda y deja su alto en --alto-cabecera. */

  .cabecera-int {
    padding: 8px 14px;
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
  }

  /* El primer renglón deja de ser parte del envoltorio de la cabecera y pasa
     a ser un renglón propio que NO se corta: ocupa la fila entera y adentro
     no se envuelve. */
  .cabecera-barra {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 10px;
    min-width: 0;
  }

  /* La marca son dos letras y la sala es el dato por el que todo esto se
     mudó al lado de la marca: si se cortan no queda nada que leer. Lo que
     sobra se lo lleva el margen de la lupa (o de la campanita, sin
     JavaScript), que empuja las dos contra el borde derecho. */
  .marca { flex: 0 0 auto; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
  .actividad-encabezado { margin-left: auto; margin-right: 2px; }

  html.js .buscar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 34px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    border: 1px solid var(--banda-borde);
    border-radius: var(--radio-chico);
    background: var(--banda-velo);
    color: var(--banda-texto);
  }
  html.js .buscar-toggle + .actividad-encabezado { margin-left: 0; }
  html.js .buscar-abierto .buscar-toggle { background: var(--banda-velo-fuerte); }
  .buscar-toggle:focus-visible { outline: 2px solid var(--banda-texto); outline-offset: 3px; }

  /* La sala se queda al lado de la marca, entera. */
  .sala-marca { flex: 0 0 auto; margin-left: -6px; padding: 0 9px; }
  .sala-fija,
  .form-sala select { font-size: .98rem; letter-spacing: .09em; }

  /* «Ir a UID» a fila entera debajo de la banda. Con JavaScript, sólo
     mientras la lupa está abierta. */
  .form-ir { order: 5; flex: 0 0 100%; margin: 8px 0 2px; }
  .form-ir input { width: 100%; box-sizing: border-box; font-size: 1rem; padding: 8px 10px; }
  html.js .form-ir { display: none; }
  html.js .buscar-abierto .form-ir { display: block; }

  /* El tema, el usuario y Salir viven en la hoja «Más». */
  .cabecera-der { display: none; }

  /* En pantalla chica un panel anclado al botón puede desbordar a un lado.
     Se usa el ancho seguro completo, centrado debajo de la cabecera. */
  .actividad-panel {
    position: fixed;
    z-index: 110;
    top: 62px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 76px - var(--alto-barra));
  }

  /* La barra inferior ocupa el pie de la pantalla: el contenido deja ese
     lugar para que la última tarjeta o el pie no queden debajo. El área
     segura es la franja de los teléfonos sin botones, donde va la rayita
     para volver al inicio. */
  body.con-lateral { padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom)); }

  .barra-inferior {
    position: fixed;
    z-index: 160;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    height: var(--alto-barra);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--banda);
    border-top: 1px solid var(--banda-linea);
  }
  .barra-inferior a {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--banda-tenue);
    font-size: .7rem;
    line-height: 1.1;
  }
  .barra-inferior a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-inferior .icono { width: 22px; height: 22px; }
  .barra-inferior a:hover { text-decoration: none; }
  /* El blanco al pasar el mouse, sólo donde hay mouse: en el teléfono el
     :hover se queda pegado en lo último que se tocó, y «Más» seguía en
     blanco después de cerrar la hoja, como si fuera la sección abierta. */
  @media (hover: hover) {
    .barra-inferior a:hover { color: var(--banda-texto); }
  }
  /* La sección abierta: blanca y con una rayita del color de la sala
     arriba, la misma marca que lleva el menú lateral en escritorio. */
  .barra-inferior a.activo { color: var(--banda-texto); font-weight: 600; }
  .barra-inferior a.activo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24%;
    right: 24%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--acento-barra);
  }
  /* Los números, montados en la esquina del ícono como en el menú de íconos
     del escritorio. El puntito de «Más» avisa que adentro hay un número que
     la barra no muestra. */
  .barra-inferior .nav-cuenta {
    position: absolute;
    top: 3px;
    left: calc(50% + 3px);
    min-width: 17px;
    padding: 0 4px;
    font-size: .62rem;
    line-height: 14px;
    box-shadow: 0 0 0 2px var(--banda);
  }
  .barra-inferior .nav-punto {
    display: block;
    position: absolute;
    top: 6px;
    left: calc(50% + 6px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acento-barra);
    box-shadow: 0 0 0 2px var(--banda);
  }
  html.mas-abierto .barra-inferior a.activo:not([data-mas]) { color: var(--banda-tenue); font-weight: 400; }
  html.mas-abierto .barra-inferior a.activo:not([data-mas])::before { display: none; }
  html.mas-abierto .barra-inferior a[data-mas] { color: var(--banda-texto); font-weight: 600; }

  /* --- La hoja «Más» ---
     Sin JavaScript: una caja más al pie de la página, adonde lleva «Más».
     Con JavaScript: sube desde la barra sobre un fondo oscuro. */
  .mas { display: block; }
  .mas-hoja {
    display: block;
    margin: 0 14px 18px;
    padding: 10px 12px 14px;
    background: var(--fondo-panel);
    border: 1px solid var(--borde);
    border-radius: 16px;
  }

  html.js .mas {
    display: none;
    position: fixed;
    z-index: 150;
    inset: 0 0 calc(var(--alto-barra) + env(safe-area-inset-bottom)) 0;
    flex-direction: column;
    justify-content: flex-end;
  }
  html.js.mas-abierto .mas { display: flex; }
  html.js .mas-fondo {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 18, .5);
  }
  html.js .mas-hoja {
    position: relative;
    margin: 0;
    max-height: calc(100% - 48px);
    overflow-y: auto;
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .25);
  }
  /* El agarre de arriba, que dice que es una hoja que se puede cerrar. */
  html.js .mas-hoja::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 2px;
    background: var(--borde-fuerte);
  }
  /* Con la hoja abierta la página de atrás no se desplaza. */
  html.mas-abierto body { overflow: hidden; }

  /* El usuario: iniciales, nombre y rol, y una fila con Perfil, Tema y
     Salir. Salir en rojo y al final de la fila, lejos del pulgar que
     busca Perfil. */
  .mas-usuario {
    display: block;
    padding: 10px;
    background: var(--fondo-suave);
    border: 1px solid var(--borde);
    border-radius: 10px;
  }
  .mas-quien { display: flex; align-items: center; gap: 10px; }
  .mas-iniciales {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--acento);
    background: var(--acento-suave);
    color: var(--acento);
    font-family: var(--fuente-display);
    font-size: 1rem;
    letter-spacing: .04em;
  }
  .mas-nombre { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .mas-nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
  .mas-nombre span { color: var(--texto-suave); font-size: .86rem; }

  .mas-botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
  .mas-botones form { margin: 0; display: flex; }
  .mas-boton {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--fondo-panel);
    color: var(--texto);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
  }
  .mas-boton:hover { background: var(--fondo-hover); text-decoration: none; }
  .mas-boton .icono { width: 18px; height: 18px; }
  .mas-boton > .icono[aria-hidden] { font-size: 1rem; line-height: 1; }
  .mas-salir { color: var(--rojo); }

  /* El menú adentro de la hoja: renglones claros con su ícono, agrupados
     por área como en escritorio. Sin la marca, que ya está arriba, ni la
     pared: es para el televisor del laboratorio, no para el teléfono. */
  .mas .nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
  }
  .mas .nav a {
    gap: 12px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--borde);
    color: var(--texto);
    font-family: var(--fuente);
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
  }
  .mas .nav a:hover { background: var(--fondo-hover); color: var(--texto); }
  .mas .nav .icono { display: block; flex: 0 0 auto; color: var(--texto-suave); }
  .mas .nav a.activo { color: var(--acento); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento); }
  .mas .nav a.activo .icono { color: var(--acento); }
  /* En la hoja el fondo es el del panel, no la banda: los números toman los
     colores de la página. */
  .mas .nav-cuenta { background: var(--fondo-hover); color: var(--texto-suave); }
  .mas .nav-cuenta-hacer { background: var(--acento-fuerte); color: #fff; }
  .mas .nav-grupo {
    display: block;
    margin: 14px 6px 2px;
    color: var(--texto-tenue);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .mas .nav a.nav-marca,
  .mas .nav a.nav-pared { display: none; }

  /* --- Filtros del listado, plegados ---
     Con JavaScript el formulario arranca en un renglón «Filtros ▾» (abierto
     si hay filtros puestos: el servidor le pone .filtros-abiertos) y fs.js
     lo abre y cierra. Sin JavaScript el botón no se ve y queda abierto. */
  html.js .filtros-toggle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--texto);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }
  html.js .filtros:not(.filtros-abiertos) { padding-top: 11px; padding-bottom: 11px; }
  html.js .filtros:not(.filtros-abiertos) > :not(.filtros-toggle) { display: none; }
  html.js .filtros-abiertos .filtros-toggle { margin-bottom: 8px; }
  .filtros-cuenta {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--acento);
    color: #fff;
    font-size: .78rem;
    text-align: center;
  }
  /* Igual que la flecha del resumen de TOTAL FS: color de la sala, y se da
     vuelta al abrir. */
  .filtros-flecha { display: block; color: var(--acento); transition: transform .15s ease; }
  .filtros-abiertos .filtros-flecha { transform: scaleY(-1); }

  /* --- El resumen de arriba del listado, fuera ---
     «16 máquinas fuera de servicio» repetía el número de la pestaña de
     justo arriba y le comía un renglón a la lista. En el teléfono no va; en
     pantalla ancha sigue con su desglose y la mayor demora. Con
     section.resumen-dias y no .resumen-dias a secas, para ganarle a las
     reglas del resumen de TOTAL FS de más arriba, que le dan display. Las
     piezas a recibir de Sala siguen a un toque, en Logística. */
  section.resumen-dias { display: none; }

  /* --- Excel, PDF y Papelera detrás de «⋯» ---
     Con JavaScript el <details> arranca cerrado y lo de adentro se abre como
     un menú chico debajo del «⋯». Sin JavaScript queda abierto, en línea. */
  .panel-acciones-mas { margin-left: auto; }
  html.js .panel-acciones-mas { position: relative; }
  html.js .panel-acciones-mas > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 30px;
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--fondo-panel);
    font-size: 1.1rem;
    line-height: 1;
  }
  html.js .panel-acciones-mas > summary::-webkit-details-marker { display: none; }
  html.js .panel-acciones-mas[open] > .panel-acciones {
    position: absolute;
    z-index: 25;
    top: calc(100% + 4px);
    right: 0;
    flex-direction: column;
    min-width: 140px;
    padding: 6px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo-panel);
    box-shadow: var(--sombra);
  }

  .contenido { padding: 16px 14px 34px; }
  .panel { padding: 14px; }
  .tabla-scroll { margin: 0 -14px; padding: 0 14px; }
  .fila-campos .campo-ancho { grid-column: span 1; }
  .titulo-ficha { flex-direction: column; gap: 10px; }

  /* La cabecera de la ficha de reparación: sin los puntos de separación.
     A lo ancho de un teléfono el segundo renglón se parte en dos o tres, y
     un punto que queda colgando al final de un renglón se lee como basura.
     Cada pieza ya se distingue sola por su color y su letra —la marca en
     negrita, el estado en condensada de color, los días en mono—, así que
     el separador sólo hacía falta cuando todo entraba en una línea. En su
     lugar, más aire. */
  .ficha-sep { display: none; }
  .ficha-cab-como { gap: 4px 6px; }

  /* Las barras verticales tampoco sobreviven al envolver: la del tramo que
     arranca un renglon nuevo queda colgando a la izquierda, sin nada que
     separar. Acá los tramos se apilan y la separación la hace el espacio. */
  .ficha-cab-quien { align-items: baseline; gap: 2px 12px; min-height: 0; }
  .ficha-tramo { padding: 0; border-left: 0; }
  .ficha-prioridad { padding-left: 0; }

  /* La cabecera en el telefono, con el mismo dibujo que la tarjeta del
     listado: el UID arriba con los dias en un bloque de color a la derecha,
     el estado debajo, y la maquina con su zona despues de una linea. Lo que
     sale: el rotulo «Ficha de reparación», que gastaba un renglon en decir
     donde se esta, la nota «fuera de servicio», que el bloque ya dice, y la
     sala, que la dice el prefijo del UID. Los selectores van sin .ficha-cab
     para que la barra fija que aparece al bajar -un clon sin esa clase- se
     vea igual. */
  .ficha-cab .ficha-rotulo { display: none; }
  .ficha-quien-uid { order: 1; flex: 1 1 auto; padding-right: 0; }
  .ficha-tramo-dias { order: 2; margin-left: auto; align-self: flex-start; }
  .ficha-cab-quien > .ficha-tramo:not(.ficha-tramo-dias) { order: 3; flex: 0 0 100%; }
  .ficha-prioridad { order: 4; }
  .ficha-tramo-dias .ficha-nota { display: none; }
  .ficha-tramo-dias .ficha-dias {
    padding: 3px 9px;
    border-radius: var(--radio);
    font-size: 1.05rem;
    white-space: nowrap;
  }
  /* .ficha-dias le saca el fondo al semaforo en escritorio, donde va suelto
     en la linea; aca es un bloque y lo recupera. */
  .ficha-tramo-dias .sem-verde   { background: var(--verde-bg); }
  .ficha-tramo-dias .sem-ambar   { background: var(--ambar-bg); }
  .ficha-tramo-dias .sem-rojo    { background: var(--rojo-bg); }
  .ficha-tramo-dias .sem-cerrada { background: var(--gris-bg); }
  .ficha-sala { display: none; }
  .ficha-cab-como {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--borde);
  }
  .ficha-zona { color: var(--texto-suave); }
  /* La tarjeta blanca del tema claro (ver pantallas.css), con menos aire:
     en el teléfono cada renglón cuenta. */
  :root:not([data-tema="oscuro"]) .ficha-cab { padding: 10px 12px 10px 12px; margin-bottom: 10px; }

  /* Volver, Historial y PDF en una sola fila, con la etiqueta corta. */
  .acciones-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
  .acciones-ficha .btn { justify-content: center; padding-left: 4px; padding-right: 4px; }

  /* El orden de la ficha en el telefono. Apiladas, las dos columnas salian una
     detras de la otra -estado, datos, partes, equipo, y recien despues la
     bitacora-, y lo que se viene a mirar quedaba a tres pantallas. Aca las
     columnas dejan de ser cajas y cada panel toma su lugar: primero las
     partes, que es lo que se trabaja; el estado; lo que se va agregando; y al
     final, plegados, los datos de la carga y los del equipo.

     Los paneles pierden su margen y la distancia la pone el gap: la regla que
     le saca el margen al ultimo de cada columna dejaba dos paneles pegados
     una vez reordenados. */
  /* stretch: la regla de escritorio alinea al inicio, y en columna eso
     achicaba cada panel a lo que ocupa su contenido. */
  .ficha-dos-columnas { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .ficha-dos-columnas > .ficha-col { display: contents; }
  .ficha-dos-columnas > .ficha-col > .panel { margin-bottom: 0; }
  .ficha-sec-partes { order: 1; }
  .ficha-col > .panel-accion { order: 2; }
  .ficha-sec-bitacora { order: 3; }
  .ficha-sec-adjuntos { order: 4; }
  .ficha-sec-datos { order: 5; }
  .ficha-sec-equipo { order: 6; }
  /* Plegado, el titulo va solo con su flecha: «Cargada por… el …» partia el
     encabezado en tres renglones. Abierto, vuelve. */
  .ficha-sec-datos .panel-plegable:not([open]) > summary .tenue { display: none; }

  /* El panel de estado: la fecha de cierre solo se dibuja cuando se puede
     elegir. Deshabilitada -el estado elegido no cierra el caso, fs.js la
     apaga- o de solo lectura -quien no es administrador no la elige- era un
     campo gris que ocupaba un renglon para decir que no habia nada que
     hacer. Lo de solo lectura lo dice la nota de abajo del boton. */
  .campo-reingreso:has([data-reingreso]:disabled),
  .campo-reingreso:has([data-reingreso][readonly]) { display: none; }
  .nota-fecha-hoy { margin: 8px 0 0; }

  /* --- La via de una parte, horizontal tambien en el telefono ---------
     Estuvo parada -los hitos bajando en fila- porque «AL LABORATORIO» no
     entraba en una columna: eran seis renglones por pieza, y con dos o tres
     piezas la seccion se volvia una lista de fechas. Ahora va acostada como
     en escritorio, con la letra mas chica -sin espaciado entre letras, para
     que «CARGADA» y «RESUELTA» entren en los 39px de columna de un grupo de
     REQUI con su boton «+» al costado- y el rotulo corto «Lab.» (ver
     _parte_viaje.php). Un rotulo que no entra -«Sin arreglo»- parte en dos
     renglones dentro de su columna. */
  .viaje { margin: 12px 0 10px; }
  .viaje-rotulo { font-size: .62rem; letter-spacing: 0; }
  .viaje-fecha  { font-size: .66rem; }

  /* --- Mas acciones de una parte -------------------------------------
     A la vista quedan los pasos del recorrido; las correcciones y los datos
     de carga (.accion-secundaria) esperan detras de este boton, al final de
     la fila. Solo con JavaScript: sin el, el boton no se ve y la fila esta
     entera, como antes. El boton aparece solo si la fila tiene alguna
     secundaria, y eso lo decide :has() y no un script al cargar: la lista
     de partes vuelve del servidor en cada refresco y lo preparado al cargar
     se perderia. El clic lo atiende fs.js, por delegacion. */
  html.js .parte-acciones:not(.mostrar-secundarias) > .accion-secundaria { display: none; }
  /* Abiertas, van despues de las principales: si no, «Cambiar estado»
     quedaba en el medio de las correcciones. */
  html.js .parte-acciones > .accion-secundaria { order: 98; }
  html.js .parte-acciones:has(> .accion-secundaria) > .parte-mas-acciones { display: inline-flex; order: 99; }

  /* ------------------------------------------------------------------
     En telefono la tabla deja de ser tabla y cada fila es una tarjeta

     Doce columnas en 375px de ancho son ilegibles se scrollee como se
     scrollee: para ver el Estado hay que arrastrar hasta perder de vista
     el UID. Apilado, cada reparacion entra entera en la pantalla.

     El nombre de cada dato sale de data-col, el mismo atributo que la
     fila ya trae: no hay un segundo marcado que mantener en paralelo, y
     si alguien agrega una columna aparece sola en la tarjeta.
     ------------------------------------------------------------------ */
  .tabla-cards, .tabla-cards tbody, .tabla-cards tr, .tabla-cards td {
    display: block;
    width: auto;
  }

  /* Los encabezados se van, pero no con display:none: se sacan de la vista
     dejandolos accesibles al lector de pantalla. */
  .tabla-cards thead {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Cada reparación se lee como una tarjeta bien despegada del fondo: borde de
     máximo contraste (blanco fuerte sobre el tema oscuro, casi negro sobre el
     claro), sombra y aire entre una y otra, para que en el teléfono se
     distinga de un vistazo dónde empieza y termina cada una. */
  /* La tarjeta es una columna flex: así el UID puede saltar al frente con
     `order`, sin cambiar el orden de las columnas en la tabla de escritorio. */
  .tabla-cards tr {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--borde-contraste);
    border-radius: 12px;
    background: var(--fondo-panel);
    box-shadow: var(--sombra);
    padding: 12px 14px;
    margin-bottom: 14px;
  }

  /* Sin resaltado de fila: en una tarjeta no aporta, y en pantalla tactil el
     :hover se queda pegado despues de tocar.

     Va con `tbody tr` y no solo `tr` para igualar la especificidad de la regla
     base .tabla tbody tr:hover (0,2,2). Con `.tabla-cards tr:hover` (0,2,1)
     perdia, y las media queries no suman especificidad: la regla existia y no
     hacia nada. */
  .tabla-cards tbody tr:hover { background: var(--fondo-panel); }

  .tabla-cards td {
    border: 0;
    padding: 2px 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
    text-align: left;
  }

  /* Celdas que en escritorio van centradas (.centro) en la tarjeta se leen
     a la izquierda como todas las demas filas clave-valor. */
  .tabla-cards td.centro,
  .tabla-cards .centro {
    text-align: left;
    justify-content: flex-start;
  }

  /* La etiqueta del dato (Vendor, Modelo, …) en negrita, para que se lea como
     el nombre del campo y no como texto tenue de relleno. */
  .tabla-cards td::before {
    content: attr(data-col);
    flex: 0 0 6.5rem;
    color: var(--texto-suave);
    font-size: .82rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
  }

  /* La fecha, en negrita también (etiqueta y valor). */
  .tabla-cards td[data-col="Fecha FS"],
  .tabla-cards td[data-col="Fecha OK"] { font-weight: 600; }

  /* El numero de orden no aporta nada apilado: la lista ya se ve. */
  .tabla-cards .celda-orden { display: none; }

  /* El UID encabeza la tarjeta, grande y sin etiqueta: es el titulo. `order: -1`
     lo lleva al frente aunque en la tabla vaya en la cuarta columna. */
  .tabla-cards .uid-fuerte {
    order: -1;
    font-size: 1.15rem;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--borde);
  }
  .tabla-cards .uid-fuerte::before { content: none; }
  .tabla-cards .uid-fuerte a { color: var(--acento); }

  /* En la tarjeta sobra el ancho: el motivo va entero, en varias lineas. */
  .tabla-cards .celda-motivo {
    max-width: none;
    overflow: visible;
    white-space: normal;
  }

  /* Y las palabras larguisimas se cortan donde sea.

     white-space: normal parte por los espacios, asi que un dato sin ninguno
     -un codigo de serie, un modelo largo, una FALLA tipeada de corrido- se
     iba de la tarjeta. Y no se quedaba ahi: el documento pasaba a medir 428 px
     de ancho en una pantalla de 375, y como el boton flotante "+ Nueva
     reparacion" se ancla al borde derecho de ESE ancho, terminaba 31 px afuera
     con el texto cortado. Un dato mal tipeado se llevaba puesto el boton
     principal de la pantalla.

     anywhere y no break-word: los dos parten la palabra al pintar, pero solo
     anywhere achica tambien el ancho minimo de la celda, que es lo que hace
     que la tabla deje de empujar. */
  .tabla-cards td { overflow-wrap: anywhere; }

  /* El scroll horizontal ya no tiene sentido, y sus margenes negativos
     comerian el borde de las tarjetas. */
  .tabla-cards-cont { overflow-x: visible; margin: 0; padding: 0; }

  /* En el telefono el encabezado del panel es el control que lo abre: cursor
     de mano, la flecha a la vista y el mismo circulo azul que los grupos de
     REQUI, para que se lea como algo que se toca y no como un titulo mas. */
  .panel-plegable > summary { cursor: pointer; }
  .panel-plegable > summary .panel-cab,
  .panel-plegable[open] > summary { margin-bottom: 12px; }
  .panel-plegable:not([open]) > summary { margin-bottom: 0; }

  .panel-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    width: 24px;
    height: 24px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    background: var(--fondo-panel);
    color: var(--acento);
    font-size: .85rem;
    line-height: 1;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }

  .panel-plegable > summary:hover .panel-flecha,
  .panel-plegable > summary:focus-visible .panel-flecha {
    border-color: var(--acento);
    background: var(--acento-suave);
  }

  .panel-plegable[open] > summary .panel-flecha { transform: scaleY(-1); }

  /* --- Las tablas de la ficha de una maquina ------------------------
     Las dos usan el mismo apilado. La de REQUIs era la que peor entraba:
     con tres nombres de parte en una celda, esa columna quedaba de seis
     caracteres de ancho y el UID caia fuera de la pantalla. */

  /* El numero de REQUI encabeza la tarjeta, como el UID en el listado. */
  .tabla-requis .celda-requi {
    order: -1;
    font-size: 1.15rem;
    font-weight: 700;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--borde);
  }
  .tabla-requis .celda-requi::before { content: none; }

  /* Aca el UID es un dato mas de la tarjeta, no su titulo: se le saca el
     trato que le da el listado de reparaciones, donde si lo es. */
  .tabla-requis td .uid-fuerte {
    order: 0;
    font-size: 1rem;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  /* Los otros UID de la misma requisicion cuelgan debajo, no al costado.
     Sin sangria: con flex-basis 100% mas un margen izquierdo, la linea medía
     mas que la tarjeta y aparecia scroll horizontal. */
  .tabla-requis td[data-col="UID"] { flex-wrap: wrap; }
  .tabla-requis .requi-otros-uid { flex: 1 0 100%; margin-left: 0; }

  /* El boton de la fila no lleva etiqueta y va despegado del ultimo dato. */
  .tabla-cards .celda-accion::before { content: none; }
  .tabla-cards .celda-accion { margin-top: 10px; }

  /* --- Las colas de Logística ------------------------------------------
     Siete columnas en un teléfono se desplazaban de costado, y el botón de
     cada pieza -«Marcar en compra»- quedaba fuera de la pantalla. Cada pieza
     pasa a ser un bloque de cuatro renglones: la casilla, el UID y los días
     fuera de servicio arriba; la pieza; los datos chicos en una línea; y lo
     que se hace con ella. No usa .tabla-cards a propósito: esa clase trae en
     escritorio el borde y la columna fija de la cuarta columna, que acá no
     es el UID. */
  .tabla-cola, .tabla-cola tbody, .tabla-cola td { display: block; width: auto; }
  /* Del encabezado sólo queda la casilla de «todas», que es la forma de
     marcar el recorrido entero de una vez; los nombres de columna van en
     cada dato. Quien no puede marcar no tiene casilla, y ahí no queda nada. */
  .tabla-cola thead tr { display: flex; align-items: center; padding: 4px 4px 6px 10px; }
  .tabla-cola thead th { display: none; }
  .tabla-cola thead th.col-check { display: block; width: auto; padding: 0; border: 0; }
  .tabla-cola thead th.col-check input { width: 20px; height: 20px; vertical-align: middle; }
  .tabla-cola thead th.col-check::after {
    content: 'Todas';
    margin-left: 10px;
    color: var(--texto-suave);
    font-size: .85rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
  }
  .tabla-cola thead:not(:has(.col-check)) { display: none; }
  .tabla-scroll:has(> .tabla-cola) { overflow-x: visible; }

  .tabla-cola tr { display: block; }
  .tabla-cola tr:not(.fila-sala):not(.fila-grupo) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 3px;
    padding: 10px 4px 10px 10px;
    border-bottom: 1px solid var(--borde);
  }
  .tabla-cola td { border: 0; padding: 0; }
  .tabla-cola tbody tr:not(.fila-sin-gestionar):hover { background: none; }

  .tabla-cola .col-check { order: 1; width: auto; }
  .tabla-cola .col-check input { width: 20px; height: 20px; vertical-align: middle; }
  .tabla-cola .celda-uid { order: 2; flex: 1 1 auto; font-size: 1.05rem; }
  .tabla-cola .celda-uid a { color: var(--acento); font-weight: 600; }
  .tabla-cola .celda-fs { order: 3; text-align: right; }
  .tabla-cola .celda-fs::before { content: attr(data-col) ' '; color: var(--texto-tenue); font-size: .75rem; }
  .tabla-cola .celda-parte { order: 4; flex: 1 0 100%; font-weight: 600; }
  .tabla-cola .celda-dato { order: 5; text-align: left; color: var(--texto-suave); font-size: .85rem; }
  .tabla-cola .celda-dato[data-col]::before { content: attr(data-col) ' '; color: var(--texto-tenue); }
  .tabla-cola .celda-dato.centro strong::after { content: ' d'; font-weight: 400; }
  .tabla-cola .celda-compra-td { order: 6; flex: 1 0 100%; margin-top: 4px; }

  /* La pieza sin gestionar lleva la raya roja en el bloque entero, no en la
     primera celda, que en el bloque ya no es el borde izquierdo. */
  .tabla-cola .fila-sin-gestionar { box-shadow: inset 5px 0 0 var(--rojo); }
  .tabla-cola .fila-sin-gestionar td:first-child { box-shadow: none; }
  .tabla-cola .fila-sin-gestionar .celda-uid { padding-left: 4px; }

  /* --- La tarjeta del listado de reparaciones ------------------------
     Apilada clave-valor eran doce renglones con el mismo peso, y entraba
     una reparacion por pantalla. Pasa a ser un renglon de lista: los dias a
     la izquierda en un bloque de color, que es lo que se recorre de arriba
     abajo para ver que esta mas demorado, y a la derecha cuatro bloques
     separados por una linea:

       UID, reincidencia, prioridad ALTA y lo sin ver, y el estado
       la maquina: vendor, modelo y zona
       las partes por las que espera, si esta pendiente
       desde cuando esta fuera de servicio

     El estado va solo, con su motivo: la ubicacion ya la dice la pastilla
     -"EN REP. EN SALA", "EN CAMINO A SALA"- y los contadores de partes eran
     una cuarta cosa en el mismo renglon. La sala tampoco: el prefijo del UID
     ya la dice, y partia en dos el renglon de la maquina.

     REQUI, la cantidad de piezas y la de entradas de bitacora se quedan en
     la ficha: en la lista no deciden nada. Es casi todo CSS sobre las mismas
     celdas, asi que la tabla de escritorio no cambia. Lo unico que no se
     puede con CSS es bajar las partes debajo de la maquina, que es otra
     celda: para eso esta .celda-partes-tarjeta, al final de la fila. */
  .tabla-reparaciones tr {
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    /* El bloque de los dias va en el relleno izquierdo. */
    padding: 10px 12px 10px 76px;
    min-height: 92px;
    box-sizing: border-box;
  }
  .tabla-reparaciones td { gap: 0; padding: 0; }
  .tabla-reparaciones td::before { content: none; }

  .tabla-reparaciones td[data-col="REQUI"],
  .tabla-reparaciones td[data-col="PARTES"] { display: none; }

  .tabla-reparaciones td[data-col="Días"] {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    width: 54px;
    display: flex;
    /* La celda generica alinea por la base del texto; el bloque tiene que
       ocupar todo el alto de la tarjeta. */
    align-items: stretch;
  }
  .tabla-reparaciones td[data-col="Días"] .dias {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 0;
    border-radius: var(--radio);
    font-size: 1.35rem;
    line-height: 1;
  }
  .tabla-reparaciones td[data-col="Días"] .dias::after {
    content: "días";
    margin-top: 3px;
    font-size: .68rem;
    font-weight: 600;
  }

  /* Primer renglon. El UID se estira y empuja a la derecha la prioridad y
     lo sin ver, que vienen de otras dos celdas. */
  .tabla-reparaciones .uid-fuerte {
    order: 1;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    font-size: 1.05rem;
    padding: 0;
    margin: 0;
    border: 0;
  }
  .tabla-reparaciones .uid-fuerte .reincide,
  .tabla-reparaciones .uid-fuerte .coincide-en { margin-left: 0; }

  /* El UID es el titulo de la tarjeta: grande, en negro y dentro de un
     rotulo, como la chapa con el numero de la maquina. En la sala se la
     busca por ese numero, y a 1.05rem y en azul se perdia entre las
     pastillas de al lado. */
  .tabla-reparaciones .uid-fuerte > a:not(.reincide) {
    padding: 1px 8px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    background: var(--gris-bg);
    color: var(--texto);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
  }

  /* La prioridad solo se ve cuando es ALTA: NORMAL salia en casi todas las
     tarjetas y no avisaba nada. El tamaño cero esconde la raya de "sin
     prioridad", que es texto suelto de la celda. */
  .tabla-reparaciones td[data-col="PRIORIDAD"] { order: 2; font-size: 0; }
  .tabla-reparaciones .etq-prioridad-normal { display: none; }
  .tabla-reparaciones .etq-prioridad-alta { margin-left: 6px; font-size: .72rem; }

  /* De la bitacora queda solo "+N sin ver": es trabajo de otro sin leer.
     La cuenta de entradas y archivos es texto suelto, y se esconde igual. */
  .tabla-reparaciones td[data-col="Bitácora"] { order: 3; font-size: 0; }
  .tabla-reparaciones td[data-col="Bitácora"] .nuevo { font-size: .75rem; }

  .tabla-reparaciones td[data-col="Estado"] {
    order: 4;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
    margin-top: 4px;
    /* La linea que cierra el primer bloque. Va en la celda del estado porque
       es la unica del bloque a lo ancho de la tarjeta. */
    padding-bottom: 7px;
    border-bottom: 1px solid var(--borde-fuerte);
    /* El aire entre la linea y la maquina va aca y no arriba de vendor,
       modelo y zona: cada una lleva su margen, y cuando un modelo largo
       manda la zona al renglon de abajo el margen viajaba con ella y la
       dejaba separada de mas. */
    margin-bottom: 7px;
    font-size: .85rem;
  }
  .tabla-reparaciones td[data-col="Estado"] .etq-motivo { margin-left: 0; }
  /* En la tarjeta el estado va solo: los contadores de partes y la lista de
     partes de la celda de escritorio no se dibujan. La lista va en su propia
     celda, debajo de la maquina. */
  .tabla-reparaciones td[data-col="Estado"] .cuentas-partes,
  .tabla-reparaciones td[data-col="Estado"] .partes-pendientes { display: none; }

  /* La maquina en un renglon, con los separadores puestos desde aca. */
  .tabla-reparaciones td[data-col="Vendor"],
  .tabla-reparaciones td[data-col="Modelo"],
  .tabla-reparaciones td[data-col="ZONA"] {
    font-size: .85rem;
    color: var(--texto-suave);
  }
  .tabla-reparaciones td[data-col="Vendor"] { order: 5; margin-right: .3em; }
  .tabla-reparaciones td[data-col="Modelo"] { order: 6; }
  .tabla-reparaciones td[data-col="ZONA"]   { order: 7; }
  .tabla-reparaciones td[data-col="ZONA"]::before { content: "\00a0· Zona\00a0"; }
  /* El separador y el rotulo de la fecha son ::before, y la regla de la
     tarjeta generica les da ancho fijo, mayusculas y negrita: se devuelven. */
  .tabla-reparaciones td[data-col="ZONA"]::before {
    flex: none;
    font-size: inherit;
    font-weight: 400;
    text-transform: none;
  }
  .tabla-reparaciones td[data-col="Sala"] { display: none; }

  /* Las partes por las que espera, cada una en su renglón y debajo de la
     maquina: como fichas sueltas, un nombre largo de pieza partía la ficha en
     dos y el tramo quedaba colgando. El tramo va a la derecha, alineado entre
     renglones. Sin partes la celda esta vacia y no se dibuja: la tarjeta
     queda con tres bloques. */
  .tabla-reparaciones td.celda-partes-tarjeta {
    order: 8;
    flex: 1 0 100%;
    margin-top: 7px;
    padding-top: 4px;
    border-top: 1px solid var(--borde-fuerte);
  }
  .tabla-reparaciones td.celda-partes-tarjeta:empty { display: none; }
  .tabla-reparaciones .celda-partes-tarjeta .partes-pendientes {
    flex: 1 0 100%;
    flex-direction: column;
    gap: 0;
    margin: 0;
  }
  .tabla-reparaciones .celda-partes-tarjeta .parte-pendiente {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    border: 0;
    background: none;
  }

  .tabla-reparaciones td[data-col="Fecha FS"],
  .tabla-reparaciones td[data-col="Fecha OK"] {
    flex: 1 0 100%;
    margin-top: 3px;
    font-size: .75rem;
    color: var(--texto-suave);
  }
  /* La fecha abre el ultimo bloque: la linea va arriba de la primera. */
  .tabla-reparaciones td[data-col="Fecha FS"] {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--borde-fuerte);
  }
  .tabla-reparaciones td[data-col="Fecha FS"] { order: 9; }
  .tabla-reparaciones td[data-col="Fecha OK"] { order: 10; }
  .tabla-reparaciones td[data-col="Fecha FS"]::before,
  .tabla-reparaciones td[data-col="Fecha OK"]::before {
    flex: none;
    margin-right: .3em;
    font-size: inherit;
    font-weight: 400;
    text-transform: none;
  }
  .tabla-reparaciones td[data-col="Fecha FS"]::before { content: "Fuera de servicio desde"; }
  .tabla-reparaciones td[data-col="Fecha OK"]::before { content: "En servicio desde"; }

  /* Con las tarjetas no hay encabezados que clickear: el orden vuelve a
     ser un selector. Solo existe uno de los dos a la vez. */
  .solo-angosto { display: block; }
  .solo-angosto-inline { display: inline; }
  .texto-largo { display: none; }
  .texto-corto { display: inline; }

  /* El panel: la lista de "Fuera de servicio ahora" en lugar de la tabla.
     Ver pantallas.css. */
  .abiertas-lista { display: block; }
  .abiertas-tabla, .abiertas-recorte { display: none; }
}