/* Premium Modern Design System for Egg Production App */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Sansita:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700;1,800;1,900&family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors — paleta Ecologito / TAGAT */
  --bg-primary: #f2ede4;           /* fondo crema cálido */
  --bg-secondary: #ffffff;
  --accent-blue: #1a3a2a;          /* verde oscuro corporativo */
  --accent-blue-hover: #2d5a3f;    /* verde medio para hover */
  --accent-blue-glow: rgba(26, 58, 42, 0.22);
  --accent-green: #059669;         /* verde semáforo / positivo */
  --accent-green-glow: rgba(5, 150, 105, 0.3);
  --accent-gold: #c9a227;          /* dorado acento */
  --accent-purple: #2f7d57;
  --accent-purple-glow: rgba(47, 125, 87, 0.3);
  --accent-orange: #c2710a;
  --accent-red: #dc2626;

  /* Text */
  --text-primary: #14181f;
  --text-secondary: #475569;
  --text-muted: #64748b;

  /* Cards / glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.96);
  --glass-border: rgba(15, 23, 42, 0.09);

  /* Aliases usados en estilos inline */
  --card-bg: #ffffff;
  --border: rgba(15, 23, 42, 0.12);
  --surface: #ffffff;
  --glass-border-focus: rgba(26, 58, 42, 0.5);
  --glass-shadow: 0 4px 20px 0 rgba(15, 23, 42, 0.07);

  /* Layout */
  --border-radius-lg: 14px;
  --border-radius-md: 9px;
  --border-radius-sm: 6px;

  /* Header */
  --header-bg: #1a3a2a;
  --header-text: #ffffff;
  --header-border: rgba(255, 255, 255, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', 'Open Sans', sans-serif;
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(at 10% 20%, rgba(201, 162, 39, 0.06) 0px, transparent 50%),
    radial-gradient(at 90% 80%, rgba(26, 58, 42, 0.05) 0px, transparent 50%);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Sansita', 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--text-primary);
}

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.04);
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.2);
  border-radius: var(--border-radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

/* Glassmorphic Card */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--glass-shadow);
  padding: 24px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  min-width: 0;
  overflow: hidden;
}

.card:hover {
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 10px 32px 0 rgba(15, 23, 42, 0.12);
}

/* Button Styles */
.btn {
  font-family: 'Open Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--border-radius-md);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px 0 var(--accent-blue-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px 0 var(--accent-blue-glow);
  background: linear-gradient(135deg, var(--accent-blue-hover) 0%, var(--accent-blue) 100%);
}

.btn-green {
  background: linear-gradient(135deg, var(--accent-green) 0%, #047857 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px 0 var(--accent-green-glow);
}

.btn-green:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px 0 var(--accent-green-glow);
}

.btn-secondary {
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: rgba(15, 23, 42, 0.1);
}

.btn-danger {
  background: linear-gradient(135deg, var(--accent-red) 0%, #b91c1c 100%);
  color: #ffffff;
}

.btn-danger:hover {
  transform: translateY(-1px);
}

/* Form Controls */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.form-control:focus {
  border-color: var(--glass-border-focus);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(0, 151, 70, 0.2);
}

select.form-control {
  cursor: pointer;
}

select.form-control option {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Login Page Container */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 450px;
  text-align: center;
  padding: 40px;
}

.login-header {
  margin-bottom: 30px;
}

.login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: rgba(0, 151, 70, 0.1);
  border: 1px solid rgba(0, 151, 70, 0.25);
  border-radius: 50%;
  color: var(--accent-blue);
  margin-bottom: 16px;
  box-shadow: 0 0 20px rgba(0, 151, 70, 0.15);
}

/* Dashboard Layout */
.dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  height: 64px;
  border-bottom: 1px solid var(--header-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-brand h1 {
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--header-text) !important;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-badge {
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 12px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--header-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-badge i {
  color: var(--accent-gold);
}

.main-content {
  flex: 1;
  padding: 30px 40px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

/* Grid layout for Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--border-radius-md);
  font-size: 24px;
}

.stat-blue {
  background: rgba(26, 58, 42, 0.1);
  border: 1px solid rgba(26, 58, 42, 0.22);
  color: var(--accent-blue);
}

.stat-green {
  background: rgba(5, 150, 105, 0.12);
  border: 1px solid rgba(5, 150, 105, 0.25);
  color: var(--accent-green);
}

.stat-purple {
  background: rgba(47, 125, 87, 0.12);
  border: 1px solid rgba(47, 125, 87, 0.25);
  color: var(--accent-purple);
}

.stat-orange {
  background: rgba(194, 113, 10, 0.12);
  border: 1px solid rgba(194, 113, 10, 0.25);
  color: var(--accent-orange);
}

.stat-info h4 {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.stat-info p {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* Tabs Navigation */
.tabs-nav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 24px;
  padding-bottom: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.2) transparent;
}

.tabs-nav::-webkit-scrollbar {
  height: 4px;
}

.tabs-nav::-webkit-scrollbar-track {
  background: transparent;
}

.tabs-nav::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.2);
  border-radius: 4px;
}

