:root {
  /* Marca Castelló — granate como color primario/interactivo */
  --azul: #782020;
  --azul-osc: #5c1818;
  --primario: #782020;
  --acento: #AB2328;   /* rojo Pantone 7621C — logo y detalles puntuales */
  --oro: #D7BC8C;      /* dorado — acentos finos */
  --azul-info: #2563eb; /* azul "info" reservado para el badge de estado "en progreso" (no es color de marca) */
  --verde: #16a34a;
  --rojo: #dc2626;
  --naranja: #ea580c;
  --amarillo: #ca8a04;
  --gris: #6b7280;
  --bg: #f4f6f9;
  --texto: #1f2937;
  --borde: #e2e8f0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--texto);
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  background: #0d0605;
  background-image: linear-gradient(180deg, #170a09 0%, #000 100%);
  color: #e5e7eb;
  flex-shrink: 0;
  padding: 1.25rem 0;
  /* Fija el menú en pantalla: no se desplaza con el contenido de .main al
     hacer scroll. align-self: flex-start evita que el flex de .layout lo
     estire a la altura de .main (que puede ser más alta que la pantalla);
     overflow-y: auto por si el propio menú alguna vez no cupiera entero. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 0.75rem;
}
.sidebar .brand img { height: 26px; display: block; margin: 0 auto; }
.sidebar .brand-campana {
  font-weight: 400;
  font-size: 0.85rem;
  color: #ffffff;
  margin-top: 0.45rem;
  text-align: center;
}
.sidebar nav a {
  display: block;
  position: relative;
  padding: 0.6rem 1.25rem;
  color: #cbd5e1;
  font-size: 0.92rem;
  /* Resalte animado al pasar el ratón: el fondo/color se funden en vez de
     cambiar de golpe, el texto se desplaza un poco a la derecha, y una
     franja dorada (--oro, el acento fino de la marca) crece desde arriba
     pegada al borde izquierdo — mismo patrón de transiciones cortas
     (0.15-0.2s) que ya se usa en el resto del sitio (inputs, botones). */
  transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
.sidebar nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--oro);
  transform: scaleY(0);
  transition: transform 0.18s ease;
}
.sidebar nav a:hover {
  padding-left: 1.55rem;
}
.sidebar nav a:hover, .sidebar nav a.active {
  background: var(--azul);
  color: #fff;
  text-decoration: none;
}
.sidebar nav a:hover::before, .sidebar nav a.active::before {
  transform: scaleY(1);
}
.sidebar .user-box {
  margin-top: 1.5rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.85rem;
  color: #9ca3af;
}
.sidebar .user-box strong { color: #f3f4f6; display: block; }
.sidebar .logout { margin-top: 0.5rem; display: inline-block; color: #fca5a5; font-size: 0.85rem; }
/* "Cerrar sesión" es un botón (POST + CSRF) con aspecto de enlace */
.sidebar button.logout { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-align: left; }
.sidebar button.logout:hover { text-decoration: underline; }

.main { flex: 1; padding: 1.5rem 2rem; max-width: 1440px; }

h1, h2, h3 { margin-top: 0; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;
}

.btn {
  display: inline-block;
  background: var(--azul);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--azul-osc); text-decoration: none; }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.btn-secondary { background: #6b7280; }
.btn-secondary:hover { background: #4b5563; }
.btn-success { background: var(--verde); }
.btn-danger { background: var(--rojo); }
.btn-outline { background: transparent; border: 1px solid var(--borde); color: var(--texto); }
.btn-outline:hover { color: #fff; }

.card {
  background: white;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.grid { display: grid; gap: 1rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

.stat {
  text-align: left;
}
.stat .num { font-size: 1.9rem; font-weight: 700; }
.stat .label { color: var(--gris); font-size: 0.85rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table th, table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--borde); }
table th { color: var(--gris); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
table th a { color: var(--gris); text-decoration: none; }
table th a:hover { color: var(--primario); }
table th.th-sorted { color: var(--primario); background: #faeeed; }
table tr:hover { background: #f8fafc; }

.difusores-grupo .difusores-tabla th.separador-hora,
.difusores-grupo .difusores-tabla td.separador-hora {
  border-left: 2px solid var(--borde);
}

/* Movimientos de Orujo: líneas horizontales (entre filas) y verticales
   (entre bloques de conductor) más anchas que el resto de tablas de la
   app, para que la cuadrícula se vea más marcada en esta tabla en
   concreto. El separador vertical usa el mismo patrón que separador-hora
   de Difusores arriba, pero el doble de ancho (4px vs 2px) porque aquí
   los bloques van más pegados. */
.tabla-movimientos-orujo th,
.tabla-movimientos-orujo td {
  border-bottom: 2px solid var(--borde);
}
.tabla-movimientos-orujo th.separador-conductor,
.tabla-movimientos-orujo td.separador-conductor {
  border-left: 2px solid var(--borde);
}

/* Listado de Bodega: letra y márgenes más pequeños y columnas al mínimo,
   para que cada quepan en una sola pantalla en horizontal sin necesidad de
   desplazarse (solo afecta a esta tabla, vía la clase .tabla-compacta, no
   al resto de tablas de la aplicación). */
table.tabla-compacta { font-size: 0.78rem; }
table.tabla-compacta th,
table.tabla-compacta td { padding: 0.32rem 0.4rem; }
table.tabla-compacta th { font-size: 0.66rem; }
table.tabla-compacta .btn-sm { padding: 0.2rem 0.45rem; font-size: 0.7rem; }
table.tabla-compacta .filter-row input,
table.tabla-compacta .filter-row select { font-size: 0.78rem; padding: 0.25rem 0.35rem; }

/* Entradas de Laboratorio: columnas de ancho fijo e independiente. Con el
   layout "auto" de una tabla normal, el navegador calcula el ancho de cada
   columna mirando el contenido MÁS ANCHO de esa columna en todas las filas
   a la vez, y si el total no encaja reparte/roba espacio entre columnas —
   así que tocar el ancho de una podía desplazar todas las demás. Con
   table-layout:fixed + un <colgroup> (ver laboratorio.html), cada columna
   usa exactamente el ancho de su <col>, sin mirar el contenido ni a las
   demás columnas: se puede ajustar una sin que el resto se mueva. */
table.tabla-fija { table-layout: fixed; width: auto; }

/* Alcohol Laboratorio: colores de cabecera calcados de los dos papeles
   originales rellenados a mano, a petición del usuario ("los mismos
   colores"). En el papel de Alcohol Bruto la tabla "Columna" es verde y
   "Vinazas" es azul claro; en el de Alcohol Rectificado es al revés de
   más — "Columnas" es azul claro y "Vinazas" es naranja/mostaza — por eso
   hay tres clases de color en vez de una fija por tabla, y app.py decide
   cuál usa cada una según el tipo. */
table.alcohol-tabla-hora th { text-transform: none; font-size: 0.7rem; }
table.alcohol-tabla-hora th.alcohol-cabecera-verde { background: #c8e6b0; color: #1f2937; }
table.alcohol-tabla-hora th.alcohol-cabecera-azul { background: #bfe4ee; color: #1f2937; }
table.alcohol-tabla-hora th.alcohol-cabecera-naranja { background: #f8d59f; color: #1f2937; }
table.alcohol-tabla-hora th.alcohol-cabecera-salmon { background: #fbd5be; color: #1f2937; }
table.alcohol-tabla-hora input[type="text"] { font-size: 0.78rem; }
table.alcohol-tabla-hora input[readonly] { background: #f1f5f9; color: var(--gris); border-color: transparent; }

/* Tabla de órdenes de trabajo: el título necesita más espacio y las fechas
   (planificada / creada) deben verse siempre en una sola línea. Si no caben
   todas las columnas, se desplaza en horizontal en vez de aplastarlas. */
.tabla-scroll { overflow-x: auto; }

/* Barra de desplazamiento horizontal DUPLICADA arriba de la tabla, además de
   la de abajo (nativa del navegador, al final de .tabla-scroll) — en tablas
   anchas como Entradas de Laboratorio, sin esto había que bajar hasta el
   final de la tabla para encontrar la barra con la que desplazarse. Es un
   div vacío, del mismo ancho de scroll que la tabla real, sincronizado con
   ella por JavaScript en ambos sentidos (ver el <script> de la plantilla que
   la usa) — el truco habitual para tener dos barras de scroll ligadas a un
   mismo contenido, ya que CSS por sí solo no puede duplicar una barra nativa.
   Altura mínima (no 0) para que la barra sea visible y usable en todos los
   navegadores. */
.tabla-scroll-top { overflow-x: auto; overflow-y: hidden; height: 16px; }
.tabla-scroll-top > div { height: 1px; }
.tabla-ordenes th:nth-child(2),
.tabla-ordenes td:nth-child(2) { min-width: 220px; }
.tabla-ordenes th:nth-child(9),
.tabla-ordenes td:nth-child(9),
.tabla-ordenes th:nth-child(10),
.tabla-ordenes td:nth-child(10) { white-space: nowrap; }

.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}
.pagination-info { font-size: 0.85rem; color: var(--gris); }
.pagination-controls { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.pg-btn {
  display: inline-block;
  min-width: 2rem;
  text-align: center;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--borde);
  background: white;
  color: var(--texto);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}
.pg-btn:hover { background: #f1f5f9; text-decoration: none; }
.pg-active, .pg-active:hover { background: var(--azul); border-color: var(--azul); color: white; }
.pg-disabled { color: #cbd5e1; cursor: default; background: #f8fafc; }
.pg-disabled:hover { background: #f8fafc; }
.pg-ellipsis { padding: 0.4rem 0.3rem; color: var(--gris); font-size: 0.85rem; }
@media (max-width: 600px) {
  .pagination-bar { flex-direction: column; align-items: flex-start; }
}

.badge {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; color: white;
}
.badge-pendiente { background: var(--gris); }
.badge-asignada { background: var(--amarillo); }
.badge-en_progreso { background: var(--azul-info); } /* se conserva azul: es un color de estado, no de marca */
.badge-completada { background: var(--verde); }
/* Entradas de Laboratorio: distingue de un vistazo si una fila es un
   camión que entra (proveedor) o que sale (cliente) — mismo azul "info"
   que ya se usa para "en progreso" arriba (no es color de marca) para
   Entrada, y ámbar para Salida. */
.badge-entrada { background: var(--azul-info); }
.badge-salida { background: var(--amarillo); }
.badge-cancelada { background: var(--rojo); }

.badge-baja { background: #94a3b8; }
.badge-media { background: var(--amarillo); }
.badge-alta { background: var(--naranja); }
.badge-urgente { background: var(--rojo); }

.badge-ubicacion { background: #475569; }

.badge-vigente { background: var(--verde); }
.badge-aviso { background: var(--naranja); }
.badge-caducado { background: var(--rojo); }
.badge-sustituido { background: var(--azul-info); }
.badge-devuelto { background: #94a3b8; }

form .field { margin-bottom: 1rem; }
form label { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; font-weight: 600; color: #374151; }
form input, form select, form textarea {
  width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--borde); border-radius: 6px;
  font-size: 0.92rem; font-family: inherit;
}
form textarea { resize: vertical; min-height: 80px; }
.form-row { display: flex; gap: 1rem; }
.form-row .field { flex: 1; }

.flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
.flash-success { background: #dcfce7; color: #166534; }
.flash-danger { background: #fee2e2; color: #991b1b; }
.flash-warning { background: #fef3c7; color: #92400e; }
.flash-info { background: #dbeafe; color: #1e40af; }

.login-page {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: #0d0605;
  background-image: linear-gradient(160deg, #1a0a09 0%, #000 100%);
}
.login-box {
  background: white; padding: 2.5rem; border-radius: 12px; width: 360px; text-align: center;
}
.login-box h1 { text-align: center; margin-bottom: 1.5rem; font-size: 1.3rem; }
.login-box .logo { height: 34px; margin-bottom: 0.9rem; }
.login-box .logo-underline { height: 3px; width: 40px; background: var(--oro); margin: 0 auto 1.4rem; border-radius: 2px; }
.login-hint { font-size: 0.78rem; color: var(--gris); margin-top: 1.2rem; line-height: 1.5; text-align: center; }

.empty-state { text-align: center; padding: 2.5rem; color: var(--gris); }

.bar-chart { display: flex; flex-direction: column; gap: 0.6rem; }
.bar-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.bar-row .bar-label { width: 130px; flex-shrink: 0; color: var(--gris); }
.bar-row .bar-track { flex: 1; background: #eef2f7; border-radius: 4px; height: 10px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; border-radius: 4px; background: var(--azul); }
.bar-row .bar-value { width: 40px; text-align: right; font-weight: 600; }

.filters { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
/* Usar form .filters para superar la especificidad de "form select { width:100% }" */
form .filters select,
form .filters input,
.filters select,
.filters input {
  width: auto;
  flex: 0 0 auto;
  min-width: 130px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 0.85rem;
}

/* Resalta visualmente los campos de filtro que tienen un valor seleccionado */
form select.filtro-activo,
form input.filtro-activo,
select.filtro-activo,
input.filtro-activo {
  background: #f1d1d0;
  border-color: var(--azul);
}

.timeline { border-left: 2px solid var(--borde); padding-left: 1rem; margin-left: 0.4rem; }
.timeline-item { margin-bottom: 1rem; position: relative; }
.timeline-item::before {
  content: ""; position: absolute; left: -1.5rem; top: 0.25rem; width: 8px; height: 8px;
  background: var(--azul); border-radius: 50%;
}
.timeline-meta { font-size: 0.75rem; color: var(--gris); }

.text-muted { color: var(--gris); }
.text-sm { font-size: 0.85rem; }
.text-azul-info { color: var(--azul-info); font-weight: 600; } /* Grado Calculado en Entradas de Laboratorio */

/* Grado Calculado (Entradas de Laboratorio): mismo recuadro que los campos
   de Grado Laboratorio/Az. Reductores/Riqueza de al lado, pero de solo
   lectura y en azul, para que se note que es un valor calculado y no uno
   que se pueda escribir. */
.grado-calculado-box {
  display: inline-block; min-width: 55px; text-align: center;
  padding: 0.55rem 0.7rem; border: 1px solid var(--borde); border-radius: 6px;
  font-size: 0.92rem; font-weight: 600;
  color: var(--azul-info); background: #eff6ff;
}

/* Grado Calculado en la fila de Pendientes: un <input readonly>, no un
   <span> — así el navegador lo dibuja EXACTAMENTE igual que sus vecinos
   editables (Grado, Az. Red., Riqueza), mismo recuadro y formato nativos,
   sin imitarlo a mano con CSS. Solo se le cambia el color de letra a azul
   y algo más de peso, nada de fondo ni borde propios. */
.grado-calculado-input {
  color: var(--azul-info); font-weight: 600; text-align: center;
  background: #fff; cursor: default;
}

/* Fila de "Pendientes" en Entradas de Laboratorio ya guardada por AJAX:
   se queda en la tabla (no desaparece hasta recargar) pero marcada. */
.fila-lab-guardada { background: #f0fdf4; }
.fila-lab-guardada:hover { background: #dcfce7; }
.btn-guardado, .btn-guardado:hover { background: var(--verde); }
.mt-0 { margin-top: 0; }
.detail-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 1.25rem; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- Calendario --- */
.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
}
.calendario-cabecera {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gris);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  text-align: center;
}
.calendario-dia {
  min-height: 110px;
  min-width: 0; /* evita que un título largo sin espacios ensanche la columna y descuadre la cuadrícula del mes */
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 0.4rem;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.4rem;
}
.calendario-dia-vacio {
  background: transparent;
  border: none;
}
.calendario-dia.calendario-hoy {
  border-color: var(--azul);
  background: #faeeed;
}
/* Difusores: día cuya rejilla se está mostrando arriba, en la misma
   pantalla (a diferencia de calendario-hoy, que siempre marca la fecha de
   hoy independientemente de qué día se esté viendo). */
.calendario-dia.dia-seleccionado {
  box-shadow: 0 0 0 2px var(--azul) inset;
}
.calendario-dia-numero {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gris);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}
.calendario-add {
  background: var(--azul);
  color: white;
  border-radius: 4px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1;
  text-decoration: none;
}
.calendario-add:hover { background: var(--azul-osc); text-decoration: none; }
.calendario-ordenes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  max-height: 110px;
}
.calendario-chip {
  display: block;
  font-size: 0.72rem;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  color: white;
  /* sin background fijo: lo pone el badge-* de prioridad */
  cursor: grab;
  line-height: 1.3;
}
.calendario-chip:hover { text-decoration: none; opacity: 0.85; }
.chip-titulo {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-sub {
  font-size: 0.67rem;
  opacity: 0.88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Orden completada — vista día del calendario */
.orden-dia-card.orden-completada {
  border-color: var(--verde);
  background: #f0fdf4;
}
.orden-dia-card.orden-completada .orden-dia-titulo { color: var(--verde); }

/* Fila completada en la tabla de órdenes */
.fila-completada td { background: #f0fdf4; }
tr.fila-completada:hover td { background: #dcfce7; }
.calendario-dia[ondragover] { transition: background 0.15s; }
.calendario-dia.drag-over { background: #f1d1d0; }

/* Calendario de Báscula: días en verde/rojo/gris según si hay entradas --- */
button.calendario-dia.dia-bascula,
a.calendario-dia.dia-bascula {
  font: inherit;
  cursor: pointer;
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform 0.1s, box-shadow 0.1s;
}
button.calendario-dia.dia-bascula:hover,
a.calendario-dia.dia-bascula:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.calendario-dia.dia-verde { background: #dcfce7; border-color: var(--verde); }
.calendario-dia.dia-rojo { background: #fee2e2; border-color: var(--rojo); }
/* Amarillo: día parcial (Difusores) — tiene algún dato pero no todos los
   huecos del día (n < total_dia, ver _calendario_de_mes en app.py). Solo
   se usa donde se pasa total_dia; Báscula/Salidas siguen siendo binarias
   (verde/rojo), así que nunca llegan a este estado. */
.calendario-dia.dia-amarillo { background: #fef9c3; border-color: var(--amarillo); }
.calendario-dia.dia-gris { background: #f4f4f5; border-color: var(--borde); }
.calendario-dia.dia-verde .calendario-dia-numero,
.calendario-dia.dia-rojo .calendario-dia-numero,
.calendario-dia.dia-amarillo .calendario-dia-numero { color: var(--texto); }
.dia-bascula-cuenta {
  font-size: 0.72rem;
  color: var(--gris);
  margin-top: auto;
}
.dia-verde .dia-bascula-cuenta { color: #15803d; font-weight: 600; }
.dia-rojo .dia-bascula-cuenta { color: #b91c1c; font-weight: 600; }
.dia-amarillo .dia-bascula-cuenta { color: #92400e; font-weight: 600; }

.leyenda-punto {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 0.25rem;
  vertical-align: middle;
}
.leyenda-verde { background: var(--verde); }
.leyenda-rojo { background: var(--rojo); }
.leyenda-amarillo { background: var(--amarillo); }
.leyenda-gris { background: #a1a1aa; }

/* Zona de arrastrar y soltar para subir el PDF de báscula ------------- */
.dropzone {
  border: 2px dashed var(--borde);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  background: #fafbfc;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone.drag-over {
  border-color: var(--azul);
  background: #faeeed;
}

/* CAUSA REAL de que ningún cambio de ancho de estas dos clases se notara
   nunca (ni el primer max-width:780px, ni luego 1560px, ni luego
   width:96%): estas reglas estaban declaradas AQUÍ, ANTES que la
   definición completa de .modal-box (ver más abajo, sección "Modal
   almacén": width:92%; max-width:460px;). .modal-box-wide/.modal-box-xwide
   y .modal-box son selectores de una sola clase → misma especificidad —
   y en un empate de especificidad gana la regla que aparece MÁS TARDE en
   el archivo, que siempre era .modal-box. Es decir, el propio 92%/460px
   de base pisaba silenciosamente cualquier valor que se pusiera aquí,
   por eso la ventana de detalle de carga nunca cambiaba de tamaño pese a
   sucesivos intentos. Arreglado usando selectores compuestos
   (.modal-box.modal-box-wide / .modal-box.modal-box-xwide, dos clases):
   esa especificidad es mayor que la de .modal-box sola, así que gana
   siempre sin depender del orden en el archivo. */
.modal-box.modal-box-wide { max-width: 780px; }
.modal-box.modal-box-xwide { width: 64%; max-width: 1200px; }

/* Diagrama del esquema de la base de datos (pestaña Power BI) --------- */
.diagrama-esquema {
  overflow-x: auto;
  background: #fafbfc;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1rem;
}
.diagrama-esquema svg { display: block; margin: 0 auto; }

/* Báscula: tres meses (anterior/actual/siguiente) uno junto a otro ----- */
.meses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1000px) {
  .meses-grid { grid-template-columns: 1fr; }
}
.mes-card .calendario-dia {
  min-height: 46px;
  padding: 0.25rem;
}
.mes-card .calendario-dia-numero {
  font-size: 0.72rem;
  margin-bottom: 0.1rem;
}
.mes-card .dia-bascula-cuenta {
  font-size: 0.65rem;
}
.mes-card .calendario-cabecera {
  font-size: 0.68rem;
  margin-bottom: 0.25rem;
}

/* -------------------------------------------------------- Fotos de orden --- */
.foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.foto-item {
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}
.foto-item img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}
.foto-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  color: var(--gris);
}
.btn-link-danger {
  background: none;
  border: none;
  color: var(--rojo);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* -------------------------------------------------------- Almacén --- */
.almacen-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .almacen-cards { grid-template-columns: 1fr; } }

.almacen-card {
  display: block;
  background: white;
  border: 2px solid var(--borde);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--texto);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.almacen-card:hover {
  border-color: var(--azul);
  box-shadow: 0 4px 16px rgba(120,32,32,0.16);
  text-decoration: none;
  color: var(--texto);
}
.almacen-card-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.almacen-card-titulo { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.6rem; }
.almacen-card-stats { color: var(--gris); font-size: 0.88rem; line-height: 1.8; }
.almacen-card-barra { margin-top: 1rem; }
.almacen-card-barra-track {
  background: #eef2f7;
  border-radius: 4px;
  height: 7px;
  margin-top: 0.3rem;
  overflow: hidden;
}
.almacen-card-barra-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--rojo);
  transition: width 0.5s ease;
  min-width: 0;
}
.almacen-card-barra-fill.empty { background: var(--verde); }

/* Estanterías grid */
.estanteria-scroll { overflow-x: auto; padding-bottom: 0.75rem; }
.estanteria-container { display: inline-block; }

.estanteria-header-row {
  display: flex;
  margin-left: 36px;
  margin-bottom: 2px;
}
.estanteria-col-label {
  width: 36px;
  height: 22px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gris);
  text-transform: uppercase;
  flex-shrink: 0;
}

.estanteria-row {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}
.estanteria-nivel-label {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gris);
  background: #f8fafc;
  border-radius: 4px;
  margin-right: 0;
}

.hueco {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 5px;
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  transition: transform 0.1s, box-shadow 0.1s;
}
.hueco-vacio {
  background: #dcfce7;
  border: 1px solid #86efac;
}
.hueco-vacio:hover { background: #bbf7d0; }
.hueco-ocupado {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  cursor: pointer;
  color: #991b1b;
}
.hueco-ocupado:hover {
  background: #fecaca;
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(220,38,38,0.25);
  z-index: 1;
  position: relative;
}

/* Modal almacén */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 460px;
  width: 92%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  /* La entrada/salida del modal ya la anima GSAP (ver static/js/
     transiciones.js, gsapAbrirModal/gsapCerrarModal) — sin @keyframes CSS
     aquí para no competir con esa animación (dos animaciones tocando
     opacity/transform a la vez producía parpadeo). Si GSAP no llega a
     cargar (sin red, CDN caído...), el modal simplemente aparece/desaparece
     al instante — sigue siendo usable, solo pierde la animación. */
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.modal-header h2 { margin: 0; font-size: 1.05rem; }
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--gris);
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--rojo); }

.modal-material-item {
  padding: 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: 0.6rem;
}
.modal-material-item:last-child { margin-bottom: 0; }
.modal-material-codigo { font-size: 0.75rem; color: var(--gris); margin-bottom: 0.15rem; }
.modal-material-nombre { font-weight: 600; margin-bottom: 0.2rem; font-size: 0.95rem; }
.modal-material-stock { font-size: 0.82rem; color: var(--gris); }
.stock-bajo { color: var(--rojo) !important; font-weight: 600; }

/* ================================================================= FOTOS UPLOAD === */
.foto-upload-opciones {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.foto-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1.5px solid var(--borde);
  border-radius: 8px;
  background: white;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.foto-upload-btn:hover {
  border-color: var(--azul);
  background: #faeeed;
  color: var(--azul);
}
.foto-upload-camara {
  border-color: var(--verde);
  color: var(--verde);
}
.foto-upload-camara:hover {
  background: #dcfce7;
  border-color: var(--verde);
  color: var(--verde);
}

/* ========================================================= FOTO PREVIEW GRID === */
.foto-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.foto-preview-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--borde);
  background: #f8fafc;
}
.foto-preview-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

/* ============================================================= CALENDARIO TABS === */
.vista-tabs {
  display: flex;
  border: 1px solid var(--borde);
  border-radius: 6px;
  overflow: hidden;
}
.vista-tab {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  color: var(--gris);
  text-decoration: none;
  background: white;
  border-right: 1px solid var(--borde);
  transition: background 0.1s;
}
.vista-tab:last-child { border-right: none; }
.vista-tab:hover { background: #f8fafc; text-decoration: none; color: var(--texto); }
.vista-tab.activa { background: var(--azul); color: white; font-weight: 600; }

/* Número de día en mes — enlace a vista día */
.calendario-dia-link { color: var(--texto); font-size: 0.8rem; font-weight: 600; }
.calendario-dia-link:hover { color: var(--azul); text-decoration: none; }

/* ─────────────── Vista DÍA ─────────────── */
.orden-dia-card {
  padding: 0.85rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: 0.6rem;
  transition: box-shadow 0.15s;
}
.orden-dia-card:last-child { margin-bottom: 0; }
.orden-dia-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
.orden-dia-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.orden-dia-titulo {
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--texto);
  flex: 1;
  min-width: 0;
}
.orden-dia-titulo:hover { color: var(--azul); text-decoration: none; }
.orden-dia-badges { display: flex; gap: 0.35rem; flex-shrink: 0; flex-wrap: wrap; }
.orden-dia-meta {
  display: flex;
  gap: 0.85rem;
  font-size: 0.82rem;
  color: var(--gris);
  flex-wrap: wrap;
}
.orden-dia-desc { font-style: italic; }

/* ─────────────── Vista SEMANA ─────────────── */
.semana-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
.semana-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 0.5rem;
  min-width: 700px;
}
.semana-col {
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}
.semana-hoy { border-color: var(--azul); border-width: 2px; }
.semana-col-header {
  padding: 0.45rem 0.4rem;
  text-align: center;
  border-bottom: 1px solid var(--borde);
  background: #f8fafc;
}
.semana-dia-nombre {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.semana-dia-num { font-size: 1.2rem; font-weight: 700; color: var(--texto); line-height: 1.2; }
.semana-num-hoy { color: var(--azul); }
.semana-col-body {
  padding: 0.4rem;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.semana-col-body.drag-over { background: #f1d1d0; transition: background 0.15s; }
.semana-col-ordenes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 410px; /* ~10 órdenes visibles; el resto se ve haciendo scroll */
  overflow-y: auto;
}
.semana-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  background: #f1f5f9;
  border-radius: 4px;
  color: var(--azul);
  font-size: 1rem;
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
  line-height: 1;
}
.semana-add:hover { background: #f1d1d0; text-decoration: none; }

/* -------------------------------------------------------- Fermentación --- */
/* Selector de depósito (1 al 16): cada depósito se dibuja como un icono de
   tanque cilíndrico (tapa muy redondeada arriba, base algo redondeada
   abajo — border-radius con dos radios distintos, no un simple
   rectángulo) con el número dentro; encima, la capacidad total del
   depósito, y debajo el último volumen en litros que se le haya
   registrado. Un degradado claro-oscuro-claro de lado a lado (capa de
   background-image aparte del color de fondo, que va en background-color
   para no pisarlo) sugiere la curvatura de un cilindro visto de frente. */
.deposito-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 10px;
}
/* .deposito-item es ahora el contenedor de CADA depósito (dibujo + su
   propio desplegable de estado debajo, sin ventana aparte); .deposito-
   item-link es solo el enlace (capacidad+dibujo+volumen) que navega a la
   tabla de ese depósito — separado del <form> del estado para que elegir
   una opción del desplegable no dispare también la navegación del enlace
   que lo envuelve. */
.deposito-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.deposito-item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.deposito-item-link:hover { text-decoration: none; }
.deposito-capacidad { font-size: 0.68rem; color: var(--gris); }
.deposito-tanque {
  width: 48px;
  height: 58px;
  box-sizing: border-box;
  border-radius: 50% 50% 10% 10% / 26% 26% 8% 8%;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.16) 0%, rgba(255,255,255,0.3) 32%, rgba(255,255,255,0.3) 68%, rgba(0,0,0,0.16) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
  border: 3px solid transparent;
  overflow: hidden;
  transition: background-color 0.15s, border-color 0.15s, filter 0.15s;
  /* El propio tanque (fondo/silueta) NO gira ni se mueve — se queda
     quieto, fijo en su sitio; lo único que se anima con GSAP
     (transiciones.js) es el número de dentro (.deposito-numero).
     overflow:hidden para que, mientras el número se desplaza hacia una
     pared, no sobresalga del dibujo del tanque. */
}
/* Número de dentro del tanque: es el único elemento que se anima con
   GSAP al cargar Fermentación (ver animarGiroDepositos en
   transiciones.js) — no gira sobre sí mismo, se desplaza en horizontal
   (translateX) como si estuviera pintado en la superficie de un cilindro
   que gira detrás del tanque: se corre hacia la pared derecha
   comprimiéndose (scaleX) y oscureciéndose (filter: brightness, la
   sombra) hasta desaparecer del todo, y vuelve a aparecer igual de
   comprimido y oscuro pegado a la pared izquierda, deslizándose desde
   ahí hasta el centro mientras recupera su ancho y brillo normales. */
.deposito-numero {
  display: inline-block;
}
/* Color según ESTADO del depósito (Llenando/Fermentación/Vaciando), no
   según nivel de llenado — los depósitos nunca llegan a llenarse del todo
   de verdad, así que un color basado en volumen vs. capacidad casi nunca
   llegaba a mostrar el rojo. Ahora el color se marca a mano: amarillo
   Llenando, rojo Fermentación, azul Vaciando — EXCEPTO si el depósito está
   vacío (sin volumen registrado), que manda por encima de todo lo demás y
   se pinta en verde, sea cual sea el estado marcado. background-color (no
   "background") para no pisar el degradado de curvatura de arriba. */
.deposito-tanque.estado-vacio { background-color: #dcfce7; color: #15803d; }
.deposito-tanque.estado-llenando { background-color: #fef9c3; color: #92400e; }
.deposito-tanque.estado-fermentacion { background-color: #fee2e2; color: #b91c1c; }
.deposito-tanque.estado-vaciando { background-color: #dbeafe; color: #1d4ed8; }
/* Terminado (naranja): fermentación acabada, depósito listo para gastarse
   en fábrica — quinto estado, se marca a mano igual que los otros cuatro. */
.deposito-tanque.estado-terminado { background-color: #ffedd5; color: #9a3412; }
.deposito-item-link:hover .deposito-tanque { filter: brightness(0.94); }
/* Depósito seleccionado: antes se marcaba con relleno sólido azul, pero
   eso taparía el color de estado — ahora es un borde alrededor (color de
   marca, --azul pese al nombre es el granate de Castelló), dejando ver el
   verde/amarillo/rojo/azul por debajo. */
.deposito-tanque.deposito-seleccionado { border-color: var(--azul); }
.deposito-volumen { font-size: 0.7rem; color: var(--gris); }

/* Desplegable de estado: pequeño, coloreado con el mismo par que el icono,
   así se ve de un vistazo qué estado tiene marcado cada uno sin leer el
   texto. Se usa en dos sitios: bajo cada depósito del selector de arriba
   (para que quepan los 16 en fila) y en la columna "Estado 8:00" de la
   tabla de Control y Seguimiento Depósitos, fila a fila (para corregir el
   estado de un día concreto, no solo el de hoy). Nunca ofrece "vacío"
   como opción — esa es una lectura automática del volumen, no un estado
   que se pueda elegir a mano. */
.estado-select-mini {
  width: 62px;
  font-size: 0.6rem;
  padding: 0.12rem 0.2rem;
  border-radius: 5px;
  border: 1.2px solid var(--borde);
  font-weight: 600;
  text-align: center;
}
.estado-select-mini.estado-select-vacio { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.estado-select-mini.estado-select-llenando { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.estado-select-mini.estado-select-fermentacion { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.estado-select-mini.estado-select-vaciando { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.estado-select-mini.estado-select-terminado { background: #ffedd5; color: #9a3412; border-color: #fdba74; }

/* ====================================================== MÓVIL / RESPONSIVE === */

/* Evitar que ningún elemento amplíe el ancho de la página */
html { max-width: 100%; }
.layout, .main { min-width: 0; }

/* Barra superior (solo visible en móvil) */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 54px;
  background: #0d0605;
  color: #e5e7eb;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 150;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.mobile-brand { font-weight: 700; font-size: 1.05rem; color: #fff; letter-spacing: 0.01em; display: flex; align-items: center; }
.mobile-brand img { height: 22px; display: block; }
.mobile-topbar-right { display: flex; align-items: center; gap: 0.75rem; }
.mobile-user { font-size: 0.8rem; color: #9ca3af; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hamburger {
  background: none; border: none; color: #fff;
  font-size: 1.45rem; cursor: pointer;
  padding: 0.3rem 0.45rem; border-radius: 6px; line-height: 1;
}
.hamburger:hover { background: var(--azul); }

/* Fondo oscuro detrás del menú */
.nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 140;
}
.nav-backdrop.visible { display: block; }

@media (max-width: 768px) {
  /* Mostrar topbar, ocultar sidebar en reposo */
  .mobile-topbar { display: flex; }

  .layout {
    display: block;
    padding-top: 54px; /* espacio para la topbar fija */
  }

  /* Sidebar pasa a ser panel deslizante desde la izquierda (se sobrescribe
     aquí el position:sticky/height:100vh/align-self de escritorio, porque
     en móvil el sidebar necesita top+bottom fijos, no una altura fija) */
  .sidebar {
    position: fixed;
    top: 54px; left: 0; bottom: 0;
    height: auto;
    align-self: auto;
    width: 270px;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    z-index: 145;
    overflow-y: auto;
    padding-top: 0.5rem;
  }
  .sidebar.nav-open { transform: translateX(0); }

  /* Contenido principal ocupa todo el ancho */
  .main {
    padding: 1rem;
    max-width: 100%;
  }

  /* Tablas con scroll horizontal — aplica a TODAS las tablas (también dentro de cards) */
  .main table,
  .card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* El contenido de las celdas sí puede romper línea (salvo las cabeceras) */
  .main table td,
  .card table td {
    white-space: normal;
    min-width: 60px;
  }

  /* Botones más grandes (zona de toque de al menos 44px) */
  .btn { padding: 0.65rem 1.1rem; font-size: 0.95rem; }
  .btn-sm { padding: 0.5rem 0.85rem; font-size: 0.85rem; }

  /* Filas de formulario apiladas */
  .form-row { flex-direction: column; gap: 0; }

  /* Filtros en columnas más manejables */
  .filters { gap: 0.45rem; }
  form .filters select,
  form .filters input,
  .filters select,
  .filters input { font-size: 0.9rem; padding: 0.5rem 0.6rem; min-width: 110px; }

  /* Topbar de páginas (título + botón) */
  .topbar { gap: 0.5rem; }
  .topbar h1 { font-size: 1.2rem; }

  /* Grids se vuelven una sola columna */
  .grid-4,
  .grid-3,
  .grid-2 { grid-template-columns: 1fr; }

  /* Detalle: una sola columna — !important para anular inline styles */
  .detail-grid { grid-template-columns: 1fr !important; }

  /* Flex containers que pueden desbordarse */
  .form-row { flex-wrap: wrap; }
  .topbar { flex-wrap: wrap; }

  /* Filtros con inputs de ancho fijo: no superar el ancho disponible */
  input[type="text"][style*="width"] { max-width: 100%; width: 100% !important; }
  input[type="number"][style*="width"] { max-width: 120px; }

  /* Calendario */
  .calendario-grid { grid-template-columns: repeat(7, minmax(42px, 1fr)); }
  .calendario-dia { min-height: 64px; padding: 0.25rem; }
  .calendario-chip { font-size: 0.65rem; }

  /* Almacén */
  .almacen-cards { grid-template-columns: 1fr; }

  /* Stats del dashboard: 2 columnas en móvil */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Impresión (botón "Imprimir" de Difusores y, en general, cualquier
   pantalla): se oculta el menú/topbar/flashes y todo lo marcado como
   .no-imprimir (selector de fecha, cabecera de la página, botones,
   calendario...), dejando solo el contenido a rellenar. .solo-imprimir es
   lo contrario: invisible en pantalla, solo aparece en el papel/PDF (queda
   definida como utilidad genérica aunque de momento ninguna plantilla la
   use). En Difusores además se fuerza horizontal (una sola página) y se
   quita el aspecto de "recuadro" de los campos: en papel basta con el
   número, no hace falta que parezca un input rellenable. */
.solo-imprimir { display: none; }
@page { size: landscape; margin: 10mm; }
@media print {
  .mobile-topbar, .nav-backdrop, .sidebar, .flash, .no-imprimir {
    display: none !important;
  }
  .solo-imprimir { display: inline; }
  .layout { display: block; }
  .main { padding: 0; max-width: none; }
  body { background: white; }
  a { color: inherit; text-decoration: none; }

  .difusores-grupo { margin-bottom: 0.6rem !important; }
  .difusores-grupo h2 { margin: 0 0 0.25rem !important; font-size: 0.8rem !important; }
  .difusores-tabla { font-size: 0.7rem !important; }
  .difusores-tabla th, .difusores-tabla td { padding: 0.15rem 0.3rem !important; }

  /* La tabla de horas (13 columnas) es la que se salía de la página. Ya se
     probó fijar el ancho vía las celdas de cabecera con colspan=4 (que en
     table-layout:fixed deberían repartir su ancho entre las 4 columnas que
     abarcan) pero Chrome, al imprimir, no lo estaba respetando — con datos
     reales seguía saliendo igual que sin ninguna de estas reglas. En su
     lugar se fija el ancho por <col> (ver el <colgroup> en
     templates/difusores.html), la forma más directa de table-layout:fixed
     y la misma que ya se usa — y funciona — en Entradas de Laboratorio
     (clase tabla-fija). */
  .difusores-tabla-horas {
    table-layout: fixed !important;
    width: auto !important;
    font-size: 0.62rem !important;
  }
  .difusores-tabla-horas col.difusores-col-etiqueta { width: 190px !important; }
  .difusores-tabla-horas col.difusores-col-dato { width: 49px !important; } /* +3% sobre 48px, a petición */

  .difusores-grupo input[type="text"] {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    min-width: 2.5em;
  }

  /* CAUSA REAL de que las columnas de la tabla de horas no se viesen más
     estrechas en el papel/PDF pese a fijar el ancho del <col> (probado en
     v2 con las celdas de cabecera y en v9 con colgroup: NINGUNO cambiaba
     nada visualmente): el problema nunca estuvo en la columna/celda, sino
     en el <input> de dentro. La regla de arriba (.difusores-grupo
     input[type="text"]) le pone width:auto !important — pero "auto" en un
     <input type="text"> NO significa "ajustarse al contenido/celda", sino
     "usar el ancho por defecto del navegador" (el que corresponde a
     size=20, unos 170-190px), que es MÁS ANCHO que la celda de 48px fijada
     por el <col>. Como el desbordamiento de un input no ensancha la
     columna (table-layout:fixed la deja en 48px) sino que se sale
     visualmente de su celda tapando las de al lado, en el papel se veía
     igual que si la columna nunca se hubiera estrechado. Aquí, específico
     para esta tabla y con selector más fuerte que la regla genérica de
     arriba (así gana sin depender del orden), se fuerza el input a ocupar
     el 100% de SU celda (ya fija en 48px) en vez de "auto". */
  table.difusores-tabla-horas input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}