/* Aspecto del administrador: el de los configuradores 3D de oficina (/3d/).
   M (27/10/2026): «a la aplicacion erp del admin se le puede dar un diseño mas parecido al formato de la aplicacion del
   configurador 3d? mejorar su estetica y hacer que siga ese estilo». Primero el admin y, el 27/10, también Oficina, los
   operarios del taller y la entrada: se carga con cualquier sesión y en la entrada (ui.TEMA_ADMIN), al final del <head>
   de cada pantalla, así que gana a sus estilos sin tocarlos. Las pantallas de las tablets llevan el suyo, en claro (static/tema-tablet.css). Colores y medidas de app/css/app.css del repo metalsystem-3d (allí «--white» es la
   tarjeta y aquí se llama --carta); la letra es la Manrope de los configuradores de M (licencia en fonts/).
   Ya desplegado, M (27/10, 08:33): «no me gusta que solo pongas una linea de color a la izquierda de la línea sino que
   pongas toda la linea con el color como estaba antes [...] al estar todo tan negro y con los mismos colores del formato
   resulta lioso y poco reconocible visualmente». Así que claro: la cabecera negra de /3d/, el resto sobre gris claro con
   tarjetas blancas, las filas enteras con sus colores de siempre y los botones con el color de lo que hacen. */