.tab-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.05);
}

.tab-btn.active {
  color: var(--accent-blue);
  font-weight: 700;
  background: rgba(26, 58, 42, 0.1);
  border: 1px solid rgba(26, 58, 42, 0.28);
  box-shadow: 0 1px 6px rgba(26, 58, 42, 0.08);
}

/* Split Section (Form + Table) */
.section-split {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 24px;
}

#admin-tab-raw .section-split {
  grid-template-columns: 280px minmax(0, 1fr);
}

@media (max-width: 1024px) {
  .section-split {
    grid-template-columns: 1fr;
  }
}

/* Tables styling */
.table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 480px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--glass-border);
  background: #ffffff;
}

.table-app {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
}

.table-app th {
  background: rgba(241, 245, 249, 0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 14px 16px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--glass-border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.table-app td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  color: var(--text-primary);
  white-space: nowrap;
}

.table-app tbody tr:hover {
  background: rgba(0, 151, 70, 0.05);
}

/* Consolidation Grid */
.consolidator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.consolidator-filters {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* La card del consolidado NO debe clippear: overflow:hidden rompería sticky y max-height del wrapper */
#admin-tab-conso .card {
  overflow: visible;
}

.conso-table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 260px);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--glass-border);
  background: #ffffff;
}

.table-conso {
  /* Sin width fijo: con table-layout:fixed, el ancho total lo define la
     suma de los width declarados en las celdas de la primera fila (ver
     renderAdminConsolidated en app.js), que ya varían según la cantidad
     real de productores. Un número fijo acá quedaba desincronizado y
     dejaba espacio sobrante sin repartir. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
}

.table-conso th, .table-conso td {
  border: 1px solid rgba(15, 23, 42, 0.1);
  padding: 8px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-conso thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #e2e8f0;
  font-weight: 600;
  color: var(--text-primary);
}

.table-conso thead tr:nth-child(2) th {
  position: sticky;
  top: 35px; /* Altura de la primera fila para evitar que se monte */
  z-index: 2;
  background: #e2e8f0;
  font-weight: 600;
  color: var(--text-primary);
}

.table-conso th {
  background: rgba(15, 23, 42, 0.05);
  font-weight: 600;
  color: var(--text-primary);
}

.table-conso .row-header {
  background: rgba(15, 23, 42, 0.03);
  font-weight: 500;
  text-align: left;
  color: var(--text-secondary);
}

.table-conso .section-header {
  background: rgba(26, 58, 42, 0.1);
  font-weight: 600;
  text-align: left;
  color: #1a3a2a;
  font-size: 13px;
}

.table-conso .total-col {
  background: rgba(15, 23, 42, 0.04);
  font-weight: 600;
}

.table-conso tr:hover td {
  background: rgba(0, 151, 70, 0.05);
}

.check-ok {
  color: var(--accent-green);
  font-weight: bold;
  font-size: 14px;
}

.check-bad {
  color: var(--accent-orange);
  font-weight: bold;
  font-size: 14px;
}

.text-num {
  font-family: monospace;
  font-size: 13px;
}

