/*
  PELECHROMEIA 2.0 — hoja única.
  Identidad elegida por el usuario el 2026-10-09 (DECISION_LOG): propuesta «C · Crema de marca» con la grilla de
  máquinas de «B», y SIN tema oscuro. Colores y fuente del sitio pelegrinaenvases.com.
  La CSP no permite estilos en línea: todo el aspecto vive acá.
*/
:root {
  /* marca */
  --crema: #F0F5E1;
  --rojo: #E62C20;
  --rojo-osc: #B81C12;      /* barra, botones y enlaces: con blanco o sobre blanco pasa 4.5:1 */
  --rojo-hover: #8E140C;
  --rojo-suave: #FDECEA;
  --tinta: #16181C;
  --tinta-2: #464C55;
  --papel: #FFFFFF;
  --borde: #E2E5EA;
  --linea: #E8ECDC;
  /* estados: además del color, cada uno lleva texto o forma (no se distinguen solo por el tono) */
  --ok: #2E8B5A;
  --ok-fondo: #E6F4EC;
  --ok-texto: #1F6B45;
  --aviso: #D98A00;
  --aviso-fondo: #FFF3DC;
  --aviso-texto: #8A4B00;
  --mal: #C41F14;
  --mal-fondo: #FDECEA;
  --mal-texto: #B81C12;
  --sin-dato: #8A9099;
  --sombra: 0 2px 4px rgba(20, 24, 29, .06), 0 8px 24px rgba(20, 24, 29, .08);
  --radio: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--crema);
  color: var(--tinta);
}

a { color: var(--rojo-osc); }
a:hover { color: var(--rojo-hover); }

h1 { margin: 0 0 0.5rem; font-size: 1.75rem; line-height: 1.2; }
h2 { margin: 1.5rem 0 0.75rem; font-size: 1.15rem; }

/* ---------- barra de la marca ---------- */

.barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
  padding: 0.6rem 1.25rem;
  background: var(--rojo-osc);
  color: #fff;
}

