/* Sistema visual común de Atlas: lienzo blanco, tinta suave y pistacho de acento. */
:root {
  --atlas-page-background: #fff;
  --atlas-header-background: #fff;
  --atlas-header-ink: #202a26;
  --atlas-accent: #bcc613;
  --atlas-ink: #202a26;
  --atlas-muted: #69766f;
  --atlas-line: #e1e7e3;
  --atlas-surface: #fff;
  --atlas-surface-soft: #f7f9f8;
  --atlas-radius: 14px;
  --atlas-shadow: 0 3px 14px rgba(32, 52, 43, .075);
  background: var(--atlas-page-background) !important;
  color: var(--atlas-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
#app,
#shell,
main,
.workspace,
.workspace iframe {
  background-color: var(--atlas-page-background) !important;
}

.login {
  background-color: var(--atlas-page-background) !important;
}

#app > header,
main > header,
body > div > header,
header.module-header {
  background: var(--atlas-header-background) !important;
  color: var(--atlas-header-ink) !important;
  border-color: var(--atlas-header-ink) !important;
}

#app > header :is(h1, h2, h3, small, span),
main > header :is(h1, h2, h3, small, span),
body > div > header :is(h1, h2, h3, small, span),
header.module-header :is(h1, h2, h3, small, span) {
  color: var(--atlas-header-ink) !important;
}

#app > header button,
main > header button,
body > div > header button,
header.module-header button {
  border-color: var(--atlas-header-ink) !important;
  color: var(--atlas-header-ink) !important;
}

/* Componentes comunes: bordes y sombras consistentes, sin borrar colores de estado. */
@media (min-width: 801px) {
  body > main,
  body > #app > main,
  #app > main {
    box-sizing: border-box;
    width: 100%;
    max-width: min(calc(100% - 56px), 1720px) !important;
    margin-inline: auto !important;
    padding: 22px clamp(24px, 2.2vw, 42px);
  }

  #app > header,
  main > header,
  body > div > header,
  header.module-header {
    min-height: 62px;
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--atlas-line) !important;
    border-radius: 0 !important;
    background: var(--atlas-header-background) !important;
    color: var(--atlas-header-ink) !important;
    box-shadow: none !important;
  }

  #app > header :is(h1, h2, h3),
  main > header :is(h1, h2, h3),
  body > div > header :is(h1, h2, h3),
  header.module-header :is(h1, h2, h3) {
    margin-block: 2px;
    color: var(--atlas-header-ink) !important;
    font: 750 clamp(24px, 2.1vw, 34px)/1.15 Inter, ui-sans-serif, system-ui, sans-serif !important;
    letter-spacing: -.035em;
    text-transform: none;
  }

  #app > header :is(small, p),
  main > header :is(small, p),
  body > div > header :is(small, p),
  header.module-header :is(small, p) {
    color: var(--atlas-muted) !important;
  }

  :is(.controls, .toolbar, .summary, .summary-card, .metric, .card, .receipt, .order,
    .record-card, .incident-card, .incident-kpi, .employee-store-card, .entity-preview,
    .form-panel, .panel, .editor-context, .config-filters, .filters-panel, .summary-panel,
    .filter-panel) {
    border-color: var(--atlas-line) !important;
    border-radius: var(--atlas-radius) !important;
    box-shadow: var(--atlas-shadow) !important;
  }

  :is(input, select, textarea):focus-visible,
  button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--atlas-accent) 45%, transparent);
    outline-offset: 2px;
  }
}

/* Atlas · visualización de producción alineada con atlas-pc-propuesta.
   Se conserva el contenido, los estados y los iconos SVG originales de cada módulo. */
:root {
  --atlas-ink: #1d2924;
  --atlas-muted: #68776f;
  --atlas-line: #dce4df;
  --atlas-accent: #bec524;
  --atlas-accent-soft: #f0f3c9;
  --atlas-sage: #e4efe7;
  --atlas-blue: #e4eff7;
  --atlas-coral: #f8e8e3;
  --atlas-shadow: 0 3px 12px rgba(24,42,32,.08);
}

html, body, body > #app, body > #app > main, body > main, .workspace {
  color: var(--atlas-ink);
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body > main, body > #app > main, #app > main {
  gap: 0;
}

/* Estructura de página: cabecera y barras de sección limpias, blanco como fondo. */
:is(.module-header, .toolbar, .title, .section-heading, .section-head, .section-title,
    .summary-heading, .temperature-summary-heading, .editor-title, .editor-heading,
    .title-bar, .sectionhead, .page-heading) {
  color: var(--atlas-ink) !important;
  background: #fff !important;
  border-color: var(--atlas-line) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}

:is(.module-header, .toolbar, .title, .section-heading, .section-head, .section-title,
    .summary-heading, .temperature-summary-heading, .editor-title, .editor-heading,
    .title-bar, .sectionhead, .page-heading) :is(h1,h2,h3,p,small,span) {
  color: inherit !important;
}

:is(h1,h2,h3) { color: var(--atlas-ink); letter-spacing: -.025em; }
:is(.toolbar, .title, .section-heading, .section-head, .title-bar) :is(h1,h2) {
  font-family: inherit !important;
  font-weight: 700 !important;
}

/* Superficies: tarjetas claras y contornos suaves. No se normalizan las celdas
   con colores operativos ni los iconos de resumen embebidos por cada módulo. */
:is(.form-panel, .filter-panel, .incident-filters, .database, .recent, .summary-table,
    .records, .toolbar, .filters, .filters-panel, .config-filters, .form-card,
    .card:not(.kpi):not(.metric):not(.summary-card):not(.dashboard-kpi):not(.incident-kpi),
    .panel, .receipt, .order-cart-pane, .order-source-pane, .supplier-card,
    .employee-store-card, .employee-summary-card, .entity-preview, .record-card,
    .incident-card, .review-card, .editor-context, .section, .section-card) {
  color: var(--atlas-ink) !important;
  background-color: #fff !important;
  border: 1px solid var(--atlas-line) !important;
  border-radius: 11px !important;
  box-shadow: var(--atlas-shadow) !important;
}

:is(.kpi, .metric, .summary-card, .dashboard-kpi, .incident-kpi, .report-kpi, .temperature-kpi) {
  color: var(--atlas-ink) !important;
  background-color: #fff !important;
  border: 1px solid var(--atlas-line) !important;
  border-radius: 11px !important;
  box-shadow: var(--atlas-shadow) !important;
}

