/* ==========================================================================
   SIGO 2.0 — Industrial SaaS
   Sistema visual global. Un solo archivo para los 4 módulos (Mantto, Comex,
   SGC, Solicitudes) — evita el CSS duplicado que tenía cada página.

   IMPORTANTE: los nombres de variables y clases antiguos (--navy, --steel,
   .card, .badge, .sem, table/th/td, form.f, button, .modal, etc.) se
   mantienen a propósito: son los que usan hoy los render*() de cada módulo.
   Redefinirlos aquí (en vez de renombrarlos en cada archivo .js) es lo que
   propaga el rediseño a todo el sistema sin tocar lógica de negocio.
   ========================================================================== */

:root{
  /* Paleta SIGO 2.0 */
  --verde-principal:#173D2A;
  --verde-principal-d:#0F2A1C;
  --verde-secundario:#2F6B4F;
  --verde-suave:#EAF4EE;
  --color-bg:#F7F8FA;
  --color-card:#FFFFFF;
  --color-text:#18221D;
  --color-text-sub:#66736C;
  --color-border:#E5E9E7;
  --color-success:#22A06B;
  --color-success-bg:#E9F7F1;
  --color-warning:#E9A23B;
  --color-warning-bg:#FDF3E3;
  --color-critical:#D64545;
  --color-critical-bg:#FBEAEA;
  --color-info:#3478F6;
  --color-info-bg:#EAF1FE;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(24,34,29,.06);
  --shadow-md:0 4px 16px rgba(24,34,29,.08);
  --transition-fast:150ms ease;
  --transition-base:200ms ease;

  --sidebar-w:252px;
  --sidebar-w-collapsed:68px;
  --header-h:64px;

  /* ---- Alias de compatibilidad: nombres usados por los render*() actuales ---- */
  --navy: var(--verde-principal);
  --navy-d: var(--verde-principal-d);
  --steel: var(--verde-secundario);
  --accent: var(--verde-secundario);
  --bg: var(--color-bg);
  --card: var(--color-card);
  --line: var(--color-border);
  --text: var(--color-text);
  --sub: var(--color-text-sub);
  --green: var(--color-success);
  --green-bg: var(--color-success-bg);
  --amber: var(--color-warning);
  --amber-bg: var(--color-warning-bg);
  --red: var(--color-critical);
  --red-bg: var(--color-critical-bg);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--verde-suave); color:var(--verde-principal); }
a{ color:var(--verde-secundario); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#d3dad6; border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ==========================================================================
   1. SHELL — sidebar + header + contenido
   ========================================================================== */
.sigo-shell{ display:flex; min-height:100vh; }

.sigo-sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:linear-gradient(180deg,var(--verde-principal) 0%,var(--verde-principal-d) 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  transition:width var(--transition-base), transform var(--transition-base);
  z-index:30;
}
.sigo-sidebar.is-collapsed{ width:var(--sidebar-w-collapsed); }

.sigo-sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:18px 16px;
  min-height:var(--header-h);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sigo-sidebar-logo{ height:28px; width:auto; object-fit:contain; flex-shrink:0; border-radius:4px; }
/* "SIGO" es el nombre del sistema y el elemento principal de la marca — el
   logo de la empresa (arriba) queda como sello de quién lo opera, más chico.
   El borde a la izquierda separa visualmente ambos, sin agregar otro elemento
   al HTML de cada módulo. */
.sigo-sidebar-brand-text{
  display:flex; flex-direction:column; justify-content:center; line-height:1.2; overflow:hidden; white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.2); padding-left:12px; margin-left:2px;
}
.sigo-sidebar-brand-text strong{ font-size:26px; font-weight:800; letter-spacing:.4px; }
.sigo-sidebar-brand-text span{ font-size:11px; color:rgba(255,255,255,.55); margin-top:1px; }
.sigo-sidebar.is-collapsed .sigo-sidebar-brand-text{ display:none; }
.sigo-sidebar.is-collapsed .sigo-sidebar-brand{ padding:18px 0; justify-content:center; }
.sigo-sidebar.is-collapsed .sigo-sidebar-logo{ display:none; }
.sigo-sidebar-collapse{
  margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.85);
  width:26px; height:26px; border-radius:7px; font-size:13px; padding:0; cursor:pointer; flex-shrink:0;
}
.sigo-sidebar-collapse:hover{ background:rgba(255,255,255,.12); }
.sigo-sidebar.is-collapsed .sigo-sidebar-collapse{ margin-left:0; }

.sigo-sidebar-nav{ padding:14px 10px; flex:1; }