.marca { display: flex; align-items: center; gap: 0.75rem; color: #fff; text-decoration: none; }
.marca:hover { color: #fff; }

.marca-sello {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--crema);
}

.marca-sello img { display: block; width: 38px; height: auto; }

.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong { font-size: 1.1rem; letter-spacing: 0.04em; }
.marca-texto small { font-size: 0.75rem; color: #FFE3E0; }

.salir { display: flex; gap: 0.75rem; align-items: center; margin: 0 0 0 auto; }
.salir a { color: #fff; font-weight: 600; text-decoration: none; }
.salir a:hover { color: #FFE3E0; text-decoration: underline; }
.salir button {
  margin: 0;
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  color: var(--rojo-osc);
  background: #fff;
  border-radius: 999px;
}
.salir button:hover { background: var(--crema); }

/* ---------- menú agrupado (sin JavaScript: <details>) ---------- */

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.4rem 1rem;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  position: relative;
  z-index: 5;
}

.menu-enlace {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: 999px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.menu-enlace::-webkit-details-marker { display: none; }
.menu-enlace:hover { background: var(--crema); color: var(--tinta); }
.menu-enlace.activo { background: var(--rojo-suave); color: var(--rojo-osc); }
.menu-enlace .icono { width: 18px; height: 18px; }

.menu-grupo { position: relative; }
.menu-grupo[open] > .menu-enlace { background: var(--crema); }

.menu-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: var(--sombra);
}

.menu-lista a {
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  color: var(--tinta);
  text-decoration: none;
}
.menu-lista a:hover { background: var(--crema); }

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

main { max-width: 1280px; margin: 0 auto; padding: 1.25rem; }

.tarjeta {
  max-width: 48rem;
  margin: 1.25rem auto;
  padding: 1.5rem;
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta.angosta { max-width: 26rem; }
.tarjeta.ancha { max-width: none; }

.titulo-acciones { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.nota { color: var(--tinta-2); font-size: 0.92rem; }

.aviso { padding: 0.75rem 1rem; background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: 10px; }
.ok { padding: 0.75rem 1rem; background: var(--ok-fondo); color: var(--ok-texto); border-radius: 10px; }

/* ---------- formularios ---------- */

label { display: block; margin: 0.75rem 0 0.25rem; font-weight: 600; }

input, select {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: inherit;
  background: var(--papel);
  border: 1px solid #CDD2BF;
  border-radius: 10px;
}
input:focus, select:focus { outline: 3px solid rgba(230, 44, 32, .25); border-color: var(--rojo-osc); }

button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--rojo-osc);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .boton:hover { background: var(--rojo-hover); color: #fff; }

button.secundario { background: transparent; color: var(--rojo-osc); border: 1px solid var(--rojo-osc); }
button.secundario:hover { background: var(--rojo-suave); color: var(--rojo-osc); }
button.peligro { background: #7A1A12; }

.check { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; }
.check input { width: auto; min-height: 0; }

.en-linea { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.en-linea input, .en-linea select { width: auto; flex: 1 1 12rem; }
.en-linea button { margin-top: 0; }

.acciones { display: grid; gap: 0.75rem; }
.acciones form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.acciones input { width: auto; flex: 1 1 14rem; }
.acciones button { margin-top: 0; }

.filtros {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--crema);
  border-radius: 12px;
}
.filtros label { margin: 0; font-weight: 600; font-size: 0.9rem; }
.filtros input, .filtros select { width: auto; }
.filtros button { margin-top: 0; }

.codigo { font: 700 2rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.15em; margin: 0.5rem 0; }

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

table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { color: var(--tinta-2); font-weight: 600; font-size: 0.85rem; background: #F7F9EF; }
tbody tr:hover td { background: #FAFBF5; }
tr.resaltar td { background: var(--aviso-fondo); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Un movimiento excluido se ve, pero tachado: no suma en el saldo. */
tr.tachado td { color: var(--tinta-2); text-decoration: line-through; }
tr.tachado td:last-child { text-decoration: none; }

/* ---------- etiquetas ---------- */

.bandera {
  display: inline-block;
  margin: 0 0.25rem 0.15rem 0;
  padding: 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--aviso-texto);
  background: var(--aviso-fondo);
  border-radius: 6px;
  cursor: help;
}

.chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tinta-2);
  background: var(--linea);
  border-radius: 999px;
}

.estado-activa { color: var(--ok-texto); background: var(--ok-fondo); }
.estado-pendienteenrolar, .estado-suspendida, .estado-bloqueada { color: var(--aviso-texto); background: var(--aviso-fondo); }
.estado-baja { color: var(--tinta-2); background: var(--linea); }

/* ---------- inicio ---------- */

.inicio-cabeza { margin: 0.5rem 0 1rem; }
.inicio-cabeza h1 { font-size: 1.9rem; }

.grupo-inicio h2 { display: flex; align-items: center; gap: 0.5rem; color: var(--tinta-2); }
.grupo-inicio h2 .icono { width: 20px; height: 20px; color: var(--rojo-osc); }

.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }

.acceso {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 76px;
  padding: 1rem 1.1rem;
  color: var(--tinta);
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-decoration: none;
}
.acceso:hover { color: var(--tinta); outline: 2px solid var(--rojo-osc); }

.acceso-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  color: var(--rojo-osc);
  background: var(--rojo-suave);
}

.acceso-texto { display: flex; flex-direction: column; }
.acceso-texto strong { font-size: 1rem; }
.acceso-texto small { font-size: 0.82rem; color: var(--tinta-2); }

/* ---------- resumen de ayer (inicio) ---------- */

.resumen { margin: 0.5rem 0 1.5rem; }

.resumen-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.resumen-cabeza h2 { margin: 0.5rem 0; font-size: 1.3rem; }
.resumen-cabeza h2::first-letter { text-transform: uppercase; }

.sectores { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.9rem; margin-bottom: 0.9rem; }

.sector-dia {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.sector-dia h3 { margin: 0; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }

.producciones, .motivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.producciones li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.5rem; }
.producciones li small { width: 100%; text-align: right; }
.motivos { padding-top: 0.5rem; border-top: 1px solid var(--linea); font-size: 0.9rem; color: var(--tinta-2); }
.motivos li { display: flex; justify-content: space-between; gap: 0.5rem; }
.motivos li.no-planificada { color: var(--mal-texto); font-weight: 600; }

/* Semáforo: texto en tono oscuro (legible sobre blanco), relleno y punto en tono pleno. Además del color, cada estado lleva
   una palabra (Habitual / Atención / Fuera de lo habitual / Sin historia): no se distingue solo por el tono. */
.verde { color: var(--ok-texto); }
.amarillo { color: var(--aviso-texto); }
.rojo { color: var(--mal-texto); }
.gris { color: var(--tinta-2); }

.medidor { display: block; height: 10px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.medidor.fina { height: 6px; }
.relleno { display: block; height: 100%; border-radius: 999px; }
.relleno.verde { background: var(--ok); }
.relleno.amarillo { background: var(--aviso); }
.relleno.rojo { background: var(--mal); }
.relleno.gris { background: #B9BEC6; }

.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; flex: none; }
.punto.verde { background: var(--ok); }
.punto.amarillo { background: var(--aviso); }
.punto.rojo { background: var(--mal); border-radius: 2px; }
.punto.gris { background: transparent; border: 2px solid var(--sin-dato); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.9rem; margin: 0.25rem 0 1rem; }

.kpi {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1.1rem;
  background: var(--papel);
  border-radius: 14px;
  box-shadow: var(--sombra);
}
.kpi-nombre { font-size: 0.85rem; color: var(--tinta-2); }
.kpi-valor { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.kpi-valor.gris { color: var(--tinta); }
.kpi-estado { font-size: 0.82rem; font-weight: 600; }

.sector-dia h3 .punto { margin-right: 0.5rem; }
.sector-dia h3 { justify-content: flex-start; }

.chip-kpi { margin-left: auto; font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 0.15rem 0.6rem; }
.chip-kpi.verde { background: var(--ok-fondo); }
.chip-kpi.amarillo { background: var(--aviso-fondo); }
.chip-kpi.rojo { background: var(--mal-fondo); }
.chip-kpi.gris { background: var(--linea); }

.linea-kpi { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.linea-kpi.paro { padding-top: 0.5rem; border-top: 1px solid var(--linea); }
.producciones li { flex-direction: column; gap: 0.2rem; }
.producciones li small { text-align: left; width: auto; }

.fuera-de-rango { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.82rem; color: var(--mal-texto); }
.descartado { font-size: 0.78rem; color: var(--tinta-2); }
.descartado a { font-weight: 600; }

.leyenda-semaforo { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: center; margin-top: 0.9rem; font-size: 0.85rem; }
.leyenda-semaforo .nota { width: 100%; }

.horas-leyenda { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; color: var(--tinta-2); margin-top: 0.3rem; }
.horas-leyenda strong { color: var(--tinta); }

/* Ancho de la barra en pasos de 5 %: la CSP no permite style="width:…" en línea. */
.w0 { width: 0; } .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; }
.w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; }
.w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; }
.w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }

.avisos-dia {
  padding: 1rem 1.1rem;
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.avisos-dia h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }

.aviso-fila { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--linea); }
.aviso-texto { flex: 1; }

.etiqueta { flex: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; border-radius: 6px; padding: 0.15rem 0.45rem; }
.etiqueta.urgente { color: #fff; background: var(--rojo-osc); }
.etiqueta.revisar { color: var(--tinta); background: #FFD98A; }
.etiqueta.datos { color: var(--tinta-2); background: var(--linea); }

.avisos-dia > a { display: inline-block; margin-top: 0.75rem; font-weight: 600; }

/* ---------- grilla de máquinas (de la propuesta B, en claro) ---------- */

.maquinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.6rem; }

.maquina {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem;
  border-radius: 10px;
  color: var(--tinta);
  text-decoration: none;
  border: 1px solid transparent;
}
.maquina strong { font-size: 1.1rem; }
.maquina small { font-size: 0.78rem; font-weight: 600; }
.maquina.produce { background: var(--ok-fondo); border-color: #9CCDB2; }
.maquina.produce small { color: var(--ok-texto); }
.maquina.lenta { background: var(--aviso-fondo); border-color: #E8C277; }
.maquina.lenta small { color: var(--aviso-texto); }
.maquina.detenida { background: var(--mal-fondo); border: 2px solid var(--mal); }
.maquina.detenida small { color: var(--mal-texto); }
.maquina.sin-plan { background: #F7F8F3; border: 2px dashed #B9BEC6; color: var(--tinta-2); }
/* Rendimiento contra el objetivo: verde = produce, amarillo = lenta, rojo = baja; sin estándar, blanca sin color. */
.maquina.baja { background: var(--mal-fondo); border: 2px solid var(--mal); }
.maquina.baja small { color: var(--mal-texto); }
.maquina.sin-estandar { background: var(--papel); border-color: var(--borde); }
.maquina.sin-estandar small { color: var(--tinta-2); font-weight: 500; }

.grilla-dia { background: var(--papel); border-radius: var(--radio); padding: 1rem 1.1rem; margin-bottom: 0.9rem; box-shadow: var(--sombra); }
.grilla-dia h3 { margin: 0.25rem 0 0.6rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.grilla-dia h4 { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--tinta-2); font-weight: 600; }
/* Los procesos van uno al lado del otro; cada casillero tiene ancho fijo para que un sector entre de un vistazo. */
.grilla-ops { display: flex; flex-wrap: wrap; gap: 0.9rem 1.6rem; align-items: flex-start; }
.grilla-op { max-width: 100%; }
.grilla-op .maquinas { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.grilla-op .maquina { width: 4.6rem; padding: 0.45rem 0.55rem; }

/* ---------- celular ---------- */

@media (max-width: 640px) {
  table { display: block; overflow-x: auto; }
  .barra { padding: 0.5rem 0.9rem; }
  .marca-texto small { display: none; }
  .salir a { display: none; }
  .menu { padding: 0.35rem 0.5rem; }
  .menu-lista { position: fixed; top: auto; left: 0.5rem; right: 0.5rem; min-width: 0; }
  main { padding: 0.9rem; }
  .tarjeta { padding: 1.1rem; }
}

/* ---------- salud de los datos: cada control se despliega ---------- */
details.sector-dia { margin-bottom: 0.6rem; }
details.sector-dia > summary { cursor: pointer; list-style: none; line-height: 1.6; }
details.sector-dia > summary::-webkit-details-marker { display: none; }
details.sector-dia > summary .chip-kpi { margin-left: 0.5rem; }