html body .kpis > :is(.kpi, .metric, .summary-card, .dashboard-kpi, .incident-kpi, .report-kpi, .temperature-kpi) {
  min-height:76px;
  padding:13px 15px;
  border:1px solid var(--atlas-line) !important;
  border-radius:11px !important;
  background:#fff !important;
  box-shadow:var(--atlas-shadow) !important;
}

html body .kpis > .kpi { grid-template-columns:36px minmax(0,1fr); gap:11px; }
html body .kpis > .kpi .kpi-icon {
  width:34px;
  height:34px;
  border-radius:9px;
  box-shadow:none !important;
}
html body .kpis > .kpi .kpi-icon svg { width:22px; height:22px; }
html body .kpis > .kpi :is(strong,b) { font-size:22px; line-height:1.15; }

/* Icon tiles retain the actual SVG/image/text icon; only the tile treatment changes. */
:is(.kpi, .metric, .summary-card, .dashboard-kpi, .incident-kpi, .report-kpi, .temperature-kpi)
  :is(.kpi-icon, .metric-icon, .summary-icon, .icon-tile, .report-kpi-icon, .temperature-kpi-icon) {
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

html body .kpis > :nth-child(3n + 1) :is(.kpi-icon, .report-kpi-icon) { background-color:var(--atlas-sage) !important; }
html body .kpis > :nth-child(3n + 2) :is(.kpi-icon, .report-kpi-icon) { background-color:var(--atlas-blue) !important; }
html body .kpis > :nth-child(3n) :is(.kpi-icon, .report-kpi-icon) { background-color:var(--atlas-coral) !important; }

/* Acciones de marca: el pistacho se reserva a la acción principal/selección. */
:is(button.primary, button#add, button#save, .form-launcher, .employee-summary-card > button,
    .primary-action, [data-action="primary"]) {
  border-color: #aab11e !important;
  border-radius: 8px !important;
  background: var(--atlas-accent) !important;
  color: #1d2918 !important;
  box-shadow: 0 2px 5px rgba(24,42,32,.12) !important;
}

:is(button, input, select, textarea, a.button, .button) { border-radius: 8px; }
:is(input, select, textarea) {
  color: var(--atlas-ink) !important;
  background-color: #fff !important;
  border-color: #cfd9d4 !important;
  box-shadow: none !important;
}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: #879248;
  outline-offset: 2px;
}

:is(.table-wrap, .table-scroll, .tablewrap) {
  background: #fff !important;
  border: 1px solid var(--atlas-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--atlas-shadow) !important;
}
:is(.table-wrap, .table-scroll, .tablewrap) :is(th, thead td) {
  color: #68776f !important;
  background: #f5f7f6 !important;
  border-color: var(--atlas-line) !important;
}

@media (min-width:801px) {
  /* En Configuración, el selector de módulo se convierte en control superior,
     no en una segunda cinta lateral; se oculta solo el contador técnico de revisión. */
  #app > main:has(> aside) { display: block !important; min-width:0; }
  #app > main > aside {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:0;
    padding:12px 20px;
    border:0;
    border-bottom:1px solid var(--atlas-line);
    background:#fff;
  }
  #app > main > aside > label { display:flex; align-items:center; gap:10px; }
  #app > main > aside > label select { min-width:220px; }
  #app > main > aside > #revision { display:none; }
  #app > main > .workspace { padding:22px clamp(18px,3vw,42px) 32px; }
  .employee-card-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:12px; }
  .employee-summary-card { padding:15px; }
  .employee-summary-card h3 { font-weight:700; }
  .employee-summary-card > button { min-height:40px; }
}

@media (max-width:800px) {
  #app > main > aside { background:#fff !important; border-color:var(--atlas-line) !important; }
  #app > main > aside > #revision { display:none; }
}

/* En escritorio, los módulos usan el ancho real de trabajo disponible.
   El límite evita líneas interminables en monitores ultrapanorámicos, pero
   elimina los contenedores estrechos heredados de la vista móvil. */
@media (min-width: 1100px) {
  body > main,
  body > #app > main,
  #app > main {
    box-sizing: border-box;
    width: 100%;
    max-width: min(calc(100% - 56px), 1720px) !important;
    margin-inline: auto !important;
    padding-inline: clamp(24px, 2.2vw, 42px);
  }

  /* Incidencias heredaba un ancho de 1280 px y títulos de una sola columna
     demasiado estrecha para escritorio. */
  .incident-hero h2 {
    max-width: none;
  }

  /* Asegura que los paneles de contenido llenen el área asignada por el módulo. */
  .workspace {
    min-width: 0;
    max-width: none;
  }

}

/* La capa anterior solo normalizaba unos pocos selectores genéricos. Los
   módulos Atlas tienen cabeceras y superficies propias; esta capa las lleva
   al mismo lenguaje visual sin tocar sus datos, estados ni comportamiento. */
:root {
  --atlas-accent: #bcc613;
  --atlas-accent-soft: #f1f3cf;
  --atlas-surface-soft: #f6f8f7;
  --atlas-line: #dfe6e2;
  --atlas-shadow: 0 2px 9px rgba(32, 52, 43, .07);
}

body,
#app,
#app > main,
#app > header,
.workspace,
main {
  background-color: #fff !important;
}

/* Cabeceras, barras de sección y filtros: superficie blanca o gris suave,
   con el pistacho reservado para la selección y las acciones. */
:is(
  .module-header,
  .toolbar,
  .toolbar > header,
  .section-heading,
  .section-head,
  .section-title,
  .summary-heading,
  .temperature-summary-heading,
  .editor-title,
  .editor-heading,
  .title-bar,
  .database > .section-head,
  .recent > .section-heading
) {
  color: var(--atlas-ink) !important;
  background: #f5f7f6 !important;
  border-color: var(--atlas-line) !important;
  box-shadow: none !important;
}

:is(.module-header, .toolbar, .section-heading, .section-head, .section-title,
    .summary-heading, .temperature-summary-heading, .editor-title) :is(h1,h2,h3,p,small,span) {
  color: inherit !important;
}

:is(.form-heading, .inventory-dialog > form > header, .incident-hero) {
  color: var(--atlas-ink) !important;
  background: var(--atlas-accent-soft) !important;
  border-color: var(--atlas-line) !important;
  box-shadow: none !important;
}

:is(.form-heading, .inventory-dialog > form > header, .incident-hero) :is(h1,h2,h3,p,small,span) {
  color: inherit !important;
}

