/* =====================================================================
   Sistema de diseño Safiye - traducción a CSS plano del export de Claude Design
   (diseno/Rediseño de pantallas Safiye/_ds). Tokens + componentes.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap");

:root {
  /* Marca */
  --brand-green-900: #062F1E;
  --brand-green-800: #084F32;
  --brand-green-700: #0C6B44;
  --brand-green-600: #128A5A;
  --brand-green-100: #E3F3EC;
  --brand-mint-500: #69CBB2;
  --brand-mint-400: #8AD9C4;
  --brand-mint-100: #EAF8F3;
  --brand-ink-900: #112222;
  --brand-ink-700: #26403D;

  /* Neutros */
  --gray-0: #FFFFFF;
  --gray-50: #F6F9F8;
  --gray-100: #EDF2F0;
  --gray-200: #DDE6E2;
  --gray-300: #C4D1CC;
  --gray-400: #9BAEA8;
  --gray-500: #748A83;
  --gray-600: #566D67;
  --gray-700: #3E5450;
  --gray-800: #293C39;
  --gray-900: #16211F;

  /* Semánticos */
  --color-success-600: #128A5A;
  --color-success-100: #E3F3EC;
  --color-danger-600: #E84B4B;
  --color-danger-700: #C13333;
  --color-danger-100: #FCEAEA;
  --color-warning-600: #C98A1E;
  --color-warning-100: #FBF1DF;
  --color-info-600: #2A7FB0;
  --color-info-100: #E7F2F8;

  /* Superficies y texto */
  --surface-app: #F3F7F5;
  --surface-card: var(--gray-0);
  --surface-sunken: var(--gray-50);
  --surface-brand: var(--brand-green-800);
  --surface-brand-soft: var(--brand-mint-100);
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --text-primary: var(--brand-ink-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-on-brand: #FFFFFF;
  --text-link: var(--brand-green-700);
  --text-link-hover: var(--brand-green-800);

  /* Precio cambiado */
  --price-changed: #D2373D;
  --price-changed-bg: #FDECEC;

  /* Badges de departamento */
  --dept-cabello-bg: #F3E7F5;          --dept-cabello-fg: #7A3E8C;
  --dept-cosmeticos-bg: #FBE7EE;       --dept-cosmeticos-fg: #A23A63;
  --dept-arete-multipar-bg: #FDECD9;   --dept-arete-multipar-fg: #B06A15;
  --dept-arete-individual-bg: #FBF3D6; --dept-arete-individual-fg: #93791A;
  --dept-pulseras-bg: #EAF3D8;         --dept-pulseras-fg: #5B7A22;
  --dept-collares-bg: #DFF1E6;         --dept-collares-fg: #2E7A52;
  --dept-anillos-bg: #DDF1EE;          --dept-anillos-fg: #227A6E;
  --dept-escolar-bg: #DCEBF3;          --dept-escolar-fg: #25647F;
  --dept-juguetes-bg: #E1E7F7;         --dept-juguetes-fg: #3F529E;
  --dept-apple-bg: #E9E7F7;            --dept-apple-fg: #5B4EA0;
  --dept-and-bg: #F0E6F5;              --dept-and-fg: #7A469E;
  --dept-otros-bg: var(--gray-100);    --dept-otros-fg: var(--gray-600);

  /* Tipografía */
  --font-ui: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px;
  --fs-lg: 19px; --fs-xl: 23px; --fs-2xl: 28px; --fs-3xl: 34px;

  /* Espaciado y radios */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --control-h-sm: 36px; --control-h-md: 44px; --control-h-lg: 56px; --tap-min: 44px;

  /* Efectos */
  --shadow-sm: 0 1px 2px rgba(17,34,34,.06);
  --shadow-md: 0 2px 8px rgba(17,34,34,.08), 0 1px 2px rgba(17,34,34,.06);
  --shadow-lg: 0 8px 24px rgba(17,34,34,.12);
  --shadow-focus: 0 0 0 3px var(--brand-mint-400);
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
button, input, select, textarea { font-family: inherit; }
table { border-collapse: collapse; }
code, .mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.oculto { display: none !important; }
.derecha { text-align: right; }
.fw-bold { font-weight: 700; }
.fw-extra { font-weight: 800; }

/* ---------- Layout ---------- */
.topbar {
  display: flex; align-items: center; gap: var(--space-6);
  padding: 10px var(--space-6);
  background: var(--surface-brand); color: #fff;
}
.topbar__logo { width: 44px; height: 44px; border-radius: 50%; background: #fff; object-fit: contain; padding: 3px; flex-shrink: 0; }
.topbar__rol { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.topbar__rol strong { font-weight: 800; font-size: var(--fs-base); }
.topbar__rol span { font-size: var(--fs-xs); opacity: .75; font-family: var(--font-mono); }
.topbar__nav { display: flex; gap: 18px; margin-left: var(--space-4); flex: 1; overflow-x: auto; scrollbar-width: none; }
.topbar__nav::-webkit-scrollbar { display: none; }
.topbar__nav a {
  cursor: pointer; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
  color: rgba(255,255,255,.7); border-bottom: 2px solid transparent; padding-bottom: 4px;
  text-decoration: none;
}
.topbar__nav a:hover { color: #fff; text-decoration: none; }
.topbar__nav a.activo { color: #fff; border-bottom-color: var(--brand-mint-500); }
.topbar__salir {
  background: rgba(255,255,255,.12); border: none; color: #fff;
  padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--fs-sm);
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.topbar__salir:hover { background: rgba(255,255,255,.2); color: #fff; text-decoration: none; }

.contenido { padding: var(--space-6); display: flex; flex-direction: column; gap: 18px; }
.contenido--angosto { max-width: 760px; }
.contenido--medio { max-width: 1000px; }

.card {
  background: var(--gray-0); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.card--plana { box-shadow: none; }
.card--soft { background: var(--surface-brand-soft); border: none; border-radius: var(--radius-md); padding: 14px 16px; font-size: var(--fs-sm); }
.card--sunken { background: var(--surface-sunken); border: none; border-radius: var(--radius-md); padding: 14px 16px; }
.card--exito { background: var(--color-success-100); border: 1px solid var(--color-success-600); border-radius: var(--radius-md); padding: 16px; }

.fila { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: flex-end; }
.fila--centro { align-items: center; }
.fila--entre { justify-content: space-between; }
.fila--gap-sm { gap: 10px; }
.crece { flex: 1 1 200px; }
.crece-2 { flex: 2 1 340px; }
.apilado { display: flex; flex-direction: column; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seccion-titulo { margin-bottom: 10px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-h-md); padding: 0 20px; font-size: var(--fs-base);
  font-weight: 700; border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .45; transform: none; }
.btn--primary { background: var(--brand-green-800); color: #fff; border: 1px solid var(--brand-green-800); }
.btn--primary:hover { background: var(--brand-green-900); border-color: var(--brand-green-900); color: #fff; }
.btn--secondary { background: var(--gray-0); color: var(--text-primary); border: 1px solid var(--border-default); }
.btn--secondary:hover { background: var(--gray-50); color: var(--text-primary); }
.btn--destructive { background: var(--color-danger-600); color: #fff; border: 1px solid var(--color-danger-600); }
.btn--destructive:hover { background: var(--color-danger-700); border-color: var(--color-danger-700); color: #fff; }
.btn--ghost { background: transparent; color: var(--brand-green-800); border: 1px solid transparent; }
.btn--ghost:hover { background: var(--brand-green-100); color: var(--brand-green-800); }
.btn--sm { height: var(--control-h-sm); padding: 0 14px; font-size: var(--fs-sm); }
.btn--lg { height: var(--control-h-lg); padding: 0 28px; font-size: var(--fs-lg); }
.btn--bloque { width: 100%; }
.btn i[data-lucide], .btn svg { width: 18px; height: 18px; }

.icon-btn {
  width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--radius-sm); border: none;
  background: var(--gray-100); color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--transition-fast);
}
.icon-btn:hover { background: var(--gray-200); }
.icon-btn--danger { background: var(--color-danger-100); color: var(--color-danger-600); }
.icon-btn--danger:hover { background: #F8D6D6; }
.icon-btn svg { width: 18px; height: 18px; }

.enlace-btn { background: none; border: none; color: var(--color-danger-600); cursor: pointer; font-weight: 700; font-size: var(--fs-sm); padding: 0; }
.enlace-btn:hover { text-decoration: underline; }

/* ---------- Campos ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span, .field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.field input, .field select, .field textarea, .input, .select, .textarea {
  height: var(--control-h-md); padding: 0 14px; font-size: var(--fs-base);
  color: var(--text-primary); background: var(--gray-0);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none;
  width: 100%; transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.field textarea, .textarea { height: auto; padding: 10px 14px; resize: vertical; min-height: 80px; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus, .select:focus, .textarea:focus {
  box-shadow: var(--shadow-focus); border-color: var(--brand-mint-500);
}
.field input.mono, .input.mono { font-family: var(--font-mono); }
.field input.derecha { text-align: right; }
.field input.error { border-color: var(--color-danger-600); }
.field .ayuda { font-size: var(--fs-xs); color: var(--color-danger-600); }
.field--ancho-corto { width: 140px; flex: 0 0 140px; }
input[type="number"] { font-family: var(--font-mono); }

/* Campo de código de barras (grande, siempre visible) */
.barcode-field { display: flex; gap: 12px; align-items: flex-end; }
.barcode-field .field { flex: 1; }
.barcode-field__wrap { position: relative; display: flex; align-items: center; }
.barcode-field__wrap svg { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--brand-green-700); pointer-events: none; }
.barcode-field__wrap input {
  width: 100%; height: var(--control-h-lg); padding: 0 16px 0 44px;
  font-family: var(--font-mono); font-size: var(--fs-lg);
  border: 2px solid var(--brand-mint-500); border-radius: var(--radius-md); outline: none; background: var(--gray-0);
}
.barcode-field__wrap input:focus { box-shadow: var(--shadow-focus); }
.barcode-field .field--paquetes { flex: 0 0 120px; }
.barcode-field .field--paquetes input {
  height: var(--control-h-lg); text-align: right; font-family: var(--font-mono); font-size: var(--fs-lg);
}

/* ---------- Tabla ---------- */
.tabla-wrap { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--gray-0); }
.tabla-scroll { max-height: 420px; overflow: auto; }
.tabla-scroll--alta { max-height: 620px; }
.tabla { width: 100%; font-size: var(--fs-sm); }
.tabla thead tr { position: sticky; top: 0; background: var(--gray-50); z-index: 1; }
.tabla th {
  text-align: left; padding: 8px 12px; font-weight: 700; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.tabla td { padding: 7px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); vertical-align: middle; }
.tabla tbody tr:nth-child(odd) { background: var(--surface-sunken); }
.tabla tbody tr:nth-child(even) { background: var(--gray-0); }
.tabla tbody tr.clic { cursor: pointer; }
.tabla tbody tr.clic:hover { background: var(--brand-mint-100); }
.tabla th.derecha, .tabla td.derecha { text-align: right; }
.tabla td.mono, .tabla th.mono { font-family: var(--font-mono); }
.tabla td.sin-resultados { padding: 32px; text-align: center; color: var(--text-muted); }
.tabla th.ordenable { cursor: pointer; user-select: none; }
.tabla th.ordenable:hover { color: var(--text-primary); }
.tabla th.ordenable.asc::after { content: " ▲"; font-size: 9px; }
.tabla th.ordenable.desc::after { content: " ▼"; font-size: 9px; }
.tabla tr.grupo td { background: var(--brand-green-100); color: var(--brand-green-800); font-weight: 700; }
.tabla tr.subtotal td { background: var(--gray-100); font-weight: 700; }
.tabla-pie { display: flex; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--border-subtle); font-weight: 800; }

/* ---------- Código con botón de copiar ---------- */
.codigo { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.copiar {
  width: 26px; height: 26px; border: 1px solid var(--brand-green-700); background: var(--brand-green-100); color: var(--brand-green-800);
  border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.copiar:hover, .copiar:focus { background: var(--brand-green-800); color: #fff; outline: none; }
.copiar svg { width: 15px; height: 15px; stroke-width: 2.25; }

/* Aviso grande y centrado (por ejemplo "El código no existe") */
.aviso-centro { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 300; padding: 16px; }
.aviso-centro__caja {
  display: flex; align-items: center; gap: 16px; padding: 22px 32px; border-radius: var(--radius-lg);
  font-size: var(--fs-xl); font-weight: 800; color: #fff; box-shadow: var(--shadow-lg); max-width: 90vw; text-align: left;
  animation: aviso-pop 160ms ease;
}
.aviso-centro__caja svg { width: 36px; height: 36px; flex-shrink: 0; }
.aviso-centro--error .aviso-centro__caja { background: var(--color-danger-600); }
.aviso-centro--warning .aviso-centro__caja { background: var(--color-warning-600); }
.aviso-centro--success .aviso-centro__caja { background: var(--brand-green-700); }
@keyframes aviso-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* Fila recién agregada o modificada en el carrito */
.tabla tbody tr.resaltada td { background: var(--brand-mint-100); }
.tabla tbody tr td { transition: background 900ms ease; }

/* Campos dentro de un modal */
.modal .field { margin-top: 12px; }
.modal .modal__cuerpo p { margin-bottom: 6px; }

/* ---------- Badges y precios ---------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
  background: var(--dept-otros-bg); color: var(--dept-otros-fg);
}
.badge--cabello { background: var(--dept-cabello-bg); color: var(--dept-cabello-fg); }
.badge--cosmeticos { background: var(--dept-cosmeticos-bg); color: var(--dept-cosmeticos-fg); }
.badge--arete-multipar { background: var(--dept-arete-multipar-bg); color: var(--dept-arete-multipar-fg); }
.badge--arete-individual { background: var(--dept-arete-individual-bg); color: var(--dept-arete-individual-fg); }
.badge--pulseras { background: var(--dept-pulseras-bg); color: var(--dept-pulseras-fg); }
.badge--collares { background: var(--dept-collares-bg); color: var(--dept-collares-fg); }
.badge--anillos { background: var(--dept-anillos-bg); color: var(--dept-anillos-fg); }
.badge--escolar { background: var(--dept-escolar-bg); color: var(--dept-escolar-fg); }
.badge--juguetes { background: var(--dept-juguetes-bg); color: var(--dept-juguetes-fg); }
.badge--apple { background: var(--dept-apple-bg); color: var(--dept-apple-fg); }
.badge--and { background: var(--dept-and-bg); color: var(--dept-and-fg); }
.badge--otros { background: var(--dept-otros-bg); color: var(--dept-otros-fg); }
.badge--rojo { background: var(--color-danger-100); color: var(--color-danger-700); }
.badge--ambar { background: var(--color-warning-100); color: #8A5E10; }
.badge--verde { background: var(--color-success-100); color: var(--brand-green-800); }

.precio { position: relative; font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.precio--cambiado { color: var(--price-changed); }
.precio--cambiado::after {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--price-changed); margin-left: 5px; vertical-align: middle;
}
.precio--cambiado .tip {
  display: none; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
  background: var(--brand-ink-900); color: #fff; padding: 4px 8px; border-radius: var(--radius-sm);
  font-size: var(--fs-xs); white-space: nowrap; box-shadow: var(--shadow-md); z-index: 2; font-family: var(--font-ui); font-weight: 600;
}
.precio--cambiado:hover .tip, .precio--cambiado:focus .tip, .precio--cambiado.abierto .tip { display: block; }

.summary-card {
  background: var(--gray-0); color: var(--text-primary); border-radius: var(--radius-md);
  padding: 16px 18px; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); min-width: 160px; flex: 1 1 160px;
}
.summary-card__label { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; }
.summary-card__valor { font-size: var(--fs-2xl); font-weight: 800; font-family: var(--font-mono); }
.summary-card--brand { background: var(--brand-green-800); color: #fff; border: none; }
.summary-card--brand .summary-card__label { color: rgba(255,255,255,.75); }

/* ---------- Estado vacío ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 20px; color: var(--text-muted); text-align: center; }
.empty-state svg { width: 32px; height: 32px; opacity: .5; }
.empty-state strong { font-size: var(--fs-base); font-weight: 700; color: var(--text-secondary); }
.empty-state span { font-size: var(--fs-sm); }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 200; max-width: calc(100vw - 48px); }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); font-size: var(--fs-sm); font-weight: 600; min-width: 260px;
  animation: toast-in var(--transition-base);
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast span { flex: 1; }
.toast button { background: none; border: none; cursor: pointer; color: inherit; opacity: .6; font-size: 14px; }
.toast--success { background: var(--color-success-100); color: var(--brand-green-800); }
.toast--error { background: var(--color-danger-100); color: var(--color-danger-700); }
.toast--warning { background: var(--color-warning-100); color: #8A5E10; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(17,34,34,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal { background: var(--gray-0); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px; width: 380px; max-width: 100%; }
.modal h3 { font-size: var(--fs-lg); font-weight: 800; margin-bottom: 10px; }
.modal__cuerpo { font-size: var(--fs-base); color: var(--text-secondary); margin-bottom: 20px; }
.modal__acciones { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Login ---------- */
.login-fondo { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  background: var(--brand-green-800); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 40px 36px; width: 360px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.login-card img { width: 140px; height: 140px; border-radius: 50%; background: #fff; object-fit: contain; padding: 12px; }
.login-card form { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.login-card .field > span { color: #fff; font-weight: 700; }
.login-card .field input, .login-card .field select { border: none; }
.login-card .field input.error { border: 2px solid var(--color-danger-600); }
.login-card .error-msg { color: #FFD9D9; font-size: var(--fs-sm); font-weight: 600; }

/* ---------- Aviso de precio ---------- */
.aviso-precio { font-size: var(--fs-sm); color: var(--price-changed); }

/* ---------- Fotos de producto ---------- */
.miniatura {
  width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-100); border: 1px solid var(--border-subtle); vertical-align: middle; flex-shrink: 0;
}
img.miniatura { cursor: zoom-in; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
img.miniatura:hover { transform: scale(1.06); box-shadow: var(--shadow-md); }
.miniatura--vacia { color: var(--gray-400); }
.miniatura--vacia svg { width: 20px; height: 20px; }
.miniatura--sm { width: 34px; height: 34px; }
.miniatura--sm.miniatura--vacia svg { width: 16px; height: 16px; }
.miniatura--md { width: 64px; height: 64px; }
.miniatura--lg { width: 140px; height: 140px; border-radius: var(--radius-md); }
.miniatura--lg.miniatura--vacia svg { width: 40px; height: 40px; }
.tabla td.foto { width: 52px; padding-top: 4px; padding-bottom: 4px; }
.visor-foto {
  position: fixed; inset: 0; background: rgba(17,34,34,.86); z-index: 250; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 24px; cursor: zoom-out; animation: aviso-pop 140ms ease;
}
.visor-foto img { max-width: 100%; max-height: calc(100vh - 100px); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-lg); }
.visor-foto__titulo { color: #fff; font-weight: 700; font-size: var(--fs-md); text-align: center; }
.visor-foto__cerrar {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff; font-size: 20px; font-weight: 700;
}
.visor-foto__cerrar:hover { background: rgba(255,255,255,.3); }
.foto-campo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foto-campo input[type="file"] { display: none; }
.foto-campo .acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .contenido { padding: var(--space-4); }
  .topbar { gap: var(--space-3); padding: 10px var(--space-4); }
}
@media (max-width: 600px) {
  .grid-form { grid-template-columns: 1fr; }
  .barcode-field { flex-wrap: wrap; }
  .barcode-field .field--paquetes { flex: 1 1 100%; }
  .topbar__rol span { display: none; }
  .toast-stack { left: 16px; right: 16px; bottom: 16px; }
  .toast { min-width: 0; }
  .field--ancho-corto { width: 100%; flex: 1 1 100%; }
}

/* ---------- Impresión de etiquetas ---------- */
@media print {
  .no-imprimir { display: none !important; }
}