/* Helper display under inputs */
.calc-preview {
  margin-top: 10px;
  padding: 10px;
  background: rgba(0, 151, 70, 0.06);
  border-radius: var(--border-radius-sm);
  border-left: 3px solid var(--accent-blue);
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calc-preview span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.calc-preview span strong {
  color: var(--text-primary);
}

/* Dashboard Panels control */
.panel {
  display: none;
}

.panel.active {
  display: block;
}

/* Star rating style */
.star-rating {
  color: var(--accent-orange);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ========================================== */
/* MOBILE RESPONSIVE STYLING                  */
/* ========================================== --> */

/* Remove global min-width from table-app to allow smaller tables to fit perfectly without stretching parent cards */
.table-app {
  width: 100%;
}

.table-wide {
  min-width: 1100px !important;
}

.table-md {
  min-width: 700px !important;
}

/* Flex Column Wrapper inside Grid/Split layouts to prevent child expansion */
.flex-col-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}


/* Sticky columns for easy horizontal scrolling */
.sticky-col {
  position: sticky;
  left: 0;
  background-color: #ffffff !important;
  z-index: 3; /* > thead th (2) → tapa headers al scrollear horizontal */
  box-shadow: 3px 0 6px rgba(15, 23, 42, 0.12);
  text-align: left;
  font-weight: 600;
}

th.sticky-col {
  z-index: 10; /* esquina sup-izq: siempre encima de todo */
  background-color: #e2e8f0 !important;
}

/* Segunda fila del thead: top calculado dinámicamente por JS */

.table-conso .section-header td {
  background-color: #d6e8db !important;
  color: #1a3a2a !important;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
}

canvas {
  max-width: 100% !important;
}

@media (max-width: 768px) {
  /* Layout Paddings */
  .header {
    padding: 0 16px;
    height: 60px;
  }

  .header h1 {
    font-size: 17px;
  }

  .main-content {
    padding: 16px 12px;
  }

  .card {
    padding: 16px;
    margin-bottom: 16px;
  }

  /* Responsive stats grid */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
  }

  .stat-card {
    padding: 12px;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }

  .stat-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .stat-info h4 {
    font-size: 10px;
  }

  .stat-info p {
    font-size: 18px;
  }

  /* Navigation Tabs Scroll on Mobile */
  .tabs-nav {
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    gap: 4px;
    padding-bottom: 4px;
    scrollbar-width: none; /* Hide scrollbar Firefox */
  }

  .tabs-nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
  }

  .tab-btn {
    padding: 8px 12px;
    font-size: 13px;
    flex-shrink: 0;
  }

  /* Forms modifications on mobile */
  .section-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Flex rows in admin selectors */
  .consolidator-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .consolidator-header h2 {
    font-size: 16px !important;
  }

  .consolidator-filters {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .consolidator-filters select {
    width: 100% !important;
  }

  /* User badge sizes */
  .user-badge {
    font-size: 12px;
    padding: 4px 10px;
  }
}

@media (max-width: 500px) {
  .header-brand .login-icon {
    display: none; /* Hide icon to save space */
  }
  .header h1 {
    font-size: 14px;
  }
  .header-user {
    gap: 8px;
  }
  .user-badge {
    padding: 4px 8px;
    font-size: 11px;
  }
  .user-badge i {
    display: none; /* Hide user icon to save space */
  }
  #btn-logout {
    padding: 4px 8px;
    font-size: 11px;
  }
  #btn-logout .btn-text {
    display: none; /* Hide "Salir" text */
  }
  #btn-logout i {
    margin: 0;
  }
}

/* Responsive 2-column Grid layout */
.grid-2-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  .grid-2-col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .grid-2-col > * {
    grid-column: span 1 !important;
  }
  #admin-tab-raw .section-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .login-card {
    padding: 20px;
  }
}

/* Modal Overlay & Card Styling */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  width: 100%;
  max-width: 500px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  padding: 30px;
  margin-bottom: 0;
  position: relative;
  overflow: visible;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 12px;
  margin-bottom: 15px;
}

.modal-header button {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal-header button:hover {
  color: var(--text-primary);
}

/* Action button icons in tables */
.btn-icon-only {
  padding: 6px;
  border-radius: var(--border-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-secondary);
  margin: 0 4px;
}

.btn-icon-only:hover {
  background: rgba(15, 23, 42, 0.1);
  color: var(--text-primary);
}

.btn-icon-edit:hover {
  background: rgba(0, 151, 70, 0.15);
  border-color: rgba(0, 151, 70, 0.4);
  color: #007a39;
}

.btn-icon-delete:hover {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.4);
  color: #dc2626;
}