/* Paneles estructurales: quitar los bloques crema/verde intensos y las
   sombras negras heredadas; las tarjetas de estado mantienen su código de color. */
:is(
  .form-panel,
  .filter-panel,
  .incident-filters,
  .database,
  .recent,
  .summary-table,
  .records,
  .toolbar,
  .filters,
  .filters-panel,
  .config-filters,
  .form-card,
  .card:not(.kpi):not(.metric):not(.summary-card):not(.dashboard-kpi):not(.incident-kpi),
  .panel,
  .receipt,
  .order-cart-pane,
  .order-source-pane,
  .supplier-card,
  .employee-store-card,
  .entity-preview,
  .record-card,
  .incident-card,
  .review-card,
  .editor-context
) {
  color: var(--atlas-ink) !important;
  background-color: #fff !important;
  border-color: var(--atlas-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--atlas-shadow) !important;
}

.form-launcher {
  color: var(--atlas-ink) !important;
  background: linear-gradient(115deg, #f4f7f5, #eaf0ed) !important;
  border-color: #cbd7d1 !important;
  border-left-color: var(--atlas-accent) !important;
  box-shadow: 0 3px 12px rgba(32, 52, 43, .11) !important;
}

:is(.filter-panel, .filters, .incident-filters, .config-filters) > details > summary,
.filter-panel details > summary,
.filters > summary,
.incident-filters > summary {
  color: var(--atlas-ink) !important;
  background: #f5f7f6 !important;
  border-color: var(--atlas-line) !important;
}

/* Controles coherentes en módulos independientes y dentro del portal. */
:is(input, select, textarea) {
  color: var(--atlas-ink) !important;
  background-color: #fff !important;
  border-color: #cfd9d4 !important;
  border-radius: 9px !important;
}

button,
:is(.mode-tabs, .views, .order-builder-options) button {
  border-radius: 9px;
}

button.soft,
button.secondary,
.record-pager button,
.incident-pagination button,
.pager button {
  color: var(--atlas-ink) !important;
  background: #f5f7f6 !important;
  border-color: #cfd9d4 !important;
  box-shadow: none !important;
}

/* Tablas limpias y legibles. Los indicadores (verde/rojo/negro) de temperatura
   permanecen intactos porque solo se suavizan encabezados y filas neutras. */
:is(.table-wrap, .table-scroll) {
  background: #fff !important;
  border-color: var(--atlas-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--atlas-shadow) !important;
}

:is(.table-wrap, .table-scroll) thead th,
:is(.table-wrap, .table-scroll) thead td {
  color: #34443d !important;
  background: #edf2ef !important;
  border-color: #dfe6e2 !important;
}

:is(.table-wrap, .table-scroll) tbody tr:nth-child(even) td {
  background-color: #f8faf9;
}

@media (min-width: 801px) {
  :is(.toolbar, .actions, .header-actions, .section-heading, .section-head) {
    border-radius: 12px !important;
  }

  :is(.kpi, .metric, .incident-kpi, .dashboard-kpi, .report-kpi, .temperature-kpi) {
    border: 1px solid rgba(55, 75, 65, .13) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(32, 52, 43, .08) !important;
  }
}

/* Final cascade: keep these approved tokens above older module-specific Bauhaus rules. */
html body :is(.kpi, .metric, .summary-card, .incident-kpi, .dashboard-kpi, .report-kpi, .temperature-kpi) {
  border:1px solid var(--atlas-line) !important;
  border-radius:11px !important;
  background:#fff !important;
  box-shadow:var(--atlas-shadow) !important;
}
html body #kpis .kpi {
  grid-template-columns:36px minmax(0,1fr);
  gap:11px;
  min-height:76px;
  padding:13px 15px;
}
html body #kpis .kpi .kpi-icon {
  width:34px !important;
  height:34px !important;
  border-radius:9px !important;
  box-shadow:none !important;
}
html body #kpis .kpi .kpi-icon svg { width:22px !important; height:22px !important; }
html body #kpis > :nth-child(3n + 1) .kpi-icon { background-color:var(--atlas-sage) !important; }
html body #kpis > :nth-child(3n + 2) .kpi-icon { background-color:var(--atlas-blue) !important; }
html body #kpis > :nth-child(3n) .kpi-icon { background-color:var(--atlas-coral) !important; }

/* Unifica las tarjetas de resumen de Mermas, Limpieza y Temperaturas.
   Mantiene el icono e indicador propios de cada formulario, con la misma
   jerarquía compacta, tarjeta blanca y baldosa de color para el icono. */
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis.kpis {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(7px,1.15vw,14px) !important;
}
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi,
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi:nth-child(n) {
  display:grid !important;
  grid-column:auto !important;
  grid-template-columns:clamp(38px,4.2vw,52px) minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
  align-items:center !important;
  justify-content:initial !important;
  gap:9px !important;
  width:auto !important;
  min-width:0 !important;
  min-height:94px !important;
  height:auto !important;
  padding:12px 14px !important;
  border:1px solid var(--atlas-line) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:var(--atlas-shadow) !important;
  text-align:left !important;
  overflow:hidden !important;
}
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi > .kpi-icon {
  grid-column:1 !important;
  grid-row:1 !important;
  display:grid !important;
  place-items:center !important;
  width:clamp(38px,4.2vw,52px) !important;
  height:clamp(38px,4.2vw,52px) !important;
  padding:6px !important;
  border-radius:12px !important;
  background:var(--atlas-sage) !important;
  box-shadow:none !important;
}
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi:nth-child(2) > .kpi-icon { background:var(--atlas-blue) !important; }
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi:nth-child(3) > .kpi-icon { background:#fae9e5 !important; }
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi > .kpi-icon svg,
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi > .kpi-icon img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:38px !important;
  max-height:38px !important;
  object-fit:contain !important;
}
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi > div {
  grid-column:2 !important;
  grid-row:1 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
  overflow:hidden !important;
}
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi small {
  color:var(--atlas-muted) !important;
  font-size:clamp(10px,1vw,13px) !important;
  font-weight:650 !important;
  line-height:1.22 !important;
  overflow-wrap:anywhere !important;
}
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi strong {
  margin-top:2px !important;
  color:var(--atlas-ink) !important;
  font-size:clamp(20px,2.2vw,30px) !important;
  line-height:1.05 !important;
  overflow-wrap:anywhere !important;
}
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi p {
  margin:3px 0 0 !important;
  color:var(--atlas-muted) !important;
  font-size:11px !important;
  line-height:1.25 !important;
  overflow-wrap:anywhere !important;
}
@media (max-width:600px) {
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis.kpis { gap:6px !important; }
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi,
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi:nth-child(n) {
    grid-template-columns:30px minmax(0,1fr) !important;
    gap:6px !important;
    min-height:78px !important;
    padding:8px 7px !important;
    border-radius:12px !important;
    box-shadow:0 3px 10px rgba(32,52,43,.07) !important;
  }
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi > .kpi-icon {
    width:30px !important;
    height:30px !important;
    padding:4px !important;
    border-radius:9px !important;
  }
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi > .kpi-icon svg,
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi > .kpi-icon img { max-width:24px !important; max-height:24px !important; }
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi small { font-size:clamp(8px,2.4vw,10px) !important; line-height:1.12 !important; }
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi strong { font-size:clamp(15px,4vw,19px) !important; line-height:1.05 !important; }
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi p { font-size:8px !important; line-height:1.12 !important; }
}
@media (min-width:601px) and (max-width:900px) {
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi,
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi:nth-child(n) {
    grid-template-columns:38px minmax(0,1fr) !important;
    min-height:86px !important;
    padding:10px !important;
  }
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi > .kpi-icon { width:38px !important; height:38px !important; }
}

