/* ===== estilos.css ===== */
:root {
  --bg: #f6f7fb;
  --text: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --primary: #0ea5e9;
  --ok: #10b981;

  /* Tamaños base */
  --fs-base: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;

  /* Altura táctil mínima */
  --tap: 40px;

  /* Producción */
  --prod-header-sticky: 56px;
}

* { box-sizing: border-box; }

html { font-size: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,"Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  font-size: var(--fs-base);
}

/* ===== HEADER ===== */
header {
  position: sticky;
  top: 0;
  background: #ffffffd8;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  z-index: 10;
}

/* ===== MAIN CONTAINER ===== */
.wrap {
  max-width: 1100px;
  margin: 16px auto;
  padding: 0 14px;
}
@media (min-width: 1400px) { .wrap { max-width: 1400px; } }
@media (min-width: 1600px) { .wrap { max-width: 1560px; } }

/* ===== CARDS ===== */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(2, 8, 23, 0.06);
  margin-bottom: 14px;
}
h3 { margin-top: 0; color: var(--text); }

/* ===== FORM ELEMENTS ===== */
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.col { flex: 1 1 220px; }

input,select,button,textarea {
  width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #d1d5db;
  min-height: var(--tap); font-size: 1rem;
}
textarea { min-height: 100px; resize: vertical; }

