/* =====================================================================
   Fodix — sistema de diseño
   Paleta: teal profundo (confianza/frío controlado) + ámbar sello
   (certificación/aprobado) sobre un fondo papel cálido.
   Tipografía: Space Grotesk (títulos) + Inter (texto/datos).
   Firma visual: tarjetas de módulo con "ojal" perforado, como una
   etiqueta colgante — coherente con que este es un sistema de
   rotulado y control alimentario.
   ===================================================================== */

:root {
  --color-bg: #F7F5F0;
  --color-surface: #FFFFFF;
  --color-border: #E3DED2;
  --color-primary: #0F3D3E;
  --color-primary-dark: #0A2C2D;
  --color-primary-soft: #E4EEEE;
  --color-accent: #C97A2B;
  --color-accent-dark: #A8621E;
  --color-text: #1C2B2B;
  --color-text-muted: #5B6C6B;
  --color-danger: #B3261E;
  --color-ok-bg: #DCFCE7;
  --color-alerta-bg: #FEF9C3;
  --color-riesgo-bg: #FEE2E2;
  --radio: 14px;
  --sombra: 0 2px 10px rgba(15, 61, 62, 0.08);
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  margin: 0;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--font-display);
  color: var(--color-primary);
  letter-spacing: -0.01em;
}
h1 { font-size: 22px; font-weight: 700; margin: 0 0 16px; }
h2 { font-size: 16px; font-weight: 600; margin: 28px 0 12px; }

p { color: var(--color-text); line-height: 1.5; }

.oculto { display: none !important; }

.vista {
  min-height: 100vh;
  padding: 24px;
}

/* ---------- Marca (logo + nombre) ---------- */
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
}
.marca-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.marca-texto {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}
.tarjeta .marca { margin-bottom: 20px; }

/* ---------- Acceso: login y registro ---------- */
#vista-login, #vista-registro {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 4% 8%, #E5F1EF 0%, transparent 28%),
    radial-gradient(circle at 94% 92%, #FBE5CF 0%, transparent 25%),
    #F3F6F4;
}