/* Elevación flotante consistente para los resúmenes de los tres formularios. */
html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi:nth-child(n) {
  position:relative !important;
  z-index:0;
  box-shadow:0 9px 24px rgba(32,52,43,.12), 0 2px 5px rgba(32,52,43,.05) !important;
  transform:translateY(-3px) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
@media (hover:hover) {
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi:nth-child(n):hover {
    z-index:1;
    box-shadow:0 13px 28px rgba(32,52,43,.15), 0 3px 7px rgba(32,52,43,.06) !important;
    transform:translateY(-5px) !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  html:is([data-form-type="mermas"],[data-form-type="limpieza"],[data-form-type="temperaturas"]) body #kpis .kpi:nth-child(n) { transition:none !important; }
}

@media (min-width:801px) {
  #app > main:has(> aside) { display:block !important; }
  #app > main > aside {
    display:flex !important;
    align-items:center;
    justify-content:flex-start;
    min-height:0 !important;
    padding:12px 20px !important;
    border:0 !important;
    border-bottom:1px solid var(--atlas-line) !important;
    background:#fff !important;
  }
  #app > main > aside > label { display:flex; align-items:center; gap:10px; }
  #app > main > aside > label select { min-width:220px; }
  #app > main > aside > #revision { display:none !important; }
  #app > main > .workspace { padding:22px clamp(18px,3vw,42px) 32px !important; }
  .employee-card-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:12px; }
  .employee-summary-card { padding:15px; border:1px solid var(--atlas-line) !important; background:#fff !important; border-radius:11px !important; box-shadow:var(--atlas-shadow) !important; }
  .employee-summary-card h3 { font-weight:700; }
  .employee-summary-card > button { min-height:40px; }
}

html body :is(.toolbar, .section-heading, .section-head, .title-bar, .sectionhead) {
  border:1px solid var(--atlas-line) !important;
  border-radius:11px !important;
  background:#fff !important;
  box-shadow:none !important;
}
html body :is(.form-panel, .filter-panel, .incident-filters, .database, .recent, .summary-table,
  .records, .filters, .filters-panel, .config-filters, .form-card, .panel, .receipt,
  .order-cart-pane, .order-source-pane, .supplier-card, .employee-store-card, .entity-preview,
  .record-card, .incident-card, .review-card, .editor-context, .section, .section-card,
  .employee-tools, .employee-summary-card) {
  border-color:var(--atlas-line) !important;
  border-radius:11px !important;
  background:#fff !important;
  box-shadow:var(--atlas-shadow) !important;
}

/* Botón de alta de formularios: tarjeta blanca y ligera, coherente con Atlas.
   La paleta pastel identifica cada formulario sin la textura metálica intensa. */
html body .form-launcher {
  position: relative !important;
  isolation: isolate;
  grid-template-columns: 48px minmax(0,1fr) 48px !important;
  gap: 12px !important;
  min-height: 78px;
  padding: 12px 14px !important;
  border: 1px solid var(--atlas-line) !important;
  border-left: 4px solid var(--atlas-sage) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--atlas-ink) !important;
  box-shadow: var(--atlas-shadow) !important;
  transform: none !important;
}
html body .form-launcher::before { display: none !important; }
html body .form-launcher::after { content: none !important; display: none !important; }
html body .form-launcher .form-launcher-icon {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--atlas-sage) !important;
  color: #315d4d !important;
  box-shadow: none !important;
}
html body .form-launcher strong { font-size: clamp(16px,1.45vw,19px) !important; line-height: 1.2 !important; }
html body .form-launcher small { margin-top: 3px !important; color: var(--atlas-muted) !important; font-size: 12px !important; line-height: 1.35 !important; }
html body .form-launcher .form-launcher-action {
  min-width: 42px !important;
  min-height: 42px !important;
  border: 1px solid var(--atlas-line) !important;
  border-radius: 10px !important;
  background: #eef3ef !important;
  color: var(--atlas-ink) !important;
  box-shadow: none !important;
  transition: background .15s ease, transform .15s ease;
}
html body .form-launcher .form-launcher-action b { display: none; }
html body .form-launcher .form-launcher-action i { font-size: 25px !important; }
html[data-form-type="mermas"] body .form-launcher { border-left-color: var(--atlas-coral) !important; }
html[data-form-type="mermas"] body .form-launcher .form-launcher-icon { background: #fae9e5 !important; color: #9d554a !important; }
html[data-form-type="limpieza"] body .form-launcher { border-left-color: var(--atlas-sage) !important; }
html[data-form-type="temperaturas"] body .form-launcher { border-left-color: var(--atlas-blue) !important; }
html[data-form-type="temperaturas"] body .form-launcher .form-launcher-icon { background: #e6f0f7 !important; color: #416681 !important; }
html body .form-launcher:hover { background: #fbfcfb !important; box-shadow: 0 5px 16px rgba(32,52,43,.11) !important; transform: translateY(-1px) !important; }
html body .form-launcher:hover .form-launcher-action { background: #e4edcf !important; transform: scale(1.03); }
html body .form-launcher:active { transform: translateY(0) !important; }
@media (max-width:600px) {
  html body .form-launcher { grid-template-columns: 42px minmax(0,1fr) 42px !important; gap: 9px !important; min-height: 72px; padding: 9px 10px !important; border-left-width: 4px !important; border-radius: 12px !important; }
  html body .form-launcher .form-launcher-icon { width: 38px !important; height: 38px !important; border-radius: 9px !important; }
  html body .form-launcher .form-launcher-icon svg { width: 24px !important; height: 24px !important; }
  html body .form-launcher strong { font-size: 15px !important; }
  html body .form-launcher small { font-size: 11px !important; }
  html body .form-launcher .form-launcher-action { min-width: 38px !important; min-height: 38px !important; border-radius: 9px !important; }
}

/* Cinta de selección de formularios: control segmentado ligero y continuo. */
html body #app > main > .form-sidebar {
  position: relative !important;
  top: auto !important;
  z-index: 5;
  margin: 0 0 16px !important;
  padding: 10px 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--atlas-line) !important;
  background: transparent !important;
  color: var(--atlas-ink) !important;
}
html body #app > main > .form-sidebar nav {
  display: grid !important;
  grid-template-columns: repeat(var(--form-count, 4), minmax(0,1fr)) !important;
  gap: 6px !important;
  width: 100%;
  padding: 4px !important;
  border: 1px solid var(--atlas-line) !important;
  border-radius: 13px !important;
  background: #f5f7f6 !important;
  overflow: visible !important;
}
html body #app > main > .form-sidebar nav button {
  display: grid !important;
  grid-template-columns: 26px minmax(0,1fr) !important;
  justify-content: start;
  align-items: center;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 7px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--atlas-muted) !important;
  box-shadow: none !important;
  font: 650 13px/1.2 Inter, ui-sans-serif, system-ui, sans-serif !important;
  text-align: left !important;
  overflow-wrap: normal;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