@font-face {
  font-family: Manrope;
  src: url('/static/fonts/manrope.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #eceee9; --light: #f6f7f3; --carta: #ffffff; --line: #d5d8cf; --ink: #1b1d1a; --muted: #62675d; --suave: #4f544b;
  --campo: #ffffff; --campo-linea: #a9aea3; --hover: #eef0ea; --accent: #ee4c2c; --naranja: #c8401f;
  --cabeza-tabla: #f1f2ed; --primario: #1b1d1a; --primario-hover: #3d413a; --primario-letra: #ffffff;
  --error: #b3261e; --error-fondo: #fdecea; --error-linea: #ef9a9a;
  /* los estados, con los colores de siempre: verde (hecho, dentro), ámbar (a medias, avisos), azul (en curso; en la
     lista de OT, verde clarito: M, 31/10) */
  --ok: #1e6b34; --ok-fondo: #e8f5e9; --ok-linea: #a5d6a7;
  --aviso: #7a5200; --aviso-fondo: #fff8e1; --aviso-linea: #ffcc80;
  --info: #0d47a1; --info-fondo: #e3f2fd; --info-linea: #90caf9;
  --finde: #6a1b9a; --finde-fondo: #f3e5f5; --finde-linea: #ce93d8;
  /* los botones, con el color de lo que hacen, como antes: guardar en verde, editar en azul, dar de baja en naranja, borrar en rojo */
  --b-verde: #2e7d32; --b-verde-h: #1b5e20; --b-azul: #1565c0; --b-azul-h: #0d47a1;
  --b-naranja: #c75000; --b-naranja-h: #a84400; --b-rojo: #c62828; --b-rojo-h: #a51f1f;
  /* la cabecera, la de /3d/ tal cual */
  --cab-fondo: #161816; --cab-carta: #232623; --cab-linea: #393d39; --cab-texto: #f4f5f0; --cab-suave: #b6bbb0;
  --cab-hover: #2f332f; --cab-naranja: #ff7a5c;
  --ease: cubic-bezier(.2, .7, .2, 1); --shell: clamp(22px, 5vw, 90px);
  /* los de ui.CSS, para lo que los usa */
  --ms-bg: var(--paper); --ms-surface: var(--carta); --ms-border: var(--line); --ms-primary: var(--primario);
  --ms-primary-dark: var(--primario-hover); --ms-danger: var(--error); --ms-success: var(--ok); --ms-radius: 0;
  --ms-font: Manrope, Arial, sans-serif;
}

/* El color de fondo del documento es el de la cabecera: el iPhone pinta con él la franja de la hora y el notch
   (M, 27/10: salía clara encima de la cabecera negra). La página sigue clara, porque la imagen de un solo color
   cubre todo el lienzo; el negro solo asoma ahí y al estirar la página más allá de sus bordes.
   También el de <body> (M, 31/10, con la ERP como app en el iPhone: «Todo ese espacio blanco que hay encima de la
   barra… no se puede poner de color negro como el fondo de la barra?»): el iPhone toma el color de fondo de <body>
   encima del de <html>, sin mirar la imagen ni el theme-color, y con el claro de <body> la franja salía clara. */
html { background: var(--cab-fondo) linear-gradient(var(--paper), var(--paper)); }
body {
  margin: 0; padding: 0; background: var(--cab-fondo) linear-gradient(var(--paper), var(--paper)); color: var(--ink); text-align: left;
  font-family: var(--ms-font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.03em; color: inherit; }
a { color: inherit; text-underline-offset: 4px; }
::selection { background: #1b1d1a26; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.ms-ico { display: none; }   /* el emoji de los títulos: aquí van solo con letras, como en /3d/ */

/* ---------- Cabecera: la de /3d/ con los módulos del ERP ---------- */

.ms-cab {
  display: flex; align-items: center; gap: 12px 36px; min-height: 80px; padding: 0 var(--shell);
  border-bottom: 1px solid var(--cab-linea); background: var(--cab-fondo); text-align: left; box-sizing: border-box;
}
/* El logo de una línea del menú de /3d/: la misma imagen, recortada a la palabra y en blanco */
.ms-cab-marca { display: block; width: 170px; height: 34px; overflow: hidden; flex-shrink: 0; }
.ms-cab-marca img { display: block; width: 100%; height: 100%; object-fit: cover; filter: invert(1); mix-blend-mode: screen; }
.ms-cab-menu { display: flex; align-items: center; flex-wrap: wrap; gap: 0 26px; }
.ms-cab-menu a, .ms-cab-mas summary {
  position: relative; display: inline-block; padding: 10px 0; color: var(--cab-texto); text-decoration: none;
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
/* subrayado fino, de 1 px (M, 27/10: «me gustaba más fino») */
.ms-cab-menu a::after, .ms-cab-mas summary::after {
  content: ''; position: absolute; left: 0; bottom: 4px; width: 0; height: 1px; background: var(--cab-texto); transition: width .3s;
}
.ms-cab-menu a:hover::after, .ms-cab-mas summary:hover::after { width: 100%; }
.ms-cab-menu [aria-current="page"]::after { width: 100%; background: var(--accent); }
/* «Inicio» siempre más grande que el resto, para volver a la portada de un vistazo */
.ms-cab-menu a.ms-cab-inicio { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.ms-cab-mas { position: relative; }
.ms-cab-mas summary {
  list-style: none; padding-right: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%23f4f5f0' stroke-width='1.6'/%3E%3C/svg%3E") right center no-repeat;
}
.ms-cab-mas summary::-webkit-details-marker { display: none; }
.ms-cab-mas-lista {
  position: absolute; top: calc(100% + 8px); left: -18px; z-index: 300; display: flex; flex-direction: column;
  min-width: 220px; padding: 8px 0; background: var(--cab-carta); border: 1px solid var(--cab-linea); box-shadow: 0 18px 40px #0008;
}
.ms-cab-menu .ms-cab-mas-lista a { padding: 9px 18px; }
.ms-cab-menu .ms-cab-mas-lista a::after { display: none; }
.ms-cab-mas-lista a:hover { background: var(--cab-hover); }
.ms-cab-mas-lista a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); }
.ms-cab-usuario { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--cab-suave); }
.ms-cab-usuario span { color: var(--cab-texto); font-weight: 600; letter-spacing: .04em; }
.ms-cab-usuario form { margin: 0; }
/* «Cerrar sesión»: un botón rectangular blanco, más grande que el resto de la cabecera (M, 3/11: «Para cerrar sesión quiero
   un boton rectangular blanco y más grande»; antes era un enlace subrayado de 12 px). Al pasar por encima, el naranja de
   la cabecera */
.ms-cab-usuario button.ms-cab-salir {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin: 0; padding: 0 22px;
  background: var(--carta); color: var(--cab-fondo); border: 1px solid var(--carta); border-radius: 0; cursor: pointer;
  font: 700 14px var(--ms-font); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.ms-cab-usuario button.ms-cab-salir:hover { background: var(--cab-naranja); border-color: var(--cab-naranja); color: var(--cab-fondo); }
.ms-cab-usuario button.ms-cab-salir:focus-visible { outline: 2px solid var(--cab-naranja); outline-offset: 3px; }
/* En el móvil, un poco menor y en la misma fila que la marca: si no cabe entero, se acorta el nombre (con «…»), no el botón */
@media (max-width: 700px) {
  .ms-cab { column-gap: 16px; }
  .ms-cab-usuario { flex: 1 1 0; min-width: 0; justify-content: flex-end; gap: 8px; }
  .ms-cab-usuario span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-cab-usuario button.ms-cab-salir { flex: none; min-height: 36px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 1180px) {
  .ms-cab { flex-wrap: wrap; padding-top: 14px; }
  .ms-cab-menu { order: 3; flex-basis: 100%; gap: 0 22px; }
}

/* ---------- Inicio: la portada de /3d/ con los módulos ---------- */

.ms-bloque { padding: 44px var(--shell) 56px; }
.ms-bloque + .ms-bloque { border-top: 1px solid var(--line); }
.ms-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: 34px; }
.ms-cabeza h1 { margin: 0; font-size: clamp(40px, 4.4vw, 64px); letter-spacing: -.06em; line-height: 1; }
.ms-cabeza p { max-width: 520px; margin: 0; font-size: 13px; line-height: 1.7; color: var(--suave); text-wrap: pretty; }
.ms-modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
/* Con una, dos o tres tarjetas (un operario del taller: Procesos, Fichaje y Chat), del ancho de cuando hay cuatro, no
   estiradas a toda la fila con el color enorme */
@media (min-width: 1001px) {
  .ms-modulos:not(:has(> .ms-modulo:nth-child(4))) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Portal del personal con cinco tarjetas o más (Oficina: Procesos, Fichaje, Oficina, Chat, Presupuestos y planos y
   Vacaciones y ausencias): todas en una fila (M, 10/11: «aquí quiero que aparezcan las 5 páginas en una fila»); el
   nombre y el margen siguen al ancho de la ventana, como en Administración */
@media not all and (max-width: 1000px) {
  .ms-modulos:not(.ms-modulos-admin):has(> .ms-modulo:nth-child(5)) {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  }
  .ms-modulos:not(.ms-modulos-admin):has(> .ms-modulo:nth-child(5)) .ms-modulo-texto {
    padding-left: clamp(12px, 1.3vw, 20px); padding-right: clamp(12px, 1.3vw, 20px);
  }
  .ms-modulos:not(.ms-modulos-admin):has(> .ms-modulo:nth-child(5)) .ms-modulo-nombre { font-size: min(28px, 1.6vw); }
}
/* Con siete u ocho (la oficina desde el 11/11: Procesos, Fichaje, Vacaciones y ausencias, Mis documentos, Chat, Oficina,
   Presupuestos y planos y Correos compartidos), dos filas de cuatro (M, 11/11/2026: «pon 2 filas de 4 y 4, 8 queda
   demasiado largo») */
@media not all and (max-width: 1000px) {
  .ms-modulos.ms-modulos:not(.ms-modulos-admin):has(> .ms-modulo:nth-child(7)) {
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row;
  }
  .ms-modulos.ms-modulos:not(.ms-modulos-admin):has(> .ms-modulo:nth-child(7)) .ms-modulo-nombre { font-size: min(28px, 2vw); }
}
.ms-modulo {
  display: grid; grid-template-rows: auto 1fr; background: var(--carta); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.ms-modulo:focus-visible { border-color: var(--ink); box-shadow: 0 20px 40px rgba(22, 24, 22, .2); }
.ms-modulo-icono {
  display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; font-size: 60px; line-height: 1;
  background: linear-gradient(135deg, var(--tono-a, #9aa093), var(--tono-b, #6b7065)); transition: filter .3s;
}
.ms-modulo-icono span { display: inline-block; transition: transform .35s var(--ease); }
/* Al pasar el cursor se nota (M, 27/10): la tarjeta sube con sombra, el color se aviva y el icono crece.
   Solo con ratón: en el móvil, después de tocar, se quedaba marcada */
@media (hover: hover) {
  .ms-modulo:hover { transform: translateY(-6px); border-color: var(--ink); box-shadow: 0 20px 40px rgba(22, 24, 22, .2); }
  .ms-modulo:hover .ms-modulo-ir { color: var(--naranja); }
  .ms-modulo:hover .ms-modulo-icono { filter: saturate(1.2) brightness(1.06); }
  .ms-modulo:hover .ms-modulo-icono span { transform: scale(1.18); }
  .ms-modulo:active { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-modulo, .ms-modulo-icono span { transition: none; }
  .ms-modulo:hover, .ms-modulo:active, .ms-modulo:hover .ms-modulo-icono span { transform: none; }
}
/* los emojis son claros (la llave, el reloj…): una sombra los separa del color */
.ms-modulo-icono { text-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.ms-modulo-texto { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.ms-modulo-nombre { font-size: 24px; font-weight: 600; letter-spacing: -.045em; line-height: 1.1; }
.ms-modulo-desc { flex: 1; font-size: 13px; line-height: 1.6; color: var(--suave); }
.ms-modulo-ir { font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
/* Lo que pide atención en una tarjeta («3 por reponer» en Inventario, M 2/11): arriba a la derecha, sobre su color */
.ms-modulo { position: relative; }
.ms-modulo-aviso {
  position: absolute; top: 10px; right: 10px; z-index: 1; padding: 3px 9px; background: var(--aviso-fondo);
  color: var(--aviso); border: 1px solid var(--aviso-linea); font-size: 12px; font-weight: 700; line-height: 1.4;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
@media (max-width: 700px) {
  .ms-modulo-aviso { top: 6px; right: 6px; padding: 2px 6px; font-size: 11px; }
}
/* el color que tenía cada módulo en el menú de antes (M, 27/10: la llave casi no se veía sobre el lila pálido);
   el 3D, con el negro de /3d/ */
.ms-tono-taller { --tono-a: #667eea; --tono-b: #764ba2; }
.ms-tono-fichaje { --tono-a: #11998e; --tono-b: #38ef7d; }
.ms-tono-oficina { --tono-a: #f093fb; --tono-b: #f5576c; }
.ms-tono-configuradores { --tono-a: #3a3f3a; --tono-b: #161816; }
/* Chat: el verde oscuro de WhatsApp del 30/10 era «muy oscuro» (M, 31/10); un azul cielo claro, distinto del verde de
   Fichaje, con el bocadillo blanco 💬 */
.ms-tono-chat { --tono-a: #6ec6ff; --tono-b: #2f8fe6; }
/* Administración: Facturas y Empleados con el suyo de antes (un poco más oscuro para que se vea el emoji);
   Papelera, Registro y Puestos llevaban el de Empleados y ahora tienen uno propio, para distinguirlos de un vistazo */
.ms-tono-facturas { --tono-a: #4facfe; --tono-b: #00b4db; }
.ms-tono-empleados { --tono-a: #ff9a44; --tono-b: #fc6076; }
/* Tesorería (M, 12/11/2026) va donde estaba el Registro de cambios, con su azul; el Registro con la Papelera, juntos
   («Registro y papelera»), donde estaba la Papelera, con su marrón: los colores siguen en su sitio */
.ms-tono-tesoreria { --tono-a: #4b6cb7; --tono-b: #182848; }
.ms-tono-registro { --tono-a: #c8955a; --tono-b: #6b4423; }
.ms-tono-puestos { --tono-a: #f6d365; --tono-b: #fda085; }
/* Datos contables (30/10): un verde azulado oscuro, distinto del de Empleados y del azul de Facturas */
.ms-tono-contabilidad { --tono-a: #2b8c9a; --tono-b: #155263; }
/* Tarifas (30/10): un dorado oscuro, como una etiqueta de precio, distinto del amarillo claro de Puestos */
.ms-tono-tarifas { --tono-a: #c9932b; --tono-b: #7a5512; }
/* Inventario (2/11): el gris azulado del acero galvanizado de las estanterías, para la caja 📦 */
.ms-tono-inventario { --tono-a: #8ea4b5; --tono-b: #43586a; }
/* Fotos (11/11): el naranja que tenía el Editor web */
.ms-tono-fotos { --tono-a: #ff7a5c; --tono-b: #c8401f; }
/* Objetivos (3/11): un morado oscuro, como la tapa de una agenda, distinto del lila de Procesos */
.ms-tono-objetivos { --tono-a: #a05cc4; --tono-b: #4b2466; }
/* Prevención (4/11): el amarillo verdoso de los chalecos de alta visibilidad, oscurecido para que se lea el 🦺 */
.ms-tono-prevencion { --tono-a: #b5d334; --tono-b: #4f7a12; }
/* Proveedores (5/11): el marrón del cartón de embalaje de lo que llega en el camión 🚚 */
.ms-tono-proveedores { --tono-a: #43e97b; --tono-b: #1fa98a; }
/* Vacaciones y ausencias (M, 10/11): el mar */
.ms-tono-vacaciones { --tono-a: #7d93ad; --tono-b: #2f3e52; }
/* Mis documentos (M, 11/11/2026): el marrón cálido de una carpeta de cartón, para la carpeta 📁 */
.ms-tono-misdocs { --tono-a: #d9822b; --tono-b: #7c3f0b; }
/* Correo (M, 11/11/2026): el rojo del lacre de las cartas, más oscuro que el rosa de Oficina, para el sobre blanco ✉️ */
.ms-tono-correo { --tono-a: #e35d6a; --tono-b: #8e1b3a; }
/* Correos compartidos de la oficina, con el mismo rojo que el Correo de administración (M, 11/11/2026) */
.ms-tono-correos { --tono-a: #e35d6a; --tono-b: #8e1b3a; }
.ms-subtitulo { margin: 0 0 34px; font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -.05em; line-height: 1.05; }
/* Administración: sus tarjetas en filas de 6 (M, 5/11: «que las aplicaciones formen líneas de 6 apps, en la segunda
   línea habrá 5»; del 3/11 al 5/11, filas de 5). La última fila, con las que sobren, queda a la izquierda con el mismo
   ancho */
.ms-modulos-admin { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Con 6 por fila, de 1001 a 1400 px las tarjetas son estrechas: el nombre y el margen siguen al ancho de la ventana, para
   que «Prevención» o «Empleados» no se salgan de la tarjeta (en la pantalla de M, 1536 px, se quedan en 24 px y 20 px) */
@media not all and (max-width: 1000px) {
  .ms-modulos-admin .ms-modulo-texto { padding-left: clamp(12px, 1.3vw, 20px); padding-right: clamp(12px, 1.3vw, 20px); }
  .ms-modulos-admin .ms-modulo-nombre { font-size: min(24px, 1.75vw); }
}
@media (max-width: 1000px) {
  .ms-modulos-admin { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (max-width: 700px) {
  .ms-bloque { padding: 24px 16px 28px; }
  .ms-cabeza { flex-direction: column; align-items: flex-start; margin-bottom: 18px; }
  .ms-cabeza h1 { font-size: 32px; }
  .ms-subtitulo { margin-bottom: 18px; font-size: 26px; }
  /* En el móvil caben más (M, 27/10): de dos en dos, más bajas y solo con el nombre; toda la tarjeta es el enlace */
  .ms-modulos, .ms-modulos-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ms-modulo-icono { aspect-ratio: auto; height: 76px; font-size: 38px; }
  .ms-modulo-texto { padding: 10px 12px 12px; }
  .ms-modulo-nombre { font-size: 16px; letter-spacing: -.03em; }
  .ms-modulo-desc, .ms-modulo-ir { display: none; }
}

/* ---------- Entrada (sin sesión): como el Inicio, con el código en una tarjeta blanca ---------- */
/* M (27/10): «ahora vas a tener que transformar la entrada a corde como lo has hecho con los demás». El campo, el 👁 y
   el teclado propio traen su estilo dentro de la página (ui.CAMPO_CODIGO, después de este): por eso body.ms-entrada
   delante. Los tamaños, para tocarlos con el dedo, como antes. */
body.ms-entrada .ms-cab { flex-wrap: nowrap; padding-top: 0; }   /* solo la marca: centrada en la franja negra */
/* El título y la tarjeta en mitad de la pantalla (M, 27/10: «quiero que esto esté centrado en mitad de la pantalla»): la
   página ocupa toda la altura y lo de abajo deja de hueco 80 px más que lo de arriba (el alto de la franja negra), para
   que quede en el centro de la pantalla y no en el de lo que hay debajo de la franja */
body.ms-entrada { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.ms-entrada > .ms-bloque {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px var(--shell) 112px; box-sizing: border-box;
}
body.ms-entrada .ms-cabeza { justify-content: center; margin-bottom: 28px; text-align: center; }
.ms-entrada-caja {
  width: 100%; max-width: 440px; padding: 26px 28px 28px; background: var(--carta); border: 1px solid var(--line);
  box-sizing: border-box;
}
.ms-entrada-texto { margin: 0 0 16px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
body.ms-entrada .ms-alert-error { margin: 0 0 16px; padding: 10px 14px; font-size: 13px; line-height: 1.5; }
body.ms-entrada .ms-codigo-fila { gap: 8px; }
body.ms-entrada .ms-codigo-fila input {
  width: 100%; height: 60px; margin: 0; padding: 0 14px; box-sizing: border-box; font-size: 24px; text-align: center;
}
body.ms-entrada .ms-ojo { min-width: 60px; min-height: 60px; margin: 0; font-size: 22px !important; }
body.ms-entrada .ms-teclado { gap: 8px; margin: 12px 0 0; }
body.ms-entrada .ms-teclado button {
  height: 60px; background: var(--carta); color: var(--ink); border: 1px solid var(--campo-linea); border-radius: 0;
  font: 700 24px var(--ms-font);
}
body.ms-entrada .ms-teclado button:hover { background: var(--hover); border-color: var(--ink); }
body.ms-entrada .ms-teclado button:active { background: var(--line); }
body.ms-entrada .ms-teclado .ms-tecla-esp { background: var(--light); font-size: 17px; }
/* Borrar dibujado, a la altura de los números (M, 31/10: «Ese botón pa borrar lo veo muy pequeño, queda mal») */
body.ms-entrada .ms-teclado .ms-tecla-borrar { font-size: 24px; }
body.ms-entrada .ms-volver-num {
  margin: 12px 0 0; padding: 14px; background: var(--light); color: var(--ink); border: 1px solid var(--campo-linea);
  border-radius: 0; font: 600 15px var(--ms-font);
}
body.ms-entrada form button[type="submit"] { width: 100%; height: 56px; margin-top: 16px; font-size: 16px; font-weight: 700; }
/* Tablet en horizontal (sin registrar): el teclado a la derecha, para que quepa todo sin bajar la página */
@media (min-width: 900px) and (pointer: coarse) {
  .ms-entrada-caja { max-width: 820px; }
  .ms-entrada-caja form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  body.ms-entrada .ms-codigo-wrap { display: contents; }
  body.ms-entrada .ms-codigo-fila { grid-column: 1; grid-row: 1; }
  body.ms-entrada form button[type="submit"] { grid-column: 1; grid-row: 2; }
  body.ms-entrada .ms-volver-num { grid-column: 1; grid-row: 3; }
  body.ms-entrada .ms-teclado { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}
@media (max-width: 700px) {
  body.ms-entrada > .ms-bloque { padding: 24px 16px 104px; }
  body.ms-entrada .ms-cabeza { align-items: center; margin-bottom: 18px; }
  .ms-entrada-caja { max-width: none; padding: 18px 16px 20px; }
}

/* ---------- El título de cada pantalla (la barra de antes), como el de /3d/ ---------- */

.ms-topbar {
  position: static; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px;
  padding: 40px var(--shell) 26px; background: none; border: 0; box-shadow: none; text-align: left;
}
.ms-topbar-title {
  flex: 1 1 auto; min-width: 0; color: var(--ink);
  font-size: clamp(32px, 3.4vw, 50px); font-weight: 600; letter-spacing: -.055em; line-height: 1.05;
}
/* «← Volver» solo donde vuelve a otra pantalla que no es Inicio, como un enlace sobre el título */
.ms-topbar .ms-btn-back {
  order: -1; flex-basis: 100%; min-height: 0; padding: 0; background: none; border: 0; color: var(--suave);
  font: 600 12px var(--ms-font); text-align: left; text-decoration: underline; text-underline-offset: 4px;
}
.ms-topbar .ms-btn-back:hover { background: none; color: var(--naranja); }
.ms-topbar[data-fallback="/"] .ms-btn-back { display: none; }
.ms-topbar-actions { gap: 12px 22px; }
/* Inicio y Cerrar sesión ya están en la cabecera (el «Salir» y el 👑 de Taller y Oficina sobran); los demás enlaces de
   la barra, como «Subir» y «Buscar» de Facturas, se quedan como enlaces subrayados */
.ms-topbar-actions .ms-link-home[href="/"], .ms-topbar-actions form[action$="/logout"], .ms-topbar-actions > span { display: none !important; }
.ms-topbar-actions .ms-link-home {
  min-height: 0; margin: 0 !important; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--ink); font: 600 12px var(--ms-font); text-decoration: underline; text-underline-offset: 4px;
}
.ms-topbar-actions .ms-link-home:hover { background: none; color: var(--naranja); }

/* ---------- Lo común de las pantallas: cajas, tablas, campos, botones y avisos ---------- */

.wrap, .admin-wrap, .container {
  max-width: none; margin: 0; padding: 0 var(--shell) 64px; background: none; border-radius: 0; box-shadow: none;
}
.card {
  width: auto; margin: 0 0 18px; padding: 22px 24px; background: var(--carta); color: var(--ink);
  border: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
.card h3 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.035em; line-height: 1.2; }
.hint, .nota-balance { color: var(--suave); font-size: 12px; line-height: 1.6; }

table { border-collapse: collapse; background: none; border: 0; color: var(--ink); }
th {
  padding: 8px 10px; background: var(--cabeza-tabla); color: var(--suave); border: 0; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 600; text-align: left; letter-spacing: .01em;
}
td { padding: 10px; background: none; border: 0; border-top: 1px solid var(--line); }
tr:hover { background: none; }

input, select, textarea {
  background-color: var(--campo); color: var(--ink); border: 1px solid var(--campo-linea); border-radius: 0;
  font-family: var(--ms-font); color-scheme: light;
}
input::placeholder, textarea::placeholder { color: #7d8278; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
option, optgroup { background-color: var(--campo); color: var(--ink); }
label { color: inherit; }

button, input[type="submit"], input[type="button"], .btn, .btn-link {
  border-radius: 0; font-family: var(--ms-font); font-weight: 600; box-shadow: none; transform: none; text-shadow: none;
}
/* El botón principal, oscuro con letras blancas (el claro de /3d/, al revés porque aquí el fondo es claro) */
button, input[type="submit"], input[type="button"] {
  background: var(--primario); color: var(--primario-letra); border: 1px solid var(--primario); cursor: pointer;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background: var(--primario-hover); border-color: var(--primario-hover); color: var(--primario-letra); box-shadow: none; transform: none;
}
input[type="file"] { padding: 0; background: none; border: 0; color: var(--suave); font-size: 13px; }
input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 10px 16px; background: transparent; color: var(--ink); border: 1px solid var(--campo-linea);
  border-radius: 0; font: 600 12px var(--ms-font); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--hover); border-color: var(--ink); }

.ms-alert-banner, .ms-alert-error { border-radius: 0; border: 1px solid; font-weight: 600; }
.ms-alert-banner { margin: 0 var(--shell) 18px; }
.ms-alert-banner.error, .ms-alert-error { background: var(--error-fondo); color: var(--error); border-color: var(--error-linea); }
.ms-alert-banner.ok { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-linea); }
.wrap > .ms-alert-banner, .admin-wrap > .ms-alert-banner { margin: 0 0 18px; }

.btn { min-height: 36px; padding: 0 14px; background: transparent; color: var(--ink); border: 1px solid var(--campo-linea); font-size: 12px; }
.btn:hover { background: var(--hover); border-color: var(--ink); }
.btn + .btn { margin-left: 8px; }
/* Los botones de las pantallas con el color de lo que hacen, como antes: guardar o confirmar en verde, editar en azul, dar
   de baja en naranja y borrar en rojo; ir o cancelar, blancos de línea. Sin degradados ni esquinas redondas. */
.btn-save, .btn-ok, .btn-azul, .btn-verde, .save-btn, button.primary, .btn-edit, .btn-cancel, .btn-white, .toggle-btn,
.btn-gris, .edit-btn, .cancel-btn, .btn-warn, .btn-naranja, .btn-del, .del-btn, .btn-borrar, .btn-rojo, .fj-add-tramo,
.fj-horario, .ms-ojo, .ms-ver-pin {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: 0 !important; font: 600 12px/1.2 var(--ms-font); letter-spacing: .01em; text-decoration: none;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.btn-save, .btn-ok, .btn-verde, .save-btn { background: var(--b-verde); color: #fff; border: 1px solid var(--b-verde); }
.btn-save:hover, .btn-ok:hover, .btn-verde:hover, .save-btn:hover { background: var(--b-verde-h); border-color: var(--b-verde-h); color: #fff; }
.btn-edit, .btn-azul, .edit-btn { background: var(--b-azul) !important; color: #fff !important; border: 1px solid var(--b-azul) !important; }
.btn-edit:hover, .btn-azul:hover, .edit-btn:hover { background: var(--b-azul-h) !important; border-color: var(--b-azul-h) !important; }
button.primary { background: var(--primario); color: var(--primario-letra); border: 1px solid var(--primario); }
button.primary:hover { background: var(--primario-hover); border-color: var(--primario-hover); }
.btn-cancel, .btn-white, .toggle-btn, .btn-gris, .cancel-btn, .fj-add-tramo, .fj-horario {
  background: var(--carta) !important; color: var(--ink) !important; border: 1px solid var(--campo-linea) !important;
}
.btn-cancel:hover, .btn-white:hover, .toggle-btn:hover, .btn-gris:hover, .cancel-btn:hover, .fj-add-tramo:hover,
.fj-horario:hover { background: var(--hover) !important; border-color: var(--ink) !important; }
.btn-warn, .btn-naranja { background: var(--b-naranja); color: #fff; border: 1px solid var(--b-naranja); }
.btn-warn:hover, .btn-naranja:hover { background: var(--b-naranja-h); color: #fff; border-color: var(--b-naranja-h); }
.btn-del, .del-btn, .btn-borrar, .btn-rojo { background: var(--b-rojo); color: #fff; border: 1px solid var(--b-rojo); }
.btn-del:hover, .del-btn:hover, .btn-borrar:hover, .btn-rojo:hover { background: var(--b-rojo-h); color: #fff; border-color: var(--b-rojo-h); }
button:disabled, button[disabled] { opacity: .35; cursor: not-allowed; }
/* Los enlaces que parecían botones («Control por semanas», «Ver PDF»): enlaces subrayados, como «Ver el plano ↗» de /3d/ */
.btn-link, .btn-ver-pdf {
  display: inline-flex; align-items: center; min-height: 36px; margin: 0 22px 0 0; padding: 0; background: none;
  border: 0; color: var(--ink); font: 600 12px var(--ms-font); text-decoration: underline; text-underline-offset: 4px;
}
.btn-link:hover, .btn-ver-pdf:hover { background: none; color: var(--naranja); }
/* 👁 junto a los campos de PIN y contraseña (el script lo pinta al pulsarlo; aquí manda el tema), y el de la lista de
   Empleados que enseña el PIN de cada uno */
.ms-ojo, .ms-ver-pin { min-width: 44px; padding: 0 10px; font-size: 18px !important; background: var(--campo) !important;
  border: 1px solid var(--campo-linea) !important; color: var(--ink); }
.ms-ojo:hover, .ms-ver-pin:hover { border-color: var(--ink) !important; color: var(--ink); }   /* no el blanco de button:hover */
.ms-ver-pin.tachado { background: var(--light) !important; }

/* Etiquetas (estado, módulos, acciones del registro): rectángulos de línea con el color de lo que dicen */
.badge {
  display: inline-block; margin: 1px 2px 1px 0; padding: 2px 8px; border-radius: 0; border: 1px solid var(--campo-linea);
  background: transparent; color: var(--suave); font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.badge-ok, .a-crear { color: var(--ok); border-color: var(--ok-linea); background: var(--ok-fondo); }
.badge-no { color: var(--muted); }
.badge-admin { color: #6a1b9a; border-color: #d1c4e9; background: #ede7f6; }
.a-modificar { color: var(--info); border-color: var(--info-linea); background: var(--info-fondo); }
.a-borrar, .a-vaciar { color: var(--error); border-color: var(--error-linea); background: var(--error-fondo); }
.a-restaurar { color: var(--aviso); border-color: var(--aviso-linea); background: var(--aviso-fondo); }

/* ---------- Empleados ---------- */

.form-grid label { gap: 6px; font-size: 12px; font-weight: 600; color: var(--suave); }
.form-grid input, .form-grid select { height: 42px; margin-top: 0; padding: 0 12px; font-size: 14px; }
.form-grid label > span[style*="display:flex"] { margin-top: 0 !important; }   /* PIN y contraseña con su 👁, a la altura de los demás */
.checks label { font-weight: 600; font-size: 13px; }
tr.inactivo { opacity: .5; background: none; }
.edit-panel > td { background: var(--light); }
tr.edit-panel td { border-top: 0; padding: 18px 16px; }

/* ---------- Papelera y registro de cambios ---------- */

form.filtros input, form.filtros select { height: 40px; padding: 0 12px; font-size: 14px; }
form.filtros input[type="text"] { min-width: 300px; }

/* ---------- Puestos y tablets ---------- */

.maqs label { gap: 6px; font-size: 13px; }
.enlace { background: var(--aviso-fondo); border: 1px solid var(--aviso-linea); border-radius: 0; color: var(--aviso); }
.ms-qr svg { background: #fff; padding: 10px; }
.card form[style*="border-bottom:1px solid #ddd"] { border-bottom-color: var(--line) !important; padding: 16px 0 !important; }
.card form > input[name="nombre"] { height: 40px; padding: 0 12px !important; font-size: 15px !important; }   /* el QR, oscuro sobre blanco: si no, la cámara no lo lee */

/* ---------- Control horario: fichajes del admin y control por semanas ---------- */

.alertas-fichaje-fuera, .alertas-box {
  margin: 0 0 18px; padding: 14px 18px; background: var(--error-fondo); color: var(--error);
  border: 1px solid var(--error-linea); border-radius: 0;
}
.alertas-fichaje-fuera li, .alertas-box li { color: var(--ink); }
.alertas-box.alertas-ok { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-linea); }
.presentes { margin: 0 0 18px; padding: 12px 18px; background: var(--ok-fondo); border: 1px solid var(--ok-linea); border-radius: 0; }
.presentes strong { color: var(--ok); }
.filtros { gap: 12px 16px; }
.filtros label, .form-inline label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--suave); }
.filtros input, .filtros select, .form-inline input, .form-inline select {
  height: 40px; margin: 0; padding: 0 10px; font-size: 14px;
}
.form-inline textarea { min-height: 40px; margin: 0; padding: 9px 10px; font-size: 14px; }
.filtros button, .form-inline button { min-height: 40px; padding: 0 18px; }
.resumen-grid { gap: 12px; }
.resumen-item { padding: 14px 16px; background: var(--light); border: 1px solid var(--line); border-radius: 0; line-height: 1.6; }
.resumen-item small { color: var(--suave); }
.balance-neg { color: var(--error); } .balance-pos { color: var(--info); } .balance-cero { color: var(--ok); }
.inc-edit-panel > td { background: var(--light); }
/* Fichajes por día: la fila entera de color, como antes: dentro ahora (en curso) en verde; fuera del taller, en rojo */
tr.abierto { background: var(--ok-fondo); }
tr.fichaje-fuera { background: var(--error-fondo) !important; }
tr.fichaje-fuera td { border-color: var(--error-linea); }
/* sábado y domingo (M, 28/10: «quiero que me pongas los fondos de otro color»): violeta, que no es de ningún estado;
   si además es fuera del taller, manda el rojo, y la etiqueta del día sigue al lado de la fecha */
tr.fj-fila.finde { background: var(--finde-fondo); }
.fj-finde { color: var(--finde); background: var(--carta); border: 1px solid var(--finde-linea); border-radius: 0; }
/* debajo del total de cada día (en negro), la diferencia con 8 h, más fina: azul si pasa, rojo si no llega (M, 28/10) */
.fj-dif { font-size: 12px; font-weight: 500; }
.fj-dif-mas { color: var(--b-azul); } .fj-dif-menos { color: var(--b-rojo); }
.badge-fuera { background: transparent; color: var(--error); border: 1px solid var(--error-linea); border-radius: 0; }
.badge-taller { background: var(--ok-fondo); color: var(--ok); border: 1px solid var(--ok-linea); border-radius: 0; }
.campo-editado { background: var(--aviso-fondo) !important; border: 1px solid var(--aviso) !important; }
.badge-editado, .fj-nota { color: var(--aviso); }
/* dónde se fichó cada tramo (M, 27/10: «los tramos no te indican donde han sido fichados») */
.fj-donde { color: var(--suave); }
.fj-donde-tablet, .fj-donde-empresa { color: var(--ok); }
.fj-donde-fuera { color: var(--error); }
.fj-donde-mano { color: var(--aviso); }
.fichaje-tramo { border-bottom-color: var(--line); }
.fj-tramo input { height: 34px; padding: 0 8px; font-size: 13px; }
.fj-tramo .btn-del, .fj-quitar-fila { min-height: 34px; padding: 0 11px; }
.fj-add-tramo, .fj-horario { min-height: 32px; margin-top: 8px; }
#fj-card .fj-barra:first-of-type { top: 0; background: var(--carta); padding: 8px 0; }
.fj-contador { color: var(--suave); font-size: 12px; }
.fj-contador.pendiente { color: var(--paper); background: var(--aviso); border-radius: 0; }
.fj-avisos { background: var(--aviso-fondo); border: 1px solid var(--aviso-linea); color: var(--aviso); border-radius: 0; }
.fj-tramo.fj-cambiado { background: #fffde7; }
.fj-tramo.fj-quitado { background: var(--error-fondo); }
.fj-tramo.fj-nuevo { background: var(--ok-fondo); }
.fj-tramo.fj-mal { outline: 2px solid var(--error); }
.fj-error, .fj-aviso-horario { color: var(--error); }
.fj-etq-nuevo { background: var(--ok); color: var(--paper); border-radius: 0; }
tr.fj-fila-quitada > td { background: var(--error-fondo); }
tr.fj-fila-nueva > td { background: var(--ok-fondo); }
.leyenda span { border-radius: 0; border-color: transparent; font-weight: 600; }
.cel-falta { background: #ffcdd2; color: #b71c1c; }
.cel-sobra { background: #bbdefb; color: #0d47a1; }
.cel-ok { background: #c8e6c9; color: #1b5e20; }
.cel-vacia { background: var(--light); color: var(--muted); }
.tabla-control th { background: var(--carta); color: var(--suave); }
.tabla-control td { border: 1px solid var(--line); }
.tabla-control td.op { background: var(--carta); }
.tabla-control tr:hover td.op { background: var(--hover); }
/* las notas grises escritas en la propia etiqueta, de todas las pantallas */
.card [style*="color:#555"], .card [style*="color: #555"], .card [style*="color:#666"], .card [style*="color: #666"] {
  color: var(--suave) !important;
}

/* ---------- Facturas ---------- */

.container > h1:first-child { display: none; }   /* repite el título de arriba */
.stats { gap: 22px; margin-bottom: 26px; }
.stat-box { padding: 18px 20px; background: var(--carta); color: var(--ink); border: 1px solid var(--line); border-radius: 0; }
.stat-box h3 { margin: 0 0 6px; color: var(--suave); font-size: 12px; font-weight: 600; letter-spacing: .01em; opacity: 1; }
.stat-box .value { font-size: 34px; font-weight: 600; letter-spacing: -.05em; line-height: 1.1; }
.container .filter-grid {
  justify-content: flex-start; gap: 12px; margin-bottom: 26px; padding: 22px 24px;
  background: var(--carta); border: 1px solid var(--line); border-radius: 0;
}
.container .filter-grid input, .container .filter-grid select {
  height: 42px; min-width: 180px; padding: 0 12px; border: 1px solid var(--campo-linea); border-radius: 0;
}
.container .filter-grid input:focus { border-color: var(--ink); }
.container .filter-actions { justify-content: flex-start; margin-top: 6px; }
.container .filter-actions button { min-height: 42px; padding: 0 20px; font-size: 13px; }
.container .filter-actions button[type="button"] { background: transparent; color: var(--ink); border-color: var(--campo-linea); }
.container .filter-actions button[type="button"]:hover { background: var(--hover); border-color: var(--ink); }
.results h2 { font-size: 24px; letter-spacing: -.045em; }
.no-results { padding: 50px 20px; color: var(--muted); border: 1px dashed var(--line); }
.factura-card { padding: 18px 22px; background: var(--carta); border: 1px solid var(--line); border-radius: 0; }
.factura-card:hover { border-color: var(--ink); box-shadow: none; }
.factura-title { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.035em; }
.factura-meta { color: var(--suave); font-size: 13px; }
.producto-item { background: var(--light); color: var(--ink); border-left: 2px solid var(--campo-linea); border-radius: 0; }
/* Buscar de un PDF y un cliente y sacarlas todas en un PDF (el administrador, 29/10); los productos de cada factura,
   plegados para ver más facturas de un vistazo */
.container > .ms-alert-banner { margin: 0 0 18px; }
#filtro_facturas > :is(select[name="archivo"], input[name="cliente"]) { min-width: 320px; }
.ms-resultados-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 18px; }
.ms-resultados-barra h2 { margin: 0; }
a.ms-pdf-todas {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; background: var(--primario);
  color: var(--primario-letra); border: 1px solid var(--primario); font: 600 13px var(--ms-font); text-decoration: none;
}
a.ms-pdf-todas:hover { background: var(--primario-hover); border-color: var(--primario-hover); color: var(--primario-letra); }
.ms-pdf-demasiadas { margin: 0; color: var(--suave); font-size: 13px; }
.factura-card { margin-bottom: 10px; }
.factura-header .btn-ver-pdf { flex-shrink: 0; white-space: nowrap; }
details.ms-productos { margin-top: 8px; }
details.ms-productos > summary { cursor: pointer; color: var(--suave); font-size: 13px; font-weight: 600; }
details.ms-productos[open] > summary { margin-bottom: 6px; }
/* Las llegadas de FactuSOL (M, 29/10) */
.ms-fs-marca {
  display: inline-block; margin-left: 8px; padding: 2px 8px; vertical-align: middle; background: var(--light);
  border: 1px solid var(--campo-linea); color: var(--suave); font-size: 12px; font-weight: 600; letter-spacing: 0;
}
.ms-fs-cuantas { color: var(--suave); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.subtitle { max-width: 720px; color: var(--suave); }
.subtitle strong { color: var(--ink); }
.upload-box { padding: 26px; background: var(--carta); border: 1px dashed var(--campo-linea); border-radius: 0; }
.upload-box label { margin-top: 16px; color: var(--suave); font-size: 12px; font-weight: 600; }
.upload-box label:first-child { margin-top: 0; }
.upload-box label span[style*="#c62828"] { color: var(--error) !important; }
.upload-box input[type="file"] { margin: 10px 0 0; font-size: 13px; }
.upload-box input[type="number"] { width: 140px; height: 42px; padding: 0 12px; border: 1px solid var(--campo-linea); border-radius: 0; font-size: 14px; }
.upload-box button.primary { min-height: 42px; padding: 0 22px; font-size: 13px; }
.resultado { border-radius: 0; border: 1px solid var(--line); border-left-width: 2px; }
.resultado.ok { background: var(--ok-fondo); border-color: var(--ok-linea); border-left-color: var(--ok); }
.resultado.error { background: var(--error-fondo); border-color: var(--error-linea); border-left-color: var(--error); }
.aviso { background: var(--aviso-fondo); color: var(--aviso); border: 1px solid var(--aviso-linea); border-radius: 0; }
.aviso[style*="#e8f5e9"] { background: var(--ok-fondo) !important; color: var(--ok); border-color: var(--ok-linea) !important; }
.archivos-lista th { background: none; color: var(--suave); }
.archivos-lista th, .archivos-lista td { border-bottom: 1px solid var(--line); }
.archivos-lista tr:hover td { background: var(--hover); }
.badge-año { padding: 2px 8px; background: var(--info-fondo); color: var(--info); border: 1px solid var(--info-linea); border-radius: 0; font-size: 12px; font-weight: 600; }
.badge-año.badge-sin-año { background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso-linea); }
.archivos-lista .btn-borrar { min-height: 32px; padding: 0 12px; }

/* ---------- Taller (el administrador ve la pantalla de los operarios, con todos ellos) ---------- */

body > .flex-top { justify-content: flex-start; align-items: stretch; gap: 22px; padding: 0 var(--shell); }
.flex-top > #formulario, .flex-top > #mensajes {
  flex: 1 1 380px; width: auto; min-width: 0; padding: 22px 24px; background: var(--carta); border: 1px solid var(--line);
}
.bloque h3 { margin: 0 0 16px; font-size: 20px; letter-spacing: -.035em; line-height: 1.2; text-align: left; }
.bloque form { gap: 10px; }
.bloque select, .bloque input, .bloque textarea, .bloque select#ot_selector {
  width: 100%; height: 44px; margin: 0; padding: 0 12px; font-size: 14px; border: 1px solid var(--campo-linea); box-sizing: border-box;
}
.bloque textarea { height: auto; min-height: 110px; padding: 10px 12px; }
.bloque button, .bloque button.pequeno, .bloque button[name="accion"][value="inicio"] {
  align-self: flex-start; min-height: 44px; margin: 6px 0 0; padding: 0 22px; font-size: 13px;
  background: var(--primario); color: var(--primario-letra); border: 1px solid var(--primario);
}
.bloque button:hover, .bloque button:active, .bloque button.pequeno:hover, .bloque button.pequeno:active,
.bloque button[name="accion"][value="inicio"]:hover, .bloque button[name="accion"][value="inicio"]:active {
  background: var(--primario-hover); border-color: var(--primario-hover);
}
.bloque button[name="accion"][value="inicio"] { background: var(--b-verde); border-color: var(--b-verde); color: #fff; }
.bloque button[name="accion"][value="inicio"]:hover, .bloque button[name="accion"][value="inicio"]:active {
  background: var(--b-verde-h); border-color: var(--b-verde-h);
}
body > h3 { margin: 40px var(--shell) 12px; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.05em; text-align: left; }
body > table { width: calc(100% - 2 * var(--shell)); margin: 0 var(--shell) 64px; font-size: 13px; }
body > table td { text-align: left; }
/* las filas enteras de color (los de taller.py): en curso en el amarillo clarito de las OT abiertas (M, 29/10: «usa el
   mismo color amarillo clarito que las OT, no crees que tiene más sentido?»), con su raya a la izquierda como en la
   lista de OT; en pausa en naranja clarito, con la raya del botón «Pausar». Cada botón con el color de lo que hace:
   reanudar en verde, pausar en naranja y terminar en verde, como en la tablet */
body > table tr.en_curso > td, body > table tr.pausado > td { border-top-color: #0000001f; }
body > table tr.en_curso { --raya-proceso: #dfae2e; }
body > table tr.pausado { --raya-proceso: var(--b-naranja); }
body > table tr:is(.en_curso, .pausado) > td:first-child { box-shadow: inset 4px 0 0 var(--raya-proceso); padding-left: 12px; }
td button.pequeno {
  min-height: 34px; margin: 2px 6px 2px 0; padding: 0 12px; font-size: 12px;
  background: var(--carta); color: var(--ink); border: 1px solid var(--campo-linea);
}
td button.pequeno:hover, td button.pequeno:active { background: var(--hover); color: var(--ink); border-color: var(--ink); }
td form[action$="/reanudar"] button.pequeno { background: var(--b-verde); color: #fff; border-color: var(--b-verde); }
td form[action$="/pausar"] button.pequeno { background: var(--b-naranja); color: #fff; border-color: var(--b-naranja); }
td button.pequeno.ms-btn-terminar { background: var(--b-verde); color: #fff; border-color: var(--b-verde); }
td form[action$="/reanudar"] button.pequeno:hover { background: var(--b-verde-h); border-color: var(--b-verde-h); color: #fff; }
td form[action$="/pausar"] button.pequeno:hover { background: var(--b-naranja-h); border-color: var(--b-naranja-h); color: #fff; }
td button.pequeno.ms-btn-terminar:hover { background: var(--b-verde-h); border-color: var(--b-verde-h); color: #fff; }
/* «✅ Terminar» abre lo mismo que en la tablet (M, 29/10): cómo queda la OT, piezas malas e incidencia con su nota */
dialog.ms-terminar {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 22px 24px; box-sizing: border-box;
  background: var(--carta); color: var(--ink); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 20px 60px #0000004d;
  text-align: left;
}
dialog.ms-terminar::backdrop { background: #0000008c; }
dialog.ms-terminar form { display: flex; flex-direction: column; gap: 12px; }
dialog.ms-terminar h3 { margin: 0; font-size: 22px; letter-spacing: -.04em; line-height: 1.2; }
dialog.ms-terminar .ms-terminar-que { margin: -6px 0 0; color: var(--suave); font-size: 13px; }
dialog.ms-terminar label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
dialog.ms-terminar :is(input, select, textarea) {
  width: 100%; height: 46px; margin: 0; padding: 0 12px; box-sizing: border-box; font: 16px var(--ms-font);
  background: #fff; color: var(--ink); border: 1px solid var(--campo-linea); border-radius: 0;
}
dialog.ms-terminar textarea { height: auto; min-height: 72px; padding: 10px 12px; }
dialog.ms-terminar button {
  width: 100%; min-height: 52px; margin: 0; padding: 0 16px; font: 700 17px var(--ms-font); letter-spacing: -.02em;
  border: 1px solid; border-radius: 0; cursor: pointer;
}
dialog.ms-terminar button.ms-terminada { min-height: 64px; font-size: 20px; background: var(--b-verde); border-color: var(--b-verde); color: #fff; }
dialog.ms-terminar button.ms-a-medias { background: var(--b-naranja); border-color: var(--b-naranja); color: #fff; }
dialog.ms-terminar button.ms-cancelar { background: var(--carta); border-color: var(--campo-linea); color: var(--ink); }
dialog.ms-terminar button.ms-terminada:hover { background: var(--b-verde-h); border-color: var(--b-verde-h); }
dialog.ms-terminar button.ms-a-medias:hover { background: var(--b-naranja-h); border-color: var(--b-naranja-h); }
dialog.ms-terminar button.ms-cancelar:hover { background: var(--hover); border-color: var(--ink); }
.ot-alert { top: 18px; box-shadow: 0 10px 30px #00000033; }   /* «Nueva OT disponible», amarillo como antes */
/* Los avisos que pone el script en Oficina: «Hay cambios nuevos…» (arriba, flotando) y «Se ha recuperado lo que estabas
   escribiendo»; sus botones llevan el color en línea y sin él la letra blanca del tema no se veía */
#ms-aviso-cambios { border-radius: 0 !important; color: var(--ink) !important; font-weight: 600 !important; }
#ms-aviso-cambios button, #ms-aviso-borrador button {
  min-height: 34px; padding: 0 14px !important; border-radius: 0 !important; font: 600 12px var(--ms-font) !important;
}
#ms-aviso-cambios button { background: var(--primario) !important; color: var(--primario-letra) !important; border: 1px solid var(--primario) !important; }
#ms-aviso-cambios button:hover { background: var(--primario-hover) !important; border-color: var(--primario-hover) !important; }
#ms-aviso-borrador button { background: var(--carta) !important; color: var(--ink) !important; border: 1px solid var(--campo-linea) !important; }
#ms-aviso-borrador button:hover { background: var(--hover) !important; border-color: var(--ink) !important; }

/* ---------- Oficina ---------- */

/* Las pestañas, como el menú de la cabecera: subrayada la que está abierta */
.striped-nav {
  justify-content: flex-start; gap: 0 28px; margin: 0 0 30px; padding: 0 var(--shell);
  background: none; border-bottom: 1px solid var(--line);
}
.striped-nav a {
  position: relative; padding: 12px 0 14px; background: none; border: 0; color: var(--suave); font-size: 13px; font-weight: 600;
}
.striped-nav a:hover { background: none; color: var(--ink); }
.striped-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
body:has(#generar_ot:not([style*="none"])) .striped-nav a[onclick*="'generar_ot'"],
body:has(#clientes:not([style*="none"])) .striped-nav a[onclick*="'clientes'"],
body:has(#compras:not([style*="none"])) .striped-nav a[onclick*="'compras'"],
body:has(.tab#mensajes:not([style*="none"])) .striped-nav a[onclick*="'mensajes'"] { color: var(--ink); }
body:has(#generar_ot:not([style*="none"])) .striped-nav a[onclick*="'generar_ot'"]::after,
body:has(#clientes:not([style*="none"])) .striped-nav a[onclick*="'clientes'"]::after,
body:has(#compras:not([style*="none"])) .striped-nav a[onclick*="'compras'"]::after,
body:has(.tab#mensajes:not([style*="none"])) .striped-nav a[onclick*="'mensajes'"]::after { background: var(--accent); }
@keyframes parpadeo-pestaña-rojo {   /* mensajes nuevos: parpadea en naranja, sin fondo */
  0%, 100% { color: var(--suave); }
  50% { color: var(--naranja); }
}
.nav-badge { color: var(--accent); }
.tab { padding: 0 var(--shell) 64px; }
.tab > .ms-alert-banner, .ot-form .ms-alert-banner { margin: 0 0 18px; }
.alert { width: auto; margin: 0 0 18px; border-radius: 0; }
.alert.error { background: var(--error-fondo); color: var(--error); border-color: var(--error-linea); }
.alert.ok { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-linea); }
.tab table { width: 100%; margin: 10px 0; }
.tab td { text-align: left; }
.tab input, .tab select { min-height: 40px; margin: 0; padding: 0 10px; }
.tab textarea { margin: 0; padding: 9px 10px; }
.tab input[type="checkbox"], .tab input[type="radio"] { min-height: 0; padding: 0; }
.tab input[type="file"] { min-height: 0; padding: 0; }
.tab label[style*="display: block"] { color: var(--suave); font-size: 12px; font-weight: 600 !important; margin-bottom: 6px !important; }
.tab a[style*="#4a90e2"] { color: var(--b-azul) !important; }
.tab [style*="border-top: 1px solid #ddd"] { border-top-color: var(--line) !important; }
.tab input[readonly][style*="#f0f0f0"], .tab input[readonly][style*="240, 240, 240"] { background: var(--light) !important; color: var(--suave); }

/* Nueva OT y compras: los campos con su nombre dentro, como estaban */
.ot-form { gap: 12px; }
.ot-form > input, .ot-form > select { min-height: 52px; padding: 0 12px; border: 1px solid var(--campo-linea); }
.ot-form textarea { min-height: 70px; padding: 10px 12px; border: 1px solid var(--campo-linea); }
.tab .labelled { align-items: flex-start; }
.tab .labelled input, .tab .labelled select { min-height: 52px; padding: 18px 12px 0; }
.tab .labelled textarea { padding-top: 24px; }
.labelled span { left: 12px; top: 7px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.ot-form small[style*="color:#666"] { color: var(--muted) !important; }
.check-row, .priority-block { gap: 10px 16px; font-size: 13px; }
.check-row strong, .priority-block > span { color: var(--suave); font-size: 12px; font-weight: 600; }
/* La prioridad de la OT, tres botones (oficina.py): la elegida, rellena con el color de su fila en la lista de OT y con ✓ */
.prio-opcion span { min-height: 40px; padding: 0 18px; border-radius: 0; font: 600 13px var(--ms-font); }
.prio-opcion[data-prio="ALTA"] span { background: var(--error-fondo); color: var(--error); border-color: var(--error-linea); }
.prio-opcion[data-prio="MEDIA"] span { background: var(--info-fondo); color: var(--info); border-color: var(--info-linea); }
.prio-opcion[data-prio="BAJA"] span { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-linea); }
.prio-opcion input:checked + span { color: #fff; }
.prio-opcion[data-prio="ALTA"] input:checked + span { background: var(--b-rojo); border-color: var(--b-rojo); }
.prio-opcion[data-prio="MEDIA"] input:checked + span { background: var(--b-azul); border-color: var(--b-azul); }
.prio-opcion[data-prio="BAJA"] input:checked + span { background: var(--b-verde); border-color: var(--b-verde); }
.prio-opcion:hover input:not(:checked) + span { border-color: currentColor; }
.prio-opcion input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.ot-form button.btn-white[type="submit"] { min-height: 44px; padding: 0 22px; font-size: 13px; background: var(--b-verde) !important;
  color: #fff !important; border-color: var(--b-verde) !important; }
.ot-form button.btn-white[type="submit"]:hover { background: var(--b-verde-h) !important; border-color: var(--b-verde-h) !important; }
/* La OT, nueva o abierta (oficina.py; M, 28/10: «reordename todos los parámetros… quitando lo sobrante»): un formulario
   por partes, cada una con su título pequeño y una raya encima, los campos en rejilla y al final un solo botón para
   guardar, con «🗑️ Eliminar OT» aparte, a la derecha */
form.ms-ficha-ot { display: block; }
.ms-ficha-ot .ms-ot-parte { margin: 0; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.ms-ficha-ot .ms-ot-parte:first-of-type { padding-top: 4px; border-top: 0; }
.ms-ficha-ot .ms-ot-parte > h4 { margin: 0 0 12px; color: var(--suave); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ms-ficha-ot .ms-ot-parte > :not(h4, datalist) + :not(datalist) { margin-top: 14px; }
.ms-ot-campos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.ms-ot-campos > .labelled { grid-column: span 3; min-width: 0; }
.ms-ot-campos > .ms-campo-cliente { grid-column: span 6; }
.ms-ot-campos > .ms-campo-traz { grid-column: span 4; }
.ms-ot-campos > .ms-campo-notas { grid-column: span 8; }
.ms-ficha-ot .labelled > :is(input, select, textarea) { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; }
.ms-ficha-ot .labelled textarea { min-height: 52px; padding: 22px 12px 8px; border: 1px solid var(--campo-linea); resize: vertical; }
.ms-ficha-ot .ms-campo-desc textarea { min-height: 96px; }
.ms-ficha-ot .check-row { display: flex; flex-wrap: wrap; align-items: center; }
/* El estado, como la prioridad: tres botones con el color de su fila en la lista; el elegido, relleno */
.estado-opcion { position: relative; display: inline-flex; cursor: pointer; }
.estado-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.estado-opcion span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 2px solid;
  font: 600 13px var(--ms-font); }
.estado-opcion[data-estado="ABIERTA"] span { background: #fcf3c8; color: var(--aviso); border-color: #dfae2e; }
.estado-opcion[data-estado="CERRADA"] span { background: #e5f4e8; color: var(--ok); border-color: #6cc07a; }
.estado-opcion[data-estado="CANCELADA"] span { background: #fce6e6; color: var(--error); border-color: #e47c7c; }
.estado-opcion input:checked + span { color: #fff; }
.estado-opcion[data-estado="ABIERTA"] input:checked + span { background: #946500; border-color: #946500; }
.estado-opcion[data-estado="CERRADA"] input:checked + span { background: var(--b-verde); border-color: var(--b-verde); }
.estado-opcion[data-estado="CANCELADA"] input:checked + span { background: var(--b-rojo); border-color: var(--b-rojo); }
.estado-opcion:hover input:not(:checked) + span { border-color: currentColor; }
.estado-opcion input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.ms-ficha-ot .ms-estado-block > span { min-width: 58px; }
.ms-ficha-ot .priority-block > span { min-width: 58px; }
/* Los módulos a los que va la OT y, al lado, cómo va allí (o que no está en ninguna tablet) */
.ms-taller-modulos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ms-taller-modulos > .ms-casillas-puestos { margin: 0 !important; line-height: 2; }
.ms-taller-nota { color: var(--muted); font-size: 12px; }
/* Lo que lleva hecho el taller, solo para leer: el resumen y lo empaquetado, plegado bajo su línea */
.ms-ot-seguimiento { padding: 12px 14px; background: var(--light); border: 1px solid var(--line); font-size: 13px; }
.ms-ot-seguimiento > p { margin: 0 0 6px; }
.ms-ot-seguimiento > ul { margin: 0 0 8px; }
.ms-ot-seguimiento details + details, .ms-ot-seguimiento p + details, .ms-ot-seguimiento ul + details { margin-top: 6px; }
.ms-ot-seguimiento summary { cursor: pointer; }
.ms-ot-seguimiento details[open] > summary { margin-bottom: 4px; }
.ms-ot-adjuntos { margin: 0; padding-left: 20px; font-size: 13px; }
.ms-ot-adjuntos > li + li { margin-top: 8px; }
.ms-ot-adjuntos button.del-btn { min-height: 28px; margin-left: 8px; padding: 0 10px; background: transparent !important;
  color: var(--error) !important; border: 1px solid var(--error-linea) !important; font-size: 12px; }
.ms-ot-adjuntos button.del-btn:hover { background: var(--error-fondo) !important; border-color: var(--error) !important; }
.ms-ficha-ot .ms-zona-adj { margin: 0 !important; }
.ms-ficha-ot .ms-ot-adjuntos + .ms-zona-adj { margin-top: 14px !important; }
/* Debajo de la descripción, dos columnas (M, 29/10): a la izquierda los archivos, sin ocupar todo el ancho («no quiero que
   ocupen todo el ancho»), y a la derecha los procesos intermedios, la prioridad, el estado y los módulos («así aprovechas
   el espacio»), con sus nombres en columna; en el móvil, una debajo de otra */
.ms-ot-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: start; }
/* Con aire debajo de la descripción y entre las cuatro filas de la derecha (M, 29/10: «baja procesos intermedios un poco
   de la cuadrícula de trabajo que parece que se van a tocar… y separa estos 4 un poco también») */
.ms-ficha-ot .ms-ot-parte > .ms-ot-dos { margin-top: 28px; }
.ms-ot-lado { display: flex; flex-direction: column; gap: 24px; }
/* A la derecha, los nombres en una columna de 132 px y lo suyo al lado; si no cabe en una línea, sigue debajo pero en su
   sitio, no debajo del nombre (con la pantalla estrecha) */
.ms-ficha-ot .ms-ot-lado :is(.check-row > strong, .priority-block > span) { min-width: 132px; }
.ms-ficha-ot .ms-ot-lado :is(.check-row, .ms-taller-modulos) { padding-left: 148px; }
.ms-ficha-ot .ms-ot-lado .check-row > strong { margin-left: -148px; margin-right: -12px; }
/* Las cuatro casillas de procesos intermedios, más separadas, y la casilla un poco más lejos de su nombre */
.ms-ficha-ot .ms-ot-lado .check-row { column-gap: 28px; }
.ms-ficha-ot .ms-ot-lado input[type="checkbox"] { margin: 0 6px 0 0; vertical-align: -2px; }
.ms-ficha-ot .ms-ot-lado .ms-taller-modulos > .ms-casillas-puestos { display: flex; align-items: center; gap: 16px;
  margin-left: -148px !important; }
.ms-ficha-ot .ms-ot-lado .ms-casillas-puestos > b:first-child { min-width: 132px; margin-right: 0; }
/* «Enviar al taller», un desplegable con casillas (M, 29/10): cerrado, como un campo con ▾ y a qué módulos va; abierto,
   debajo, una fila por módulo y arriba «Todos los módulos» */
.ms-desplegable { position: relative; display: inline-block; line-height: 1.3; }
.ms-desplegable > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 260px;
  min-height: 40px; padding: 0 12px 0 14px; box-sizing: border-box; background: var(--carta); border: 1px solid var(--campo-linea);
  color: var(--ink); font: 600 13px var(--ms-font); cursor: pointer; list-style: none; user-select: none; }
.ms-desplegable > summary::-webkit-details-marker { display: none; }
.ms-desplegable > summary::after { content: "▾"; color: var(--suave); font-size: 13px; }
.ms-desplegable[open] > summary::after { content: "▴"; }
.ms-desplegable > summary:hover, .ms-desplegable[open] > summary { border-color: var(--ink); }
.ms-desplegable > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ms-desplegable-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; box-sizing: border-box;
  padding: 6px 0; background: var(--carta); border: 1px solid var(--ink); box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.ms-desplegable-panel > label { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px;
  white-space: nowrap; cursor: pointer; }
.ms-desplegable-panel > label:hover { background: var(--hover); }
.ms-desplegable-panel > .ms-desplegable-todos { margin-bottom: 4px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.ms-ficha-ot .ms-desplegable-panel input[type="checkbox"] { flex: 0 0 auto; margin: 0; vertical-align: middle; }   /* no estirada como los campos */
.ms-ot-archivos-tit { display: block; margin-bottom: 6px; color: var(--suave); font-size: 12px; font-weight: 600; }
.ms-ot-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 18px; border-top: 1px solid var(--line); }
.ms-ot-acciones .del-btn { min-height: 44px; margin-left: auto; padding: 0 18px; font-size: 13px; }
.ms-ot-acciones :is(.ms-ot-salir, .ms-ot-imprimir) { min-height: 44px; padding: 0 18px; font-size: 13px; }
/* «Datos» de la OT sin el coste de la hora (M, 30/10: cada proceso cuesta lo de su máquina): las dos fechas y el coste
   de material, de cuatro en cuatro en la fila. Y en una OT que ya existe, debajo, el tiempo dedicado y su coste
   («Coste del tiempo», M 29/10), que solo se leen, no son campos (sin borde, con una raya a la izquierda; lo que sale,
   en verde y hasta el final de la fila) */
.ms-ot-costes > :is(.ms-campo-fecha, .ms-campo-material) { grid-column: span 4; }
/* La primera fila: Nº OT, Cliente, Nº de pedido (M, 2/11: «Después del parámetro de Cliente tiene que ir el parámetro de
   Nº de pedido») y Cantidades, de 2 + 5 + 3 + 2 */
.ms-ot-costes > :is(.ms-campo-num, .ms-campo-unidades) { grid-column: span 2; }
.ms-ot-costes > .ms-campo-cliente { grid-column: span 5; }
.ms-ot-costes > .ms-ot-dato { grid-column: span 3; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-height: 52px; padding: 6px 12px; box-sizing: border-box; background: var(--light); border-left: 3px solid var(--line); }
.ms-ot-costes > .ms-ot-dato > span { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.ms-ot-costes > .ms-ot-dato > :is(b, output) { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.3; }
.ms-ot-costes > .ms-ot-dato > b small { color: var(--muted); font-size: 11px; font-weight: 600; }
.ms-ot-costes > .ms-ot-resultado { grid-column: span 9; background: var(--ok-fondo); border-left-color: var(--ok); }
.ms-ot-costes > .ms-ot-resultado > output { color: var(--ok); }
.ms-ficha-ot .ms-ot-nota { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.ms-casillas-puestos { color: var(--ink); font-size: 13px; }
.ms-casillas-puestos > b:first-child { color: var(--suave); font-size: 12px; font-weight: 600; margin-right: 4px; }
/* La zona de soltar archivos: de línea discontinua; al arrastrar encima se aclara (el script le pone el color de antes) */
.ms-zona-adj { background: var(--light) !important; border: 1px dashed var(--campo-linea) !important; border-radius: 0 !important; }
.ms-zona-adj[style*="227, 242, 253"] { background: var(--hover) !important; border-color: var(--ink) !important; }
.ms-zona-adj label { color: var(--suave); font-size: 12px; }
.ms-adj-avisos { color: var(--error) !important; }
.ms-adj-pulsa { color: var(--suave) !important; }
.ms-adj-lista button { min-height: 0; margin-left: 6px; background: transparent !important; color: var(--error) !important;
  border: 1px solid var(--error-linea) !important; border-radius: 0 !important; }

/* Lista de OT: cada fila entera del color de su ESTADO (M, 28/10: «OT ya terminadas que aparezcan toda la linea de color
   azul [...] OT en proceso que apareciesen en verde, y canceladas en rojo»), en un tono muy claro con la letra oscura y la
   raya de la izquierda (--raya-ot) algo más fuerte. Esa noche, M: «no quiero que los verdes y los azules terminada o
   abierta sean iguales que los verdes y azules de prioridades, estos primeros deben de ser muy claritos y diferentes, los
   de prioridades tienen que resaltar sobre los de terminado/abierto», y luego: «haz que las terminadas tengan ese color
   verde clarito y las abiertas un color amarillo clarito». La prioridad, en su columna, en una casilla de su color fuerte
   (.ms-prio). Desde el 28/10, cada OT en una línea (M: «quiero que las filas de las OT sean más finas, que ocupen menos
   espacio [...] reconfigura toda la página de OT») */
#generar_ot tr.ot-abierta, #generar_ot tr.ot-abierta > td { background-color: #fcf3c8 !important; color: var(--ink) !important; --raya-ot: #dfae2e; }
#generar_ot tr.ot-terminada, #generar_ot tr.ot-terminada > td { background-color: #e5f4e8 !important; color: var(--ink) !important; --raya-ot: #6cc07a; }
#generar_ot tr.ot-cancelada, #generar_ot tr.ot-cancelada > td { background-color: #fce6e6 !important; color: var(--ink) !important; --raya-ot: #e47c7c; }
/* «una cuadricula del color de la prioridad con el texto dentro» (M, 28/10), con los colores de la prioridad de la ficha
   de la OT, fuertes para que resalten sobre el tono claro de la fila */
#generar_ot .ms-prio {
  display: inline-block; min-width: 58px; box-sizing: border-box; padding: 3px 8px; border: 0;
  color: #fff; font-size: 12px; font-weight: 800; line-height: 1.3; text-align: center; vertical-align: middle;
  box-shadow: 0 1px 2px #00000040;
}
#generar_ot .ms-prio[data-prio="ALTA"] { background: #c62828; }
#generar_ot .ms-prio[data-prio="MEDIA"] { background: #1565c0; }
#generar_ot .ms-prio[data-prio="BAJA"] { background: #2e7d32; }
.ms-ots-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin-bottom: 14px; }
.ms-ots-cabeza h3 { margin: 0; }
.ms-aviso-sin-ot { color: var(--aviso); font-size: 12px; font-weight: 700; }
.ms-aviso-sin-ot:hover { color: var(--naranja); }
/* Los avisos de una sola vez (M, 28/10): las OT antiguas, a terminadas, y las que su módulo ya terminó y siguen pendientes */
:is(.ms-limpieza-ot, .ms-aviso-hechas) { margin: 0 0 16px; padding: 12px 14px; background: var(--aviso-fondo); border: 1px solid var(--aviso-linea); color: var(--ink); }
:is(.ms-limpieza-ot, .ms-aviso-hechas) p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
:is(.ms-limpieza-ot, .ms-aviso-hechas) form { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.ms-limpieza-ot, .ms-aviso-hechas) button { min-height: 38px; padding: 0 16px; font-size: 13px; }
/* Gestión de clientes: los clientes nuevos (M, 28/10) y las facturas (M, 29/10) de FactuSOL, solo el admin */
.ms-factusol .ms-factusol-texto { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--suave); }
.ms-factusol h4 { margin: 18px 0 8px; font-size: 13px; }
.ms-factusol table { margin-bottom: 6px; }
.ms-factusol tr.ms-fs-aviso > td { background: var(--aviso-fondo); }
.ms-factusol .ms-fs-nota { display: block; margin-top: 2px; font-size: 12px; color: var(--aviso); }
.ms-factusol p.ms-fs-nota { margin: 6px 0 0; }
.ms-factusol .ms-fs-botones { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ms-factusol .ms-fs-descarga { margin: 16px 0 0; }
.ms-factusol .ms-fs-descarga button { min-height: 42px; padding: 0 18px; }
.ms-factusol .ms-fs-como { margin-top: 12px; font-size: 13px; line-height: 1.5; }
.ms-factusol .ms-fs-como summary { cursor: pointer; font-weight: 600; }
.ms-factusol .ms-fs-como ol { margin: 8px 0; padding-left: 20px; }
.ms-factusol .ms-fs-como p { margin: 0; color: var(--suave); }
.ms-factusol .ms-fs-facturas { margin: 12px 0 0; font-size: 13px; line-height: 1.5; }
/* El buscador, grande y siempre a la vista; debajo, los filtros: cada uno dice cuántas OT salen con él */
#filtro_ot .ms-buscar { display: flex; gap: 8px; max-width: 820px; }
#filtro_ot .ms-buscar input[type="search"] {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 14px 0 42px; font-size: 14px;
  background: var(--campo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%2362675d' stroke-width='1.6'/%3E%3Cpath d='m10.5 10.5 4 4' stroke='%2362675d' stroke-width='1.6'/%3E%3C/svg%3E") 15px center no-repeat;
}
#filtro_ot .ms-buscar button { min-height: 46px; padding: 0 22px; font-size: 13px; }
#filtro_ot .ms-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 26px; margin-top: 14px; }
#filtro_ot :is(.ms-filtro, .ms-filtro-campo) { display: flex; flex-direction: column; gap: 5px; margin: 0; }
#filtro_ot :is(.ms-filtro-nombre, .ms-filtro-campo > span) { color: var(--suave); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
#filtro_ot .ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#filtro_ot .ms-filtro-campo :is(select, input) { min-height: 38px; min-width: 150px; padding: 0 10px; font-size: 13px; }
#filtro_ot .ms-filtro-fecha input { min-width: 0; width: 150px; }
#filtro_ot .ms-chip { position: relative; display: inline-flex; cursor: pointer; }
#filtro_ot .ms-chip input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
#filtro_ot .ms-chip > span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; box-sizing: border-box;
  background: var(--carta); color: var(--ink); border: 1px solid var(--campo-linea); font-size: 13px; font-weight: 600; white-space: nowrap;
}
#filtro_ot .ms-chip b { min-width: 20px; padding: 1px 5px; box-sizing: border-box; background: var(--hover); color: var(--suave); font-size: 11px; text-align: center; }
#filtro_ot .ms-chip[data-prio] > span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
#filtro_ot .ms-chip[data-prio="ALTA"] > span::before { background: #c62828; }
#filtro_ot .ms-chip[data-prio="MEDIA"] > span::before { background: #1565c0; }
#filtro_ot .ms-chip[data-prio="BAJA"] > span::before { background: #2e7d32; }
#filtro_ot .ms-chip:hover > span { border-color: var(--ink); }
#filtro_ot .ms-chip:has(b[data-n="0"]) input:not(:checked) + span { color: var(--muted); }
#filtro_ot .ms-chip input:checked + span { background: var(--primario); color: #fff; border-color: var(--primario); }
#filtro_ot .ms-chip[data-prio="ALTA"] input:checked + span { background: var(--b-rojo); border-color: var(--b-rojo); }
#filtro_ot .ms-chip[data-prio="MEDIA"] input:checked + span { background: var(--b-azul); border-color: var(--b-azul); }
#filtro_ot .ms-chip[data-prio="BAJA"] input:checked + span { background: var(--b-verde); border-color: var(--b-verde); }
#filtro_ot .ms-chip input:checked + span::before { background: #fff; }
#filtro_ot .ms-chip input:checked + span b { background: #ffffff33; color: #fff; }
#filtro_ot .ms-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Cuántas salen, «Quitar filtros» y las páginas, encima de la lista */
.ms-ots-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin: 18px 0 8px; }
.ms-ots-total { margin: 0; color: var(--suave); font-size: 13px; }
.ms-ots-total b { color: var(--ink); font-size: 15px; }
.ms-ots-total a { color: var(--ink); font-weight: 600; }
.ms-ots-total a:hover { color: var(--naranja); }
.ms-ots .paginacion { margin: 0; }
.ms-ots .ms-paginacion-abajo { margin-top: 14px; }
#ms-ot-resultados { transition: opacity .15s; }
#ms-ot-resultados.ms-cargando { opacity: .5; }
.ms-ots-vacia { margin: 22px 0 8px; color: var(--suave); }
.ms-ots-vacia a { color: var(--ink); font-weight: 600; }
/* La tabla: columnas fijas (las marcan sus títulos), sus títulos quietos arriba al bajar, y los que ordenan con su flecha */
#generar_ot .ms-lista-ot { table-layout: fixed; width: 100%; margin: 0; border: 0; border-collapse: collapse; }
#generar_ot .ms-lista-ot > thead > tr > th {
  position: sticky; top: 0; z-index: 2; padding: 9px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; border-bottom: 1px solid var(--line); background: var(--cabeza-tabla); font-size: 11px; font-weight: 700;
}
#generar_ot .ms-lista-ot > thead a { color: inherit; text-decoration: none; }
#generar_ot .ms-lista-ot > thead a:hover { color: var(--ink); text-decoration: underline; }
#generar_ot .ms-lista-ot > thead th[aria-sort="ascending"], #generar_ot .ms-lista-ot > thead th[aria-sort="descending"] { color: var(--ink); }
#generar_ot .ms-flecha { margin-left: 4px; font-size: 9px; }
#generar_ot .ms-lista-ot th.ms-c-num { width: 82px; }
#generar_ot .ms-lista-ot th.ms-c-cliente { width: 13%; }
#generar_ot .ms-lista-ot th.ms-c-estado { width: 118px; }   /* «✅ Terminada», con su icono (M, 28/10) */
#generar_ot .ms-lista-ot th.ms-c-modulo { width: 140px; }
#generar_ot .ms-lista-ot th.ms-c-prioridad { width: 74px; }
#generar_ot .ms-lista-ot th.ms-c-traz { width: 8%; }
#generar_ot .ms-lista-ot th.ms-c-emision { width: 86px; }
#generar_ot .ms-lista-ot th.ms-c-entrega { width: 98px; }
#generar_ot .ms-lista-ot th.ms-c-tiempo { width: 78px; }
#generar_ot .ms-lista-ot th.ms-c-coste { width: 96px; }   /* «12.345,67 €» (M, 29/10: material + tiempo) */
#generar_ot .ms-lista-ot th.ms-c-acciones { width: 160px; }
/* «Nº de pedido», otra vez en su columna detrás de «Cliente» (M, 2/11: «Recupera también la columna en las OT con los
   números de pedido que había antes»), donde cabe sin dejar la descripción sin sitio: desde 1800 px, con el cliente, la
   trazabilidad y el módulo un poco más justos; de 1401 a 1799 px (la pantalla de M, 1920 al 125 %, son 1536), en el
   sitio de «Trazabilidad», que sale al abrir la OT. Por debajo de 1400 no cabe: el pedido, como desde el 28/10, en
   pequeño debajo del cliente (y en el móvil, a su lado) */
#generar_ot .ms-lista-ot th.ms-c-pedido { width: 96px; }
@media (min-width: 1800px) {
  #generar_ot .ms-lista-ot th.ms-c-cliente { width: 11%; }
  #generar_ot .ms-lista-ot th.ms-c-traz { width: 6%; }
  #generar_ot .ms-lista-ot th.ms-c-modulo { width: 124px; }
}
@media (min-width: 1401px) {
  #generar_ot .ms-lista-ot .ms-c-cliente > .ms-pedido { display: none; }
}
@media (max-width: 1400px) {
  #generar_ot .ms-lista-ot th.ms-c-pedido, #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-pedido { display: none; }
}
/* en pantallas más estrechas, columnas más justas para que la descripción tenga sitio: por debajo de 1800 px, sin
   «Trazabilidad» (de 1401 a 1799, en su sitio el nº de pedido), y por debajo de 1100, tampoco «Coste»; las dos salen al
   abrir la OT, en su ficha y en su resumen de costes (en el móvil, cada OT en su caja, con todo). La prioridad se queda:
   el color de la fila es el estado */
@media (max-width: 1500px) {
  #generar_ot .ms-lista-ot th.ms-c-cliente { width: 12%; }
  #generar_ot .ms-lista-ot th.ms-c-pedido { width: 88px; }
  #generar_ot .ms-lista-ot th.ms-c-estado { width: 114px; }
  #generar_ot .ms-lista-ot th.ms-c-modulo { width: 124px; }
  #generar_ot .ms-lista-ot th.ms-c-emision { width: 80px; }
  #generar_ot .ms-lista-ot th.ms-c-entrega { width: 88px; }
  #generar_ot .ms-lista-ot th.ms-c-tiempo { width: 70px; }
  #generar_ot .ms-lista-ot th.ms-c-coste { width: 88px; }
}
@media (min-width: 701px) and (max-width: 1799px) {
  #generar_ot .ms-lista-ot .ms-c-traz { display: none; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  #generar_ot .ms-lista-ot .ms-c-coste { display: none; }
  #generar_ot .ms-lista-ot th.ms-c-estado { width: 110px; }
  #generar_ot .ms-lista-ot th.ms-c-modulo { width: 108px; }
}
/* Cada OT, una línea: lo de debajo (pedido, procesos, hora, aviso de entrega, «hasta ahora»), en pequeño; lo que no
   cabe, con «…» (entero al pasar el ratón o al desplegar la descripción) */
#generar_ot .ms-lista-ot > tbody > tr.ms-ot > td {
  padding: 6px 8px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
  border: 0 !important; border-bottom: 2px solid var(--carta) !important; font-size: 13px; font-weight: 600; line-height: 1.35;
}
#generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-num { box-shadow: inset 4px 0 0 var(--raya-ot, #00000040); padding-left: 12px !important; font-weight: 700; }
/* Cada OT se abre al pulsarla (M, 28/10: «las OT son clicables, que cuando se cliquen se despliega la información»): la
   flecha delante del número, y en el ordenador, la mano y un poco más clara al pasar el ratón, y abierta, más oscura */
#generar_ot .ms-lista-ot > tbody > tr.ms-ot { cursor: pointer; }
@media (min-width: 701px) {
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot.ms-abierta > td { background-image: linear-gradient(#00000017, #00000017) !important; }
}
@media (hover: hover) and (min-width: 701px) {
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot:not(.ms-abierta):hover > td { background-image: linear-gradient(#0000000c, #0000000c) !important; }
}
#generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-num::before {
  content: ""; display: inline-block; margin-right: 7px; vertical-align: 1px; transition: transform .15s;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
#generar_ot .ms-lista-ot > tbody > tr.ms-ot.ms-abierta > td.ms-c-num::before { transform: rotate(90deg); }
#generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-acciones { overflow: visible; }
#generar_ot .ms-lista-ot :is(.ms-pedido, .ms-procs, .ms-hora-emision, .ms-hasta-ahora) {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; color: var(--suave);
}
#generar_ot :is(.ms-cliente, .ms-pedido-col) { display: block; overflow: hidden; text-overflow: ellipsis; }
#generar_ot .ms-desc { display: flex; align-items: center; gap: 7px; min-width: 0; }
#generar_ot .ms-desc-resumen { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#generar_ot .ms-desc-mas { flex: 0 0 auto; padding: 0 5px; border: 1px solid #0000004d; font-size: 10px; font-weight: 700; line-height: 15px; }
/* En «Módulo», el módulo (M, 28/10: «una pequeña columna para poner en que módulo esta cada ot») y debajo, si está
   pendiente, si allí va en curso o a medias */
#generar_ot .ms-c-modulo .ms-ot-modulo { display: block; overflow: hidden; text-overflow: ellipsis; }
#generar_ot .ms-c-modulo .ms-estado-taller {
  display: block; width: max-content; max-width: 100%; margin-top: 2px; padding: 0 6px !important; box-sizing: border-box;
  overflow: hidden; text-overflow: ellipsis; font-size: 10.5px !important; line-height: 16px;
}
#generar_ot .ms-entrega-aviso { display: block; width: max-content; margin-top: 2px; padding: 0 5px; background: #fff; color: var(--ink); border: 1px solid var(--line); font-size: 10.5px; font-weight: 700; line-height: 15px; }
#generar_ot .ms-entrega-aviso[data-aviso="retrasada"] { color: var(--error); }
#generar_ot .ms-entrega-aviso[data-aviso="hoy"] { color: var(--aviso); }
/* Las acciones: editar, los procesos (con cuántos tiene), eliminar y «⋯» con terminar, cancelar o volver a pendiente
   e imprimir; en pantallas anchas (la de M, 1920 px), con su nombre */
#generar_ot .ms-acciones { display: flex; align-items: center; gap: 4px; }
#generar_ot .ms-accion, #generar_ot .ms-accion.toggle-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
  min-width: 32px; height: 30px; min-height: 0; margin: 0; padding: 0 7px; box-sizing: border-box; list-style: none; cursor: pointer;
  background: var(--carta) !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
  font: 600 12px/1 var(--ms-font); text-decoration: none; white-space: nowrap;
}
#generar_ot .ms-accion:hover { background: var(--hover) !important; border-color: var(--ink) !important; }
#generar_ot .ms-accion > span { display: none; }
#generar_ot .ms-accion .ms-num {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; background: var(--ink); color: #fff; font-size: 10px; line-height: 16px; text-align: center;
}
#generar_ot .ms-accion.toggle-btn[aria-expanded="true"], #generar_ot .ms-mas-acciones[open] > .ms-accion {
  background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important;
}
#generar_ot .ms-accion.toggle-btn[aria-expanded="true"] .ms-num { background: #fff; color: var(--ink); }
#generar_ot .ms-mas-acciones { position: relative; }
#generar_ot .ms-mas-acciones > summary { font-size: 17px; letter-spacing: 1px; }
#generar_ot .ms-mas-acciones > summary::-webkit-details-marker { display: none; }
#generar_ot .ms-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; display: flex; flex-direction: column; min-width: 190px;
  padding: 6px 0; background: var(--carta); border: 1px solid var(--line); box-shadow: 0 14px 34px #0000002e;
}
#generar_ot .ms-menu form { margin: 0; }
#generar_ot .ms-menu button {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 38px; margin: 0; padding: 0 16px;
  background: none !important; color: var(--ink) !important; border: 0 !important; font: 600 13px var(--ms-font); text-align: left;
}
#generar_ot .ms-menu button:hover { background: var(--hover) !important; }
#generar_ot .ms-menu a.ms-menu-enlace {
  display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; box-sizing: border-box;
  color: var(--ink); font: 600 13px var(--ms-font); text-decoration: none; white-space: nowrap;
}
#generar_ot .ms-menu a.ms-menu-enlace:hover { background: var(--hover); }
/* «🗑️ Eliminar», a la vista en la fila desde el 29/10 (M: «cambia el botón de Imprimir por el de Eliminar»): en rojo */
#generar_ot .ms-accion-form { display: inline-flex; flex: 0 0 auto; margin: 0; }
#generar_ot .ms-accion.ms-accion-borrar { color: var(--error) !important; }
#generar_ot .ms-accion.ms-accion-borrar:hover { background: var(--error-fondo) !important; border-color: var(--error) !important; }
@media (min-width: 1800px) {
  #generar_ot .ms-lista-ot th.ms-c-acciones { width: 356px; }
  #generar_ot .ms-accion { padding: 0 9px; }
  #generar_ot .ms-accion > span { display: inline; }
  #generar_ot .ms-accion .ms-num { position: static; margin-left: 2px; border-radius: 0; }
  #generar_ot .ms-accion.toggle-btn { min-width: 118px; justify-content: flex-start; }   /* con o sin su número, igual de ancho */
}
/* La OT abierta, debajo de su fila: su ficha (la descripción entera y sus datos) y sus procesos y costes */
#generar_ot .ms-lista-ot > tbody > tr.ms-ot-detalle:not(.ms-abierta) { display: none; }
#generar_ot .ms-lista-ot > tbody > tr.ms-ot-detalle > td {
  padding: 0 2px 16px 18px; border: 0; background: var(--carta); white-space: normal; box-shadow: inset 4px 0 0 #8c8c8c;
}
/* con la raya de la izquierda del color de su fila, para que se vea de qué OT es */
#generar_ot .ms-lista-ot > tbody > tr.ot-abierta + tr.ms-ot-detalle > td { box-shadow: inset 4px 0 0 #dfae2e; }
#generar_ot .ms-lista-ot > tbody > tr.ot-terminada + tr.ms-ot-detalle > td { box-shadow: inset 4px 0 0 #6cc07a; }
#generar_ot .ms-lista-ot > tbody > tr.ot-cancelada + tr.ms-ot-detalle > td { box-shadow: inset 4px 0 0 #e47c7c; }
#generar_ot .ms-lista-ot .procesos-ot { margin-top: 0; padding-top: 10px; }
#generar_ot .ms-ot-ficha {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 36%); gap: 14px 32px; margin-bottom: 16px;
  padding: 14px 16px; background: var(--light); border: 1px solid var(--line);
}
#generar_ot .ms-ot-ficha h4 { margin: 0 0 6px; color: var(--suave); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
#generar_ot .ms-ot-ficha .ms-desc-entera { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 13px; font-weight: 500; line-height: 1.55; }
#generar_ot .ms-ot-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: start; align-items: baseline; gap: 5px 16px; margin: 0; font-size: 13px; line-height: 1.4; }
#generar_ot .ms-ot-datos dt { color: var(--suave); font-weight: 500; }
#generar_ot .ms-ot-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
#generar_ot .ms-ot-datos .ms-estado-taller { display: inline-block; margin-left: 8px; }
#generar_ot .ms-ot-datos .ms-entrega-aviso { display: inline-block; margin: 0 0 0 6px; border: 1px solid var(--line); }
/* El estado en el taller, con los colores del resto */
.ms-estado-taller {
  padding: 2px 8px !important; border: 1px solid var(--campo-linea) !important; border-radius: 0 !important;
  background: var(--carta) !important; color: var(--ink) !important; font-size: 11px !important; font-weight: 600 !important;
}
.ms-estado-taller[data-estado="HECHA"] { background: var(--ok-fondo) !important; color: var(--ok) !important; border-color: var(--ok-linea) !important; }
/* «▶ En curso», verde clarito con letras verdes (M, 31/10); «⏸ Pausado», gris, mientras todos los que la llevan la
   tienen pausada (M, 31/10: «debería de aparecer Pausado») */
.ms-estado-taller[data-estado="EN CURSO"] { background: #e8f5e9 !important; color: #2e7d32 !important; border-color: #a5d6a7 !important; }
.ms-estado-taller[data-estado="PAUSADO"] { background: #eceff1 !important; color: #37474f !important; border-color: #90a4ae !important; }
.ms-estado-taller[data-estado="A MEDIAS"] { background: var(--aviso-fondo) !important; color: var(--aviso) !important; border-color: var(--aviso-linea) !important; }
/* En la ficha, la casilla para quitarlo dentro del propio recuadro (M, 31/10 11:40: «que el propio A medias (el
   bocadillo/contenedor) tenga una casilla para quitarlo»): marcada, el texto tachado hasta guardar */
.ms-estado-taller.ms-estado-quitable { display: inline-flex !important; align-items: center; gap: 8px; cursor: pointer; }
.ms-estado-quitable input { flex: none; width: 15px; height: 15px; margin: 0; color: inherit; accent-color: currentColor; cursor: pointer; }
.ms-estado-quitable:has(input:checked) > span { text-decoration: line-through; opacity: .55; }
.tab .filter-grid { flex-wrap: wrap; justify-content: flex-start; gap: 10px; overflow: visible; }
.tab .filter-grid input, .tab .filter-grid select { min-height: 42px; }
.tab .filter-actions { justify-content: flex-start; gap: 18px; }
.tab .filter-actions button[type="submit"], .tab form.filter-grid button[type="submit"] {
  min-height: 42px; padding: 0 20px !important; background: var(--primario) !important; color: var(--primario-letra) !important; border-color: var(--primario) !important;
}
.tab .filter-actions button[type="submit"]:hover, .tab form.filter-grid button[type="submit"]:hover { background: var(--primario-hover) !important; border-color: var(--primario-hover) !important; }
.tab form.filter-grid a.btn-white { min-height: 42px; }
.tab .filter-actions > a { padding: 0 !important; color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: underline !important; }
.tab .filter-actions > a:hover { color: var(--naranja); }
.paginacion { justify-content: flex-start; gap: 16px; margin: 14px 0; color: var(--suave); font-size: 12px; }
.paginacion a { padding: 6px 12px; background: transparent; color: var(--ink); border: 1px solid var(--campo-linea); font-weight: 600; }
.paginacion a:hover { background: var(--hover); border-color: var(--ink); }
.paginacion span { color: var(--ink); font-weight: 600; }
/* Procesos y costes de una OT; «Añadir tiempo manualmente», en una fila (antes, cada campo a todo el ancho) */
.procesos-ot { padding: 16px 0 6px; }
.procesos-ot .form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.procesos-ot table { border: 0; }
.procesos-ot input { min-height: 34px; padding: 0 8px; font-size: 12px; }
/* El tiempo de un proceso, sin hora de inicio ni de fin (M, 3/11: «que haya que colocar simplemente los minutos o
   horas, de una forma rapida y cómoda»): al añadirlo, sus horas, sus minutos o las dos cosas, con el total al lado; en
   una fila terminada, sus minutos en una casilla, y su inicio y su fin solo para leer */
.procesos-ot input.ms-tiempo-caja { width: 72px; }
.procesos-ot .ms-min-calc output {
  display: flex; align-items: center; min-width: 72px; height: 40px; color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.procesos-ot input.ms-min-fila { width: 72px; font-weight: 600; }
.procesos-ot input.ms-tiempo-mal { border-color: var(--error) !important; box-shadow: 0 0 0 1px var(--error); }
.procesos-ot output.ms-min-mal { color: var(--error); font-size: 12px; font-weight: 600; }
.procesos-ot td.ms-proc-dia { white-space: nowrap; }
.procesos-ot button[value="eliminar"], .tab td button[title="Eliminar proceso"] {
  background: transparent; color: var(--error); border-color: var(--error-linea);
}
.procesos-ot button[value="eliminar"]:hover { background: var(--error-fondo); border-color: var(--error); }
.procesos-ot tr[style*="#f0f0f0"] { background: var(--light) !important; }
.procesos-ot div[style*="#e3f2fd"], .procesos-ot div[style*="#f9f9f9"] {
  background: var(--light) !important; border: 1px solid var(--line) !important; border-radius: 0 !important;
}
.procesos-ot h4, .procesos-ot h5 { font-size: 15px; letter-spacing: -.02em; }
.procesos-ot td[style*="padding"] { border-top-color: var(--line); }
.procesos-ot tr[style*="#e8f5e9"] { background: var(--ok-fondo) !important; border-top: 1px solid var(--ok-linea) !important; }
.procesos-ot td[style*="#2e7d32"] { color: var(--ok) !important; }
.procesos-ot span[style*="#1976d2"] { color: var(--info) !important; }
/* Procesos sin OT y la tarjeta «Taller» de una OT */
.card[style*="#fff3cd"] { background: var(--aviso-fondo) !important; border: 1px solid var(--aviso-linea) !important; }
.card[style*="#fff3cd"] h3 { color: var(--aviso); }
.card[style*="#fff3cd"] p[style*="#856404"] { color: var(--aviso) !important; }
.card[style*="#fff3cd"] button[style*="#28a745"] { background: var(--b-verde) !important; color: #fff !important; border-color: var(--b-verde) !important; }
.card .card { background: var(--light); }
.card[style*="#1565c0"] { border: 1px solid var(--line) !important; box-shadow: inset 2px 0 0 var(--info); }
.card b[style*="#c62828"] { color: var(--error) !important; }
/* Mensajes del taller */
#mensajes .message-box { width: auto; margin: 0; gap: 14px; }
.message { background: var(--carta); color: var(--ink); border: 1px solid var(--line); border-left: 2px solid transparent; }
.message.unread { border-left-color: var(--accent); }
.message.read { border-left-color: var(--line); }
.message .fecha { color: var(--muted); }
.message-checkbox { border: 1px solid var(--campo-linea); background: var(--campo); color: var(--ok); }
.message-checkbox.checked { background: var(--ok-fondo); border-color: var(--ok-linea); }
.message .actions button, .message .actions button[style*="#f44336"] {
  min-height: 32px; padding: 0 10px; background: transparent !important; color: var(--error) !important;
  border: 1px solid var(--error-linea) !important;
}
.message .actions button:hover { background: var(--error-fondo) !important; border-color: var(--error) !important; }
.field { border-color: var(--line); }

/* ---------- En el móvil: las tablas anchas se desplazan dentro de su caja, no la página entera ---------- */

@media (max-width: 700px) {
  .card, .tab .message-box { overflow-x: auto; }
  .card { padding: 18px 16px; }
  .ot-form .half, .priority-block { flex-wrap: wrap; }
  body > table { display: block; overflow-x: auto; width: auto; margin: 0 var(--shell) 40px; }
  .ms-topbar { padding-top: 28px; padding-bottom: 20px; }
  .container .filter-grid input, .container .filter-grid select { min-width: 0; flex: 1 1 140px; }
  form.filtros input[type="text"] { min-width: 0; }
}

/* ---------- En el móvil, más compacto (M, 27/10: «que se aproveche mejor el espacio de la pantalla») ----------
   Solo por debajo de 700 px y solo en las pantallas que M veía mal; Empleados, Papelera y Registro, como estaban.
   Lo marcado con data-plegable se pliega bajo un botón con su título (lo pone el script de la cabecera); en el
   ordenador ese botón no existe a la vista. */

.ms-plegar { display: none; }
@media (max-width: 700px) {
  /* Lo plegable: cerrado, solo su título; antes de que el script ponga el botón, el título ya está en su sitio */
  [data-plegable]:not(.ms-plegable-listo)::before {
    content: attr(data-plegable); display: block; flex-basis: 100%; font-size: 15px; font-weight: 600; letter-spacing: -.02em;
  }
  [data-plegable] > :is(h2, h3, h4):first-child, [data-plegable] > .ms-plegar + :is(h2, h3, h4) { display: none; }
  [data-plegable]:not(.ms-abierto) > :not(.ms-plegar) { display: none !important; }
  .card[data-plegable]:not(.ms-abierto) { padding-top: 14px; padding-bottom: 14px; }
  [data-plegable] > button.ms-plegar, [data-plegable] > button.ms-plegar:hover, [data-plegable] > button.ms-plegar:active {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-basis: 100%; width: 100%;
    min-height: 0 !important; margin: 0; padding: 0 !important; background: none; border: 0; color: var(--ink);
    font: 600 15px/1.3 var(--ms-font); letter-spacing: -.02em; text-align: left;
  }
  .ms-plegar::after {
    content: ''; flex: 0 0 12px; height: 12px; transition: transform .2s;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%231b1d1a' stroke-width='1.6'/%3E%3C/svg%3E") center no-repeat;
  }
  [data-plegable].ms-abierto > button.ms-plegar { margin-bottom: 14px; }
  .ms-abierto > .ms-plegar::after { transform: rotate(180deg); }
  /* una nota dentro de una caja: su botón, pequeño y gris */
  .ri-nota > button.ms-plegar, .ri-nota > button.ms-plegar:hover {
    justify-content: flex-start; color: var(--suave); font-size: 12px; text-decoration: underline; text-underline-offset: 4px;
  }
  .ri-nota.ms-abierto > .ms-plegar { margin-bottom: 6px; }

  /* Control horario */
  .admin-wrap .card { margin-bottom: 12px; }
  .alertas-fichaje-fuera, .presentes { margin-bottom: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
  .alertas-fichaje-fuera ul { margin: 4px 0 0 18px !important; }
  .admin-wrap > p:has(> .btn-link) { margin: 0 0 6px !important; }
  .admin-wrap .filtros label { flex: 1 1 130px; }
  .admin-wrap .filtros label:has(select) { flex-basis: 100%; }
  .card:has(> .resumen-grid) { padding: 14px 12px; }
  .card:has(> .resumen-grid) h3 { margin-bottom: 8px; font-size: 17px; }
  .ri-nota { margin-bottom: 10px; }
  /* El balance, de dos en dos: el nombre, lo que falta o sobra en grande y debajo las tres cifras en pequeño; la
     línea del calendario, que es igual para casi todos, solo en el ordenador */
  .resumen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .resumen-item { display: flex; flex-direction: column; padding: 9px 10px; font-size: 12px; line-height: 1.35; }
  .resumen-item br, .resumen-item > small { display: none; }
  .resumen-item > strong { font-size: 13px; line-height: 1.25; }
  .resumen-item > .ri-balance { order: 1; margin: 3px 0 4px; font-size: 14px; }
  .resumen-item > .ri-dato { order: 2; color: var(--suave); }
  .admin-wrap .form-inline { gap: 8px; }
  .admin-wrap .form-inline label { flex: 1 1 130px; }
  .admin-wrap .form-inline label:has(textarea) { flex-basis: 100%; }
  .admin-wrap .form-inline textarea { min-width: 0 !important; width: 100%; box-sizing: border-box; }
  .admin-wrap .form-inline input[type="number"] { width: 100% !important; }
  .admin-wrap .card:has(> table) table { font-size: 12px; }
  .admin-wrap .card:has(> table) th, .admin-wrap .card:has(> table) td { padding: 6px 5px; }

  /* Fichajes por día: cada fila de la tabla, una caja: arriba la fecha, el nombre, dónde fichó, el total y ✕; debajo,
     cada tramo en una línea (fecha, entrada – salida, ✕) con su duración debajo */
  #fj-card { padding: 12px 10px; overflow: visible; }
  #fj-card .fj-barra:first-of-type { position: sticky; top: 0; z-index: 5; gap: 8px; padding: 8px 0; }
  #fj-card .fj-barra h3 { flex-basis: 100%; margin: 0; font-size: 17px; }
  #fj-card .fj-barra { gap: 6px; }
  #fj-card .fj-barra .btn-edit, #fj-card .fj-guardar { min-height: 32px; padding: 0 8px; font-size: 11px; }
  #fj-card .tabla-scroll-fj { overflow: visible; }
  #fj-tabla, #fj-tabla > tbody { display: block; width: 100%; margin: 6px 0 0; }
  #fj-tabla > thead { display: none; }
  #fj-tabla tr.fj-fila {
    display: grid; grid-template-columns: auto minmax(min-content, 1fr) auto auto auto; align-items: center; gap: 6px 8px;
    padding: 10px 8px; border-top: 1px solid var(--line);
  }
  #fj-tabla tr.fj-fila > td { display: block; min-width: 0; padding: 0; border: 0; background: none; }
  #fj-tabla tr.fj-fila > td:nth-child(1) { grid-area: 1 / 1; font-size: 12px; font-weight: 600; white-space: nowrap; }
  /* el nombre se parte solo entre palabras, nunca letra a letra (M, 27/10: «los nombres así en vertical no los pongas»):
     su columna nunca es más estrecha que su palabra más larga */
  #fj-tabla tr.fj-fila > td:nth-child(2) { grid-area: 1 / 2; font-size: 13px; font-weight: 600; line-height: 1.25; }
  #fj-tabla tr.fj-fila > td:nth-child(3) { grid-area: 1 / 3; }
  #fj-tabla tr.fj-fila > td:nth-child(5) { grid-area: 1 / 4; max-width: 76px; font-size: 12px; line-height: 1.2; text-align: right; white-space: normal; }
  #fj-tabla tr.fj-fila > td:nth-child(6) { grid-area: 1 / 5; }
  #fj-tabla tr.fj-fila > td:nth-child(4) { grid-area: 2 / 1 / 3 / -1; }
  #fj-tabla tr.fj-fila:has(.badge-fuera) > td:nth-child(3) { grid-area: 2 / 1 / 3 / -1; font-size: 11px; }
  #fj-tabla tr.fj-fila:has(.badge-fuera) > td:nth-child(4) { grid-area: 3 / 1 / 4 / -1; }
  #fj-tabla tr.fj-fila .badge-taller, #fj-tabla tr.fj-fila .badge-fuera { margin: 0; padding: 1px 6px; font-size: 11px; }
  /* arriba no se repite «✎ Añadido por …», que sale justo debajo, en su tramo; en cada tramo tampoco el ✎ de la hora
     cambiada, que ya va en amarillo: así fecha, entrada – salida y ✕ caben en una línea */
  #fj-tabla tr.fj-fila:not(.fj-fila-nueva) > td:nth-child(3) > .badge-editado, #fj-tabla .fj-tramo > .badge-editado { display: none; }
  /* dónde se fichó ya sale debajo de cada tramo (📍): arriba solo se queda FUERA TALLER, y así el sitio no se parte en tres
     líneas junto al nombre */
  #fj-tabla tr.fj-fila:not(.fj-fila-nueva) > td:nth-child(3) > .badge-taller { display: none; }
  #fj-tabla tr.fj-fila-nueva { background: var(--ok-fondo); }
  #fj-tabla tr.fj-fila-quitada { background: var(--error-fondo); }
  #fj-tabla tr.fj-fila-nueva > td:nth-child(1), #fj-tabla tr.fj-fila-nueva > td:nth-child(2) { white-space: normal; }
  /* en la fila nueva («＋ Añadir empleado») el desplegable del empleado ocupa también el hueco de dónde fichó, para que
     se lea el nombre; «✎ Añadido a mano» sobra: la fila ya va en verde y su tramo dice «Nuevo» */
  #fj-tabla tr.fj-fila-nueva > td:nth-child(2) { grid-column: 2 / 4; }
  #fj-tabla tr.fj-fila-nueva > td:nth-child(3) { display: none; }
  #fj-tabla .fj-fila-fecha, #fj-tabla .fj-fila-op { width: 100%; height: 34px; padding: 0 6px; font-size: 13px; box-sizing: border-box; }
  #fj-tabla .fj-tramo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; margin-bottom: 6px; padding-bottom: 6px; }
  #fj-tabla .fj-tramo input { height: 32px; padding: 0 5px; font-size: 13px; box-sizing: border-box; }
  #fj-tabla .fj-tramo .fj-f { width: 108px !important; }
  #fj-tabla .fj-tramo .fj-e, #fj-tabla .fj-tramo .fj-s { width: 72px; }
  #fj-tabla .fj-tramo input::-webkit-calendar-picker-indicator { display: none; }   /* el reloj de Chrome; al tocar se abre igual */
  #fj-tabla .fj-tramo .fj-quitar { order: 1; min-height: 32px; padding: 0 10px; }
  #fj-tabla .fj-tramo .fj-dur { order: 2; flex-basis: 100%; color: var(--suave); font-size: 12px; }
  #fj-tabla .fj-tramos > .fj-tramo:only-child .fj-dur { display: none; }   /* con un solo tramo es el total de arriba */
  #fj-tabla .fj-tramos > .fj-tramo:last-child { margin-bottom: 0; padding-bottom: 0; }
  #fj-tabla .fj-tramo .fj-error { order: 3; }
  #fj-tabla .fj-tramo .fj-donde, #fj-tabla .fj-tramo .fj-nota { order: 4; flex-basis: 100%; margin-top: 0; font-size: 11px; }
  #fj-tabla .fj-quitar-fila { min-height: 30px; padding: 0 9px; }
  #fj-tabla .fj-add-tramo, #fj-tabla .fj-horario { min-height: 30px; margin: 2px 6px 0 0; padding: 0 10px; font-size: 11px; }
  #fj-tabla tr.fj-vacia { display: block; padding: 10px 8px; }

  /* Control por semanas: la leyenda en pequeño y la lista de quién debe horas, más junta */
  .leyenda { gap: 6px; font-size: 11px; }
  .leyenda span { padding: 4px 8px; }
  .alertas-box { margin-bottom: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
  .alertas-box ul { margin: 4px 0 0 18px; }
  .tabla-control { font-size: 12px; }
  .tabla-control th, .tabla-control td { padding: 6px 5px; }
  .tabla-control th.op, .tabla-control td.op { min-width: 86px; }

  /* Taller: los dos formularios, plegados; cada proceso en curso o en pausa, una caja de su color con quién, cuánto
     lleva, en qué máquina y proceso, la OT, cuándo empezó y sus botones */
  body > .flex-top { gap: 10px; }
  .flex-top > #formulario, .flex-top > #mensajes { flex-basis: 100%; padding: 14px 16px; }
  .flex-top > .ms-abierto { padding-bottom: 18px; }
  body:has(> .flex-top > #formulario) > h3 { margin: 22px var(--shell) 10px; font-size: 22px; }
  body:has(> .flex-top > #formulario) > table { display: block; overflow: visible; margin: 0 var(--shell) 40px; border: 0; background: none; }
  body:has(> .flex-top > #formulario) > table > tbody { display: flex; flex-direction: column; gap: 8px; }
  body:has(> .flex-top > #formulario) > table tr:has(> th) { display: none; }
  body:has(> .flex-top > #formulario) > table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 2px 10px;
    padding: 10px 12px 10px 16px; border: 1px solid #0000001f; box-shadow: inset 4px 0 0 var(--raya-proceso, #00000040);
  }
  body:has(> .flex-top > #formulario) > table td { display: block; padding: 0; border: 0; font-size: 13px; text-align: left; }
  body:has(> .flex-top > #formulario) > table td:nth-child(1) { display: none; }   /* el ID */
  body:has(> .flex-top > #formulario) > table td:nth-child(2) { grid-area: 1 / 1; font-size: 15px; font-weight: 700; }
  body:has(> .flex-top > #formulario) > table td:nth-child(6) { grid-area: 1 / 2; font-size: 11px; font-weight: 600; }
  body:has(> .flex-top > #formulario) > table td:nth-child(7) { grid-area: 1 / 3; font-weight: 700; }
  body:has(> .flex-top > #formulario) > table td:nth-child(7)::after { content: " min"; font-weight: 600; }
  body:has(> .flex-top > #formulario) > table td:nth-child(4) { grid-area: 2 / 1; }
  body:has(> .flex-top > #formulario) > table td:nth-child(5) { grid-area: 2 / 2 / 3 / 4; text-align: right; }
  body:has(> .flex-top > #formulario) > table td:nth-child(3) { grid-area: 3 / 1; font-weight: 600; }
  body:has(> .flex-top > #formulario) > table td:nth-child(3):not(:empty)::before { content: "OT "; }
  body:has(> .flex-top > #formulario) > table td:nth-child(8) { grid-area: 3 / 2 / 4 / 4; text-align: right; font-size: 12px; }
  body:has(> .flex-top > #formulario) > table td:nth-child(9) { grid-area: 4 / 1 / 5 / -1; margin-top: 6px; }
  body:has(> .flex-top > #formulario) > table td:nth-child(9) button.pequeno { min-height: 32px; margin: 0 6px 0 0; padding: 0 12px; font-size: 12px; }
}

/* Oficina en el móvil: el formulario de la OT, el de compras y los filtros, plegados (abiertos al editar o con algún
   filtro puesto); cada OT, proceso, compra, cliente y proveedor de las listas, una caja con todo a la vista, en vez
   de una tabla que se sale por la derecha */
@media (max-width: 700px) {
  .ms-filtros { margin-bottom: 12px; }
  .ms-filtros > button.ms-plegar, .ms-filtros > button.ms-plegar:hover, .ms-filtros > button.ms-plegar:active {
    min-height: 40px !important; padding: 0 12px !important; border: 1px solid var(--campo-linea); font-size: 13px;
  }
  .ms-filtros.ms-abierto > .ms-plegar { margin-bottom: 10px; }
  .tab .ms-filtros .filter-grid { gap: 8px; margin-bottom: 8px !important; }
  .tab .ms-filtros .filter-grid > :is(input:not([type="hidden"]), select, button, a) {
    flex: 1 1 calc(50% - 4px); width: auto !important; min-width: 0 !important; min-height: 40px; box-sizing: border-box;
  }
  .tab .ms-filtros .filter-grid > input[name="descripcion"] { flex-basis: 100%; }
  .tab .ms-filtros .filter-actions { margin: 0 0 4px !important; }
  .tab .card > h4 { margin: 2px 0 4px; }
  .tab .paginacion { margin: 6px 0; }

  /* Formularios de OT y de compra, abiertos: de dos en dos */
  .ot-form { gap: 8px; }
  .ot-form > .labelled, .ot-form > input, .ot-form > select { flex: 1 1 calc(50% - 4px) !important; min-width: 0; }
  .ot-form > input[name="cliente"] { flex-basis: 100% !important; }
  .ot-form .half { flex: 1 1 100% !important; flex-wrap: nowrap !important; gap: 8px; }
  .ot-form .half > .labelled { flex: 1 1 0 !important; min-width: 0 !important; }
  .ot-form .labelled > :is(input, select) { width: 100% !important; min-width: 0; box-sizing: border-box; }
  .ot-form > input, .ot-form > select, .tab .labelled input, .tab .labelled select { min-height: 46px; }
  .tab .labelled input, .tab .labelled select { padding-top: 16px; }
  .ot-form > .labelled:has(textarea) { flex-basis: 100% !important; }
  .tab .labelled span { right: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .check-row, .priority-block { gap: 6px 12px; font-size: 12px; }
  /* La OT por partes: los campos de dos en dos (el cliente, la trazabilidad y las notas, a todo el ancho) */
  .ms-ficha-ot .ms-ot-parte { padding: 14px 0 16px; }
  .ms-ot-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; grid-auto-flow: dense; }
  .ms-ot-campos > .labelled { grid-column: span 1; }
  .ms-ot-campos > :is(.ms-campo-cliente, .ms-campo-pedido, .ms-campo-traz, .ms-campo-notas) { grid-column: 1 / -1; }
  .ms-ficha-ot .ms-ot-parte > :not(h4, datalist) + :not(datalist) { margin-top: 12px; }
  .ms-ficha-ot :is(.priority-block, .ms-estado-block) > span { flex-basis: 100%; }
  .ms-ficha-ot .priority-chips { gap: 6px; }
  .estado-opcion span { padding: 0 9px; font-size: 12px; }
  .ms-ot-acciones .del-btn { margin-left: 0; }
  .ms-ot-costes > .ms-ot-dato { grid-column: 1 / -1; }
  .ms-ot-dos { grid-template-columns: minmax(0, 1fr); }
  .ms-ficha-ot .ms-ot-parte > .ms-ot-dos { margin-top: 18px; }
  .ms-ot-lado { gap: 18px; }
  .ms-ficha-ot .ms-ot-lado :is(.check-row > strong, .priority-block > span, .ms-casillas-puestos > b:first-child) { min-width: 0; }
  .ms-ficha-ot .ms-ot-lado :is(.check-row, .ms-taller-modulos) { padding-left: 0; }
  .ms-ficha-ot .ms-ot-lado .check-row > strong { margin-left: 0; margin-right: 0; }
  .ms-ficha-ot .ms-ot-lado .check-row { column-gap: 18px; }
  .ms-ficha-ot .ms-ot-lado .ms-taller-modulos > .ms-casillas-puestos { flex-wrap: wrap; gap: 6px; margin-left: 0 !important;
    width: 100%; }
  .ms-ficha-ot .ms-ot-lado .ms-casillas-puestos > b:first-child { flex-basis: 100%; }
  .ms-desplegable { flex: 1 1 100%; }
  .ms-desplegable > summary { min-width: 0; min-height: 44px; }

  /* Lista de OT: el buscador a todo el ancho y debajo «Filtros», plegado; cada OT, una caja de su color: arriba el
     número, el cliente y la prioridad, la descripción en una línea, los datos en pequeño (estado y taller, entrega,
     emisión, tiempo, trazabilidad) y los botones con su nombre */
  .card.ms-ots { padding: 16px 12px; }
  #filtro_ot .ms-buscar { max-width: none; }
  /* 16 px, para que el iPhone no acerque la página al tocarlo; sin «Buscar»: busca al escribir y con la tecla del teclado */
  #filtro_ot .ms-buscar input[type="search"] { min-height: 44px; font-size: 16px; }
  #filtro_ot .ms-buscar button { display: none; }
  #filtro_ot .ms-filtros { gap: 12px 8px; margin: 10px 0 0; }
  #filtro_ot .ms-filtros.ms-abierto > button.ms-plegar { margin-bottom: 0; }
  #filtro_ot .ms-filtro { flex: 1 1 100%; }
  #filtro_ot .ms-chips { flex-wrap: nowrap; }
  #filtro_ot .ms-chip { flex: 1 1 0; }
  /* Estado tiene cuatro (Todas, Abiertas, Terminadas y Canceladas): dos y dos, que en una fila no caben */
  #filtro_ot .ms-filtro[aria-label="Estado"] .ms-chips { flex-wrap: wrap; }
  #filtro_ot .ms-filtro[aria-label="Estado"] .ms-chip { flex: 1 1 calc(50% - 3px); }
  #filtro_ot .ms-chip > span { justify-content: center; width: 100%; padding: 0 6px; gap: 5px; font-size: 12px; }
  #filtro_ot .ms-filtro-campo { flex: 1 1 calc(50% - 4px); min-width: 0; }
  #filtro_ot .ms-filtro-campo :is(select, input) { width: 100%; min-width: 0; box-sizing: border-box; }
  .ms-ots-barra { margin: 14px 0 8px; }
  #generar_ot .ms-lista-ot, #generar_ot .ms-lista-ot > tbody { display: block; width: 100%; margin: 0; border: 0; background: none; }
  #generar_ot .ms-lista-ot > thead { display: none; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; margin-top: 2px; padding: 10px 12px 10px 14px;
    box-shadow: inset 4px 0 0 var(--raya-ot, #00000040);
  }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td {
    display: block; min-width: 0; padding: 0 !important; overflow: visible; white-space: normal; border: 0 !important;
    font-size: 11px; line-height: 1.35;
  }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-num { padding-left: 0 !important; box-shadow: none; font-size: 15px; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td:empty { display: none; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-num { order: 1; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-cliente { order: 2; flex: 1 1 0; overflow: hidden; font-size: 14px; font-weight: 700; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-prioridad { order: 3; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-desc { order: 4; flex-basis: 100%; margin: 2px 0 3px; font-size: 13px; font-weight: 500; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-estado { order: 5; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-modulo { order: 5; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-entrega { order: 6; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-emision { order: 7; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-tiempo { order: 8; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-coste { order: 8; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-traz { order: 9; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-acciones { order: 10; flex-basis: 100%; margin-top: 6px; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-entrega::before { content: "Entrega "; font-weight: 400; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-emision::before { content: "Emisión "; font-weight: 400; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-tiempo::before { content: "Tiempo "; font-weight: 400; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-coste::before { content: "Coste "; font-weight: 400; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot > td.ms-c-traz::before { content: "Traz. "; font-weight: 400; }
  /* lo que en el ordenador va debajo, aquí en la misma línea */
  #generar_ot .ms-lista-ot :is(.ms-pedido, .ms-hora-emision, .ms-hasta-ahora, .ms-entrega-aviso) { display: inline; margin-left: 5px; font-size: inherit; }
  #generar_ot .ms-lista-ot .ms-pedido { font-size: 11px; }
  #generar_ot .ms-lista-ot .ms-entrega-aviso { display: inline-block; margin-top: 0; }
  #generar_ot .ms-lista-ot .ms-c-desc .ms-procs { margin-top: 1px; }
  #generar_ot .ms-desc-resumen { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
  #generar_ot .ms-ot-ficha { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 12px; padding: 12px; }
  #generar_ot .ms-cliente { display: inline; }
  #generar_ot .ms-c-modulo .ms-ot-modulo { display: inline; }
  #generar_ot .ms-c-modulo .ms-estado-taller { display: inline-block; margin: 0 0 0 6px; vertical-align: baseline; font-size: 10px !important; }
  #generar_ot .ms-acciones { gap: 6px; }
  #generar_ot .ms-accion, #generar_ot .ms-accion.toggle-btn { height: 34px; min-width: 38px; padding: 0 10px; }
  #generar_ot .ms-accion:is(:first-child, .toggle-btn) > span { display: inline; }   /* «Editar» y «Procesos», con su nombre */
  #generar_ot .ms-accion .ms-num { position: static; margin-left: 2px; border-radius: 0; }
  #generar_ot .ms-mas-acciones > summary { min-width: 40px; }
  /* los procesos y costes de cada OT, abiertos, a todo el ancho y en cajas */
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot-detalle.ms-abierta { display: block; }
  #generar_ot .ms-lista-ot > tbody > tr.ms-ot-detalle > td { display: block; padding: 0 0 14px 12px !important; }
  #generar_ot .ms-ot-datos { gap: 4px 12px; }
  #generar_ot .ms-ot-datos dt { font-size: 12px; }
  .procesos-ot > table, .procesos-ot > table > tbody { display: block; width: 100%; margin: 0; }
  .procesos-ot > table > tbody > tr:has(> th) { display: none !important; }
  .procesos-ot > table > tbody > tr:not([style]) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--line);
  }
  .procesos-ot > table > tbody > tr > td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; font-size: 12px; }
  .procesos-ot > table > tbody > tr:not([style]) > td::before { display: block; color: var(--muted); font-size: 10px; font-weight: 600; }
  .procesos-ot > table > tbody > tr:not([style]) > td:nth-child(1)::before { content: "Operario"; }
  .procesos-ot > table > tbody > tr:not([style]) > td:nth-child(2)::before { content: "Máquina"; }
  .procesos-ot > table > tbody > tr:not([style]) > td:nth-child(3)::before { content: "Proceso"; }
  .procesos-ot > table > tbody > tr:not([style]) > td:nth-child(4)::before { content: "Estado"; }
  .procesos-ot > table > tbody > tr:not([style]) > td:nth-child(5)::before { content: "Inicio"; }
  .procesos-ot > table > tbody > tr:not([style]) > td:nth-child(6)::before { content: "Fin"; }
  .procesos-ot > table > tbody > tr:not([style]) > td:nth-child(7)::before { content: "Duración (min)"; }
  .procesos-ot > table > tbody > tr:not([style]) > td:nth-child(8)::before { content: "Coste/hora"; }
  .procesos-ot > table > tbody > tr:not([style]) > td:nth-child(9)::before { content: "Coste total"; }
  .procesos-ot > table > tbody > tr:not([style]) > td:nth-child(10) { grid-column: 1 / -1; }
  .procesos-ot > table > tbody > tr:not([style]) > td:nth-child(10):not(:has(button)) { display: none; }
  .procesos-ot > table > tbody > tr > td > input { width: 100% !important; min-width: 0; box-sizing: border-box; }
  .procesos-ot > table > tbody > tr > td button { min-height: 32px; padding: 0 12px; }
  .procesos-ot > table > tbody > tr[style] { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 10px; }
  .procesos-ot > table > tbody > tr[style] > td:nth-child(odd):not(:first-child) { display: none; }   /* los «—» */
  .procesos-ot > table > tbody > tr[style] > td:nth-child(2)::after { content: " min"; }
  .procesos-ot > table > tbody > tr[style] > td:nth-child(4)::after { content: " €"; }
  .procesos-ot .form-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .procesos-ot .form-inline label { min-width: 0; }
  .procesos-ot .form-inline :is(select, input) { width: 100% !important; min-width: 0; box-sizing: border-box; }
  .procesos-ot .form-inline button { align-self: end; }
  .procesos-ot div[style*="#e3f2fd"], .procesos-ot div[style*="#f9f9f9"] { margin-top: 12px !important; padding: 12px !important; }
  .procesos-ot div[style*="#f9f9f9"] td { padding: 6px 4px !important; }

  /* Procesos sin OT: quién y en qué estado, la máquina y el proceso, el tiempo y el coste, y asignarlo */
  .ms-lista-sin-ot, .ms-lista-sin-ot > tbody { display: block; width: 100%; margin: 0; border: 0; background: none; }
  .ms-lista-sin-ot > tbody > tr:has(> th) { display: none; }
  .ms-lista-sin-ot > tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; padding: 10px 0; border-top: 1px solid var(--aviso-linea); }
  .ms-lista-sin-ot > tbody > tr::before, .ms-lista-sin-ot > tbody > tr::after { content: ""; flex-basis: 100%; height: 0; }
  .ms-lista-sin-ot > tbody > tr::before { order: 2; }
  .ms-lista-sin-ot > tbody > tr::after { order: 4; }
  .ms-lista-sin-ot > tbody > tr > td { display: block; padding: 0; border: 0; background: none; text-align: left; font-size: 12px; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(1) { display: none; }   /* el ID */
  .ms-lista-sin-ot > tbody > tr > td:nth-child(2) { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 700; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(5) { order: 1; font-size: 11px; font-weight: 600; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(3), .ms-lista-sin-ot > tbody > tr > td:nth-child(4) { order: 3; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(n+6):nth-child(-n+9) { order: 5; color: var(--suave); }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(6)::before { content: "Inicio "; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(7)::after { content: " min"; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(8)::after { content: " €/h"; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(9)::after { content: " €"; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(10) { order: 6; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(10) > form { display: flex !important; gap: 6px; margin: 0 !important; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(10) > form:first-child { flex: 1 1 100%; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(10) select { flex: 1 1 0; width: auto !important; min-width: 0; margin: 0 !important; }
  .ms-lista-sin-ot > tbody > tr > td:nth-child(10) button { min-height: 34px; }

  /* Compras: fecha, proveedor y total; la descripción; cantidad × precio, la OT y el cliente; y los botones */
  .ms-lista-compras, .ms-lista-compras > tbody { display: block; width: 100%; margin: 0; border: 0; background: none; }
  .ms-lista-compras > tbody > tr:has(> th) { display: none; }
  .ms-lista-compras > tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
  .ms-lista-compras > tbody > tr > td { display: block; padding: 0 !important; border: 0; background: none; text-align: left !important; font-size: 12px; }
  .ms-lista-compras > tbody > tr > td:nth-child(1) { display: none; }   /* el ID */
  .ms-lista-compras > tbody > tr > td:nth-child(2) { order: 1; color: var(--suave); }
  .ms-lista-compras > tbody > tr > td:nth-child(3) { order: 2; flex: 1 1 0; font-size: 14px; font-weight: 700; }
  .ms-lista-compras > tbody > tr > td:nth-child(7) { order: 3; font-size: 14px; }
  .ms-lista-compras > tbody > tr > td:nth-child(4) { order: 4; flex-basis: 100%; font-size: 13px; }
  .ms-lista-compras > tbody > tr > td:nth-child(5) { order: 5; color: var(--suave); }
  .ms-lista-compras > tbody > tr > td:nth-child(5)::before { content: "Cant. "; }
  .ms-lista-compras > tbody > tr > td:nth-child(6) { order: 6; margin-left: -6px; color: var(--suave); }
  .ms-lista-compras > tbody > tr > td:nth-child(6)::before { content: "× "; }
  .ms-lista-compras > tbody > tr > td:nth-child(8) { order: 7; color: var(--suave); }
  .ms-lista-compras > tbody > tr > td:nth-child(8)::before { content: "OT "; }
  .ms-lista-compras > tbody > tr > td:nth-child(9) { order: 8; color: var(--suave); }
  .ms-lista-compras > tbody > tr > td:nth-child(9)::before { content: "Cliente: "; }
  .ms-lista-compras > tbody > tr > td:nth-child(10) { order: 9; flex-basis: 100%; margin-top: 4px; }
  .ms-lista-compras > tbody > tr > td:has(> .ms-vacio:only-child) { display: none; }   /* sin OT o sin cliente */
  .ms-lista-compras > tbody > tr > td:nth-child(10) button { min-height: 32px; margin: 0 6px 0 0; padding: 0 12px; font-size: 12px; }

  /* Clientes y proveedores: el código y el nombre con sus botones, y debajo el contacto */
  :is(#tabla_clientes, #tabla_proveedores), :is(#tabla_clientes, #tabla_proveedores) > tbody { display: block; width: 100%; margin: 0; border: 0; background: none; }
  :is(#tabla_clientes, #tabla_proveedores) > tbody > tr:has(> th) { display: none; }
  :is(#tabla_clientes, #tabla_proveedores) > tbody > tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--line);
  }
  :is(#tabla_clientes, #tabla_proveedores) > tbody > tr > td { display: block; min-width: 0; padding: 0; border: 0; background: none; text-align: left; font-size: 12px; }
  :is(#tabla_clientes, #tabla_proveedores) > tbody > tr > td:nth-child(1) { order: 10; color: var(--suave); font-weight: 600; }
  :is(#tabla_clientes, #tabla_proveedores) > tbody > tr > td:nth-child(2) { order: 20; flex: 1 1 0; font-size: 14px; font-weight: 700; }
  #tabla_clientes > tbody > tr > td:nth-child(4), #tabla_proveedores > tbody > tr > td:nth-child(6) { order: 30; display: flex; gap: 6px; }
  :is(#tabla_clientes, #tabla_proveedores) > tbody > tr::after { content: ""; order: 35; flex-basis: 100%; height: 0; }
  #tabla_clientes > tbody > tr > td:nth-child(3) { order: 40; flex-basis: 100%; }
  #tabla_proveedores > tbody > tr > td:nth-child(3) { order: 40; }
  #tabla_proveedores > tbody > tr > td:nth-child(4) { order: 50; }
  #tabla_proveedores > tbody > tr > td:nth-child(5) { order: 60; }
  :is(#tabla_clientes, #tabla_proveedores) td :is(button, form) { margin: 0 !important; }
  :is(#tabla_clientes, #tabla_proveedores) td button { min-height: 32px; padding: 0 10px; font-size: 11px; }
  :is(#tabla_clientes, #tabla_proveedores) td :is(input, textarea) { width: 100% !important; box-sizing: border-box; }
  /* Alta de clientes y proveedores, abiertos: el código y el nombre en una línea, el contacto debajo */
  #clientes form[action$="/clientes/crear"], #clientes form[action$="/clientes/import_csv"] > div,
  #compras form[action$="/proveedores/crear"] { flex-wrap: wrap; gap: 8px !important; }
  #clientes form[action$="/clientes/crear"] > div:first-child, #compras form[action$="/proveedores/crear"] > div:first-child { flex: 0 0 90px !important; }
  #clientes form[action$="/clientes/crear"] > div:nth-child(2), #compras form[action$="/proveedores/crear"] > div:nth-child(2) { flex: 1 1 calc(100% - 98px) !important; min-width: 0 !important; }
  #clientes form[action$="/clientes/crear"] > div:nth-child(3), #clientes form[action$="/clientes/import_csv"] > div > div { flex: 1 1 100% !important; }
  #compras form[action$="/proveedores/crear"] > div:nth-child(3), #compras form[action$="/proveedores/crear"] > div:nth-child(4) { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }
  #compras form[action$="/proveedores/crear"] > div:nth-child(5) { flex: 1 1 calc(100% - 120px) !important; min-width: 0 !important; }
  :is(#clientes, #compras) form :is(input, select, textarea) { min-width: 0; box-sizing: border-box; }
}

/* Facturas y Puestos y tablets en el móvil: las tres cifras de Facturas en una fila; en Puestos, los ajustes y la
   lista de máquinas de cada puesto, plegados (el título dice cuántas tiene marcadas) */
@media (max-width: 700px) {
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .stat-box { min-width: 0; padding: 10px; }
  .stat-box h3 { margin-bottom: 4px; font-size: 10px; line-height: 1.25; }
  .stat-box .value { font-size: 18px; letter-spacing: -.03em; overflow-wrap: anywhere; }
  .factura-card { padding: 12px 14px; }
  .factura-header { gap: 10px; }
  .factura-header > div { flex: 1 1 0; min-width: 0; }
  .btn-ver-pdf { white-space: nowrap; }
  .results > h2 { margin-bottom: 12px !important; font-size: 20px; }
  .factura-title { font-size: 16px; }
  .factura-meta { font-size: 12px; line-height: 1.45; }
  #filtro_facturas > :is(select[name="archivo"], input[name="cliente"]) { flex-basis: 100%; min-width: 0; }
  .wrap > .card { margin: 10px 0; }
  .wrap .card form input[name="nombre"] { width: 55%; box-sizing: border-box; }
  .wrap .card .hint:has(+ .maqs) { display: none; }   /* «ninguna marcada = todas»: lo dice el título de la lista */
  .maqs[data-plegable] { margin: 8px 0 10px; }
  .maqs[data-plegable] > button.ms-plegar, .maqs[data-plegable] > button.ms-plegar:hover, .maqs[data-plegable] > button.ms-plegar:active {
    min-height: 38px !important; padding: 0 12px !important; border: 1px solid var(--campo-linea); font-size: 13px;
  }
  .maqs.ms-abierto > button.ms-plegar { margin-bottom: 6px; }
  .maqs label { flex: 1 1 calc(50% - 14px); min-width: 0; font-size: 13px; }
}

/* ---------- Fichar: la entrada y la salida de cada uno (Oficina, M 27/10) ---------- */
/* El bloque en el centro, como siempre, con las letras, los colores y los botones del resto (sin bordes ni esquinas) */
.ms-fichar .pantalla { box-sizing: content-box; max-width: 420px; margin: 0 auto; padding: 0 var(--shell) 64px; text-align: center; }
.ms-fichar .estado-principal { margin: 4px 0 4px; font-size: clamp(40px, 4.4vw, 56px); font-weight: 700; letter-spacing: -.05em; }
.ms-fichar .estado-principal.fuera { color: var(--suave); }
.ms-fichar .detalle-estado { margin-bottom: 24px; color: var(--suave); font-size: 16px; }
.ms-fichar .btn-fichar { padding: 30px 20px; border: 0; border-radius: 0; font-size: 24px; letter-spacing: .04em; }
.ms-fichar .resumen-linea { margin: 0 0 20px; border-width: 1px; border-radius: 0; font-size: 18px; }
.ms-fichar .msg { border-width: 1px; border-radius: 0; font-size: 14px; }
/* al pasar el cursor, el verde o el rojo un poco más oscuro (no el gris del botón de siempre) */
.ms-fichar .btn-entrada:hover { background: var(--b-verde-h); }
.ms-fichar .btn-salida:hover { background: var(--b-rojo-h); }
/* «¿Lo reanudas?» tras entrar: el aviso ámbar del resto, sin bordes gordos ni esquinas (sus estilos van en línea) */
.ms-fichar .ms-reanudar { padding: 16px !important; border: 1px solid var(--aviso-linea) !important; border-radius: 0 !important;
  background: var(--aviso-fondo) !important; }
.ms-fichar .ms-reanudar > div { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -.02em; line-height: 1.35; }
.ms-fichar .ms-reanudar button { padding: 12px 16px !important; border-width: 1px !important; border-radius: 0 !important;
  font-size: 15px !important; font-weight: 700 !important; }
.ms-fichar .ms-reanudar .ms-btn-reanudar { border-color: var(--b-verde) !important; }

/* ---------- La tarjeta «Inventario · OT N» de la ficha de una OT en Oficina (M, 2/11) ---------- */
.ms-ot-inventario ul { margin: 0 0 10px; padding-left: 20px; line-height: 1.7; }
.ms-ot-inventario p { margin: 0 0 8px; line-height: 1.6; }
.ms-ot-inventario .btn-white { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; text-decoration: none; }
.ms-ot-inventario-aviso { color: var(--aviso); font-weight: 600; }