/* ========================================== */
/* PRINTING OPTIMIZATIONS (@media print)      */
/* ========================================== */
@media print {
  body.printing-active {
    background: #ffffff !important;
    color: #000000 !important;
  }

  body.printing-active #app-dashboard,
  body.printing-active header,
  body.printing-active .sidebar,
  body.printing-active .tabs-nav,
  body.printing-active .no-print,
  body.printing-active button,
  body.printing-active .consolidator-filters,
  body.printing-active .modal-overlay {
    display: none !important;
  }

  body.printing-active #printable-report-area {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Print Layout Card Styling */
  .print-report-container {
    padding: 30px;
    font-family: 'Inter', system-ui, sans-serif;
    background: #ffffff !important;
    color: #000000 !important;
  }

  .print-header {
    border-bottom: 2px solid #333333;
    padding-bottom: 15px;
    margin-bottom: 25px;
  }

  .print-header h1 {
    font-size: 24px;
    margin: 0;
    color: #111111 !important;
  }

  .print-header p {
    font-size: 13px;
    color: #555555 !important;
    margin: 5px 0 0 0;
  }

  .print-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }

  .print-card {
    border: 1px solid #cccccc !important;
    border-radius: 6px;
    padding: 16px;
    background: #ffffff !important;
    color: #000000 !important;
    page-break-inside: avoid;
  }

  .print-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 15px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 8px;
    color: #111111 !important;
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  .print-table td, .print-table th {
    padding: 8px 10px;
    border-bottom: 1px solid #eeeeee;
    text-align: left;
    color: #222222 !important;
  }

  .print-table th {
    font-weight: 600;
    background: #f7f7f7 !important;
  }

  .print-table .text-num {
    text-align: right;
  }

  .print-chart-container {
    text-align: center;
    margin: 15px 0;
  }

  .print-chart-image {
    max-width: 100%;
    height: auto;
    border: 1px solid #eeeeee;
  }

  .print-insight-box {
    margin-top: 15px;
    padding: 12px 15px;
    border-left: 4px solid #10b981;
    background: #f0fdf4 !important;
    color: #1f2937 !important;
    font-size: 13px;
    line-height: 1.5;
  }

  .print-footer {
    border-top: 1px solid #dddddd;
    margin-top: 40px;
    padding-top: 10px;
    font-size: 10px;
    color: #777777 !important;
    text-align: center;
  }
}