.sigo-sidebar-footer{ padding:10px; border-top:1px solid rgba(255,255,255,.12); flex-shrink:0; }
.sigo-user-chip{
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:var(--radius-sm); cursor:pointer;
  background:transparent; border:none; width:100%; text-align:left;
  transition:background var(--transition-fast);
}
.sigo-user-chip:hover{ background:rgba(255,255,255,.08); }
.sigo-user-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover;
  background:var(--verde-secundario); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; letter-spacing:.3px;
}
.sigo-user-chip-text{ min-width:0; overflow:hidden; flex:1; }
.sigo-user-chip-name{ font-size:12.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sigo-user-chip-role{ font-size:11px; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sigo-sidebar.is-collapsed .sigo-user-chip-text{ display:none; }
.sigo-sidebar.is-collapsed .sigo-user-chip{ justify-content:center; padding:8px 0; }

.sigo-avatar-lg{
  width:84px; height:84px; border-radius:50%; object-fit:cover; margin:0 auto;
  background:var(--verde-secundario); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:700;
}
.sigo-nav-group{ margin-bottom:22px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); }
.sigo-nav-group:first-child{ margin-top:0; padding-top:0; border-top:none; }
/* Antes iba en MAYÚSCULAS fijas y muy marcado (font-weight:800) — se ve más
   moderno y discreto en formato Oración ("Módulos", no "MÓDULOS"), como un
   subtítulo de sección en vez de gritar por atención. */
.sigo-nav-group-label{
  font-size:11.5px; font-weight:600; letter-spacing:.2px;
  color:rgba(255,255,255,.5); padding:0 10px 8px;
  white-space:nowrap; overflow:hidden;
}
.sigo-sidebar.is-collapsed .sigo-nav-group-label{ opacity:0; height:0; padding:0; margin:0; }

.sigo-nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 10px; margin-bottom:2px;
  border-radius:var(--radius-sm);
  color:rgba(255,255,255,.75);
  font-size:13.5px; font-weight:500;
  cursor:pointer; user-select:none; white-space:nowrap; overflow:hidden;
  transition:background var(--transition-fast), color var(--transition-fast);
  text-decoration:none;
}
.sigo-nav-item .ic{ width:16px; height:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; opacity:.9; }
.sigo-nav-item .ic svg{ width:16px; height:16px; display:block; }
.sigo-nav-item .lbl{ overflow:hidden; text-overflow:ellipsis; }
.sigo-nav-item:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sigo-nav-item.active{ background:rgba(255,255,255,.14); color:#fff; font-weight:700; box-shadow:inset 3px 0 0 #fff; }
.sigo-sidebar.is-collapsed .sigo-nav-item{ justify-content:center; padding:9px 0; }
.sigo-sidebar.is-collapsed .sigo-nav-item .lbl{ display:none; }

.sigo-backdrop{ display:none; }

.sigo-shell-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.sigo-header{
  height:var(--header-h);
  background:var(--color-card);
  border-bottom:1px solid var(--color-border);
  display:flex; align-items:center; gap:14px;
  padding:0 22px;
  position:sticky; top:0; z-index:20;
}
.sigo-header-toggle{
  display:none;
  background:transparent; border:1px solid var(--color-border); border-radius:var(--radius-sm);
  width:34px; height:34px; font-size:16px; cursor:pointer; color:var(--color-text);
  flex-shrink:0;
}
.sigo-header-title{ min-width:0; }
/* Inicio / <Módulo> / <Pantalla> — ubica dónde está parado sin repetir el
   nombre del módulo que ya se ve más abajo, en el subtítulo. */
.sigo-breadcrumb{ font-size:11.5px; color:var(--color-text-sub); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sigo-header-title h1{
  font-size:21px; font-weight:800; margin:0; color:var(--color-text); line-height:1.3; letter-spacing:-.2px;
  display:flex; align-items:center; gap:8px;
}
.sigo-header-icon{ display:flex; flex-shrink:0; color:var(--verde-secundario); }
.sigo-header-icon svg{ width:19px; height:19px; }
.sigo-header-title .sigo-header-sub{ font-size:12px; color:var(--color-text-sub); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sigo-header-user{ margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12.5px; flex-shrink:0; }

.sigo-content{ padding:22px; flex:1; min-width:0; }

.sigo-impersonation-banner{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  background:var(--amber-bg); color:#7a4b00;
  border-bottom:1px solid var(--amber);
  padding:8px 16px; font-size:12.5px; font-weight:600; text-align:center;
}
.sigo-impersonation-banner button{
  background:#7a4b00; color:#fff; border:none; border-radius:6px;
  padding:4px 10px; font-size:12px; font-weight:700; cursor:pointer; flex-shrink:0;
}
body.sigo-impersonating .sigo-header{ top:var(--sigo-banner-h, 38px); }
body.sigo-impersonating .sigo-sidebar{ top:var(--sigo-banner-h, 38px); height:calc(100vh - var(--sigo-banner-h, 38px)); }

@media (max-width:900px){
  .sigo-sidebar{
    position:fixed; left:0; top:0; height:100vh; transform:translateX(-100%);
    width:270px; box-shadow:var(--shadow-md);
  }
  .sigo-sidebar.is-open{ transform:translateX(0); }
  .sigo-sidebar.is-collapsed{ width:270px; }
  .sigo-sidebar.is-collapsed .sigo-sidebar-brand-text,
  .sigo-sidebar.is-collapsed .sigo-nav-group-label,
  .sigo-sidebar.is-collapsed .sigo-nav-item .lbl{ display:block; opacity:1; height:auto; padding:inherit; }
  .sigo-sidebar-collapse{ display:none; }
  .sigo-header-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .sigo-backdrop{
    display:none; position:fixed; inset:0; background:rgba(15,25,20,.45); z-index:25;
  }
  .sigo-backdrop.is-open{ display:block; }
  .sigo-content{ padding:16px; }
  .sigo-header{ padding:0 14px; }
}

/* ==========================================================================
   2. LAYOUT / GRID (compat)
   ========================================================================== */
/* min-width:0 en los hijos — por default una celda de grid NO se achica
   más allá del ancho natural de su contenido (min-width:auto implícito).
   Una tabla ancha adentro de una tarjeta empujaba así la tarjeta entera (y
   con ella toda la fila/página) más allá del ancho de pantalla en celular,
   en vez de dejar que el overflow-x:auto de la tabla hiciera su trabajo. */
.grid{display:grid;gap:14px;}
.grid > *{min-width:0;}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
.g6{grid-template-columns:repeat(6,1fr);}
@media(max-width:750px){.g4{grid-template-columns:repeat(2,1fr);}.g3{grid-template-columns:repeat(2,1fr);}.g2{grid-template-columns:1fr;}.g6{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.g4,.g3{grid-template-columns:1fr;}}
/* Planificación Semanal: el visor (día x cabina) necesita bastante más
   espacio que la lista de "por programar" — columna angosta fija para el
   pool, el resto para la grilla. */
.g-semanal{grid-template-columns:300px minmax(0,1fr);}
@media(max-width:900px){.g-semanal{grid-template-columns:1fr;}}
/* "Agregar producto" (Nueva Solicitud) trae su grid-template-columns fijo
   como estilo inline (necesita !important para pisarlo) — en celular, 6
   columnas angostas hacían el formulario inusable. */
@media(max-width:600px){.ns-agregar-producto{grid-template-columns:1fr 1fr !important;}}
@media(max-width:420px){.ns-agregar-producto{grid-template-columns:1fr !important;}}

h2.sec{
  font-size:16px; font-weight:800; color:var(--color-text);
  margin:26px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--color-border);
  text-transform:none; letter-spacing:-.1px;
}
h2.sec:first-child{ margin-top:0; }

/* ==========================================================================
   3. CARDS / KPI
   ========================================================================== */
.card{
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:16px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition-base), transform var(--transition-base);
}
.g4 > .card:hover, .g3 > .card:hover, .g2 > .card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }

.kpi-label{ font-size:11px; color:var(--color-text-sub); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; font-weight:600; }
.kpi-val{ font-size:24px; font-weight:800; color:var(--verde-principal); line-height:1.15; letter-spacing:-.2px; }
.kpi-sub{ font-size:11.5px; color:var(--color-text-sub); margin-top:4px; }

/* Tarjeta KPI con icono + tendencia (opcional, usada por dashboards nuevos) */
.kpi-card{
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:16px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px;
  transition:box-shadow var(--transition-base), transform var(--transition-base);
}
.kpi-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.kpi-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.kpi-card-top > *{ min-width:0; }
.kpi-card-icon{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:16px; background:var(--verde-suave); color:var(--verde-principal); flex-shrink:0;
}
.kpi-card-icon.info{ background:var(--color-info-bg); color:var(--color-info); }
.kpi-card-icon.warning{ background:var(--color-warning-bg); color:var(--color-warning); }
.kpi-card-icon.critical{ background:var(--color-critical-bg); color:var(--color-critical); }
.kpi-card-icon.success{ background:var(--color-success-bg); color:var(--color-success); }
.kpi-card-trend{ font-size:11px; font-weight:700; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.kpi-card-trend.up{ background:var(--color-success-bg); color:var(--color-success); }
.kpi-card-trend.down{ background:var(--color-critical-bg); color:var(--color-critical); }
.kpi-card-trend.flat{ background:#EEF1EF; color:var(--color-text-sub); }
.kpi-card-val{ font-size:26px; font-weight:800; color:var(--color-text); letter-spacing:-.3px; }
.kpi-card-label{ font-size:12.5px; color:var(--color-text-sub); font-weight:600; }
.kpi-tip-icon{ cursor:help; color:var(--color-text-sub); opacity:.6; font-size:11px; }
.kpi-tip-icon:hover{ opacity:1; color:var(--verde-principal); }
.kpi-card-desc{ font-size:11.5px; color:var(--color-text-sub); }

/* Semaforos (compat) — se mantienen por si algun modulo aun los usa */
.sem{border-radius:var(--radius-md);padding:13px 15px;color:#fff;font-weight:600;font-size:13px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-sm);}
.sem .n{font-size:21px;}
.sem-green{background:var(--color-success);} .sem-amber{background:var(--color-warning);} .sem-red{background:var(--color-critical);}

/* Franja horizontal de atención (chips), variante compacta del panel de
   abajo — usada en la cabecera del dashboard. */
.attn-chip{
  display:flex; align-items:center; gap:12px;
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:14px 16px; box-shadow:var(--shadow-sm); cursor:pointer; text-decoration:none; color:inherit;
  transition:box-shadow var(--transition-base), transform var(--transition-base);
}
.attn-chip:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.attn-chip-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.attn-chip-icon.critical{ background:var(--color-critical-bg); color:var(--color-critical); }
.attn-chip-icon.warning{ background:var(--color-warning-bg); color:var(--color-warning); }
.attn-chip-icon.success{ background:var(--color-success-bg); color:var(--color-success); }
.attn-chip-icon.info{ background:var(--color-info-bg); color:var(--color-info); }
.attn-chip-body{ flex:1; min-width:0; }
.attn-chip-val{ font-size:21px; font-weight:800; color:var(--color-text); line-height:1.1; }
.attn-chip-label{ font-size:12px; font-weight:700; color:var(--color-text); margin-top:2px; }
.attn-chip-sub{ font-size:11px; color:var(--color-text-sub); }
.attn-chip-chevron{ color:var(--color-text-sub); flex-shrink:0; }

/* Tarjeta de gráfico (línea/dona/barras) — mismo look que .card, con
   cabecera propia para el título del gráfico. */
.chart-card-title{ font-size:12.5px; font-weight:700; color:var(--color-text); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* ==========================================================================
   4. "REQUIERE TU ATENCIÓN" — lista de alertas accionables
   ========================================================================== */
.attn-panel{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden; }
.attn-list{ display:flex; flex-direction:column; }
.attn-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--color-border);
  cursor:pointer; text-decoration:none; color:inherit;
  transition:background var(--transition-fast);
}
.attn-item:last-child{ border-bottom:none; }
.attn-item:hover{ background:var(--color-bg); }
.attn-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.attn-dot.critical{ background:var(--color-critical); box-shadow:0 0 0 3px var(--color-critical-bg); }
.attn-dot.warning{ background:var(--color-warning); box-shadow:0 0 0 3px var(--color-warning-bg); }
.attn-dot.info{ background:var(--color-info); box-shadow:0 0 0 3px var(--color-info-bg); }
.attn-body{ flex:1; min-width:0; }
.attn-title{ font-size:13px; font-weight:600; color:var(--color-text); }
.attn-desc{ font-size:11.5px; color:var(--color-text-sub); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attn-count{
  font-size:11.5px; font-weight:700; color:var(--color-text); background:var(--color-bg);
  border:1px solid var(--color-border); border-radius:20px; padding:2px 9px; flex-shrink:0;
}
.attn-chevron{ color:var(--color-text-sub); font-size:13px; flex-shrink:0; }

/* ==========================================================================
   5. ACTIVIDAD RECIENTE
   ========================================================================== */
.activity-list{ display:flex; flex-direction:column; }
.activity-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--color-border);
  text-decoration:none; color:inherit; cursor:pointer;
  transition:background var(--transition-fast);
}
.activity-item:last-child{ border-bottom:none; }
.activity-item:hover{ background:var(--color-bg); }
.activity-icon{
  width:30px; height:30px; border-radius:8px; background:var(--verde-suave); color:var(--verde-principal);
  display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; margin-top:1px;
}
.activity-icon svg{ width:16px; height:16px; display:block; }
.activity-icon.critical{ background:var(--color-critical-bg); color:var(--color-critical); }
.activity-body{ flex:1; min-width:0; }
.activity-title{ font-size:12.5px; font-weight:700; color:var(--color-text); }
.activity-desc{ font-size:12px; color:var(--color-text-sub); margin-top:1px; }
.activity-time{ font-size:10.5px; color:var(--color-text-sub); flex-shrink:0; white-space:nowrap; margin-top:2px; }

/* ==========================================================================
   6. TABLAS
   ========================================================================== */
table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--color-card);}
th{background:#FAFBFA;text-align:left;padding:10px 12px;color:var(--color-text-sub);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--color-border);white-space:nowrap;}
td{padding:10px 12px;border-bottom:1px solid var(--color-border);vertical-align:top;}
tbody tr{ transition:background var(--transition-fast); }
tr:hover td{background:var(--color-bg);}
tbody tr:last-child td{ border-bottom:none; }
.tblwrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-card);box-shadow:var(--shadow-sm);}
.tblwrap table{ border-radius:var(--radius-md); overflow:hidden; }

