/* ============================================================
   PastryLabel — Estilos responsive
   Breakpoints: móvil <480px | tablet 481-768px | desktop >768px
   ============================================================ */

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

:root {
  --color-primary:    #1D9E75;
  --color-primary-dk: #0F6E56;
  --color-bg:         #f5f4f0;
  --color-surface:    #ffffff;
  --color-border:     rgba(0,0,0,0.1);
  --color-text:       #1a1a18;
  --color-muted:      #6b6b67;
  --color-danger:     #a32d2d;
  --color-success:    #0F6E56;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        14px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --navbar-h: 52px;
}

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

/* ============================================================
   NAVBAR — Desktop
   ============================================================ */
.navbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: var(--navbar-h);
  background: var(--color-surface);
  border-bottom: 0.5px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 200;
}
.nav-brand {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.nav-brand img { width: 20px; height: 20px; opacity: .8; }
.nav-links {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active {
  background: #E1F5EE;
  color: var(--color-primary-dk);
  font-weight: 500;
}
.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex-shrink: 0;
}
.nav-user span:last-of-type {
  display: none; /* Ocultar nombre en pantallas pequeñas */
}
.btn-logout {
  font-size: 12px;
  color: var(--color-muted);
  background: none;
  border: 0.5px solid var(--color-border);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.btn-logout:hover { background: #fce; color: var(--color-danger); }

/* Menú hamburguesa (solo móvil) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all .3s;
}

/* Menú móvil desplegable */
.nav-mobile {
  display: none;
  position: absolute;
  top: var(--navbar-h);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 0.5px solid var(--color-border);
  padding: 8px 16px 16px;
  z-index: 199;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 0.5px solid var(--color-border);
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a.active { background: #E1F5EE; color: var(--color-primary-dk); font-weight: 500; }
.nav-mobile .nav-mobile-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--color-muted);
  border-top: 0.5px solid var(--color-border);
  margin-top: 4px;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.page-header h1 { font-size: 20px; font-weight: 600; }
.two-col {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 16px;
}
.two-col-sm {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 10px;
}

/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }

/* ============================================================
   STATS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.stat-label { font-size: 11px; color: var(--color-muted); margin-bottom: 4px; }
.stat-value { font-size: 26px; font-weight: 600; }
.stat-value--sm { font-size: 14px; font-weight: 500; margin-top: 4px; }

/* ============================================================
   FORMS
   ============================================================ */
.field-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field-row--inline { flex-direction: row; align-items: center; gap: 10px; }
.field-label {
  font-size: 11px;
  color: var(--color-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .4px;
}
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fafaf8;
  color: var(--color-text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(29,158,117,.15);
}
textarea { resize: vertical; }
.field-value {
  font-size: 13px;
  background: #f0f0ec;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.field-readonly { color: var(--color-success); font-weight: 500; }
.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--color-border);
  flex-wrap: wrap;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  touch-action: manipulation;
}
.btn-primary:hover { background: var(--color-primary-dk); }
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  touch-action: manipulation;
}
.btn-secondary:hover { background: var(--color-bg); }
.btn-block { width: 100%; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 5px;
}
.badge-teal   { background: #E1F5EE; color: #0F6E56; }
.badge-amber  { background: #FAEEDA; color: #854F0B; }
.badge-purple { background: #EEEDFE; color: #3C3489; }
.badge-coral  { background: #FAECE7; color: #993C1D; }
.badge-gray   { background: #F1EFE8; color: #5F5E5A; }

/* ============================================================
   TABLE — con scroll horizontal en móvil
   ============================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 500px;
}
.table th {
  font-size: 11px;
  color: var(--color-muted);
  font-weight: 500;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.table td {
  padding: 10px 10px;
  border-bottom: 0.5px solid var(--color-border);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #fafaf8; }
.table--sm td, .table--sm th { padding: 7px 8px; }
.row-inactive td { opacity: .45; }
code {
  font-size: 12px;
  background: #f0f0ec;
  padding: 1px 5px;
  border-radius: 4px;
}
.td-actions { display: flex; gap: 10px; white-space: nowrap; }
.link-action { color: var(--color-primary); font-size: 12px; text-decoration: none; }
.link-action:hover { text-decoration: underline; }
.link-danger { color: var(--color-danger); font-size: 12px; text-decoration: none; }
.link-more { font-size: 13px; color: var(--color-primary); text-decoration: none; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}
.alert-error   { background: #FCEBEB; color: #a32d2d; border: 0.5px solid #f09595; }
.alert-success { background: #E1F5EE; color: #0F6E56; border: 0.5px solid #5DCAA5; }

/* ============================================================
   FILTERS BAR
   ============================================================ */
.filters-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}
.filters-bar input { flex: 1; min-width: 120px; }

/* ============================================================
   QUANTITY SELECTOR
   ============================================================ */
.qty-row { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--color-border);
  background: #f0f0ec;
  font-size: 20px;
  color: var(--color-text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
}
.qty-btn:hover { background: #e4e3de; }
#num_etiquetas { width: 64px; text-align: center; font-size: 17px; font-weight: 500; }
.qty-label { font-size: 12px; color: var(--color-muted); margin-left: 4px; }
.qty-presets { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.qty-preset {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 5px;
  border: 0.5px solid var(--color-border);
  background: #f0f0ec;
  color: var(--color-muted);
  cursor: pointer;
  touch-action: manipulation;
}
.qty-preset.selected {
  background: #E1F5EE;
  color: #0F6E56;
  border-color: #5DCAA5;
  font-weight: 500;
}

/* ============================================================
   LABEL PREVIEW
   ============================================================ */
.label-preview-box {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  min-height: 160px;
}
.empty-state {
  color: var(--color-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

/* ============================================================
   LOGIN
   ============================================================ */
.login-body {
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.login-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
}
.login-logo { font-size: 36px; text-align: center; margin-bottom: 8px; }
.login-title { font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.login-sub { font-size: 13px; color: var(--color-muted); text-align: center; margin-bottom: 24px; }

/* ============================================================
   PRINT CONTROLS
   ============================================================ */
.print-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--color-surface);
  border-bottom: 0.5px solid var(--color-border);
  flex-wrap: wrap;
  gap: 10px;
}
.print-info { font-size: 13px; }
.print-btns { display: flex; gap: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--color-muted);
  border-top: 0.5px solid var(--color-border);
  margin-top: 40px;
}

/* ============================================================
   RESPONSIVE — TABLET (≤768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Navbar */
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-user span:last-of-type { display: none; }

  /* Layout */
  .container { padding: 14px 12px; }
  .two-col { grid-template-columns: 1fr; }
  .two-col-sm { grid-template-columns: 1fr 1fr; }

  /* Stats — 2 columnas en tablet */
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-value { font-size: 22px; }

  /* Page header */
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header .btn-primary { width: 100%; text-align: center; }

  /* Tables */
  .table { font-size: 12px; }
  .table th, .table td { padding: 8px 6px; }
  .table--sm th, .table--sm td { padding: 6px 5px; }

  /* Formularios — inputs más grandes para touch */
  input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=date], select, textarea {
    padding: 12px;
    font-size: 16px; /* Evita zoom en iOS */
  }

  /* Botones más grandes para touch */
  .btn-primary, .btn-secondary { padding: 12px 16px; font-size: 15px; }

  /* Qty presets más grandes */
  .qty-preset { padding: 8px 14px; font-size: 14px; }
  .qty-btn { width: 44px; height: 44px; font-size: 22px; }
}

/* ============================================================
   RESPONSIVE — MÓVIL (≤480px)
   ============================================================ */
@media (max-width: 480px) {

  /* Stats — 1 columna */
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .stat-card { padding: 10px 12px; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 10px; }

  /* Two-col-sm en móvil también apilado */
  .two-col-sm { grid-template-columns: 1fr; }

  /* Cards */
  .card { padding: 12px; }
  .card-title { font-size: 14px; }

  /* Navbar */
  .navbar { padding: 0 12px; height: 48px; }
  :root { --navbar-h: 48px; }
  .nav-brand { font-size: 14px; }

  /* Filters bar en columna */
  .filters-bar { flex-direction: column; }
  .filters-bar input, .filters-bar select { width: 100%; }
  .filters-bar .btn-primary, .filters-bar .btn-secondary { width: 100%; }

  /* Form actions en columna */
  .form-actions { flex-direction: column; }
  .form-actions .btn-primary,
  .form-actions .btn-secondary { width: 100%; text-align: center; }

  /* Ocultar columnas menos importantes en tablas */
  .table .hide-mobile { display: none; }

  /* Login */
  .login-card { padding: 24px 20px; }
}

/* ============================================================
   TOUCH — mejoras generales táctiles
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Aumentar área táctil de links */
  .link-action, .link-danger, .link-more {
    padding: 4px 2px;
    font-size: 13px;
  }
  /* Eliminar hover states que no aplican en touch */
  .table tr:hover td { background: transparent; }
}