/* ================================================== */
/* IMPRESIÓN GENERAL DE CUALQUIER VISTA (Ctrl+P)      */
/* Aplica a la página que el usuario está viendo,     */
/* sin tocar el informe especial (printing-active).   */
/* Objetivo: que NADA quede cortado al imprimir.      */
/* ================================================== */
@media print {
  /* Márgenes de hoja razonables. El usuario elige
     vertical/horizontal en el diálogo de impresión;
     para tablas anchas conviene "Horizontal". */
  @page {
    size: landscape;
    margin: 10mm;
  }

  body:not(.printing-active) {
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Ocultar todo lo que no es contenido imprimible */
  body:not(.printing-active) .header,
  body:not(.printing-active) header.header,
  body:not(.printing-active) .tabs-nav,
  body:not(.printing-active) .sidebar,
  body:not(.printing-active) .no-print,
  body:not(.printing-active) .consolidator-filters,
  body:not(.printing-active) .modal-overlay,
  body:not(.printing-active) button,
  body:not(.printing-active) .btn {
    display: none !important;
  }

  /* El área principal ocupa todo el ancho de la hoja */
  body:not(.printing-active) .main-content,
  body:not(.printing-active) #app-dashboard,
  body:not(.printing-active) main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Tarjetas: fondo blanco, sin sombras, sin recorte,
     y evitar que se partan a la mitad entre páginas */
  body:not(.printing-active) .card,
  body:not(.printing-active) .stat-card {
    background: #ffffff !important;
    box-shadow: none !important;
    border: 1px solid #cccccc !important;
    overflow: visible !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Quitar TODO scroll/recorte de los contenedores de tablas
     para que se vean todas las filas y columnas */
  body:not(.printing-active) .table-container,
  body:not(.printing-active) .conso-table-wrapper,
  body:not(.printing-active) .flex-col-container,
  body:not(.printing-active) [style*="overflow"] {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Las tablas se ajustan al ancho de la hoja (anulamos
     min-width fijos e inline) y el texto se acomoda en
     varias líneas en vez de cortarse */
  body:not(.printing-active) table,
  body:not(.printing-active) .table-app,
  body:not(.printing-active) .table-wide,
  body:not(.printing-active) .table-md,
  body:not(.printing-active) .table-conso {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }

  /* La planilla semanal del productor y el consolidado admin ya traen
     proporciones de columna pensadas a mano (ver index.html y
     renderAdminConsolidated en app.js). table-layout:auto las tira abajo
     y recalcula todo según el contenido, dejando columnas angostas
     donde sobra espacio y otras apretadas. Con fixed + width:100%
     el navegador conserva esas proporciones relativas, solo escaladas
     al ancho de la hoja. */
  body:not(.printing-active) #weekly-inline-table,
  body:not(.printing-active) #admin-conso-table {
    table-layout: fixed !important;
  }

  body:not(.printing-active) th,
  body:not(.printing-active) td,
  body:not(.printing-active) .table-app th,
  body:not(.printing-active) .table-app td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    padding: 5px 7px !important;
    font-size: 10px !important;
    color: #000000 !important;
  }

  body:not(.printing-active) thead {
    display: table-header-group; /* repite encabezados en cada hoja */
  }

  body:not(.printing-active) tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Gráficos: que no se partan entre páginas */
  body:not(.printing-active) canvas,
  body:not(.printing-active) .chart-container {
    page-break-inside: avoid;
    break-inside: avoid;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Anular animaciones/transformaciones que podrían
     ocultar contenido al renderizar para impresión */
  body:not(.printing-active) .fade-in,
  body:not(.printing-active) * {
    animation: none !important;
    transition: none !important;
  }

  /* Imprimir solo una semana puntual (planilla del productor o consolidado
     admin): printWeek()/printConsoWeek() marcan con .print-hide-row todas
     las filas/tbody que NO son de la semana elegida antes de imprimir. */
  body.printing-week-only .print-hide-row {
    display: none !important;
  }

  body.printing-week-only {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11px !important; /* Reducir ligeramente el tamaño general de la fuente para impresión */
  }

  @page {
    size: landscape;
    margin: 5mm;
  }

  body.printing-week-only #app-dashboard,
  body.printing-week-only .main-content,
  body.printing-week-only .table-container,
  body.printing-week-only .conso-table-wrapper,
  body.printing-week-only #weekly-inline-table,
  body.printing-week-only #admin-conso-table,
  body.printing-week-only .card {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* AISLAMIENTO DE VISTAS DURANTE LA IMPRESIÓN */
  body.printing-producer-week #panel-producer,
  body.printing-producer-week #prod-tab-daily {
    display: block !important;
  }
  body.printing-producer-week #panel-admin,
  body.printing-producer-week #admin-tab-conso,
  body.printing-producer-week .conso-table-wrapper,
  body.printing-producer-week #admin-conso-table {
    display: none !important;
  }

  body.printing-admin-week #panel-admin,
  body.printing-admin-week #admin-tab-conso,
  body.printing-admin-week .conso-table-wrapper,
  body.printing-admin-week #admin-conso-table {
    display: block !important;
  }
  body.printing-admin-week #panel-producer,
  body.printing-admin-week #prod-tab-daily,
  body.printing-admin-week .table-container,
  body.printing-admin-week #weekly-inline-table {
    display: none !important;
  }

  body.printing-week-only .header,
  body.printing-week-only header,
  body.printing-week-only .tabs-nav,
  body.printing-week-only .sidebar,
  body.printing-week-only .no-print,
  body.printing-week-only button,
  body.printing-week-only .consolidator-filters,
  body.printing-week-only .modal-overlay,
  body.printing-week-only .stats-grid,
  body.printing-week-only #lot-summary-bar,
  body.printing-week-only #producer-gift-eggs-card {
    display: none !important;
  }

  /* Mostrar cabecera de impresión exclusiva */
  body.printing-week-only .print-only-header {
    display: block !important;
  }

  /* Permitir visualización compacta de los gráficos del productor */
  body.printing-week-only #producer-charts-and-summary {
    display: block !important;
    margin-top: 10px !important;
    padding: 0 !important;
  }
  body.printing-week-only #producer-charts-and-summary .card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    padding: 6px !important;
    margin: 0 !important;
  }
  body.printing-week-only #producer-charts-and-summary canvas {
    display: block !important;
    height: 100px !important; /* Altura compacta para que quepa en una sola hoja junto con la tabla */
    width: 100% !important;
  }

  /* Compactación estricta para la tabla consolidada del administrador */
  body.printing-week-only #admin-conso-table {
    table-layout: fixed !important;
    width: 100% !important;
    font-size: 8px !important;
    border-collapse: collapse !important;
  }
  body.printing-week-only #admin-conso-table th,
  body.printing-week-only #admin-conso-table td {
    padding: 2px !important;
    font-size: 8px !important;
    white-space: normal !important;
    word-break: break-all !important;
  }
  body.printing-week-only #admin-conso-table .sticky-col {
    position: static !important;
    width: auto !important;
  }
}