/* Sobretiempos: casillas de la cuadrícula de marcado — con su propio borde
   para que se note claramente cuál está vacía y lista para marcar (antes
   era espacio en blanco casi invisible), resaltado al pasar el mouse, y el
   check centrado dentro de la casilla. Encabezado de grupo por área. */
.sob-celda{ cursor:pointer; text-align:center; vertical-align:middle; padding:4px 2px; border:1px solid var(--color-border); }
.sob-celda:hover{ background:var(--verde-suave) !important; }
.sob-celda.sob-marcada{ background:var(--verde-secundario) !important; color:#fff; font-weight:700; }
.sob-nombre-col{ padding-top:6px; padding-bottom:6px; }
/* Encabezado de grupo por área — reutilizado por Sobretiempos y Vacaciones
   para no repetir el mismo estilo de "banda verde" en cada tabla agrupada. */
.area-header td{
  background:var(--header-fill,#EFF3F0); color:var(--verde-secundario); font-weight:700;
  padding:7px 12px; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);
  position:sticky; left:0;
}

/* Vacaciones: buscador de trabajador con sugerencias, en vez de mostrar de
   una la lista completa del equipo — el dropdown flota sobre el contenido
   de abajo así no empuja el layout al aparecer/desaparecer. */
.vac-sugerencias{ position:absolute; left:18px; right:18px; top:66px; z-index:20; background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-md, 0 6px 16px rgba(0,0,0,.12)); max-height:260px; overflow-y:auto; }
.vac-sugerencias:empty{ border:none; box-shadow:none; }
.vac-sugerencia{ display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:9px 14px; cursor:pointer; border-bottom:1px solid var(--color-border); font-size:13px; }
.vac-sugerencia:last-child{ border-bottom:none; }
.vac-sugerencia:hover{ background:var(--verde-suave); }