button {
  cursor: pointer; font-weight: 700; background: var(--primary); color: white; border: none;
  transition: background 0.2s ease;
}
button:hover { background: #0284c7; }

/* Compact inputs usados en Producción */
.input-compact, select.input-compact, textarea.input-compact {
  min-height: 38px; padding: 8px 10px; font-size: var(--fs-sm); border-radius: 9px;
}

/* ===== TABLES ===== */
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
th, td { padding: 10px; border-bottom: 1px solid #eef2f7; text-align: center; }
th { background: #f8fafc; font-weight: 600; }
tr:hover td { background: #f9fafb; }

/* ===== Responsive helpers (global) ===== */
.tabla-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Compact table variant */
.table-min { font-size: 14px; }
.table-min th, .table-min td { padding: 8px 10px; }

/* Generic two-column grid that collapses on small screens */
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Mobile-first tweaks */
@media (max-width: 900px) {
  .two-cols { grid-template-columns: 1fr; }
  .wrap { padding: 0 10px; }
  th, td { padding: 8px; font-size: var(--fs-sm); }
  .tbtn { padding: 6px 10px; font-size: var(--fs-sm); }
}
@media (max-width: 600px) {
  .row { flex-direction: column; }
  .col { flex: 1 1 100%; width: 100%; }
  .toolbar { gap: 6px; }
  .tbtn.sm { padding: 5px 8px; font-size: var(--fs-xs); }
  .table-min { font-size: var(--fs-sm); }
}

/* ===== MINI TOOLBAR ===== */
.toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--line); background: #fff;
  border-radius: 12px; box-shadow: 0 6px 16px rgba(2, 8, 23, 0.05);
}
.toolbar.sticky { position: sticky; top: 64px; z-index: 9; }
.toolbar .spacer { flex: 1 1 auto; }

.tgroup { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.tbtn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--text); text-decoration: none;
  font-weight: 700; font-size: 14px; cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  min-height: var(--tap);
}
.tbtn:hover { transform: translateY(-1px); border-color: #cbd5e1; box-shadow: 0 8px 18px rgba(2, 8, 23, 0.08); }
.tbtn.primary { background: linear-gradient(180deg, #e0f2fe, #f0f9ff); border-color: #7dd3fc; }
.tbtn.secondary { background: #f8fafc; }
.tbtn.ghost { background: #fff; }
.tbtn.warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.tbtn.danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.tbtn.success { background: #ecfdf5; border-color: #bbf7d0; color: #065f46; }
.tbtn.sm { padding: 6px 10px; font-size: 13px; border-radius: 9px; }
.tbtn.icon { width: 36px; height: 36px; padding: 0; justify-content: center; font-weight: 900; }

.tdivider { width: 1px; height: 26px; background: var(--line); border-radius: 1px; margin: 0 2px; }

/* Etiquetas/chips reutilizables */
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #e0f2fe; border: 1px solid #bae6fd; color: #075985; font-weight: 800; font-size: 12px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 800; font-size: 12px; }
.badge-plan { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.badge-hecho { background: #ecfdf5; border: 1px solid #bbf7d0; color: #065f46; }

/* ===== Acciones en tablas (químicos/etiquetado/envases) ===== */
.cell-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cell-actions .tgroup { display: flex; align-items: center; gap: 6px; }
.cell-actions input[type="number"], .cell-actions input[type="text"] {
  width: 90px; text-align: right; padding: 6px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
}
.cell-actions .tbtn.sm { min-width: 90px; justify-content: center; text-align: center; padding: 6px 8px; font-weight: 600; }
.cell-actions .tbtn.sm.warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.cell-actions .tbtn.sm.danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.cell-actions .tbtn.sm:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(2, 8, 23, 0.08); }

/* ===== Formularios varios ===== */
#form-quimicos .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
#form-quimicos label { font-weight: 700; color: var(--text); }
#form-quimicos input,#form-quimicos select,#form-quimicos textarea { padding: 12px; border-radius: 10px; border: 1px solid #d1d5db; }

#form-quimicos textarea,
#form-etiquetas textarea,
#form-envases textarea,
#plan textarea,
#form-inventario textarea,
#alta textarea,
#form-salida textarea,
#form-aromas textarea {
  grid-column: 1 / -1; width: 100%; min-height: 100px; resize: vertical; border-radius: 10px;
  border: 1px solid #d1d5db; padding: 12px; font-family: inherit; font-size: 14px; line-height: 1.4; background: #fff;
}

/* Botón centrado */
#form-quimicos .actions,#form-etiquetas .actions,#form-envases .actions {
  grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 10px;
}
#form-quimicos .btn-main,#form-etiquetas .btn-main,#form-envases .btn-main {
  width: auto; min-width: 180px; padding: 12px 18px; border-radius: 10px;
}

/* Responsivo formularios */
@media (max-width: 980px) { #form-quimicos .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #form-quimicos .grid { grid-template-columns: 1fr; } #form-quimicos .btn-main { width: 100%; } }

/* =========================================================
   ============   PRODUCCIÓN (RESPONSIVE PRO)   ============ */
.prod-table thead th { position: sticky; top: calc(64px + 8px); z-index: 2; }
.prod-table td:first-child,.prod-table thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: #fff; border-right: 1px solid #f1f5f9;
}
.prod-table td:nth-child(2),.prod-table thead th:nth-child(2) {
  position: sticky; left: 80px; z-index: 1; background: #fff; border-right: 1px solid #f1f5f9;
}
.prod-row { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.prod-row td { padding: 10px; vertical-align: middle; border-right: 1px dashed #eef2f7; overflow-wrap: anywhere; word-break: break-word; }
.prod-row td:last-child { border-right: 0; }
.tabla-container::-webkit-scrollbar { height: 10px; }
.tabla-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.tabla-container::-webkit-scrollbar-track { background: #f1f5f9; }

.env-grid-row { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; align-items: end; }
.env-grid-row > * { min-width: 0; }
.env-grid-row .note { grid-column: 1 / -1; }
.env-status { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-plan { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.badge-hecho { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

.iconbar { display: flex; gap: 4px; flex-wrap: wrap; }
.iconbtn { height: 34px; padding: 0 10px; border-radius: 9px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: #111827; color: #fff; font-size: var(--fs-sm); cursor: pointer; }
.iconbtn.ok { background: #059669; border-color: #059669; }
.iconbtn.primary { background: #111827; border-color: #111827; }
.iconbtn[disabled] { opacity: 0.5; pointer-events: none; }

.w80 { width: 80px; }
.center { text-align: center; }
.right { text-align: right; }

@media (max-width: 1100px) { .prod-table { font-size: var(--fs-sm); } }
@media (max-width: 900px) { .env-grid-row { grid-template-columns: repeat(4, minmax(120px, 1fr)); } }
@media (max-width: 720px) {
  .prod-table thead th { top: calc(56px + 8px); }
  .env-grid-row { grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 10px; }
  .iconbtn { height: 40px; font-size: var(--fs-sm); }
  .input-compact, select.input-compact { min-height: 40px; font-size: var(--fs-sm); }
  .tbtn, .tbtn.sm { min-height: 40px; }
}
@media (max-width: 520px) {
  .prod-table td, .prod-table th { padding: 8px 10px; }
  .env-grid-row { grid-template-columns: 1fr 1fr; }
  .w80 { width: 64px; }
  .prod-table thead th:first-child, .prod-table td:first-child { left: 0; }
  .prod-table thead th:nth-child(2), .prod-table td:nth-child(2) { left: 64px; }
}

/* ===== Accesibilidad / Motion ===== */
@media (prefers-reduced-motion: reduce) {
  .tbtn:hover, .cell-actions .tbtn.sm:hover, .toolbar, .card { transition: none !important; }
}

/* ===========================
   NAV RESPONSIVE (HAMBURGUESA)
   =========================== */

/* Botón hamburguesa — visible y azul por defecto */
.hamburger {
  border: 1px solid #1e3a8a;
  background: #1e40af;
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: none;             /* solo móvil */
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .15s ease;
}
.hamburger:hover, .hamburger:focus { background: #2563eb; outline: none; transform: scale(1.05); }
body.nav-open .hamburger { background: #334155; }

/* Drawer lateral móvil */
.mobile-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(86%, 340px);
  background: #ffffff; border-left: 1px solid var(--line);
  box-shadow: -12px 0 28px rgba(2,8,23,.12);
  transform: translateX(100%); transition: transform .25s ease;
  z-index: 1000; display: none; flex-direction: column;
}
.mobile-drawer .mobile-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; border-bottom:1px solid var(--line);
}
.mobile-drawer .mobile-body { padding: 12px; display: grid; gap: 8px; }

/* Fondo oscuro */
.mobile-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(1px);
  z-index: 999; opacity: 0; pointer-events: none; transition: opacity .18s ease; display: none;
}

/* Estado abierto */
body.nav-open .mobile-drawer { transform: translateX(0%); }
body.nav-open .mobile-backdrop { opacity: 1; pointer-events: auto; }

/* Breakpoints: mostrar/ocultar elementos correctos */
@media (max-width: 900px) {
  .hamburger { display: inline-flex; }
  .mobile-drawer, .mobile-backdrop { display: block; }
  .desktop-links { display: none !important; }
}
@media (min-width: 901px) {
  /* En desktop jamás mostramos los elementos móviles */
  .hamburger, .mobile-drawer, .mobile-backdrop { display: none !important; }
}

/* ===== FIX: Producción sin sticky para que no tape formularios ===== */

/* Usa .no-sticky para desactivar columnas/encabezados pegajosos */
.prod-table.no-sticky thead th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}
.prod-table.no-sticky td:first-child,
.prod-table.no-sticky thead th:first-child,
.prod-table.no-sticky td:nth-child(2),
.prod-table.no-sticky thead th:nth-child(2) {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  background: #fff;
  border-right: 1px solid #eef2f7;
}

/* En producción, alinear a la izquierda para que los inputs respiren */
.prod-table th,
.prod-table td { 
  text-align: left !important;
  vertical-align: top;
}

/* Mantener centrado solo cuando explícitamente se use .center */
.prod-table th.center,
.prod-table td.center { 
  text-align: center !important; 
}

/* Si en el futuro quieres sticky, que sea opt-in con .sticky-table */
.sticky-table thead th { position: sticky; top: calc(64px + 8px); z-index: 2; }
.sticky-table td:first-child,
.sticky-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
.sticky-table td:nth-child(2),
.sticky-table thead th:nth-child(2) { position: sticky; left: 80px; z-index: 1; background: #fff; }