html body #app > main > .form-sidebar nav button .nav-icon {
  display: grid !important;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: #e8eeea;
  color: #526c60;
}
html body #app > main > .form-sidebar nav button .nav-icon svg { width: 17px; height: 17px; }
html body #app > main > .form-sidebar nav button.active {
  border-color: #dce3c5 !important;
  background: #fff !important;
  color: var(--atlas-ink) !important;
  box-shadow: 0 2px 6px rgba(32,52,43,.08) !important;
  transform: none !important;
}
html body #app > main > .form-sidebar nav button.active .nav-icon { background: #eef2dc; color: #52622c; }
html body #app > main > .form-sidebar nav button:hover:not(.active) { background: #edf1ee !important; color: var(--atlas-ink) !important; }
html body #app > main > .form-sidebar nav button:focus-visible { outline: 2px solid #aab65c !important; outline-offset: 1px; }
@media (max-width:900px) {
  html body #app > main > .form-sidebar { margin-bottom: 12px !important; padding: 6px 0 10px !important; }
  html body #app > main > .form-sidebar nav { gap: 4px !important; padding: 3px !important; }
  html body #app > main > .form-sidebar nav button {
    grid-template-columns: minmax(0,1fr) !important;
    justify-items: center;
    align-content: center;
    gap: 3px !important;
    min-height: 58px !important;
    padding: 5px 3px !important;
    font-size: clamp(9px,2.3vw,11px) !important;
    line-height: 1.12 !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }
  html body #app > main > .form-sidebar nav button .nav-icon { width: 22px; height: 22px; border-radius: 7px; }
  html body #app > main > .form-sidebar nav button .nav-icon svg { width: 15px; height: 15px; }
}

/* Cinta de formularios integrada con el lienzo blanco, no como panel aparte. */
html body #app > main > .form-sidebar {
  margin:0 !important;
  padding:4px 0 0 !important;
  border:0 !important;
  border-bottom:1px solid var(--atlas-line) !important;
  background:#fff !important;
}
html body #app > main > .form-sidebar nav {
  gap:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#fff !important;
}
html body #app > main > .form-sidebar nav button {
  grid-template-columns:26px minmax(0,1fr) !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:48px !important;
  padding:8px clamp(6px,1.2vw,16px) !important;
  border:0 !important;
  border-bottom:3px solid transparent !important;
  border-radius:9px 9px 0 0 !important;
  background:#fff !important;
  color:var(--atlas-muted) !important;
  box-shadow:none !important;
  font-size:13px !important;
}
html body #app > main > .form-sidebar nav button .nav-icon {
  width:26px !important;
  height:26px !important;
  border-radius:8px !important;
  background:#f0f3ef !important;
  color:#64776c !important;
}
html body #app > main > .form-sidebar nav button.active {
  border-bottom-color:var(--atlas-accent) !important;
  background:#f6f8f1 !important;
  color:var(--atlas-ink) !important;
  box-shadow:none !important;
}
html body #app > main > .form-sidebar nav button.active .nav-icon {
  background:#e8eedb !important;
  color:#53662f !important;
}
html body #app > main > .form-sidebar nav button:hover:not(.active) {
  background:#f8faf8 !important;
  color:var(--atlas-ink) !important;
}
html body #app > main > .workspace { padding-top:8px !important; }
html body #app > main > .workspace #notice:empty {
  display:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
html body #app > main > .workspace .form-launcher { margin-top:4px !important; }