/* Bono: cuadrícula de calificación — bordes completos en vez de solo
   líneas horizontales, celdas centradas verticalmente y con la misma
   altura aunque una tenga el texto de referencia de sobretiempo debajo
   del input, para que no se vea descuadrada. */
.bono-tabla th, .bono-tabla td{ border:1px solid var(--color-border); vertical-align:middle; }
.bono-tabla td{ padding:8px 10px; }
.bono-celda-puntaje{ text-align:center; }
.bono-puntaje-wrap{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; min-height:34px; justify-content:center; }
.bono-tabla .bono-puntaje{ width:56px; text-align:center; padding:6px 4px; }
.bono-ref{ color:var(--color-text-sub); font-size:10px; white-space:nowrap; }

/* ==========================================================================
   7. BADGES
   ========================================================================== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;}
.b-A{background:var(--color-critical-bg);color:var(--color-critical);} .b-B{background:var(--color-warning-bg);color:var(--color-warning);} .b-C{background:#EEF1EF;color:var(--color-text-sub);}
.b-ok{background:var(--color-success-bg);color:var(--color-success);} .b-warn{background:var(--color-warning-bg);color:var(--color-warning);} .b-bad{background:var(--color-critical-bg);color:var(--color-critical);}
.b-state{background:var(--color-info-bg);color:var(--color-info);}

/* ==========================================================================
   8. FORMULARIOS
   ========================================================================== */