.vista-acceso { padding: 32px; }
.acceso-shell {
  width: min(100%, 1030px);
  min-height: 570px;
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(340px, 0.95fr);
  overflow: hidden;
  border-radius: 24px;
  background: var(--color-surface);
  box-shadow: 0 24px 60px rgba(15, 61, 62, 0.16);
  border: 1px solid rgba(15, 61, 62, 0.10);
}
.acceso-presentacion {
  background: linear-gradient(145deg, #0E4D4D 0%, var(--color-primary-dark) 72%);
  padding: clamp(34px, 6vw, 64px);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.acceso-presentacion::after {
  content: '';
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 40px solid rgba(255,255,255,0.045);
  position: absolute;
  right: -125px;
  bottom: -145px;
}
.acceso-logo-lienzo {
  width: min(100%, 280px);
  padding: 12px 16px;
  border-radius: 14px;
  background: #F7F5F0;
  margin-bottom: auto;
  position: relative;
  z-index: 1;
}
.acceso-logo { display: block; width: 100%; height: auto; }
.acceso-eyebrow {
  margin: 70px 0 12px;
  color: #F4A85C;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.acceso-presentacion h2 {
  color: white;
  margin: 0;
  max-width: 360px;
  font-size: clamp(29px, 3.5vw, 42px);
  line-height: 1.05;
}
.acceso-descripcion { color: #C6D8D5; max-width: 340px; margin: 16px 0 0; font-size: 15px; }
.acceso-beneficio {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #DDEAE7;
  font-size: 13px;
  margin-top: 38px;
}
.acceso-beneficio svg { width: 18px; color: #F4A85C; }

.tarjeta {
  background: var(--color-surface);
  padding: 32px;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  border: 1px solid var(--color-border);
  width: 100%;
  max-width: 380px;
}
.tarjeta-acceso {
  align-self: center;
  justify-self: center;
  width: min(100%, 390px);
  max-width: none;
  padding: 0;
  box-shadow: none;
  border: 0;
}
.tarjeta-registro { padding: 34px 0; }
.marca-acceso { margin-bottom: 30px; }
.acceso-saludo {
  color: var(--color-accent-dark);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
}
.tarjeta-acceso h1 { font-size: 31px; margin-bottom: 26px; }
.tarjeta-acceso form label { margin-top: 16px; }
.tarjeta-acceso form input { padding: 12px 13px; background: #FBFCFC; }
.tarjeta-acceso form button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  padding: 13px;
  box-shadow: 0 7px 16px rgba(15, 61, 62, 0.18);
}
.tarjeta-acceso form button svg { width: 17px; }
.tarjeta-acceso .error { margin: 12px 0 0; }
.tarjeta-acceso .acceso-enlace { margin: 21px 0 0; }

form label {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
}
form input, form select {
  width: 100%;
  padding: 10px 12px;
  margin-top: 4px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
}
form input:focus, form select:focus, .form-modulo textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  background: var(--color-surface);
}
.form-modulo textarea {
  width: 100%;
  padding: 10px 12px;
  margin-top: 4px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
}

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease;
}
button:active { transform: translateY(1px); }
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

form button[type="submit"] {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  background: var(--color-primary);
  color: white;
}
form button[type="submit"]:hover { background: var(--color-primary-dark); }

.error { color: var(--color-danger); font-size: 13px; margin-top: 10px; min-height: 16px; }
.exito { color: #15803d; font-size: 13px; margin-top: 10px; }

.tarjeta p { font-size: 13px; color: var(--color-text-muted); margin-top: 16px; text-align: center; }
.tarjeta a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.tarjeta a:hover { text-decoration: underline; }

/* ---------- Barra superior ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.topbar-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
}
#saludo-usuario {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.topbar button, .btn-nueva-observacion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  padding: 8px 14px;
}
.topbar button:hover { border-color: var(--color-primary); }
#btn-logout, #btn-logout-2, #btn-logout-3, #btn-logout-4, #btn-logout-5, #btn-logout-6 {
  background: var(--color-primary);
  color: white;
  border: none;
}
#btn-logout:hover, #btn-logout-2:hover, #btn-logout-3:hover,
#btn-logout-4:hover, #btn-logout-5:hover, #btn-logout-6:hover {
  background: var(--color-primary-dark);
}

/* ---------- Banner de alertas pendientes ---------- */
.banner-alertas {
  background: #FBEEDC;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-dark);
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  max-width: 900px;
  font-size: 14px;
  font-weight: 500;
}

/* ---------- Layout general con sidebar ---------- */
.layout {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
  background: #F4F7F6;
}
.contenido {
  flex: 1;
  min-width: 0;
  background:
    radial-gradient(circle at 93% 2%, rgba(201, 122, 43, 0.09), transparent 22%),
    #F4F7F6;
}
.contenido .vista { padding: 28px 38px 40px; }

/* Encabezado persistente: separa la navegación del espacio de trabajo. */
.app-topbar {
  min-height: 68px;
  padding: 0 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(15, 61, 62, 0.10);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 15;
}
.app-topbar-marca { display: flex; align-items: center; gap: 9px; color: var(--color-primary); font-family: var(--font-display); font-weight: 700; }
.app-topbar-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px #FBE7D2; }
.app-topbar-separador, .app-topbar-contexto { color: #839391; font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.app-empresa { color: #546765; font-size: 13px; font-weight: 600; }

/* ---------- Sidebar (firma visual: logo tipo etiqueta + nav agrupada) ---------- */
.sidebar {
  width: 268px;
  flex-shrink: 0;
  background: var(--color-primary-dark);
  color: #EFEFE9;
  display: flex;
  flex-direction: column;
  padding: 26px 15px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.marca-sidebar { margin-bottom: 26px; padding: 3px 10px; }
.marca-sidebar .marca-logo { width: 36px; height: 36px; border-radius: 10px; }
.marca-sidebar .marca-texto { font-size: 20px; letter-spacing: -0.04em; }
.marca-sidebar .marca-texto { color: white; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.nav-grupo-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8FA5A3;
  margin: 20px 11px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #D7E0DE;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
}
.nav-item span { flex: 1; }
.nav-item svg { width: 17px; height: 17px; stroke-width: 1.8; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,0.08); color: white; }
.nav-item.activo { background: var(--color-accent); color: white; font-weight: 700; box-shadow: 0 5px 12px rgba(0,0,0,0.14); }
.nav-item.activo svg { color: white; }
#nav-inicio { font-weight: 700; color: white; margin-bottom: 7px; }

.btn-logout-sidebar {
  background: rgba(255,255,255,0.06);
  color: #D7E0DE;
  padding: 10px;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,0.12);
}
.btn-logout-sidebar:hover { background: rgba(255,255,255,0.14); color: white; }

/* ---------- Dashboard: panel de métricas ---------- */
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.dashboard-header {
  padding: 28px 30px;
  margin-bottom: 20px;
  border: 1px solid #D7E6E3;
  border-radius: 18px;
  background: linear-gradient(115deg, #FFFFFF 0%, #F1F8F6 100%);
  box-shadow: 0 10px 30px rgba(15, 61, 62, 0.06);
}
.dashboard-eyebrow { margin: 0 0 8px; font-size: 11px; color: var(--color-accent-dark); font-weight: 800; letter-spacing: 0.12em; }
.dashboard-header h1 { margin: 0; font-size: clamp(25px, 3vw, 34px); }
.dashboard-header-acciones { display: flex; align-items: center; gap: 9px; }
.saludo { color: var(--color-text-muted); font-size: 14px; margin: 2px 0 0; }

.btn-campana {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid #C9DCD8;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
}
.btn-campana svg { width: 17px; }
.btn-campana-principal { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.btn-campana:hover { border-color: var(--color-primary); box-shadow: 0 5px 14px rgba(15, 61, 62, 0.12); }
.badge-campana {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}

.kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  max-width: none;
  margin-bottom: 22px;
}
.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 7px 20px rgba(15, 61, 62, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.kpi-card-clickeable { cursor: pointer; }
.kpi-card-clickeable:hover { border-color: var(--color-accent); }
.popup-pendientes {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: var(--color-primary-dark);
  color: white;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12px;
  min-width: 220px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.popup-pendientes ul { margin: 6px 0 0; padding-left: 16px; }
.popup-pendientes li { margin-bottom: 3px; }
.kpi-cabecera { display: flex; justify-content: space-between; align-items: flex-start; }
.kpi-icono {
  font-size: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icono-verde { background: var(--color-ok-bg); }
.kpi-icono-ambar { background: var(--color-alerta-bg); }
.kpi-icono-rojo { background: var(--color-riesgo-bg); }
.kpi-icono-azul { background: var(--color-primary-soft); }

.kpi-label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.kpi-valor { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--color-primary-dark); }
.kpi-valor-alerta { color: var(--color-danger); }
.kpi-valor-ok { color: #15803d; }
.kpi-sub { font-size: 12px; color: var(--color-text-muted); }
.kpi-sub-ok { color: #15803d; }
.kpi-sub-alerta { color: var(--color-danger); }

.dashboard-columnas {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  max-width: none;
  align-items: start;
  margin-bottom: 16px;
}
.dashboard-columnas-2 { grid-template-columns: 1fr 1fr; }

.panel-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 7px 20px rgba(15, 61, 62, 0.05);
}
.panel-card-header { display: flex; justify-content: space-between; align-items: center; }
.panel-card-header-der { display: flex; align-items: center; gap: 10px; }
.cumplimiento-pct { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--color-primary-dark); }
.selector-periodo {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  background: var(--color-bg);
  color: var(--color-text);
}

.grafico-cumplimiento { margin-top: 6px; }
.progreso-diario-barra { height: 12px; border-radius: 999px; background: #e6efed; overflow: hidden; margin: 18px 0 16px; }
.progreso-diario-barra > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), #2b9b75); transition: width .35s ease; }
.progreso-diario-items { display: flex; flex-wrap: wrap; gap: 8px; }
.progreso-diario-items span { border-radius: 999px; padding: 7px 10px; font-size: 12px; font-weight: 600; }
.progreso-diario-items .completo { color: #167246; background: #e5f5eb; }
.progreso-diario-items .pendiente { color: #8a641c; background: #fff5d8; }
.grafico-svg { width: 100%; height: 140px; }
.grafico-etiquetas { position: relative; height: 16px; font-size: 11px; color: var(--color-text-muted); }
.grafico-etiquetas span { position: absolute; transform: translateX(-50%); }
.sin-datos { color: var(--color-text-muted); font-size: 13px; }
.tendencia-cumplimiento { font-size: 12px; color: var(--color-text-muted); margin-top: 8px; }
.tendencia-positiva { color: #15803d; font-weight: 700; }
.tendencia-negativa { color: var(--color-danger); font-weight: 700; }

.tarea-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.tarea-item:last-child { border-bottom: none; }
.tarea-icono { font-size: 18px; }
.tarea-texto { flex: 1; min-width: 0; }
.tarea-titulo { font-size: 13px; font-weight: 600; color: var(--color-text); }
.tarea-sub { font-size: 12px; color: var(--color-text-muted); }
.tarea-fecha { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }

.badge-prioridad {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-alta { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge-media { background: var(--color-alerta-bg); color: #92400e; }
.badge-baja { background: var(--color-ok-bg); color: #15803d; }

/* ---------- Cumplimiento por categoría ---------- */
.categoria-item { margin-bottom: 14px; }
.categoria-item:last-child { margin-bottom: 0; }
.categoria-cabecera {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.barra-fondo {
  background: var(--color-bg);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.barra-relleno {
  background: #15803d;
  height: 100%;
  border-radius: 999px;
}

/* ---------- Registros recientes ---------- */
.reciente-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}
.reciente-item:last-child { border-bottom: none; }
.reciente-icono { font-size: 15px; }
.reciente-titulo { font-size: 13px; font-weight: 600; color: var(--color-text); }
.reciente-sub { font-size: 11px; color: var(--color-text-muted); }
.reciente-valor { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--color-primary-dark); white-space: nowrap; }

.nota-cumplimiento { max-width: 700px; font-size: 12px; color: var(--color-text-muted); margin-top: 18px; }

.detalle-historial-pre {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

.detalle-mise-en-place {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 14px;
}
.tabla-detalle-produccion {
  width: 100%;
  margin-top: 0;
  box-shadow: none;
}
.tabla-detalle-produccion th, .tabla-detalle-produccion td { font-size: 12px; }
.detalle-control-final { margin-top: 14px; font-size: 13px; }
.detalle-control-final ul { margin: 6px 0 0; padding-left: 18px; }
.detalle-control-final li { margin-bottom: 3px; }
.btn-ver-detalle-produccion {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  padding: 6px 10px;
  margin-left: 6px;
}

.filtro-inventario {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.botones-exportar-vacaciones {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.botones-exportar-vacaciones button {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  padding: 8px 14px;
}
.botones-exportar-vacaciones button:hover { background: #d4e3e3; }

/* Nueva venta: controles compactos para no saturar la vista en celular. */
.registros-post-venta-plegable {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.registros-post-venta-plegable button,
.exportar-post-venta summary {
  color: var(--color-primary-dark);
  font-weight: 700;
}
.registros-post-venta-plegable button {
  background: var(--color-primary-soft);
  padding: 9px 13px;
}
.registros-post-venta-plegable span {
  color: var(--color-text-muted);
  font-size: 12px;
}
.exportar-post-venta { margin-bottom: 16px; }
.exportar-post-venta details {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  overflow: hidden;
}
.exportar-post-venta summary {
  cursor: pointer;
  padding: 13px 15px;
  list-style: none;
}
.exportar-post-venta summary::-webkit-details-marker { display: none; }
.exportar-post-venta summary::after {
  content: '⌄';
  float: right;
  font-size: 18px;
  line-height: 12px;
}
.exportar-post-venta details[open] summary { border-bottom: 1px solid var(--color-border); }
.exportar-post-venta details[open] summary::after { content: '⌃'; }
.exportar-post-venta-contenido { padding: 14px; }
.exportar-post-venta-contenido label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 700;
}
.exportar-post-venta-opciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}
.exportar-post-venta-opciones button {
  padding: 10px 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  text-align: left;
}
.exportar-post-venta-opciones button:hover { background: #d4e3e3; }

.nota-clientes-post-venta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  color: #4f6865;
  font-size: 13px;
}
.nota-clientes-post-venta span { color: #118444; font-size: 20px; line-height: 1; }
.fila-cliente-con-pedido td { background: #e7f6eb !important; }
.fila-cliente-con-pedido td:first-child { border-left: 4px solid #158447; }
.indicador-pedido-cliente {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #158447;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  vertical-align: middle;
}
.filtro-inventario select {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  background: var(--color-surface);
}

.filtro-pagos-empleados {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.filtro-pagos-empleados label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}
.filtro-pagos-empleados input {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}
.filtro-pagos-empleados button {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  padding: 8px 14px;
}
.filtro-pagos-empleados button:hover { background: #d4e3e3; }

/* ---------- Estado de cuenta: créditos post venta ---------- */
.estado-cuenta-creditos { max-width: 1120px; }
.estado-cuenta-resumen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin: 18px 0;
}
.estado-cuenta-resumen > div {
  padding: 15px 17px;
  background: var(--color-surface);
  border: 1px solid #D6E5E1;
  border-radius: 13px;
  box-shadow: 0 7px 20px rgba(15, 61, 62, 0.05);
}
.estado-cuenta-resumen span { display: block; color: var(--color-text-muted); font-size: 12px; font-weight: 600; }
.estado-cuenta-resumen strong { display: block; margin-top: 4px; color: var(--color-primary-dark); font-family: var(--font-display); font-size: 22px; }
.estado-cuenta-resumen .estado-cuenta-saldo strong { color: #B65335; }
.estado-cuenta-listado, .estado-cuenta-productos-total {
  background: var(--color-surface);
  border: 1px solid #D6E5E1;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 7px 20px rgba(15, 61, 62, 0.05);
}
.estado-cuenta-productos-total { margin-top: 16px; }
.estado-cuenta-titulo-listado { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.estado-cuenta-titulo-listado h2 { margin: 0; color: var(--color-primary); font-size: 16px; }
.estado-cuenta-titulo-listado > span { color: var(--color-text-muted); font-size: 12px; }
.estado-cuenta-cliente { margin-top: 17px; }
.estado-cuenta-cliente:first-of-type { margin-top: 0; }
.estado-cuenta-cliente h3 { margin: 0; padding: 8px 11px; border-radius: 7px; background: var(--color-primary); color: white; font-size: 14px; }
.estado-cuenta-fecha { display: flex; align-items: center; gap: 9px; margin: 15px 0 7px; color: #8B541B; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.estado-cuenta-fecha::after { content: ''; height: 1px; flex: 1; background: #E9DED2; }
.estado-cuenta-tabla { border-top: 1px solid #DCE9E5; }
.estado-cuenta-cabecera, .estado-cuenta-fila { display: grid; grid-template-columns: minmax(220px, 1fr) 100px 105px 105px 130px; gap: 10px; align-items: center; }
.estado-cuenta-cabecera { padding: 8px; color: #718885; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.estado-cuenta-cabecera span:not(:first-child), .estado-cuenta-fila > div:not(:first-child) { text-align: right; }
.estado-cuenta-fila { padding: 11px 8px; border-top: 1px solid #E8EFED; color: #58716D; font-size: 13px; }
.estado-cuenta-productos { color: var(--color-text); font-weight: 600; }
.estado-cuenta-productos b { color: var(--color-primary); }
.separador-producto { color: #93A4A1; }
.estado-cuenta-productos small { display: block; margin-top: 4px; color: #718885; font-size: 11px; font-weight: 500; }
.estado-cuenta-fila .estado-cuenta-pendiente { color: #B65335; font-weight: 700; }
.estado-cuenta-fila .estado-cuenta-total { color: var(--color-primary); font-weight: 800; }
.estado-cuenta-acciones { display: flex; justify-content: flex-end; gap: 6px; }
.estado-cuenta-acciones button { padding: 6px 9px; font-size: 11px; }
.btn-abonar-estado-cuenta { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.btn-eliminar-estado-cuenta { background: #FDE9E6; color: #A33A29; }
.estado-cuenta-productos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); border-top: 1px solid #E4ECE9; }
.estado-cuenta-productos-grid > div { padding: 14px 12px; border-right: 1px solid #E4ECE9; border-bottom: 1px solid #E4ECE9; }
.estado-cuenta-productos-grid span { display: block; color: #607A76; font-size: 12px; }
.estado-cuenta-productos-grid strong { display: block; margin-top: 2px; color: var(--color-primary-dark); font-family: var(--font-display); font-size: 18px; }
.estado-cuenta-productos-grid .estado-cuenta-productos-general { background: #EDF6F3; }

.crear-categoria-modulos {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.crear-categoria-modulos label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--color-primary-dark); }
.crear-categoria-modulos input { min-height: 34px; border: 1px solid var(--color-border); border-radius: 7px; padding: 6px 9px; }
.lista-categorias-modulos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.categoria-modulos-chip { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-primary-soft); }
.categoria-modulos-chip button { padding: 4px 7px; background: #F3E4E2; color: var(--color-danger); }
.interruptor-categoria { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-primary-dark); white-space: nowrap; }
.interruptor-categoria input { accent-color: var(--color-primary); }

.lista-categorias-modulos { display: grid; gap: 14px; max-width: 820px; }
.categoria-admin-card { border: 1px solid var(--color-border); border-radius: 14px; padding: 18px 20px; background: var(--color-surface); }
.categoria-admin-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.categoria-admin-nombre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.categoria-admin-nombre > input { width: min(330px, 100%); border: 0; padding: 0; font-size: 18px; font-weight: 750; color: var(--color-primary-dark); background: transparent; }
.categoria-admin-nombre label, .modulo-admin-row label { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; }
.categoria-admin-nombre label input, .modulo-admin-row label input { width: 54px; margin-left: 4px; border: 1px solid var(--color-border); border-radius: 6px; padding: 4px; }
.acciones-categoria-admin { display: flex; align-items: center; gap: 10px; }
.acciones-categoria-admin button, .btn-quitar-modulo-categoria { background: #F3E4E2; color: var(--color-danger); padding: 5px 8px; }
.modulos-categoria-admin { display: grid; gap: 7px; padding: 12px 0; }
.modulo-admin-row { display: flex; align-items: center; gap: 9px; min-height: 34px; padding-left: 14px; border-left: 2px solid var(--color-primary-soft); }
.arrastre-modulo { color: #94adae; font-size: 17px; cursor: grab; }
.nombre-modulo-admin { flex: 1; font-weight: 600; font-size: 14px; }
.estado-modulo-admin { border-radius: 6px; padding: 4px 7px; font-size: 12px; }
.estado-activo { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.estado-inactivo { background: #f1eeee; color: var(--color-text-muted); }
.switch-admin { position: relative; display: inline-block; width: 44px; height: 25px; flex: 0 0 auto; }
.switch-admin input { opacity: 0; width: 0; height: 0; }
.switch-admin span { position: absolute; inset: 0; border-radius: 999px; background: #b7c3c3; cursor: pointer; }
.switch-admin span::before { content: ''; position: absolute; width: 19px; height: 19px; top: 3px; left: 3px; border-radius: 50%; background: white; transition: transform .18s ease; }
.switch-admin input:checked + span { background: var(--color-primary); }
.switch-admin input:checked + span::before { transform: translateX(19px); }
.agregar-modulo-categoria { padding-top: 10px; border-top: 1px solid var(--color-border); }
.agregar-modulo-categoria select { width: min(390px, 100%); border: 1px solid var(--color-border); border-radius: 7px; padding: 7px 9px; background: white; }
.sin-modulos-categoria { margin: 0; color: var(--color-text-muted); font-size: 13px; }
@media (max-width: 700px) { .categoria-admin-head, .modulo-admin-row { align-items: flex-start; flex-wrap: wrap; } .nombre-modulo-admin { min-width: 160px; } }

#form-modulo.form-cierre-caja { display: block; width: 100%; max-width: 1080px; box-sizing: border-box; }
.form-cierre-caja .cierre-caja-layout { display: grid; width: 100%; min-width: 0; gap: 18px; }
.cierre-caja-encabezado { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.cierre-eyebrow { color: var(--color-accent); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.cierre-caja-encabezado h2 { margin: 4px 0 0; color: var(--color-primary-dark); font-size: 28px; }
.cierre-caja-encabezado label, .cierre-descuentos label { display: grid; gap: 5px; color: var(--color-primary-dark); font-size: 12px; font-weight: 700; }
.resumen-cierre-caja { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cierre-kpi { min-height: 104px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 16px; border: 1px solid #D7E6E3; border-radius: 13px; background: #EEF7F5; }
.cierre-kpi span { color: #52706D; font-size: 12px; font-weight: 700; }
.cierre-kpi b { color: var(--color-primary-dark); font-family: var(--font-display); font-size: 24px; letter-spacing: -.04em; }
.cierre-kpi-entrega { background: #FFF2E4; border-color: #F2C38F; }
.cierre-kpi-entrega b { color: #C76614; }
.cierre-caja-contenido { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(270px, .9fr); gap: 18px; }
.cierre-caja-tarjeta { padding: 22px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.cierre-caja-tarjeta h3 { margin: 0; color: var(--color-primary-dark); font-size: 19px; }
.cierre-caja-tarjeta > p { margin: 7px 0 18px; color: var(--color-text-muted); font-size: 13px; }
.cierre-descuentos { display: grid; gap: 12px; }
.cierre-descuentos label { grid-template-columns: minmax(120px, 1fr) minmax(130px, 190px); align-items: center; }
.cierre-descuentos small { margin-top: 8px; padding: 11px; border-radius: 8px; background: #EEF5F5; color: #58716D; font-size: 12px; }
.cierre-resultado { display: flex; flex-direction: column; }
.cierre-resultado-linea, .cierre-resultado-total { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; color: var(--color-text); }
.cierre-resultado-descuento { border-bottom: 1px solid var(--color-border); color: #B45816; }
.cierre-resultado-total { margin-top: auto; border-radius: 9px; padding: 14px; background: #E6F4EC; color: var(--color-primary-dark); font-size: 15px; }
.cierre-resultado-total strong { font-size: 22px; }
.detalle-cierre-plegable { border: 1px solid var(--color-border); border-radius: 11px; background: #F0F6F6; overflow: hidden; }
.detalle-cierre-plegable summary { cursor: pointer; padding: 14px 16px; color: var(--color-primary-dark); font-weight: 800; }
.detalle-cierre-plegable summary span { color: var(--color-text-muted); font-weight: 600; }
.detalle-cierre-ventas { padding: 0 16px 16px; }
.detalle-cierre-tabla { border: 1px solid #D7E4E2; border-radius: 9px; overflow: hidden; background: #fff; }
.detalle-cierre-fila { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(180px, 2fr) 90px 90px; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #E0E8E6; font-size: 12px; }
.detalle-cierre-fila:last-child { border-bottom: 0; }
.detalle-cierre-cabecera { background: #E4EEEE; color: var(--color-primary-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.detalle-cierre-fila > b:last-child { color: #158447; text-align: right; }
.form-cierre-caja > #btn-guardar-registro-modulo { width: 100%; margin-top: 18px; padding: 14px; background: var(--color-accent); }
@media (max-width: 700px) {
  .cierre-caja-encabezado { align-items: stretch; flex-direction: column; }
  .resumen-cierre-caja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cierre-caja-contenido { grid-template-columns: 1fr; }
  .cierre-descuentos label { grid-template-columns: 1fr; }
  .detalle-cierre-fila { grid-template-columns: minmax(100px, 1fr) 1.5fr 70px; }
  .detalle-cierre-fila > b:last-child { display: none; }
}

.nota-solo-lectura {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  max-width: 700px;
}

/* ---------- Íconos (Lucide) ---------- */
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.8; }
.kpi-icono svg { width: 18px; height: 18px; stroke-width: 2; }
.tarea-icono svg, .reciente-icono svg { width: 16px; height: 16px; stroke-width: 2; color: var(--color-primary); }
.btn-campana svg { width: 19px; height: 19px; display: block; stroke-width: 1.8; }
.icono-inline { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; stroke-width: 2; }
.nota-solo-lectura svg { width: 15px; height: 15px; vertical-align: -3px; display: inline-block; margin-right: 2px; stroke-width: 2; }

/* ---------- Panel de Super-Admin ---------- */
#vista-superadmin {
  background: var(--color-bg);
  min-height: 100vh;
}
.superadmin-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}
.superadmin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.superadmin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
  max-width: 600px;
}
.badge-estado-empresa {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.badge-Activa { background: var(--color-ok-bg); color: #15803d; }
.badge-Suspendida { background: var(--color-alerta-bg); color: #92400e; }
.badge-Cancelada { background: var(--color-riesgo-bg); color: var(--color-danger); }
.badge-Pendiente { background: #FEF3C7; color: #92400e; }
.campo-dias-prueba { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--color-primary-dark); }
.campo-dias-prueba input { width: 58px; min-height: 30px; padding: 4px 6px; }
#tabla-empresas td > small { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: 11px; }

#tabla-empresas .btn-cambiar-estado-empresa,
#tabla-empresas .btn-modulos-empresa {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  padding: 5px 9px;
  font-size: 12px;
  margin-right: 4px;
  margin-bottom: 4px;
}
#tabla-empresas .btn-cancelar-empresa {
  background: #F3E4E2;
  color: var(--color-danger);
}

/* ---------- Administración contable ---------- */
.contable-hero { display:flex; justify-content:space-between; align-items:center; gap:24px; background:#0b5050; color:#fff; padding:28px 32px; border-radius:16px; margin-bottom:22px; }
.contable-hero p { margin:0 0 8px; color:#f2a14b; font-size:11px; font-weight:800; letter-spacing:1.1px; }
.contable-hero h1 { color:#fff; margin:0 0 9px; font-size:28px; }.contable-hero span { color:#d8ecea; font-size:14px; }
.contable-hero label { color:#d8ecea; font-size:12px; font-weight:700; display:grid; gap:5px; }.contable-hero input { min-width:150px; background:#fff; color:#163b3b; }
.contable-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }.contable-kpis article,.contable-card { background:#fff; border:1px solid var(--color-border); border-radius:13px; padding:19px; box-shadow:var(--sombra); }.contable-kpis span { display:block; color:#587078; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }.contable-kpis strong { display:block; color:#063e41; font-size:25px; margin:11px 0 7px; }.contable-kpis small { color:#718188; }.contable-kpi-alerta strong { color:#c56708; }
.contable-dos-columnas { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin:16px 0; }.contable-card h2 { margin:0 0 13px; color:#063e41; font-size:18px; }.contable-alerta-fila { display:grid; grid-template-columns:1fr auto auto; gap:12px; padding:11px 0; border-bottom:1px solid #e6ecea; font-size:13px; }.contable-alerta-fila span { color:#b45309; }.contable-alerta-fila strong { color:#c56708; }
.contable-iva { display:grid; gap:8px; }.contable-iva div { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #e6ecea; }.contable-iva span { color:#607277; }.contable-iva b { color:#063e41; }
.contable-exportar { margin:18px 0; border:1px solid var(--color-border); border-radius:11px; background:#fff; }.contable-exportar summary { padding:13px 16px; cursor:pointer; font-weight:700; color:#063e41; }.contable-exportar div { display:flex; gap:9px; padding:0 16px 15px; }.contable-exportar button { background:#e7f0ef; color:#063e41; padding:8px 12px; font-size:13px; }
.contable-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 14px; }.contable-tabs button { background:#eef3f2; color:#355158; padding:9px 12px; font-size:13px; }.contable-tabs button.activo { background:#e98723; color:#fff; }.contable-registro { min-height:260px; }.contable-registro .form-modulo { margin-bottom:22px; }
.contable-listado { border-top:1px solid #e6ecea; }.contable-listado-cabecera,.contable-listado-fila { display:grid; grid-template-columns:110px minmax(180px,1fr) 120px 110px 85px; gap:10px; align-items:center; padding:11px 6px; border-bottom:1px solid #e6ecea; font-size:13px; }.contable-listado-cabecera { color:#607277; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; }.contable-listado-fila strong { color:#063e41; text-align:right; }.contable-listado-fila a { color:#0a6261; }.contable-listado-fila button { padding:6px 8px; font-size:11px; background:#fff0df; color:#a95000; }.contable-listado-fila .btn-contable-abono { background:#e7f0ef; color:#075654; }

/* ---------- Checklist de Producción (Mise en Place) ---------- */
.lista-mise-en-place {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 4px;
}
.fila-mise-en-place {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
  border-bottom: 1px dashed var(--color-border);
}
.fila-mise-en-place:last-child { border-bottom: none; }
.fila-mise-en-place-check { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; flex: 1; min-width: 160px; }
.fila-mise-en-place-requerida { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.fila-mise-en-place-cantidad { width: 130px !important; margin-top: 0 !important; }

/* Inventario: conteo actual y pedido quedan diferenciados en cada producto. */
.fila-inventario-item {
  display: grid;
  grid-template-columns: minmax(175px, 1fr) auto auto 132px 138px;
  gap: 9px;
  align-items: center;
  padding: 8px 0;
}
.fila-inventario-item .fila-mise-en-place-check { min-width: 0; }
.solicitar-inventario {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  color: var(--color-primary-dark) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
.solicitar-inventario input { width: auto !important; margin: 0 !important; accent-color: var(--color-accent); }
.input-planilla-pedido {
  width: 132px !important;
  margin-top: 0 !important;
  border-color: #E6BF98 !important;
  background: #FFF9F3 !important;
}
.input-planilla-pedido:disabled { background: #F1F3F2 !important; color: #82908D; border-color: var(--color-border) !important; }

/* ---------- Permisos por módulo (Usuarios) ---------- */
.lista-permisos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 4px;
}
.lista-permisos label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  margin-top: 0;
}
.lista-permisos input[type="checkbox"] { width: auto; margin-top: 0; }
.btn-permisos {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  padding: 6px 10px;
}
.btn-permisos:hover { background: #d4e3e3; }
.fila-permisos-usuario td {
  background: var(--color-bg);
  padding: 12px;
}

/* ---------- Formularios de módulo ---------- */
.form-modulo {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 20px;
  border-radius: var(--radio);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
  max-width: 1000px;
}

/* ---------- Registro de Limpieza ---------- */
.form-limpieza { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding: 18px; background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(7, 61, 62, .08); }
.limpieza-form-encabezado { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, #073f41, #116966); }
.limpieza-form-encabezado span, .limpieza-checklist-cabecera span { display: block; color: #f4a14b; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.limpieza-form-encabezado h2 { margin: 6px 0; font-size: 23px; color: #fff; }.limpieza-form-encabezado p { margin: 0; color: #d6ece9; font-size: 13px; }
.limpieza-form-sello { flex: none; padding: 10px 13px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #f8faf7; font-size: 12px; font-weight: 700; }
.form-limpieza #campo-productosQuimicos { grid-column: 1 / -1; padding: 15px 17px; border: 1px solid #dce9e6; border-radius: 13px; background: #f6fbf9; }.form-limpieza #campo-productosQuimicos > label { color: #0a5555; font-size: 13px; font-weight: 800; }
.form-limpieza .lista-opciones-multiples { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; background: transparent; border: 0; padding: 0; }.form-limpieza .lista-opciones-multiples label { display: inline-flex; align-items: center; width: auto; gap: 7px; padding: 8px 11px; border: 1px solid #d2e2df; border-radius: 999px; background: #fff; font-size: 12px; color: #244c4d; cursor: pointer; }.form-limpieza .lista-opciones-multiples label:has(input:checked) { color: #075b57; border-color: #5aa19b; background: #e4f3ee; font-weight: 700; }
.limpieza-checklist-card { padding: 18px; border: 1px solid #dce8e5; border-radius: 14px; background: #fbfdfc; }.limpieza-checklist-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }.limpieza-checklist-cabecera label { display: block; margin-top: 4px; color: #073f41; font-size: 15px; font-weight: 800; }.limpieza-checklist-cabecera b { flex: none; padding: 7px 10px; border-radius: 999px; color: #0b605d; background: #e3f2ed; font-size: 12px; }
.form-limpieza .limpieza-checklist-card .lista-permisos { grid-template-columns: repeat(3, minmax(0, 1fr)); background: transparent; border: 0; padding: 0; gap: 7px 18px; }.form-limpieza .limpieza-checklist-card .lista-permisos label { padding: 7px 0; font-size: 13px; color: #244c4d; }.form-limpieza button[type="submit"] { grid-column: 1 / -1; justify-self: start; min-width: 190px; padding: 12px 18px; border-radius: 10px; }

/* ---------- Formularios de Control Sanitario ---------- */
.form-sanitario { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding: 18px; background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(7, 61, 62, .08); }
.sanitario-form-encabezado { grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:22px 24px; border-radius:14px; color:#fff; background:linear-gradient(120deg, #073f41, #116966); }
.sanitario-form-mensual { background:linear-gradient(120deg, #0b4e50, #177871); }.sanitario-encabezado-texto > span { display:block; color:#f5a24d; font-size:10px; font-weight:800; letter-spacing:1.2px; }.sanitario-encabezado-texto h2 { display:flex; align-items:center; gap:9px; margin:6px 0; color:#fff; font-size:23px; }.sanitario-encabezado-texto h2 b { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; background:rgba(255,255,255,.13); font-size:16px; }.sanitario-encabezado-texto p { margin:0; max-width:630px; color:#d6ece9; font-size:13px; line-height:1.45; }
.sanitario-sello,.sanitario-estado { flex:none; padding:10px 13px; border:1px solid rgba(255,255,255,.32); border-radius:999px; color:#f8faf7; font-size:12px; font-weight:800; white-space:nowrap; }.sanitario-estado-cumplido { color:#e0fff0; background:rgba(12,106,82,.38); }.sanitario-estado-pendiente { color:#fff5d9; background:rgba(180,104,5,.26); }
.form-sanitario > div { min-width:0; }.form-sanitario > div > label { color:#0b4c4e; font-size:12px; font-weight:800; }.form-sanitario input,.form-sanitario select,.form-sanitario textarea { border-color:#d4e2df; background:#fcfefd; }.form-sanitario input:focus,.form-sanitario select:focus,.form-sanitario textarea:focus { outline-color:#1a7973; border-color:#449b94; }
.form-sanitario .sanitario-archivo { grid-column:1 / -1; padding:14px 16px; border:1px dashed #9fc5be; border-radius:12px; background:#f4faf8; }.form-sanitario .sanitario-archivo input[type="file"] { margin-top:8px; border:0; background:transparent; padding:0; }
.form-sanitario-verificacion .sanitario-opcion-verificacion { padding:12px 13px; border:1px solid #dce9e6; border-radius:11px; background:#f8fcfa; }.form-sanitario-verificacion .sanitario-opcion-verificacion label { display:flex; align-items:center; gap:8px; color:#244c4d; cursor:pointer; }.form-sanitario-verificacion .sanitario-opcion-verificacion:has(input:checked) { border-color:#75aaa2; background:#e8f5ef; }.form-sanitario-verificacion .sanitario-opcion-verificacion input { width:16px; height:16px; accent-color:#0c635e; }
.form-sanitario button[type="submit"] { grid-column:1 / -1; justify-self:start; min-width:190px; padding:12px 18px; border-radius:10px; }
.form-modulo button {
  background: var(--color-primary);
  color: white;
  padding: 10px;
}
.form-modulo button:hover { background: var(--color-primary-dark); }
.form-modulo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}
.form-modulo small { color: var(--color-text-muted); font-size: 11px; }
.campo-solo-lectura { background: var(--color-primary-soft) !important; color: var(--color-primary-dark); cursor: not-allowed; }

/* Selección rápida de etiquetas: pensada para uso táctil en cocina. */
.selector-rotulado {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}
.selector-rotulado-titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-top: 2px;
}
.rotulado-categorias,
.rotulado-productos {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.rotulado-categorias button,
.rotulado-productos button {
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-weight: 700;
  text-align: left;
}
.rotulado-categorias button:hover,
.rotulado-productos button:hover {
  background: var(--color-primary-soft);
}
.rotulado-categorias button.seleccionado,
.rotulado-productos button.seleccionado {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}
.rotulado-productos p,
.rotulado-categorias p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.form-post-venta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  align-items: end;
}
.form-post-venta .resumen-venta {
  background: var(--color-primary-soft);
  border-radius: 10px;
  padding: 12px;
  color: var(--color-primary-dark);
  font-size: 15px;
}
.form-post-venta .resumen-venta strong {
  display: block;
  font-size: 22px;
  margin-top: 4px;
}
.venta-items { grid-column: 1 / -1; }
.venta-items-lista { display: grid; gap: 8px; }
.venta-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 100px 42px;
  gap: 8px;
}
.venta-item .btn-quitar-item-venta {
  background: #b42318;
  padding: 8px;
  font-size: 20px;
  line-height: 1;
}
.venta-items .btn-agregar-item-venta {
  margin-top: 8px;
  width: auto;
}

/* Nueva venta: flujo visual de cliente, productos y pago. */
.form-post-venta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, .75fr);
  gap: 17px;
  align-items: start;
}
.venta-contenido-principal, .venta-resumen {
  background: var(--color-surface);
  border: 1px solid #D6E5E1;
  border-radius: 15px;
  box-shadow: 0 7px 20px rgba(15, 61, 62, 0.05);
}
.venta-contenido-principal { padding: 20px; }
.venta-resumen { padding: 20px; position: sticky; top: 86px; }
.venta-seccion + .venta-seccion { margin-top: 22px; padding-top: 20px; border-top: 1px solid #E5EEEB; }
.venta-seccion-titulo, .venta-resumen-titulo { color: var(--color-primary); font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.venta-seccion-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.venta-seccion-titulo small { color: var(--color-text-muted); font-family: var(--font-body); font-size: 11px; font-weight: 500; }
.venta-contenido-principal input[name="clienteBuscar"] { background: #FBFCFC; padding: 12px 13px; }
.venta-items { margin: 0; }
.venta-items-cabecera, .venta-item {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 78px 88px 94px 32px;
  gap: 8px;
  align-items: center;
}
.venta-items-cabecera { padding: 0 7px 7px; color: #718885; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.venta-items-cabecera span:not(:first-child) { text-align: right; }
.venta-items-lista { gap: 0; border-top: 1px solid #E5EEEB; }
.venta-item { padding: 9px 7px; border-bottom: 1px solid #E5EEEB; }
.venta-item select, .venta-item input { margin-top: 0; background: #FBFCFC; }
.venta-item-precio, .venta-item-subtotal { color: #58716D; font-size: 12px; text-align: right; }
.venta-item-subtotal { color: var(--color-primary); font-weight: 800; }
.venta-item .btn-quitar-item-venta { background: transparent; color: #B65335; padding: 5px; font-size: 20px; }
.venta-items .btn-agregar-item-venta { width: 100%; margin-top: 12px; padding: 10px; background: #F7FBFA; color: #0D5757; border: 1px dashed #A8C8C2; border-radius: 9px; }
.venta-otros-cargos { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 17px; padding-top: 15px; border-top: 1px solid #E5EEEB; }
.venta-otros-cargos strong { color: var(--color-text); font-size: 13px; }
.venta-otros-cargos small { display: block; color: var(--color-text-muted); font-size: 11px; }
.venta-otros-cargos input { width: 110px; margin-top: 0; text-align: right; }
.venta-resumen-titulo { margin-bottom: 15px; }
.venta-resumen-linea { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0; color: #58716D; font-size: 13px; }
.venta-resumen-linea strong { color: var(--color-text); }
.form-post-venta .resumen-venta { margin: 16px -20px; padding: 16px 20px; border-top: 1px solid #D8E7E3; border-bottom: 1px solid #D8E7E3; border-radius: 0; background: #EDF6F3; color: var(--color-primary-dark); }
.form-post-venta .resumen-venta > span { display: block; font-size: 12px; font-weight: 700; }
.form-post-venta .resumen-venta strong { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 27px; letter-spacing: -0.04em; }
.venta-pago { margin-top: 16px; }
.venta-pago > label { display: block; margin: 0 0 7px; color: var(--color-primary-dark); font-size: 12px; font-weight: 700; }
.venta-pago-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.venta-pago-opcion { padding: 10px 8px; border: 1px solid #CBDed9; border-radius: 9px; background: white; color: #58716D; font-size: 12px; }
.venta-pago-opcion.activo { background: #E7F1EF; border-color: #0D5555; color: #0D4A4A; font-weight: 700; }
.campo-fecha-credito { margin-top: 12px; padding: 10px; border-radius: 9px; background: #FFF8EF; }
.campo-fecha-credito label { margin-top: 0; color: #87521D; }
.campo-fecha-credito input { margin-top: 4px; background: white; }
.venta-resumen-acciones { margin-top: 18px; }
.venta-resumen-acciones button { width: 100%; }
.venta-resumen-acciones #btn-cancelar-edicion-modulo { margin-top: 8px; background: #F1F4F3; color: var(--color-primary-dark); }
.venta-resumen-nota { margin: 12px 0 0; color: #708783; font-size: 11px; text-align: center; }

/* Productos POS: ordenable con arrastre. */
.fila-arrastrable { cursor: grab; }
.fila-arrastrable:active { cursor: grabbing; }
.fila-arrastrable.arrastrando { opacity: 0.45; background: #E7F1EF; }
.celda-orden-arrastre { color: #78918E; font-size: 20px; letter-spacing: -3px; text-align: center; user-select: none; }

/* ---------- Tablas ---------- */
table {
  margin-top: 20px;
  width: 100%;
  max-width: 1100px;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}
th {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.03em;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(15, 61, 62, 0.03); }

.btn-eliminar { background: #F3E4E2; color: var(--color-danger); padding: 6px 10px; }
.btn-imprimir { background: var(--color-primary); color: white; padding: 6px 10px; margin-left: 6px; }
.btn-atender { background: var(--color-accent); color: white; padding: 6px 10px; margin-left: 6px; }
.btn-imprimir:hover { background: var(--color-primary-dark); }
.btn-atender:hover { background: var(--color-accent-dark); }
.btn-eliminar:hover { background: #EAD1CE; }

/* ---------- Semáforos (colores funcionales — estándar semáforo, no decorativos) ---------- */
tr.fila-vencido td { background: var(--color-riesgo-bg); }
tr.fila-por-vencer td { background: var(--color-alerta-bg); }
tr.fila-temp-ok td { background: var(--color-ok-bg); }
tr.fila-temp-alerta td { background: var(--color-alerta-bg); }
tr.fila-temp-riesgo td { background: var(--color-riesgo-bg); }

/* ---------- Etiqueta imprimible de 50mm x 30mm (una o varias copias) ---------- */
/* Nota: se mantiene neutra a propósito — es lo que se imprime en la
   etiqueta física del producto, no debe llevar la identidad de la app. */
#etiqueta-imprimir { display: none; }

@media print {
  body * { visibility: hidden; }
  #etiqueta-imprimir, #etiqueta-imprimir * { visibility: visible; }
  #etiqueta-imprimir { display: block; position: absolute; top: 0; left: 0; }
  @page { size: 50mm 30mm; margin: 0; }
}

.etq-pagina {
  width: 50mm;
  height: 30mm;
  padding: 2mm;
  font-family: Arial, sans-serif;
  page-break-after: always;
  box-sizing: border-box;
}
.etq-producto { font-size: 10pt; font-weight: 700; line-height: 1.1; margin-bottom: 1mm; }
.etq-linea { font-size: 7pt; line-height: 1.3; }
.etq-linea span { font-weight: 600; }
.etq-barcode { width: 100%; height: 8mm; margin-top: 1mm; }

/* ---------- Observaciones y Sugerencias (chat) ---------- */
.btn-nueva-observacion {
  background: var(--color-primary);
  color: white;
  padding: 10px 16px;
  margin-bottom: 12px;
  border: none;
}
.btn-nueva-observacion:hover { background: var(--color-primary-dark); }

.caja-nueva-observacion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 16px;
  border-radius: var(--radio);
  max-width: 600px;
  margin-bottom: 16px;
}
.caja-nueva-observacion button {
  margin-top: 8px;
  background: var(--color-primary);
  color: white;
  padding: 8px 14px;
}
.caja-nueva-observacion button:hover { background: var(--color-primary-dark); }

.hilo-observacion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radio);
  padding: 16px;
  max-width: 600px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.hilo-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.hilo-estado {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hilo-estado.Abierto { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.hilo-estado.Finalizado { background: #E5E7EB; color: #374151; }

.mensaje {
  padding: 8px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  max-width: 85%;
  font-size: 14px;
}
.mensaje-operador { background: var(--color-bg); border: 1px solid var(--color-border); margin-right: auto; }
.mensaje-admin { background: var(--color-primary-soft); margin-left: auto; text-align: right; }
.mensaje small { display: block; color: var(--color-text-muted); font-size: 11px; margin-top: 2px; }

.respuesta-hilo { display: flex; gap: 8px; margin-top: 10px; }
.respuesta-hilo textarea {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  background: var(--color-bg);
}
.respuesta-hilo button {
  background: var(--color-primary);
  color: white;
  padding: 8px 12px;
  align-self: flex-start;
}
.respuesta-hilo button:hover { background: var(--color-primary-dark); }
.btn-finalizar-hilo {
  background: var(--color-text-muted);
  color: white;
  padding: 8px 12px;
  margin-top: 8px;
}

/* ---------- Responsive: celular ---------- */
@media (max-width: 900px) {
  .vista-acceso { padding: 20px; align-items: flex-start !important; }
  .acceso-shell {
    grid-template-columns: 1fr;
    min-height: 0;
    max-width: 520px;
  }
  .acceso-presentacion { padding: 28px; min-height: 260px; }
  .acceso-logo-lienzo { width: 195px; margin-bottom: 18px; }
  .acceso-eyebrow { margin: 0 0 9px; }
  .acceso-presentacion h2 { font-size: 28px; }
  .acceso-descripcion { margin-top: 10px; }
  .acceso-beneficio { display: none; }
  .tarjeta-acceso { width: 100%; padding: 30px 28px; }
  .tarjeta-registro { padding: 30px 28px; }
  .layout { flex-direction: column; }
  .app-topbar { min-height: 54px; padding: 0 16px; position: static; }
  .app-topbar-contexto, .app-topbar-separador { display: none; }
  .app-empresa { max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    padding: 12px;
  }
  .marca-sidebar { margin-bottom: 0; margin-right: 10px; }
  .sidebar-nav { flex-direction: row; flex: none; }
  .nav-grupo-titulo { display: none; }
  .nav-item { flex-direction: column; gap: 2px; padding: 8px; font-size: 10px; white-space: nowrap; }
  .nav-item span { flex: none; }
  .btn-logout-sidebar { margin-top: 0; margin-left: 8px; white-space: nowrap; }
  .dashboard-columnas { grid-template-columns: 1fr; }
  .fila-inventario-item {
    grid-template-columns: minmax(155px, 1fr) auto 122px 130px;
  }
  .fila-inventario-item .fila-mise-en-place-requerida { display: none; }
  .estado-cuenta-cabecera, .estado-cuenta-fila { grid-template-columns: minmax(180px, 1fr) 90px 96px 96px 112px; gap: 7px; }
  .form-post-venta { grid-template-columns: 1fr; }
  .venta-resumen { position: static; }
  .contable-kpis { grid-template-columns:repeat(2, 1fr); }
  .contable-dos-columnas { grid-template-columns:1fr; }
  .form-limpieza .limpieza-checklist-card .lista-permisos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-sanitario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .vista { padding: 16px; }
  .vista-acceso { padding: 12px; }
  .acceso-shell { border-radius: 18px; }
  .acceso-presentacion { padding: 23px; min-height: 220px; }
  .acceso-presentacion h2 { font-size: 25px; }
  .acceso-logo-lienzo { width: 168px; padding: 9px 12px; }
  .tarjeta-acceso, .tarjeta-registro { padding: 26px 22px; }
  .tarjeta-acceso h1 { font-size: 27px; }
  .contenido .vista { padding: 16px; }
  .dashboard-header { padding: 22px 20px; display: block; }
  .dashboard-header-acciones { margin-top: 18px; }
  .btn-campana { flex: 1; justify-content: center; }
  .btn-campana-texto { display: none; }
  .tarjeta { padding: 24px 20px; }
  .topbar { gap: 8px; }
  table { font-size: 12px; }
  th, td { padding: 8px; }
  .form-modulo { grid-template-columns: 1fr; }
  .fila-inventario-item {
    grid-template-columns: minmax(130px, 1fr) auto;
  }
  .fila-inventario-item .solicitar-inventario { justify-self: end; }
  .fila-inventario-item .input-planilla-pedido,
  .fila-inventario-item .fila-mise-en-place-cantidad { width: 100% !important; }
  .estado-cuenta-resumen { grid-template-columns: 1fr; }
  .estado-cuenta-listado, .estado-cuenta-productos-total { padding: 16px; }
  .estado-cuenta-cabecera { display: none; }
  .estado-cuenta-fila { grid-template-columns: 1fr 1fr; padding: 13px 4px; gap: 8px; }
  .estado-cuenta-productos { grid-column: 1 / -1; }
  .estado-cuenta-fila > div:not(:first-child) { text-align: left; }
  .estado-cuenta-fila .estado-cuenta-pendiente::before { content: 'Pendiente: '; color: var(--color-text-muted); font-weight: 500; }
  .estado-cuenta-fila .estado-cuenta-total::before { content: 'Total: '; color: var(--color-text-muted); font-weight: 500; }
  .estado-cuenta-acciones { justify-content: flex-start; }
  .estado-cuenta-titulo-listado { align-items: flex-start; flex-direction: column; }
  .registros-post-venta-plegable { align-items: stretch; flex-direction: column; gap: 8px; }
  .registros-post-venta-plegable button { width: 100%; }
  .exportar-post-venta-contenido label { align-items: flex-start; flex-direction: column; }
  .exportar-post-venta-contenido input { width: 100%; }
  .exportar-post-venta-opciones { grid-template-columns: 1fr; }
  .exportar-post-venta-opciones button { width: 100%; }
  .venta-contenido-principal, .venta-resumen { padding: 16px; }
  .venta-items-cabecera { display: none; }
  .venta-item { grid-template-columns: minmax(150px, 1fr) 65px 27px; }
  .venta-item-precio { display: none; }
  .venta-item-subtotal { font-size: 11px; }
  .venta-otros-cargos { align-items: flex-start; }
  .kpis-grid { grid-template-columns: repeat(2, 1fr); }
  .contable-hero { display:block; padding:23px 20px; }.contable-hero label { margin-top:18px; }.contable-hero input { width:100%; }
  .form-limpieza { padding: 12px; }.limpieza-form-encabezado { display:block; padding:19px; }.limpieza-form-encabezado h2 { font-size:20px; }.limpieza-form-sello { display:inline-block; margin-top:14px; }.form-limpieza .limpieza-checklist-card .lista-permisos { grid-template-columns:1fr; }.limpieza-checklist-cabecera { align-items:flex-start; flex-direction:column; }
  .form-sanitario { padding:12px; grid-template-columns:1fr; }.sanitario-form-encabezado { display:block; padding:19px; }.sanitario-encabezado-texto h2 { font-size:20px; }.sanitario-sello,.sanitario-estado { display:inline-block; margin-top:14px; white-space:normal; }
  .contable-kpis { grid-template-columns:1fr 1fr; gap:9px; }.contable-kpis article { padding:14px; }.contable-kpis strong { font-size:19px; }.contable-kpis small { font-size:11px; }
  .contable-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }.contable-tabs button { white-space:nowrap; }
  .contable-listado-cabecera { display:none; }.contable-listado-fila { grid-template-columns:1fr auto; gap:5px 10px; padding:12px 2px; }.contable-listado-fila > span:nth-child(3) { grid-column:1; }.contable-listado-fila strong { grid-column:2; grid-row:1; }.contable-listado-fila > span:last-child { grid-column:2; grid-row:2; text-align:right; }.contable-exportar div { flex-direction:column; }.contable-exportar button { width:100%; }
}

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}