/* Temperaturas: agrupar el título, la leyenda, la navegación y la matriz en
   una superficie blanca continua, coherente con las tarjetas de Atlas. */
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--atlas-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--atlas-shadow);
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-summary-heading {
  display: block;
  margin: 0;
  padding: 5px 8px 5px 12px;
  border: 0 !important;
  border-left: 4px solid var(--atlas-accent) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-summary-heading h3 {
  margin: 0;
  color: var(--atlas-ink) !important;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-summary-heading p {
  margin: 4px 0 0;
  color: var(--atlas-muted) !important;
  font-size: 13px;
  font-weight: 500;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--atlas-line);
  border-radius: 11px;
  background: var(--atlas-surface-soft) !important;
  color: var(--atlas-muted);
  font-size: 12px;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-legend span {
  gap: 7px;
  white-space: nowrap;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(32, 42, 38, .06);
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-legend i.ok {
  background: #16845c !important;
  border: 1px solid #116747;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-legend i.bad {
  background: #d94755 !important;
  border: 1px solid #aa2634;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-legend i.missing {
  background: #9aa7a2 !important;
  border: 1px solid #707d77;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-week-nav {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--atlas-line);
  border-radius: 11px;
  background: #f7f9f8 !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-week-nav button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 1px solid var(--atlas-line);
  border-radius: 9px;
  background: #fff;
  color: var(--atlas-ink);
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-week-nav button:not(:disabled):hover {
  border-color: #d9e1b8;
  background: #f4f6e7;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-week-nav span {
  color: var(--atlas-muted);
  font-size: 12px;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--atlas-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid table {
  border-collapse: separate !important;
  border-spacing: 4px !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid thead th {
  background: #f1f5f3 !important;
  color: var(--atlas-muted) !important;
  border: 1px solid #e5ebe7 !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid tbody th {
  background: #f7f9f8 !important;
  color: var(--atlas-ink) !important;
  border: 1px solid #e5ebe7 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid tbody td {
  background: #fff !important;
  border: 1px solid #e5ebe7 !important;
  border-radius: 10px !important;
  color: var(--atlas-ink) !important;
  transition: background-color .15s ease, border-color .15s ease;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid tbody td.ok {
  background: #f2faf6 !important;
  border-color: #cce8d9 !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid tbody td.bad {
  background: #fff5f4 !important;
  border-color: #f1d1cc !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid tbody td.automatic-missing {
  background: #f3f5f4 !important;
  border-color: #e2e7e4 !important;
  color: var(--atlas-muted) !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid tbody td.automatic-missing > strong {
  color: var(--atlas-muted) !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid .temperature-range-button {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px rgba(32, 42, 38, .12) !important;
  vertical-align: middle !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid .temperature-range-button.ok {
  background: #16845c !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid .temperature-range-button.bad {
  background: #d94755 !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid td .temperature-reading > strong {
  color: var(--atlas-ink) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
}
@media (max-width: 700px) {
  html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid {
    padding: 4px;
  }
  html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid table {
    border-spacing: 3px !important;
  }
  html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid .temperature-range-button {
    width: 12px !important;
    height: 12px !important;
  }
}
@media (max-width: 600px) {
  html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary {
    gap: 8px;
    padding: 9px;
    border-radius: 13px;
  }
  html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-summary-heading p {
    font-size: 12px;
  }
  html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-legend {
    gap: 8px 12px;
    padding: 9px;
    font-size: 11px;
  }
}

@media (max-width:900px) {
  html body #app > main > .form-sidebar { padding:0 !important; }
  html body #app > main > .form-sidebar nav { gap:3px !important; }
  html body #app > main > .form-sidebar nav button {
    grid-template-columns:minmax(0,1fr) !important;
    justify-items:center !important;
    align-content:center !important;
    gap:3px !important;
    min-height:56px !important;
    padding:5px 3px !important;
    border-radius:8px 8px 0 0 !important;
    font-size:clamp(9px,2.25vw,11px) !important;
    line-height:1.12 !important;
    text-align:center !important;
    overflow-wrap:anywhere !important;
  }
  html body #app > main > .form-sidebar nav button .nav-icon { width:22px !important; height:22px !important; border-radius:7px !important; }
  html body #app > main > .form-sidebar nav button .nav-icon svg { width:15px !important; height:15px !important; }
  html body #app > main > .workspace { padding:6px 13px 20px !important; }
  html body #app > main > .workspace .form-launcher { margin-top:4px !important; }
}
/* Tarjeta de título para las entradas directas a cada módulo; replica el portal. */
body > #app > header,
body > main#app > header,
body > #app > main > header,
body > main > header.module-header,
header.module-header {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 1720px;
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 154px;
  margin: 18px auto 12px !important;
  padding: 26px 30px !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: #153f36 !important;
  color: #f4f7f4 !important;
  box-shadow: none !important;
}

body > #app > header :is(h1, h2, h3, small, p, span),
body > main#app > header :is(h1, h2, h3, small, p, span),
body > #app > main > header :is(h1, h2, h3, small, p, span),
body > main > header.module-header :is(h1, h2, h3, small, p, span),
header.module-header :is(h1, h2, h3, small, p, span) {
  color: #f4f7f4 !important;
}

body > #app > header :is(small, p),
body > main#app > header :is(small, p),
body > #app > main > header :is(small, p),
body > main > header.module-header :is(small, p),
header.module-header :is(small, p) {
  color: #c4d4ce !important;
}

body > #app > header :is(h1, h2, h3),
body > main#app > header :is(h1, h2, h3),
body > #app > main > header :is(h1, h2, h3),
body > main > header.module-header :is(h1, h2, h3),
header.module-header :is(h1, h2, h3) {
  margin-block: 2px;
  font: 750 clamp(28px, 3.25vw, 46px)/1.08 Inter, ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -.035em;
  text-transform: none;
}

body > #app > header button,
body > main#app > header button,
body > #app > main > header button,
body > main > header.module-header button,
header.module-header button {
  border-color: rgba(244, 247, 244, .72) !important;
  color: #173f36 !important;
}

@media (max-width: 800px) {
  body > #app > header,
  body > main#app > header,
  body > #app > main > header,
  body > main > header.module-header,
  header.module-header {
    width: calc(100% - 20px);
    min-height: 112px;
    margin: 10px auto 8px !important;
    padding: 17px 18px !important;
    border-radius: 22px !important;
  }

  body > #app > header :is(h1, h2, h3),
  body > main#app > header :is(h1, h2, h3),
  body > #app > main > header :is(h1, h2, h3),
  body > main > header.module-header :is(h1, h2, h3),
  header.module-header :is(h1, h2, h3) {
    font-size: clamp(23px, 6vw, 32px) !important;
  }
}

/* Ventanas de formularios: una misma superficie clara, bordes suaves y
   sombra flotante coherente en todos los módulos Atlas. */
dialog:not(.form-entry-dialog):not(.editor-dialog) {
  color: var(--atlas-ink, #202a26) !important;
  border: 1px solid var(--atlas-line, #dfe6e2) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 22px 60px rgba(25, 42, 34, .2) !important;
}

dialog:not(.print-modal)::backdrop {
  background: rgba(24, 39, 32, .42) !important;
  backdrop-filter: blur(4px);
}

dialog:not(.form-entry-dialog):not(.editor-dialog) > header,
dialog:not(.form-entry-dialog):not(.editor-dialog) form > header {
  color: var(--atlas-ink, #202a26) !important;
  border-color: var(--atlas-line, #dfe6e2) !important;
  border-radius: 17px 17px 0 0;
  background: #f5f7f6 !important;
  box-shadow: none !important;
}

dialog:not(.form-entry-dialog):not(.editor-dialog) > header :is(h1,h2,h3,p,small,span),
dialog:not(.form-entry-dialog):not(.editor-dialog) form > header :is(h1,h2,h3,p,small,span) {
  color: inherit !important;
}

dialog:not(.form-entry-dialog):not(.editor-dialog) > footer,
dialog:not(.form-entry-dialog):not(.editor-dialog) form > footer {
  border-color: var(--atlas-line, #dfe6e2) !important;
  background: #f8faf9 !important;
}

dialog:not(.form-entry-dialog):not(.editor-dialog) :is(input,select,textarea) {
  border-color: #cfd9d4 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

dialog:not(.form-entry-dialog):not(.editor-dialog) button {
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Los formularios de Operaciones tienen un panel interior propio. Se
   conserva esa estructura y se normaliza sin cambiar su lógica ni su altura. */
.form-entry-dialog .form-panel {
  color: var(--atlas-ink, #202a26) !important;
  border: 1px solid var(--atlas-line, #dfe6e2) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 22px 60px rgba(25, 42, 34, .2) !important;
}

.form-entry-dialog .form-heading {
  color: var(--atlas-ink, #202a26) !important;
  border-color: var(--atlas-line, #dfe6e2) !important;
  border-radius: 17px 17px 0 0 !important;
  background: #f5f7f6 !important;
  box-shadow: none !important;
}

.form-entry-dialog .form-heading :is(h1,h2,h3,p,small,span) {
  color: inherit !important;
}

.editor-dialog .card {
  color: var(--atlas-ink, #202a26) !important;
  border: 1px solid var(--atlas-line, #dfe6e2) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 22px 60px rgba(25, 42, 34, .2) !important;
}

.editor-dialog .title {
  color: var(--atlas-ink, #202a26) !important;
  border-color: var(--atlas-line, #dfe6e2) !important;
  background: #f5f7f6 !important;
}

.editor-dialog .title :is(h1,h2,h3,p,small,span) { color: inherit !important; }

@media (max-width: 600px) {
  dialog:not(.form-entry-dialog):not(.editor-dialog) {
    max-width: calc(100vw - 16px);
    border-radius: 16px !important;
  }

  .form-entry-dialog .form-panel,
  .editor-dialog .card { border-radius: 16px !important; }
}

/* En móvil, la estructura principal debe respetar siempre el ancho visible.
   Los cuadros con tablas conservan su propio desplazamiento horizontal. */
@media (max-width: 800px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body > #app,
  body > #app > main,
  body > main,
  body > main#app,
  #app,
  #app > main,
  #app > main > .workspace,
  body > #app > main > .workspace,
  .workspace {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  #app > main :is(header, section, article, form, .card, .panel, .toolbar, .controls),
  body > main :is(header, section, article, form, .card, .panel, .toolbar, .controls) {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #app > main :is(input, select, textarea, button, img, video, canvas),
  body > main :is(input, select, textarea, button, img, video, canvas) {
    max-width: 100%;
  }

  #app > main table,
  body > main table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #app > main table :is(th, td),
  body > main table :is(th, td) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #app > main :is(.temperature-grid, .table-wrap, .table-scroll, #board),
  body > main :is(.temperature-grid, .table-wrap, .table-scroll, #board) {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body:has(> main .mode-tabs) #board .schedule {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body:has(> main .mode-tabs) #board .schedule :is(th, td) {
    min-width: 0 !important;
    padding: 2px !important;
    overflow-wrap: anywhere !important;
  }

  body:has(> main .mode-tabs) #board .schedule th.person {
    width: 22% !important;
  }

  body:has(> main .mode-tabs) #board .day-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 3px 1px !important;
    overflow-wrap: anywhere !important;
  }

  body:has(> main .mode-tabs) #board :is(.day-label, .shift-time) {
    font-size: clamp(6px, 1.8vw, 9px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html[data-form-type="temperaturas"] body #app > main .temperature-grid table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  html[data-form-type="temperaturas"] body #app > main .temperature-grid :is(th, td) {
    width: auto !important;
    min-width: 0 !important;
    padding: 3px 1px !important;
    font-size: clamp(7px, 2vw, 9px) !important;
  }

  html[data-form-type="temperaturas"] body #app > main .temperature-grid tr > :first-child {
    width: 22% !important;
    min-width: 0 !important;
  }

  #app > nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #app > nav > button,
  #app > nav > button.active {
    width: 100% !important;
    min-width: 0 !important;
    flex: initial !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Registrar conserva la navegación por botones entre formularios. */
html body #app > main > .form-sidebar {
  display: block !important;
  position: relative !important;
  top: auto !important;
  z-index: 5 !important;
  width: calc(100% - 24px) !important;
  max-width: 1720px !important;
  margin: 0 auto 8px !important;
  padding: 4px 0 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--atlas-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}
html body #app > main > .form-sidebar .store-scope { display: none !important; }
html body #app > main > .form-sidebar .form-type-nav {
  display: grid !important;
  grid-template-columns: repeat(var(--form-count, 4), minmax(0, 1fr)) !important;
  gap: 3px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
}
html body #app > main > .form-sidebar .form-type-button {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 6px 5px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--atlas-muted) !important;
  box-shadow: none !important;
  font: 650 12px/1.15 Inter, ui-sans-serif, system-ui, sans-serif !important;
  text-align: center !important;
  white-space: normal !important;
}
html body #app > main > .form-sidebar .form-type-button .nav-icon { display:grid; width:22px; height:22px; place-items:center; margin:auto; border-radius:7px; background:#f0f3ef; color:#64776c; }
html body #app > main > .form-sidebar .form-type-button .nav-icon svg { width:15px; height:15px; fill:none; }
html body #app > main > .form-sidebar .form-type-button.active { border-bottom-color:var(--atlas-accent) !important; background:#f6f8f1 !important; color:var(--atlas-ink) !important; }
html body #app > main > .form-sidebar .form-type-button.active .nav-icon { background:#e8eedb; color:#53662f; }
html[data-form-type="mermas"] body #app > main > .workspace .record-form .article-picker {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 8px 9px !important;
  padding: 12px !important;
  border: 1px solid #dfe7bd !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 4px 13px rgb(27 48 38 / 9%) !important;
}
html[data-form-type="mermas"] body #app > main > .workspace .record-form .article-picker > span:first-of-type {
  grid-column: 1 / -1 !important;
  color: #26342c !important;
  font-weight: 750 !important;
}
html[data-form-type="mermas"] body #app > main > .workspace .record-form .article-picker input {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  border: 1px solid #d7e0d9 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--atlas-ink) !important;
  box-shadow: none !important;
}
html[data-form-type="mermas"] body #app > main > .workspace .record-form .article-select-control {
  grid-column: 2 !important;
  grid-row: 2 !important;
  position: relative !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
}
html[data-form-type="mermas"] body #app > main > .workspace .record-form .article-select-control::after {
  content: "▲";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid #d7e0d9;
  border-radius: 9px;
  background: #e8eeeb;
  color: #737d77;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
}
html[data-form-type="mermas"] body #app > main > .workspace .record-form .article-select-control:focus-within::after { content: "▼"; }
html[data-form-type="mermas"] body #app > main > .workspace .record-form .article-select-control select {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  opacity: .01 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
}
@media (max-width: 900px) {
  html body #app > main > .form-sidebar {
    display: block !important;
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    width: calc(100% - 24px) !important;
    margin: 0 auto 8px !important;
    padding: 3px 0 !important;
  }
  html body #app > main > .form-sidebar .form-type-nav { grid-template-columns: repeat(var(--form-count, 4), minmax(0, 1fr)) !important; }
  html body #app > main > .form-sidebar .form-type-button { grid-template-columns: minmax(0, 1fr) !important; gap: 3px !important; min-height: 54px !important; padding: 4px 2px !important; font-size: clamp(9px, 2.5vw, 11px) !important; overflow-wrap: anywhere; }
  html body #app > main > .form-sidebar .form-type-button .nav-icon { width:20px; height:20px; }
  html[data-form-type="mermas"] body #app > main > .workspace .record-form .article-picker {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 7px !important;
    padding: 10px !important;
  }
}
/* Todos los selectores del módulo conservan el desplegable nativo normal. */
html body #app select {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  background-image: none !important;
}

/* Cocina: opciones independientes sobre el lienzo blanco. */
@media (max-width:800px) {
  html body #app #kpis.kpis {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  html body #app #kpis.kpis > .kpi:nth-child(n) {
    grid-column:auto !important;
    min-width:0 !important;
    padding:9px 6px !important;
    grid-template-columns:24px minmax(0,1fr) !important;
    gap:5px !important;
  }
  html body #app #kpis.kpis > .kpi > .kpi-icon { width:24px !important; height:24px !important; font-size:16px !important; }
  html body #app #kpis.kpis > .kpi small { font-size:10px !important; line-height:1.15 !important; }
  html body #app #kpis.kpis > .kpi strong { font-size:17px !important; line-height:1.15 !important; overflow-wrap:anywhere !important; }
}
.employee-select-trigger { width:100%; text-align:left; white-space:normal; }
dialog.employee-select-dialog { width:min(480px, calc(100vw - 24px)); max-height:80dvh; padding:20px; border:1px solid #dfe6e2; border-radius:20px; background:#fff; box-shadow:0 20px 60px #183b3033; }
dialog.employee-select-dialog::backdrop { background:#183b3055; backdrop-filter:blur(3px); }
.employee-select-dialog label { display:grid; gap:8px; }
.employee-select-dialog input[type=search] { width:100%; padding:12px; border:1px solid #dfe6e2; border-radius:10px; }
.employee-select-dialog .employee-dialog-list { max-height:45dvh; overflow-y:auto; margin:16px 0; }
.employee-select-dialog .employee-picker { grid-template-columns:1fr; }
.employee-select-dialog .employee-option[hidden] { display:none!important; }
.employee-select-dialog .employee-dialog-done { width:100%; }
/* Tipografía compacta para la matriz móvil de temperaturas. */
@media (max-width: 800px) {
  html[data-form-type] body #app > main .correction-link {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 4px !important;
    border-radius: 7px !important;
  }
  html[data-form-type] body #app > main .correction-link svg {
    width: 14px !important;
    height: 14px !important;
  }
  html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid :is(th, td) {
    font-size: clamp(8px, 2.2vw, 11px) !important;
    line-height: 1.2 !important;
  }
  html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid td .temperature-reading > strong {
    font-size: clamp(10px, 2.65vw, 13px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid .temperature-reading {
    gap: 1px !important;
    justify-content: center !important;
  }
  html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid .temperature-range-button {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    flex: 0 0 7px !important;
  }
}
/* Operativa diaria: cada tarjeta flota sin un segundo marco exterior. */
@media (max-width: 800px) {
  html[data-form-type] body #app > main {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html[data-form-type] body #app > main > .workspace {
    padding-inline: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html[data-form-type] body #app > main > .workspace :is(#summary, #visualSummary, .recent) {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }
}
html[data-form-type] body #app > main > .workspace :is(#summary, #visualSummary, .recent, .summary-table, .table-wrap),
html[data-form-type] body #app > main > .workspace #visualSummary > .temperature-grid {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html[data-form-type] body #app > main > .workspace #visualSummary > .temperature-grid {
  padding: 0 !important;
}
html[data-form-type] body #app > main > .workspace :is(.kpi, .form-launcher, .form-panel, .filter-panel, .inventory-period-card, .review-card) {
  border: 1px solid #e1e7e3 !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 18px rgba(24,42,32,.08) !important;
}
html[data-form-type="temperaturas"] body #app > main > .workspace #visualSummary > .temperature-grid :is(th, td) {
  box-shadow: 0 2px 6px rgba(24,42,32,.055) !important;
}

html body #app > nav[aria-label="Opciones de Cocina"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 12px 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body #app > nav[aria-label="Opciones de Cocina"] > button {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 100px !important;
  min-height: 58px !important;
  padding: 9px 13px !important;
  border: 1px solid #dfe6e2 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #68776f !important;
  box-shadow: 0 4px 12px rgba(24,42,32,.09) !important;
  font-size: 12px !important;
  white-space: normal !important;
}
html body #app > nav[aria-label="Opciones de Cocina"] > button.active {
  border-color: #d8dfa8 !important;
  background: #f0f3cf !important;
  color: #203e32 !important;
}
html body #app > nav[aria-label="Opciones de Cocina"] > button[hidden] {
  display: none !important;
}
html body #app > #content > .dashboard-hero { display: none !important; }
@media (max-width: 650px) {
  html body #app > nav[aria-label="Opciones de Cocina"] > button {
    flex: 0 0 calc((100% - 16px) / 3) !important;
    width: calc((100% - 16px) / 3) !important;
    min-width: 0 !important;
    padding: 8px 4px !important;
    font-size: 11px !important;
  }
}