form.f{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
form.f.wide{grid-template-columns:1fr;}
form.f .full{grid-column:1/-1;}
@media(max-width:600px){ form.f{ grid-template-columns:1fr; } }
label{font-size:11.5px;color:var(--color-text-sub);font-weight:600;display:block;margin-bottom:5px;}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:13px;font-family:inherit;background:#fff;color:var(--color-text);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--verde-secundario); box-shadow:0 0 0 3px var(--verde-suave); }
/* Un checkbox/radio no es un campo de texto — heredar width:100% de la
   regla de arriba lo estira para llenar toda la fila (el checkbox se
   vuelve una caja clicable gigante), empujando la etiqueta de al lado
   lejos hacia la derecha en vez de quedar pegada. */
input[type="checkbox"],input[type="radio"]{width:auto;padding:0;flex:none;}
textarea{resize:vertical;min-height:50px;}

/* ==========================================================================
   9. BOTONES
   ========================================================================== */
button{cursor:pointer;border:none;border-radius:var(--radius-sm);padding:8px 15px;font-size:12.5px;font-weight:600;background:var(--verde-principal);color:#fff;transition:background var(--transition-fast), transform var(--transition-fast);}
button:hover{background:var(--verde-principal-d);}
button:active{ transform:translateY(1px); }
button:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
button.sec{background:#fff;color:var(--verde-principal);border:1px solid var(--color-border);}
button.sec:hover{background:var(--color-bg);}
button.danger{background:var(--color-critical);}
button.danger:hover{ background:#B93838; }
button.ok{background:var(--color-success);}
button.ok:hover{ background:#1b8158; }
button.warn{background:var(--color-warning);}
button.warn:hover{ background:#cf8a2c; }

/* ==========================================================================
   10. VARIOS (compat)
   ========================================================================== */
.actions{display:flex;gap:8px;flex-wrap:wrap;}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.muted{color:var(--color-text-sub);font-size:12px;}
.empty{padding:36px 24px;text-align:center;color:var(--color-text-sub);font-size:13px;background:var(--color-card);border:1px dashed var(--color-border);border-radius:var(--radius-md);}
.rca-box{background:var(--color-warning-bg);border:1px solid #F0D9AD;border-radius:var(--radius-sm);padding:10px 12px;font-size:12px;color:#7a5410;margin-bottom:10px;}
.save-note{font-size:11px;color:var(--color-text-sub);}
.conn-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.conn-dot.ok{background:var(--color-success);}
.conn-dot.bad{background:var(--color-critical);}
.conn-dot.pending{background:var(--color-text-sub);}
.qr-box{display:flex;justify-content:center;margin:14px 0;}
#file-import,#pm-file-import{display:none;}
.part-row{display:grid;grid-template-columns:2fr 80px 32px;gap:6px;margin-bottom:6px;align-items:center;}
.step-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--color-border);font-size:13px;}
.step-row input[type=checkbox]{width:auto;}
.cost-pill{font-size:11px;color:var(--color-text-sub);}
.filterbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.filterbar select{width:auto;min-width:120px;}
.filterbar input[type="date"],.filterbar input[type="range"]{width:auto;}
.doclink{font-size:12px;}

/* ==========================================================================
   11. MODAL (compat)
   ========================================================================== */
.modal-bg{position:fixed;inset:0;background:rgba(15,25,20,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;overflow-y:auto;animation:sigo-fade-in var(--transition-base);}
.modal{background:#fff;border-radius:var(--radius-lg);padding:22px;max-width:440px;width:100%;text-align:center;margin:auto;box-shadow:var(--shadow-md);animation:sigo-pop-in var(--transition-base);}
.modal.wide{max-width:820px;text-align:left;}
.modal.xwide{max-width:1100px;text-align:left;}
/* Ficha de Solicitud: el encabezado (folio, botones de descarga, stepper)
   queda fijo arriba — solo el contenido de abajo (motivo, líneas,
   historial, panel de decisión) hace scroll, en vez de que todo el modal
   se desplace junto y el encabezado se pierda de vista al bajar. */
.modal.xwide:has(.ficha-modal-body){ display:flex; flex-direction:column; max-height:calc(100vh - 64px); padding-bottom:0; }
.ficha-modal-head{ flex-shrink:0; }
.ficha-modal-body{ flex:1; min-height:0; overflow-y:auto; padding-bottom:22px; }
/* "Pantalla completa" (ver fd-almacen-fullscreen en ficha.js): la tabla de
   asignación de almacén y lote tiene muchas columnas angostas (Alm, Lote,
   fechas) que se ven cortadas en el ancho fijo de 1100px del modal — se
   pide más espacio a mano en vez de siempre ocupar toda la pantalla, para
   no estorbar en solicitudes con pocas líneas. */
.modal.xwide.full{ max-width:calc(100vw - 32px); width:calc(100vw - 32px); }
.modal.xwide.full:has(.ficha-modal-body){ max-height:calc(100vh - 32px); }
/* En pantalla completa se esconde todo lo que no es la tabla (motivo,
   zona, sustentos, historial, resumen de impacto, comentario) — solo
   crece la tabla de asignación, no la ficha entera (ver el handler de
   #fd-almacen-fullscreen en ficha.js, que además recalcula
   #fd-almacen-wrap a mano). */
.modal.full .fd-hide-on-full{ display:none; }
/* Formularios largos con varias filas repetidas (Nueva Acta de reunión,
   Nuevo Plan de compras): "compact-form" aprovecha el alto completo de la
   pantalla (scroll interno propio, no depende de :has() como ficha-modal-
   body) achicando paddings/márgenes/tipografía, para que quepan más filas
   sin tener que agrandar la ventana — el ancho ya lo da .xwide.full. */
.modal.compact-form{ max-height:calc(100vh - 32px); overflow-y:auto; padding:16px 20px; }
.modal.compact-form h3{ margin:0 0 10px; font-size:16px; }
.modal.compact-form h4{ margin:10px 0 4px; font-size:12.5px; }
.modal.compact-form label{ margin-bottom:2px; font-size:11px; }
.modal.compact-form input, .modal.compact-form select, .modal.compact-form textarea{ padding:5px 8px; font-size:12.5px; }
.modal.compact-form textarea{ min-height:32px; }
.modal.compact-form .card{ padding:8px 10px; margin-bottom:6px; }
.modal.compact-form .grid{ gap:8px; }
/* Vista previa de Documentos SGC: el contenedor donde docx-preview dibuja el
   .docx (ver public/js/sgc/documentos.js) — la librería trae sus propios
   estilos inline, esto solo asegura que se vea y se pueda hacer scroll
   dentro del modal grande. */
.doc-preview-body{ background:#525659; padding:16px; overflow-y:auto; }
/* El encabezado de columnas (Ajuste, Producto, Alm, Lote…) queda fijo
   arriba mientras se hace scroll entre las líneas — si no, con varias
   líneas hay que volver a subir para recordar qué va en cada columna.
   ".tblwrap table{overflow:hidden}" (para recortar las esquinas
   redondeadas) rompe "position:sticky": convierte a la propia <table> en
   el contenedor de referencia en vez del div que realmente hace scroll
   (#fd-almacen-wrap), así que el header nunca se queda fijo. Se anula acá
   solo para esta tabla — el id le gana en especificidad a ".tblwrap table". */
#fd-almacen-tabla{ overflow:visible; }
#fd-almacen-tabla thead th{ position:sticky; top:0; z-index:1; }
/* Mismo patrón de "Ampliar"/sticky header para la tabla de Líneas (ver
   fd-lineas-fullscreen en ficha.js) — a diferencia de la tabla de Almacén,
   esta vive fuera de .fd-hide-on-full siempre (no solo en pantalla
   completa), para poder agrandarse sin esconder el resto de la ficha. */
#fd-lineas-tabla{ overflow:visible; }
#fd-lineas-tabla thead th{ position:sticky; top:0; z-index:1; }
@keyframes sigo-fade-in{ from{opacity:0;} to{opacity:1;} }
@keyframes sigo-pop-in{ from{opacity:0; transform:translateY(6px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }

/* ==========================================================================
   12. DRAWER (panel lateral de detalle)
   ========================================================================== */
.drawer-bg{ position:fixed; inset:0; background:rgba(15,25,20,.4); z-index:110; opacity:0; transition:opacity var(--transition-base); }
.drawer-bg.is-open{ opacity:1; }
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(460px,100vw);
  background:var(--color-card); box-shadow:-8px 0 24px rgba(15,25,20,.14);
  z-index:111; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--transition-base);
}
.drawer.is-open{ transform:translateX(0); }
.drawer-header{ padding:18px 20px; border-bottom:1px solid var(--color-border); display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.drawer-header h3{ margin:0 0 3px; font-size:15.5px; color:var(--color-text); }
.drawer-header .sub{ font-size:12px; color:var(--color-text-sub); }
.drawer-close{ background:transparent; color:var(--color-text-sub); border:1px solid var(--color-border); width:28px; height:28px; border-radius:var(--radius-sm); font-size:14px; padding:0; flex-shrink:0; }
.drawer-close:hover{ background:var(--color-bg); }
.drawer-body{ padding:18px 20px; overflow-y:auto; flex:1; }
.drawer-section{ margin-bottom:20px; }
.drawer-section:last-child{ margin-bottom:0; }
.drawer-section-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--color-text-sub); margin-bottom:8px; }
.drawer-footer{ padding:14px 20px; border-top:1px solid var(--color-border); display:flex; gap:8px; flex-wrap:wrap; }

/* ==========================================================================
   13. TIMELINE / WORKFLOW (aprobaciones)
   ========================================================================== */
.wf-timeline{ display:flex; flex-direction:column; }
.wf-step{ display:flex; gap:12px; }
.wf-step-marker{ display:flex; flex-direction:column; align-items:center; }
.wf-step-dot{
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; flex-shrink:0; border:2px solid var(--color-border); background:#fff; color:var(--color-text-sub);
}
.wf-step-line{ width:2px; flex:1; background:var(--color-border); min-height:22px; }
.wf-timeline .wf-step:last-child .wf-step-line{ visibility:hidden; }
.wf-step.done .wf-step-dot{ background:var(--color-success); border-color:var(--color-success); color:#fff; }
.wf-step.done .wf-step-line{ background:var(--color-success); }
.wf-step.current .wf-step-dot{ background:var(--verde-principal); border-color:var(--verde-principal); color:#fff; box-shadow:0 0 0 4px var(--verde-suave); }
.wf-step.rejected .wf-step-dot{ background:var(--color-critical); border-color:var(--color-critical); color:#fff; }
.wf-step.observed .wf-step-dot{ background:var(--color-warning); border-color:var(--color-warning); color:#fff; }
.wf-step-body{ padding-bottom:20px; flex:1; min-width:0; }
.wf-step:last-child .wf-step-body{ padding-bottom:2px; }
.wf-step-title{ font-size:13px; font-weight:700; color:var(--color-text); }
.wf-step.done .wf-step-title, .wf-step.current .wf-step-title{ color:var(--verde-principal); }
.wf-step.rejected .wf-step-title{ color:var(--color-critical); }
.wf-step.observed .wf-step-title{ color:var(--color-warning); }
.wf-step-meta{ font-size:11.5px; color:var(--color-text-sub); margin-top:2px; }

/* Variante horizontal, para cuando hay espacio suficiente (se vuelve vertical en pantallas angostas).
   El punto de cada hito debe quedar centrado sobre su nombre — no pegado al
   borde izquierdo de su columna — así que la línea que conecta un hito con
   el siguiente se dibuja con position:absolute desde el CENTRO de este
   punto hasta el centro del punto siguiente (mitad del ancho de la columna
   de al lado), y el punto se centra en su propia columna por encima de esa
   línea (z-index). */
.wf-timeline.horizontal{ flex-direction:row; align-items:flex-start; }
.wf-timeline.horizontal .wf-step{ flex-direction:column; align-items:center; flex:1; text-align:center; }
.wf-timeline.horizontal .wf-step-marker{ position:relative; width:100%; height:24px; display:flex; align-items:center; justify-content:center; }
.wf-timeline.horizontal .wf-step-dot{ position:relative; z-index:1; }
.wf-timeline.horizontal .wf-step-line{ position:absolute; left:50%; right:-50%; top:50%; transform:translateY(-50%); height:2px; width:auto; min-height:0; }
.wf-timeline.horizontal .wf-step-body{ padding-bottom:0; padding-top:8px; }
@media(max-width:640px){
  /* En mobile el stepper vuelve a apilarse verticalmente — se cancela el
     position:absolute de la variante de escritorio (ahí la línea SÍ debe
     volver al flujo normal, apilada debajo del punto). */
  .wf-timeline.horizontal{ flex-direction:column; align-items:stretch; }
  .wf-timeline.horizontal .wf-step{ flex-direction:row; align-items:flex-start; text-align:left; }
  .wf-timeline.horizontal .wf-step-marker{ position:static; height:auto; flex-direction:column; width:auto; align-items:center; align-self:stretch; }
  .wf-timeline.horizontal .wf-step-dot{ position:static; }
  .wf-timeline.horizontal .wf-step-line{ position:static; transform:none; width:2px; height:auto; flex:1; min-height:18px; }
  .wf-timeline.horizontal .wf-step-body{ padding-top:0; padding-left:12px; padding-bottom:20px; }
}

/* ==========================================================================
   14. TOAST
   ========================================================================== */
.toast-stack{ position:fixed; right:18px; bottom:18px; z-index:200; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast{
  background:var(--color-text); color:#fff; padding:11px 16px; border-radius:var(--radius-sm);
  font-size:12.5px; font-weight:600; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:8px;
  max-width:320px; animation:sigo-toast-in var(--transition-base);
}
.toast.success{ background:var(--verde-principal); }
.toast.warning{ background:var(--color-warning); color:#3a2a05; }
.toast.critical{ background:var(--color-critical); }
.toast .ic{ font-size:14px; }
@keyframes sigo-toast-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* ==========================================================================
   15. SKELETON LOADERS
   ========================================================================== */
.skel{ background:linear-gradient(90deg,#EEF1EF 25%,#E5E9E7 37%,#EEF1EF 63%); background-size:400% 100%; animation:sigo-skel 1.4s ease infinite; border-radius:var(--radius-sm); }
@keyframes sigo-skel{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
.skel-text{ height:11px; margin-bottom:8px; width:100%; }
.skel-text.w-60{ width:60%; } .skel-text.w-40{ width:40%; } .skel-text.w-80{ width:80%; }
.skel-title{ height:18px; width:45%; margin-bottom:12px; }
.skel-card{ height:84px; border-radius:var(--radius-md); }
.skel-row{ height:38px; border-radius:var(--radius-sm); margin-bottom:6px; }

/* ==========================================================================
   16. EMPTY STATE
   ========================================================================== */
.empty-state{ text-align:center; padding:48px 24px; }
.empty-state .ic{ display:flex; align-items:center; justify-content:center; margin-bottom:10px; opacity:.55; color:var(--color-text-sub); }
.empty-state .ic svg{ width:32px; height:32px; }
.empty-state h4{ margin:0 0 6px; font-size:14px; color:var(--color-text); }
.empty-state p{ margin:0; font-size:12.5px; color:var(--color-text-sub); max-width:360px; margin:0 auto; }

/* ==========================================================================
   17. TOOLTIP
   ========================================================================== */
.tt{ position:relative; }
.tt[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--color-text); color:#fff; font-size:11px; font-weight:600; padding:5px 9px; border-radius:6px;
  white-space:nowrap; z-index:50; box-shadow:var(--shadow-sm);
}

/* ==========================================================================
   18. PROGRESS BAR
   ========================================================================== */
.progress{ height:8px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:20px; overflow:hidden; }
.progress > span{ display:block; height:100%; background:var(--verde-secundario); border-radius:20px; transition:width var(--transition-base); }
.progress.success > span{ background:var(--color-success); }
.progress.warning > span{ background:var(--color-warning); }
.progress.critical > span{ background:var(--color-critical); }

/* ==========================================================================
   19. IMPRESIÓN DE COPIA CONTROLADA (Documentos SGC)
   El documento fuente nunca se descarga — la única salida en papel es este
   área oculta que documentos.js llena y muestra justo antes de window.print(),
   con el pie de "COPIA CONTROLADA N°..." ya incluido dentro de #doc-print-area.
   ========================================================================== */
@media print{
  body *{ visibility:hidden; }
  #doc-print-area, #doc-print-area *{ visibility:visible; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #doc-print-area{ position:absolute; top:0; left:0; width:100%; padding:24px; }
}

/* ==========================================================================
   20. PLAN DIARIO — franja semanal + tablero por jefe de línea (diario.js)
   ========================================================================== */
.dia-topbar{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.dia-modechip{ font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--verde-suave); color:var(--verde-principal); white-space:nowrap; }

.dia-semana{ display:flex; align-items:stretch; gap:8px; margin-bottom:14px; }
.dia-semana-nav{ display:flex; align-items:center; justify-content:center; width:28px; border:1px solid var(--color-border); background:var(--color-card); border-radius:var(--radius-sm); color:var(--color-text-sub); cursor:pointer; font-size:14px; user-select:none; }
.dia-semana-nav:hover{ background:var(--verde-suave); color:var(--verde-principal); }
.dia-semana-dias{ flex:1; display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.dia-tile{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:7px 9px 8px; cursor:pointer; transition:border-color .15s ease; }
.dia-tile:hover{ border-color:var(--verde-secundario); }
.dia-tile.activo{ border-color:var(--verde-principal); box-shadow:0 0 0 1.5px var(--verde-principal); background:var(--verde-suave); }
.dia-tile-nom{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-sub); }
.dia-tile.activo .dia-tile-nom{ color:var(--verde-principal); }
.dia-tile-num{ font-size:16px; font-weight:700; margin-top:1px; }
.dia-tile-barra{ height:4px; border-radius:3px; background:var(--color-border); margin-top:6px; overflow:hidden; }
.dia-tile-barra > span{ display:block; height:100%; border-radius:3px; }
.dia-tile-meta{ margin-top:4px; font-size:10px; color:var(--color-text-sub); display:flex; justify-content:space-between; }
.dia-tile-meta b{ color:var(--color-warning); font-weight:700; }

.dia-tablero{ display:grid; grid-template-columns:230px 1fr; gap:14px; align-items:start; }
@media (max-width: 880px){ .dia-tablero{ grid-template-columns:1fr; } .dia-semana-dias{ grid-template-columns:repeat(3,1fr); } }

.dia-panel-head{ font-size:13px; font-weight:700; display:flex; justify-content:space-between; align-items:center; padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--color-border); }

/* Sticky + con su propio scroll: antes el pool y el tablero eran una sola
   columna larga (grid align-items:start), así que bajar la lista de "Sin
   asignar" (que puede tener muchas más tarjetas que carriles el tablero)
   scrolleaba la PÁGINA entera, y pasados unos scrolls el tablero quedaba
   arriba, fuera de la vista — no es que el drag & drop se rompiera, es que
   ya no había ningún carril visible donde soltar. Con el panel fijo en el
   viewport y solo la lista de tarjetas con su propio scroll interno, el
   tablero siempre queda a la vista mientras se revisa el pool completo. */
.dia-pool{ padding:12px; position:sticky; top:calc(var(--header-h) + 14px); max-height:calc(100vh - var(--header-h) - 28px); display:flex; flex-direction:column; }
.dia-pool-hint{ font-size:11px; color:var(--color-text-sub); margin-bottom:8px; flex-shrink:0; }
#dia-pool-lista{ overflow-y:auto; min-height:0; flex:1; padding-right:2px; }
.pcard{ border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:8px 9px; margin-bottom:8px; cursor:grab; background:var(--color-card); transition:box-shadow .15s ease; }
.pcard:hover{ box-shadow:var(--shadow-sm); }
.pcard:active{ cursor:grabbing; }
.pcard.dragging{ opacity:.4; }
.pcard-orden{ font-weight:700; font-size:12px; }
.pcard-meta{ font-size:11px; color:var(--color-text-sub); margin-top:1px; }
.pcard-tags{ margin-top:6px; }
.pcard-obs{ font-size:10.5px; color:var(--color-text-sub); margin-top:4px; }
.dia-tag{ font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; }

/* Sección "Backup / adicionales" — mismo pool de Planificación Semanal
   (ver semanal.js), pero visible y arrastrable directo desde acá: antes
   solo aparecía en Semanal y había que dar el paso extra de "+N° de orden"
   en la celda del día antes de que llegara a Plan Diario. */
.dia-backup{ flex-shrink:0; margin-top:10px; border-top:1px solid var(--color-border); padding-top:10px; }
.dia-backup summary{ cursor:pointer; font-size:11.5px; font-weight:700; color:var(--color-text-sub); list-style:none; }
.dia-backup summary::-webkit-details-marker{ display:none; }
.dia-backup summary::before{ content:'▸ '; }
.dia-backup[open] summary::before{ content:'▾ '; }
.dia-backup-lista{ max-height:220px; overflow-y:auto; margin-top:8px; padding-right:2px; }
.bpcard{ border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:7px 9px; margin-bottom:7px; cursor:grab; background:var(--color-card); }
.bpcard:active{ cursor:grabbing; }
.bpcard.dragging{ opacity:.4; }
.bpcard.urgente{ border-color:var(--color-critical); background:var(--color-critical-bg); }

.dia-board{ padding:12px 14px 14px; }
.dia-regla{ display:grid; grid-template-columns:150px 1fr; margin-bottom:6px; }
.dia-regla-track{ position:relative; height:15px; }
.dia-regla-track span{ position:absolute; top:0; transform:translateX(-50%); font-size:10px; color:var(--color-text-sub); font-weight:600; }

.dia-lane{ display:grid; grid-template-columns:150px 1fr; align-items:center; gap:0; padding:7px 0; border-top:1px dashed var(--color-border); }
.dia-lane:first-of-type{ border-top:none; }
.dia-lane-info{ padding-right:10px; }
.dia-lane-nombre{ font-weight:700; font-size:12.5px; display:flex; align-items:center; gap:6px; }
.dia-avatar{ width:20px; height:20px; border-radius:50%; background:var(--verde-secundario); color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dia-lane-horas{ font-size:10.5px; color:var(--color-text-sub); margin-top:3px; }
.dia-lane-horas b{ color:var(--color-text); }
.dia-lane-horas.alerta{ color:var(--color-critical); font-weight:700; }
.dia-lane-add{ margin-top:4px; border:1px dashed var(--verde-secundario); color:var(--verde-secundario); background:transparent; border-radius:var(--radius-sm); padding:2px 8px; font-size:10.5px; font-weight:600; cursor:pointer; }
.dia-lane-add:hover{ background:var(--verde-suave); }

.dia-track{ position:relative; height:40px; background:repeating-linear-gradient(90deg, transparent, transparent calc(100%/12.25 - 1px), var(--color-border) calc(100%/12.25 - 1px), var(--color-border) calc(100%/12.25)); border-radius:6px; }
.dia-track.dragover{ box-shadow:inset 0 0 0 2px var(--verde-secundario); }
.dia-track-vacio{ position:absolute; top:0; bottom:0; left:0; right:0; display:flex; align-items:center; padding-left:10px; font-size:11px; color:var(--color-text-sub); }
.dia-almuerzo{ position:absolute; top:0; bottom:0; background:repeating-linear-gradient(45deg, var(--color-border), var(--color-border) 4px, transparent 4px, transparent 8px); border-radius:3px; display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap; font-size:8px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--color-text-sub); }
.dia-bloque{ position:absolute; top:3px; bottom:3px; border-radius:6px; padding:4px 8px; overflow:hidden; white-space:nowrap; font-size:10.5px; font-weight:600; color:#fff; box-shadow:var(--shadow-sm); cursor:pointer; display:flex; flex-direction:column; justify-content:center; line-height:1.25; }
.dia-bloque small{ display:block; font-weight:500; opacity:.9; font-size:9.5px; }
.dia-bloque.cumplido{ opacity:.55; }
.dia-bloque.conflicto{ outline:2px solid var(--color-critical); outline-offset:1px; z-index:2; }
.dia-bloque-flag{ position:absolute; top:-6px; right:-4px; background:var(--color-critical); color:#fff; width:15px; height:15px; border-radius:50%; font-size:9.5px; display:flex; align-items:center; justify-content:center; font-weight:800; box-shadow:0 0 0 2px var(--color-card); }

.dia-leyenda{ margin-top:12px; font-size:11px; color:var(--color-text-sub); }

/* ==========================================================================
   21. VISTA DE CABINA — modo pantalla completa (cabina.js)
   ========================================================================== */
/* Al entrar en pantalla completa (botón "Expandir") se oculta el menú y el
   encabezado de SIGO para que Vista de Cabina use TODO el viewport — es una
   pantalla pensada para quedar fija junto a la máquina, no para navegar. El
   contenido conserva su propio scroll por si un día tiene muchas órdenes,
   pero ya no hay barra lateral ni encabezado robándole alto. */
body.cab-fullscreen .sigo-sidebar,
body.cab-fullscreen .sigo-backdrop,
body.cab-fullscreen .sigo-header{ display:none; }
body.cab-fullscreen .sigo-shell-main{ width:100%; }
body.cab-fullscreen .sigo-content{ height:100vh; overflow-y:auto; padding:18px 22px; }

/* ==========================================================================
   22. SIGO EJECUTIVO — resumen consolidado (ejecutivo/dashboard.js)
   ========================================================================== */
.ei-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:14px; }
.ei-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; }
.ei-card-head h3{ margin:0; font-size:15.5px; }
.ei-ver-modulo{ font-size:12px; font-weight:600; white-space:nowrap; }
.ei-stats{ display:flex; gap:22px; flex-wrap:wrap; }
.ei-stat-val{ font-size:24px; font-weight:800; color:var(--verde-principal); line-height:1.15; letter-spacing:-.2px; }
.ei-stat-val.ei-stat-warning{ color:var(--color-warning); }
.ei-stat-val.ei-stat-critical{ color:var(--color-critical); }
.ei-stat-label{ font-size:11.5px; color:var(--color-text-sub); margin-top:2px; }