/* ============================================================
   3D Nation · Intranet — Estilos
   Identidad: negro / carbón con dorado como color de marca y énfasis.
   Superficies claras para lectura. Los colores se definen SOLO aquí (tokens).
   ============================================================ */
:root {
  /* ---- Marca ---- */
  --brand-black: #0a0a0b;
  --brand-charcoal: #18181b;
  --brand-charcoal-2: #232326;   /* hover / superficies sobre carbón */
  --brand-gold: #c9a13b;         /* fondos y acentos; texto encima: negro */
  --brand-gold-light: #e8cf86;
  --brand-gold-soft: #f8f1dc;    /* fondos suaves dorados */
  --brand-gold-text: #84651a;    /* dorado legible como texto sobre blanco (≥ 4.5:1) */
  --brand-bronze: #a8692f;

  /* ---- Superficies y texto ---- */
  --background: #f6f5f2;
  --surface: #ffffff;
  --surface-secondary: #f3f2ee;
  --text-primary: #18181b;
  --text-secondary: #3f3f46;
  --text-muted: #6b6b73;         /* ≥ 4.5:1 sobre blanco */
  --text-on-dark: #f4f4f5;
  --text-on-dark-muted: #a1a1aa;
  --border: #e4e3de;
  --border-soft: #efeee9;
  --focus-ring: 0 0 0 3px rgba(201,161,59,.45);

  /* ---- Estados ---- */
  --success: #15803d; --success-bg: #e9f7ee;
  --warning: #b45309; --warning-bg: #fdf3e2;
  --danger: #b91c1c;  --danger-bg: #fdecec;
  --info: #1d4ed8;    --info-bg: #e8effd;

  /* ---- Alias heredados (los módulos existentes los usan; apuntan a los tokens) ---- */
  --black: var(--brand-black);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --muted: var(--text-muted);
  --line: var(--border);
  --line-2: var(--border-soft);
  --bg: var(--background);
  --white: var(--surface);
  --accent: var(--brand-gold);
  --green: var(--success);  --green-bg: var(--success-bg);
  --red: var(--danger);     --red-bg: var(--danger-bg);
  --amber: var(--warning);  --amber-bg: var(--warning-bg);
  --blue: var(--info);      --blue-bg: var(--info-bg);
  --purple: #6d28d9; --purple-bg: #f1ebfd;
  --teal: #0f766e;   --teal-bg: #e3f5f3;
  --gray-bg: var(--surface-secondary);
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12);
  --sidebar: 248px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Títulos y cifras grandes. Solo dos familias en toda la intranet (DESIGN.md) */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* ---- Escala tipográfica (px; la interfaz es densa y no usa tamaños fluidos) ---- */
  --text-xs: 11.5px; --text-sm: 12.5px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 21px; --text-2xl: 28px; --text-3xl: 34px;
  /* ---- Espaciado (múltiplos de 4) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  /* ---- Estados de interacción ---- */
  --brand-gold-hover: var(--brand-gold-light);
  --brand-gold-active: #b38d2f;
  --surface-hover: #faf9f5;
  --surface-active: #f1efe8;
  --disabled-opacity: .5;
  --radius-lg: 14px;
  --shadow-hover: 0 8px 22px rgba(16,16,18,.08), 0 1px 3px rgba(16,16,18,.06);
  /* ---- Movimiento (MOTION_GUIDELINES.md). Sin rebotes: salida exponencial ---- */
  --dur-press: 100ms; --dur-micro: 160ms; --dur-comp: 240ms; --dur-complex: 420ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --stagger: 40ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: var(--text-base); color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; caret-color: var(--brand-gold-text); }
::selection { background: var(--brand-gold-light); color: var(--brand-black); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; }
p { margin: 0 0 .5rem; }
code { background: var(--line-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.icon { flex-shrink: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.green { color: var(--green); } .red { color: var(--red); } .amber { color: var(--amber); }
.strong { font-weight: 600; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; } .mt-0 { margin-top: 0; }
.hidden { display: none !important; }
/* Foco visible para teclado en todo elemento interactivo */
/* Foco visible para teclado: contorno (no sombra, para no chocar con las sombras de los botones) con ≥ 3:1 en claro
   (dorado oscuro, 5,4:1) y en las superficies oscuras (dorado de marca, 7,3:1) */
:focus-visible { outline: 2px solid var(--brand-gold-text); outline-offset: 2px; }
.sidebar :focus-visible, .dash-hero :focus-visible, .stat.dark:focus-visible, .toast :focus-visible { outline-color: var(--brand-gold); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar); background: linear-gradient(180deg, var(--brand-charcoal) 0%, #111113 100%); color: var(--text-on-dark-muted); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 40; transition: transform .25s; border-right: 1px solid #000; }
.sidebar-head { position: relative; padding: 18px 18px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--brand-charcoal-2); }
/* Filo dorado: la única línea de marca de la barra */
.sidebar-head::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--brand-gold), rgba(201,161,59,0) 85%); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-on-dark); }
.brand-logo { width: 32px; height: 32px; object-fit: contain; color: var(--brand-gold); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 15px; letter-spacing: .08em; }
.brand-text small { font-size: 11px; color: var(--brand-gold); letter-spacing: .06em; }
.nav { flex: 1; overflow-y: auto; padding: 8px 10px 20px; }
/* Títulos de sección: no son clicables, se distinguen por mayúsculas pequeñas y separación */
.nav-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: #8b8b93; padding: 16px 12px 6px; font-weight: 600; }
.nav-link { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; min-height: 40px; border-radius: var(--radius-sm); color: #d4d4d8; font-weight: 500; transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.nav-link .icon { color: #9a9aa2; transition: color var(--dur-micro) var(--ease-out); }
.nav-link:hover { background: var(--brand-charcoal-2); color: #fff; }
.nav-link:hover .icon { color: #fff; }
/* Opción activa: barra y fondo dorados suaves + texto blanco (no depende solo del color: también va en negrita) */
.nav-link.active { background: rgba(201,161,59,.14); color: #fff; font-weight: 650; }
.nav-link.active::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-gold); }
.nav-link.active .icon { color: var(--brand-gold); }
/* Venta rápida es una ACCIÓN, no solo una sección: se presenta como botón de marca */
.nav-pos { background: var(--brand-gold); color: var(--brand-black); font-weight: 650; margin: 2px 0 4px; }
.nav-pos .icon, .nav-pos:hover .icon, .nav-pos.active .icon { color: var(--brand-black); }
.nav-pos:hover { background: var(--brand-gold-light); color: var(--brand-black); }
.nav-pos.active { background: var(--brand-gold-light); color: var(--brand-black); }
.nav-pos.active::before { display: none; }
.sidebar-foot { padding: 12px; border-top: 1px solid var(--brand-charcoal-2); }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip .icon-btn { color: var(--text-on-dark-muted); margin-left: auto; }
.user-chip .icon-btn:hover { color: #fff; background: var(--brand-charcoal-2); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-gold); color: var(--brand-black); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
a.user-meta { color: inherit; text-decoration: none; border-radius: 6px; }
a.user-meta:hover strong { text-decoration: underline; }
.user-meta small:first-child { color: #8b8b93; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.user-meta strong { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta small { color: var(--text-on-dark-muted); font-size: 11.5px; }
.sidebar-backdrop { display: none; }

.main { flex: 1; margin-left: var(--sidebar); min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 60px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 24px; position: sticky; top: 0; z-index: 20; }
.topbar-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumb { color: var(--text-muted); font-weight: 500; }
.crumb-sep { color: var(--border); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.feria-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; font-weight: 500; background: var(--white); max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); flex-shrink: 0; }
.content { padding: 24px; max-width: 1440px; width: 100%; }
.only-mobile { display: none !important; }

/* ---------- Tarjetas y secciones ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.card-head h2, .card-head h3 { font-size: var(--text-md); }
.card-body { padding: 20px; }
.card + .card, .grid + .card, .card + .grid, .grid + .grid, .stats + .grid, .stats + .card { margin-top: 20px; }
/* Dentro de una grilla las columnas se alinean arriba (el espacio lo da el gap) */
.grid > .card { margin-top: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.section-head h1, .section-head h2 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.section-head p { margin: 2px 0 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.grid { display: grid; gap: 20px; }
/* Un hijo con texto que no se parte (o un canvas) no debe ensanchar la columna ni la página en el celular */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
/* Indicador: etiqueta arriba, cifra grande y el ícono pequeño en la esquina (no aprieta el texto) */
.stat { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; display: block; box-shadow: var(--shadow); color: inherit; min-width: 0; }
.stat-icon { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; background: var(--brand-gold-soft); display: grid; place-items: center; color: var(--brand-gold-text); }
.stat-icon .icon { width: 16px; height: 16px; }
/* Indicador principal de la pantalla */
.stat.dark { background: var(--brand-charcoal); color: #fff; border-color: var(--brand-charcoal); }
.stat.dark .stat-icon { background: rgba(201,161,59,.16); color: var(--brand-gold); }
.stat.dark .stat-label, .stat.dark .stat-sub { color: var(--text-on-dark-muted); }
/* Tarjeta que lleva al detalle */
a.stat { transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-comp) var(--ease-out), transform var(--dur-comp) var(--ease-out); }
a.stat:hover { border-color: var(--brand-gold); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
a.stat .stat-label::after { content: ' →'; color: var(--text-muted); }
a.stat.dark .stat-label::after { color: var(--brand-gold); }
.stat-body { display: flex; flex-direction: column; min-width: 0; }
.stat-label { display: block; font-size: var(--text-sm); color: var(--muted); font-weight: 500; padding-right: 36px; }
.stat-value { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.stat-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat.good .stat-icon { background: var(--green-bg); color: var(--green); }
.stat.bad .stat-icon { background: var(--red-bg); color: var(--red); }
.stat.warn .stat-icon { background: var(--amber-bg); color: var(--amber); }

/* ---------- Botones ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; min-height: 38px; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), transform var(--dur-press) var(--ease-out); white-space: nowrap; line-height: 1.3; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; transform: none; }
/* Enviando (app.js): el texto se oculta sin cambiar el ancho y un indicador gira encima; evita el doble envío */
.btn.is-loading { pointer-events: none; color: transparent !important; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid; border-color: var(--btn-spin, var(--brand-black)) transparent var(--btn-spin, var(--brand-black)) transparent; animation: tdnSpin .7s linear infinite; }
.btn-dark.is-loading, .btn-success.is-loading, .btn-danger-solid.is-loading { --btn-spin: #fff; }
.btn-secondary.is-loading, .btn-ghost.is-loading, .btn-danger.is-loading { --btn-spin: var(--text-secondary); }
/* Acción principal: dorado de marca con texto negro (contraste ≈ 8:1) */
.btn-primary { background: var(--brand-gold); color: var(--brand-black); border-color: #b8912f; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(16,16,18,.08); }
.btn-primary:hover { background: var(--brand-gold-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(16,16,18,.12); }
.btn-primary:active { background: var(--brand-gold-active); }
/* Acción oscura (secundaria fuerte) */
.btn-dark { background: var(--brand-charcoal); color: #fff; }
.btn-dark:hover { background: var(--brand-charcoal-2); }
.btn-secondary { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-hover); border-color: #cfcdc5; }
.btn-secondary:active { background: var(--surface-active); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--line-2); color: var(--ink); }
.btn-danger { background: var(--white); color: var(--red); border-color: #f3c9c9; }
.btn-danger:hover { background: var(--red-bg); }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: #166534; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; min-height: 32px; }
.btn-lg { padding: 12px 18px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { padding: 6px; background: transparent; color: var(--muted); border-radius: 6px; }
.btn-icon:hover { background: var(--line-2); color: var(--ink); }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.icon-btn:hover { background: var(--line-2); }
.inline-form { display: inline; margin: 0; }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }

/* ---------- Formularios ---------- */
label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
input, select, textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 11px; width: 100%; transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); font-weight: 400; }
input:hover:not(:focus):not([readonly]):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) { border-color: #cfcdc5; }
input:disabled, select:disabled, textarea:disabled { opacity: .65; cursor: not-allowed; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-gold-text); box-shadow: var(--focus-ring); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-radius: var(--radius-sm); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--brand-gold-text); }
input[readonly] { background: var(--line-2); }
textarea { resize: vertical; min-height: 80px; }
.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .span-2 { grid-column: span 2; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.hint { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.input-group { display: flex; align-items: stretch; }
.input-group > span { display: grid; place-items: center; padding: 0 10px; background: var(--line-2); border: 1px solid var(--line); border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: 0; color: var(--muted); font-size: 13px; }
.input-group > span.suffix { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border: 1px solid var(--line); border-left: 0; }
.input-group > input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group > input:not(:last-child) { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group > span + input:not(:last-child) { border-radius: 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0; }
legend { font-weight: 600; font-size: 13px; padding: 0 6px; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 18px; }
.filters label { min-width: 150px; }
.filters input, .filters select { padding: 7px 10px; }
.quick-ranges { display: flex; gap: 6px; flex-wrap: wrap; align-self: center; }
.chip { border: 1px solid var(--line); background: var(--white); border-radius: 99px; padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer; color: var(--ink-2); transition: border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.chip:hover { border-color: var(--brand-gold); color: var(--ink); }
.chip.active { background: var(--brand-charcoal); color: #fff; border-color: var(--brand-charcoal); }
.search-box { position: relative; }
.search-box .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-box input { padding-left: 34px; }

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-secondary); white-space: nowrap; }
td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tbody tr { transition: background var(--dur-micro) var(--ease-out); }
tbody tr:hover { background: var(--surface-hover); }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 650; border-top: 1px solid var(--line); background: var(--surface-secondary); }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.anulada td { color: var(--muted); text-decoration: line-through; }
.thumb { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; background: var(--line-2); border: 1px solid var(--line); }
.cell-main { display: flex; align-items: center; gap: 12px; }
.cell-main strong { display: block; font-weight: 600; }
.cell-main small { color: var(--muted); font-size: 12px; }

/* ---------- Insignias y alertas ---------- */
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* Estados (badge() en bootstrap.php): un punto además del texto, para no depender solo del color */
.badge-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; flex-shrink: 0; }
.badge-gray { background: var(--gray-bg); color: var(--ink-2); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-purple { background: var(--purple-bg); color: var(--purple); }
.badge-teal { background: var(--teal-bg); color: var(--teal); }
.badge-dark { background: var(--black); color: #fff; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13.5px; border: 1px solid; }
.alert-success { background: var(--green-bg); color: var(--green); border-color: #c6ebd3; }
.alert-error { background: var(--red-bg); color: var(--red); border-color: #f3c9c9; }
.alert-info { background: var(--blue-bg); color: var(--blue); border-color: #cddbfb; }
.alert-warning { background: var(--amber-bg); color: var(--amber); border-color: #f5ddb5; }
/* Estado vacío: líneas de capa muy tenues (el motivo de la impresión 3D) */
.empty { text-align: center; padding: 44px 20px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; border-radius: inherit; background-image: repeating-linear-gradient(0deg, transparent 0 9px, rgba(24,24,27,.03) 9px 10px); }
.empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-gold-soft); color: var(--brand-gold-text); display: grid; place-items: center; margin-bottom: 4px; border: 1px solid #efe2bb; }
.empty-title { color: var(--text-primary); font-weight: 600; font-size: 15px; margin: 0; }
.empty-text { max-width: 420px; margin: 0 0 6px; }

/* ---------- Listas ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line-2); }
.list li:last-child { border-bottom: 0; }
.rank { width: 24px; height: 24px; border-radius: 6px; background: var(--line-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.bar { height: 6px; background: var(--line-2); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.bar > span { display: block; height: 100%; background: var(--brand-gold); border-radius: 99px; transform-origin: left; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; font-weight: 500; text-align: right; }
.kv .total { font-size: 17px; font-weight: 700; padding-top: 8px; border-top: 1px solid var(--line); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 10px 14px; font-weight: 550; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-comp) var(--ease-out); }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--brand-gold); font-weight: 650; }

.chart-box { position: relative; height: 280px; }
.chart-box.sm { height: 220px; }

/* ---------- Producción (tablero) ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.board-col { background: #efeff1; border-radius: var(--radius); padding: 10px; min-height: 200px; }
.board-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding: 4px 6px 10px; display: flex; justify-content: space-between; }
.job { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); transition: box-shadow var(--dur-comp) var(--ease-out); }
.job:hover { box-shadow: var(--shadow-hover); }
.job.urgente:hover { box-shadow: inset 0 2px 0 var(--red), var(--shadow-hover); }
.job.alta:hover { box-shadow: inset 0 2px 0 var(--amber), var(--shadow-hover); }
.job-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.job strong { font-size: 13.5px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); margin: 8px 0; }
.job-meta span { display: inline-flex; align-items: center; gap: 4px; }
.job-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Prioridad: filo superior fino + la insignia con texto (no un borde lateral grueso) */
.job.urgente { border-color: #efb4b4; box-shadow: inset 0 2px 0 var(--red), var(--shadow); }
.job.alta { box-shadow: inset 0 2px 0 var(--amber), var(--shadow); }

/* ---------- POS (venta rápida) ---------- */
.pos-page .content { max-width: none; padding: 0; }
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: calc(100vh - 60px); }
.pos-catalog { display: flex; flex-direction: column; min-height: 0; padding: 18px 20px 0; }
.pos-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.pos-toolbar .search-box { flex: 1; min-width: 200px; }
.pos-toolbar .search-box input { padding-top: 11px; padding-bottom: 11px; font-size: 15px; }
.pos-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; }
.pos-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; padding-bottom: 20px; }
.pos-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; text-align: left; font: inherit; padding: 0; transition: border-color .15s, box-shadow .15s, transform .08s; position: relative; }
.pos-item:hover { border-color: var(--ink); box-shadow: var(--shadow-lg); }
.pos-item:active { transform: scale(.98); }
.pos-item img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--line-2); }
.pos-item-body { padding: 9px 11px 11px; }
.pos-item-body strong { display: block; font-size: 13px; line-height: 1.3; font-weight: 600; min-height: 34px; }
.pos-item-price { font-weight: 700; font-size: 14px; margin-top: 4px; }
.pos-stock { position: absolute; top: 8px; right: 8px; background: rgba(11,11,12,.8); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; }
.pos-stock.low { background: var(--amber); }
.pos-stock.out { background: var(--red); }
.pos-item .in-cart { position: absolute; top: 8px; left: 8px; background: #22c55e; color: #fff; font-size: 12px; font-weight: 700; min-width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; padding: 0 6px; }
.pos-cart { background: var(--white); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.pos-cart-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.pos-mode { display: grid; grid-template-columns: 1fr 1fr; background: var(--line-2); border-radius: 8px; padding: 3px; }
.pos-mode button { border: 0; background: transparent; padding: 7px; border-radius: 6px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--muted); }
.pos-mode button.active { background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.pos-lines { flex: 1; overflow-y: auto; padding: 6px 0; }
.pos-line { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 10px 18px; border-bottom: 1px solid var(--line-2); }
.pos-line-name { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.pos-line-price { font-size: 12px; color: var(--muted); }
.pos-line-total { font-weight: 700; text-align: right; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty button { width: 32px; height: 32px; border: 0; background: var(--white); cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.qty button:hover { background: var(--line-2); }
.qty input { width: 44px; border: 0; text-align: center; padding: 4px; font-weight: 600; border-radius: 0; }
.qty input:focus { box-shadow: none; }
.pos-line-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.pos-summary { border-top: 1px solid var(--line); padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 10px; background: #fcfcfc; }
.pos-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.pos-total { font-size: 26px; font-weight: 750; letter-spacing: -.02em; }
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pay-methods button { border: 1px solid var(--line); background: var(--white); border-radius: 8px; padding: 9px 4px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pay-methods button.active { background: var(--black); color: #fff; border-color: var(--black); }
.disc-row { display: flex; gap: 6px; align-items: center; }
.disc-row input { padding: 6px 9px; }
.disc-type { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; flex-shrink: 0; }
.disc-type button { border: 0; background: var(--white); padding: 6px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--muted); }
.disc-type button.active { background: var(--black); color: #fff; }
.pos-empty { padding: 50px 20px; text-align: center; color: var(--muted); }
.pos-cart-toggle { display: none; }

/* ---------- Cotizador ---------- */
.quote-lines td { vertical-align: top; }
.quote-lines input, .quote-lines select { padding: 6px 8px; font-size: 13px; }
.quote-lines .desc-cell { min-width: 220px; }
.quote-lines .num-cell { width: 110px; }
.quote-lines .qty-cell { width: 80px; }
.calc-panel { background: #fafafa; border: 1px dashed var(--line); border-radius: 8px; padding: 12px; margin-top: 8px; }
.calc-panel .form-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.calc-panel label { font-size: 11.5px; }
.calc-result { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.calc-result b { color: var(--ink); }
.totals-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: 80px; }

/* ---------- Galería de producto ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.gallery-item { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery-item .gallery-actions { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: 4px; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.gallery-item .gallery-actions button { background: rgba(255,255,255,.9); border: 0; border-radius: 5px; padding: 3px 6px; font-size: 11px; cursor: pointer; }
.gallery-item.main { outline: 2px solid var(--brand-gold); }
.product-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: var(--line-2); }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0 20px 10px; }
.timeline li { position: relative; padding: 10px 0 10px 22px; border-left: 2px solid var(--line); margin-left: 5px; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 2px solid var(--brand-gold); }
.timeline small { color: var(--muted); display: block; }
/* Historial de costos del pedido: el color del punto dice qué pasó */
.hist-costos .hc-usa::before { border-color: var(--red); }
.hist-costos .hc-reserva::before { border-color: var(--blue); }
.hist-costos .hc-libera::before { border-color: var(--muted); }
.hist-costos .hc-devuelve::before { border-color: var(--green); }
.hist-costos .hc-compra::before { background: var(--brand-gold); }
/* Resultado del pedido: costos destacados y desglosados (cada uno con su % de lo cobrado) */
.res-cobro, .res-quedo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.res-cobro { font-size: 14px; margin-bottom: 10px; }
.res-costos { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--red-bg); border-radius: var(--radius-sm); overflow: hidden; }
.res-costos th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--red); padding: 8px 10px 4px; }
.res-costos td { padding: 5px 10px; }
.res-costos td.num, .res-costos th.num { text-align: right; white-space: nowrap; }
.res-costos td.num:nth-child(2) { color: var(--red); font-variant-numeric: tabular-nums; }
.res-costos .res-grupo td { padding-top: 8px; }
.res-costos .res-sub td:first-child { padding-left: 24px; color: var(--text-secondary); }
.res-costos .res-sub2 td { font-size: 12px; padding-top: 2px; padding-bottom: 2px; }
.res-costos .res-sub2 td:first-child { padding-left: 40px; color: var(--muted); }
.res-costos .res-sub2 td:first-child::before { content: '· '; }
.res-costos tfoot td { border-top: 1px solid var(--line); font-weight: 700; padding: 8px 10px; }
.res-quedo { margin-top: 12px; font-size: 16px; }
.res-quedo strong { font-size: 20px; }

/* ---------- Toasts / modal ---------- */
.toast-wrap { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; pointer-events: none; } /* los avisos no tapan clics */
.toast { background: var(--brand-charcoal); color: #fff; border-left: 3px solid var(--brand-gold); padding: 12px 16px; border-radius: 9px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; font-weight: 500; animation: tdnPop var(--dur-comp) var(--ease-out); max-width: 360px; }
.toast.error { background: var(--red); border-left-color: #7f1d1d; }
.toast.success .icon { color: #4ade80; }

.modal { position: fixed; inset: 0; background: rgba(11,11,12,.45); display: none; align-items: center; justify-content: center; z-index: 90; padding: 20px; }
.modal.open { display: flex; animation: tdnFade var(--dur-micro) var(--ease-out); }
.modal.open > .modal-box { animation: tdnPop var(--dur-comp) var(--ease-out); }
.modal-box { background: var(--white); border-radius: 12px; box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.modal-body { padding: 20px; }
/* Diálogo de confirmación (reemplaza confirm() del navegador) */
.confirm-box { max-width: 440px; }
.confirm-box .modal-body { display: flex; gap: 14px; align-items: flex-start; }
.confirm-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--warning-bg); color: var(--warning); }
.confirm-icon.danger { background: var(--danger-bg); color: var(--danger); }
.confirm-text { margin: 0; color: var(--text-secondary); white-space: pre-line; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; flex-wrap: wrap; }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #991b1b; }

/* ---------- Autenticación ---------- */
.auth-page { min-height: 100vh; display: grid; place-items: center; background: var(--black); padding: 20px; background-image: radial-gradient(circle at 20% 20%, #1c1c20 0, transparent 45%), radial-gradient(circle at 80% 80%, #18181b 0, transparent 40%); }
.auth-card { background: var(--white); width: 100%; max-width: 400px; border-radius: 14px; padding: 32px; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-brand .brand { color: var(--black); justify-content: center; }
.brand-lg .brand-logo { width: 56px; height: 56px; color: var(--black); }
.auth-brand h1 { font-size: 20px; letter-spacing: .1em; margin-top: 12px; }
.auth-card { border-top: 3px solid var(--brand-gold); }
.auth-brand .brand-logo { color: var(--brand-charcoal); }
.auth-brand p { color: var(--muted); margin: 4px 0 0; font-size: 13px; }
.auth-title { font-size: 17px; margin: 0; }
.auth-foot { text-align: center; margin: 18px 0 0; font-size: 13px; }
.auth-foot a { color: var(--muted); }
.auth-foot a:hover { color: var(--ink); }

/* ---------- Documento imprimible (cotización) ---------- */
.doc-page { background: #e9e9ec; }
.doc-toolbar { max-width: 820px; margin: 20px auto 0; display: flex; gap: 8px; justify-content: space-between; padding: 0 10px; flex-wrap: wrap; }
.doc { max-width: 820px; margin: 16px auto 40px; background: #fff; padding: 48px 52px; box-shadow: var(--shadow-lg); color: #111; font-size: 13px; }
.doc-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #111; padding-bottom: 20px; margin-bottom: 24px; }
.doc-head .brand { color: #111; }
.doc-head .brand-logo { width: 54px; height: 54px; color: #111; }
.doc-company { font-size: 12px; color: #444; line-height: 1.6; margin-top: 8px; }
.doc-title { text-align: right; }
.doc-title h2 { font-size: 26px; letter-spacing: .12em; }
.doc-title .num { font-size: 15px; font-weight: 600; margin-top: 4px; }
.doc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.doc-meta h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #666; margin-bottom: 6px; }
.doc table th { background: #111; color: #fff; border: 0; }
.doc table td { border-bottom: 1px solid #e5e5e5; }
.doc-totals { margin-left: auto; width: 300px; margin-top: 16px; }
.doc-totals .kv dd { text-align: right; }
.doc-notes { margin-top: 28px; font-size: 12px; color: #444; white-space: pre-line; border-top: 1px solid #e5e5e5; padding-top: 14px; }
.doc-foot { margin-top: 36px; text-align: center; font-size: 11px; color: #777; }

@media print {
  body, .doc-page { background: #fff; }
  .doc-toolbar, .no-print { display: none !important; }
  .doc { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .doc table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 16mm; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
  .pos { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 35; }
  .main { margin-left: 0; }
  .only-mobile { display: inline-grid !important; }
  .content { padding: 16px; }
  .topbar { padding: 0 12px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px 14px; }
  .stat-icon { top: 10px; right: 10px; width: 26px; height: 26px; }
  .stat-value { font-size: 19px; }
  .pos { grid-template-columns: 1fr; height: auto; }
  .pos-catalog { padding: 12px 12px 0; }
  .pos-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding-bottom: 90px; overflow: visible; }
  .pos-cart { position: fixed; inset: 0; z-index: 50; transform: translateY(100%); transition: transform .25s; border: 0; }
  body.cart-open .pos-cart { transform: none; }
  .pos-cart-toggle { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; justify-content: space-between; align-items: center; background: var(--black); color: #fff; border: 0; border-radius: 12px; padding: 14px 18px; font: inherit; font-weight: 700; font-size: 15px; box-shadow: var(--shadow-lg); cursor: pointer; }
  .doc { padding: 24px; }
  .doc-meta { grid-template-columns: 1fr; }
  .board { grid-auto-columns: 260px; }
  .form-grid .span-2 { grid-column: auto; }
}
@media (max-width: 520px) {
  .hide-xs { display: none !important; }
  .stats { grid-template-columns: 1fr 1fr; }
  .section-head h1, .section-head h2 { font-size: 18px; }
  .card-body, .card-pad { padding: 14px; }
  td, th { padding: 9px 10px; }
}

/* ---------- Configuración del cotizador ---------- */
.cfg-group { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.cfg-group::before { content: ''; width: 4px; height: 16px; border-radius: 2px; background: var(--brand-gold); }
.cfg-sub { font-size: 13px; margin: 18px 0 8px; color: var(--text-secondary); }
.cfg-table th { background: transparent; padding: 6px 8px 6px 0; }
.cfg-table td { padding: 4px 8px 4px 0; border: 0; }
.cfg-table input { padding: 6px 9px; }
.cfg-table tbody tr:hover { background: transparent; }
.cfg-preview { position: sticky; top: 80px; }
#cfg-cot .card + .card { margin-top: 16px; }

/* ---------- Cotizador v2 ---------- */
.calc-v2 .form-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.calc-precio { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: flex-end; margin-top: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand-gold); border-radius: var(--radius-sm); }
.calc-precio span { display: block; font-size: 11.5px; color: var(--text-muted); }
.calc-precio strong { font-size: 22px; letter-spacing: -.02em; }
.calc-alertas { margin: 10px 0 0; padding-left: 18px; color: var(--warning); font-size: 12.5px; }
/* Calculadora por secciones (Básico, Detalle, Extras, Empaque y envío, Precio, Volumen) */
.calc-sec { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 10px 14px 14px; margin: 0 0 12px; min-width: 0; }
.calc-sec legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--brand-charcoal); }
.calc-sec legend span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-gold); color: #fff; font-size: 11px; }
.calc-tiempo { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.calc-tiempo .lbl { font-weight: 600; }
.calc-hm { display: flex; gap: 6px; }
.calc-hm label { flex-direction: row; align-items: center; gap: 4px; flex: 1; }
.calc-hm input { min-width: 0; }
.calc-rapidos { display: flex; flex-wrap: wrap; gap: 6px; }
.calc-vol { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.calc-vol label { flex: 1 1 220px; }
.calc-out { margin: 0 0 12px; }
/* Las tablas internas (extras, empaques, volumen) se desplazan dentro del panel en vez de ensanchar la cotización */
.calc-row > td { max-width: 0; }
.cot-resumen-v2 { font-size: 12px; color: var(--text-muted); }
.entrega-sugerida { margin-top: 6px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--brand-gold-soft); color: var(--text-secondary); }
.entrega-sugerida button { margin-top: 6px; }

/* Verificación en dos pasos (login y Mi cuenta) */
.input-codigo { font-size: 20px; letter-spacing: .2em; text-align: center; font-variant-numeric: tabular-nums; }
.pasos-2fa { padding-left: 20px; display: grid; gap: 12px; }
.qr-2fa { width: 200px; max-width: 100%; margin: 10px 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.qr-2fa svg { display: block; width: 100%; height: auto; }
.clave-2fa { display: block; margin: 6px 0; padding: 8px 10px; background: var(--line-2); border-radius: var(--radius-sm); font-size: 15px; letter-spacing: .06em; word-break: break-all; }
.codigos-recuperacion { border-left: 3px solid var(--brand-gold); }
.codigos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 18px; padding-left: 22px; font-size: 16px; }
@media print {
  body:has(.codigos-recuperacion) .sidebar, body:has(.codigos-recuperacion) .topbar, body:has(.codigos-recuperacion) .grid,
  body:has(.codigos-recuperacion) .codigos-recuperacion .actions { display: none !important; }
}

/* Recuadros de ayuda en lenguaje sencillo (ayuda() en app/layout.php) */
.ayuda { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; font-size: 13.5px; color: var(--text-secondary); }
.ayuda > summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--text-primary); list-style: none; border-radius: inherit; transition: background var(--dur-micro) var(--ease-out); }
.ayuda > summary .icon { color: var(--brand-gold-text); }
.ayuda > summary:hover { background: var(--surface-hover); }
.ayuda > summary::-webkit-details-marker { display: none; }
.ayuda > summary::after { content: 'Ocultar'; margin-left: auto; font-weight: 500; font-size: 12px; color: var(--muted); }
.ayuda:not([open]) > summary::after { content: 'Ver ayuda'; padding: 3px 10px; border-radius: 999px; background: var(--brand-gold); color: #000; font-weight: 600; }
/* Cerrada (por defecto): franja dorada para que quien la necesite la vea sin que ocupe espacio */
.ayuda:not([open]) { background: var(--brand-gold-soft); border-color: var(--brand-gold-light); border-left: 3px solid var(--brand-gold); }
.ayuda:not([open]) > summary { padding: 8px 14px; color: var(--brand-gold-text); }
.ayuda:not([open]) > summary:hover { background: transparent; text-decoration: underline; }
.ayuda-body { padding: 0 14px 12px 38px; line-height: 1.55; }
.ayuda-body p { margin: 0 0 6px; }
.ayuda-body ul, .ayuda-body ol { margin: 0 0 6px; padding-left: 18px; }
.ayuda-body li { margin-bottom: 3px; }
/* Lista de datos que faltan en el cotizador */
.faltantes { border: 1px solid var(--line); border-left: 4px solid var(--brand-gold); border-radius: var(--radius-sm); padding: 10px 14px; margin: 12px 0 0; background: var(--white); font-size: 13px; }
.faltantes strong { display: block; margin-bottom: 4px; }
.faltantes ul { margin: 0; padding-left: 18px; }
.faltantes li.obligatorio { color: var(--danger, #b91c1c); }
.faltantes li.ok { color: var(--success, #15803d); list-style: none; margin-left: -18px; }
/* Ajuste de inventario: producto con su stock, botones agregar / descontar / establecer y vista previa */
.ajuste { max-width: 640px; }
.ajuste-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.ajuste-foto { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); background: var(--line-2); flex-shrink: 0; }
.ajuste-nombre { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ajuste-nombre strong { font-size: 16px; overflow-wrap: anywhere; }
.ajuste-stock { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ajuste-stock strong { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ajuste-stock.bajo strong { color: var(--amber); }
.ajuste-modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.ajuste-modos label { margin: 0; }
.ajuste-modos input { position: absolute; opacity: 0; pointer-events: none; }
.ajuste-modos span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; color: var(--muted); background: var(--white); transition: border-color .15s, background .15s, color .15s; }
.ajuste-modos span:hover { border-color: var(--ink-2); color: var(--ink); }
.ajuste-modos input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.ajuste-modos input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ajuste-stepper { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; margin-top: 4px; }
.ajuste-stepper input { text-align: center; font-size: 22px; font-weight: 600; padding: 8px; }
.ajuste-stepper .btn { justify-content: center; padding: 0; }
.ajuste-resultado { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.ajuste-resultado > div { font-size: 18px; font-variant-numeric: tabular-nums; }
.ajuste-resultado strong { font-size: 24px; }
.ajuste-resultado[data-signo="mas"] { border-color: var(--green); background: var(--green-bg); }
.ajuste-resultado[data-signo="menos"] { border-color: var(--red); background: var(--red-bg); }
@media (max-width: 520px) {
  .ajuste-item { flex-wrap: wrap; padding: 14px 16px; }
  .ajuste-stock { flex-direction: row; align-items: baseline; gap: 6px; width: 100%; justify-content: flex-start; }
  .ajuste-modos span { flex-direction: column; gap: 2px; font-size: 13px; }
}

/* Editar (azul) y cancelar / anular / eliminar / quitar (rojo) se distinguen en todo el sitio, y los botones
   vecinos llevan separación para que se vea dónde termina cada uno (p. ej. en las tablas). El icono marca la acción. */
.btn:is(:has(> .icon-edit)):not(.btn-primary, .btn-dark, .btn-success) { color: var(--blue); background: var(--blue-bg); border-color: #cddbfb; }
.btn:is(:has(> .icon-edit)):not(.btn-primary, .btn-dark, .btn-success):hover { border-color: var(--blue); background: var(--blue-bg); color: var(--blue); }
.btn:is(:has(> .icon-trash, > .icon-x), .btn-borrar):not(.btn-primary, .btn-dark, .btn-success, .btn-danger-solid) { color: var(--red); background: var(--red-bg); border-color: #f3c9c9; }
.btn:is(:has(> .icon-trash, > .icon-x), .btn-borrar):not(.btn-primary, .btn-dark, .btn-success, .btn-danger-solid):hover { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.btn + .btn, .btn + .inline-form, .inline-form + .btn, .inline-form + .inline-form { margin-left: 6px; }
.btn-icon:is(:has(> .icon-edit, > .icon-trash, > .icon-x), .btn-borrar) { padding: 6px 8px; }

/* Venta rápida: ficha "Otro" (producto fuera del catálogo, sin inventario) y precios sugeridos */
.pos-otro { border-style: dashed; border-width: 2px; background: var(--line-2); display: flex; flex-direction: column; }
.pos-otro-icon { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 44px; font-weight: 300; color: var(--ink-2); }
.otro-sugeridos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.otro-sugeridos .chip { font-size: 12.5px; padding: 6px 11px; }

/* ---------- Ferias: tablero (metas sobre la gráfica de avance) e inventario propio ---------- */
.feria-metas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; margin-bottom: 16px; }
.feria-metas:empty { display: none; }
.meta-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meta-item strong { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.meta-item small { font-size: 12.5px; }
.meta-bar { height: 8px; margin-top: 6px; }
.meta-bar .meta-real { background: var(--brand-gold-text); }
.chart-box.feria-avance { height: 320px; }
.feria-detalle > summary { padding: 12px 20px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text-secondary); border-top: 1px solid var(--line-2); }
.gasto-feria { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
.finv-toolbar { flex-wrap: wrap; }
.finv-toolbar .search-box { flex: 1; min-width: 200px; }
.finv td input { width: 90px; text-align: center; margin-left: auto; }
.finv tr.en-feria { background: var(--brand-gold-soft); }
.finv-guardar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--line-2);
  position: sticky; bottom: 0; background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 860px) {
  .gasto-feria { grid-template-columns: 1fr 1fr; }
  .gasto-feria label:first-child, .gasto-feria .btn { grid-column: 1 / -1; }
  .chart-box.feria-avance { height: 260px; }
  .toast-wrap { left: 12px; right: 12px; bottom: 84px; align-items: center; }
}
@media (max-width: 640px) {
  /* Inventario de la feria en tarjetas: producto arriba y las cantidades en dos columnas */
  .finv thead { display: none; }
  .finv tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  .finv tbody tr[hidden] { display: none; }
  .finv td { padding: 0; border: 0; }
  .finv td:first-child { grid-column: 1 / -1; }
  .finv td.num { text-align: left; }
  .finv td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }
  .finv td input { width: 100%; }
  .finv-guardar .btn { width: 100%; }
}

/* ---------- Pantallas táctiles (celular y tableta) en venta rápida y ferias ---------- */
.pos { height: calc(100vh - 60px); height: calc(100dvh - 60px); }
@media (max-width: 860px) {
  .pos { height: auto; }
  /* El carrito en pantalla completa se desplaza entero: así el resumen nunca queda cortado en pantallas bajas */
  .pos-cart { overflow-y: auto; }
  .pos-lines { flex: 0 0 auto; overflow: visible; min-height: 90px; }
  #pos-finish { position: sticky; bottom: 10px; box-shadow: var(--shadow-lg); }
}
@media (pointer: coarse) {
  /* 16 px evita que el celular haga zoom al escribir; botones de al menos 44 px para tocar con el dedo */
  .pos-page input, .pos-page select, .pos-page textarea, .feria-page input, .feria-page select, .feria-page textarea { font-size: 16px; }
  .qty button { width: 44px; height: 44px; }
  .qty input { width: 52px; }
  .pos-mode button { padding: 11px; font-size: 14px; }
  .pay-methods button { padding: 13px 4px; font-size: 14px; }
  .disc-type button { padding: 10px 14px; }
  .pos-cats .chip, .feria-page .chip { padding: 9px 14px; font-size: 13.5px; }
  .pos-line .btn-icon { padding: 10px 12px; }
  .feria-page .btn { min-height: 44px; }
  .feria-page .btn-icon { min-width: 44px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  /* Venta rápida en tableta: el menú lateral se pliega (botón ☰) para dejar todo el ancho a productos y carrito */
  .pos-page .sidebar { transform: translateX(-100%); }
  body.pos-page.sidebar-open .sidebar { transform: none; }
  body.pos-page.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 35; }
  .pos-page .main { margin-left: 0; }
  .pos-page .topbar .only-mobile, .pos-page .sidebar-head .only-mobile { display: inline-grid !important; }
}

/* ---------- Productos por tamaño y color (clicker): dibujo, selector de la venta rápida y matrices ---------- */
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); vertical-align: -2px; flex-shrink: 0; }
.clicker-svg { display: block; height: 100%; width: auto; max-width: 100%; margin: 0 auto; }
.clicker-svg.fijo { height: auto; max-width: none; }
.var-dibujo { display: block; height: 120px; }
.var-dibujo.sm { height: 56px; width: 36px; }
.thumb.thumb-clicker { display: grid; place-items: center; padding: 2px; background: var(--surface-secondary); }
.pos-var-img { display: block; width: 100%; aspect-ratio: 1; background: var(--surface-secondary); padding: 10px 0; }
/* Selector: dibujo a la izquierda, opciones a la derecha (en celular, apilado) */
.var-box { max-width: 680px; }
.var-selector { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: start; }
.var-vista { height: 380px; display: grid; place-items: center; background: var(--surface-secondary); border-radius: var(--radius); padding: 14px 0; }
.var-vista .clicker-svg { max-height: 100%; }
.var-opciones { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.var-paso { display: block; font-size: 12px; font-weight: 650; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.var-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.var-tam, .var-col { border: 1px solid var(--line); background: var(--white); border-radius: 10px; font: inherit; cursor: pointer; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.var-tam { min-width: 58px; min-height: 58px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.var-tam strong { font-size: 20px; line-height: 1.1; }
.var-tam small { font-size: 11px; color: var(--muted); }
.var-col { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; min-height: 44px; font-weight: 550; }
.var-col .swatch { width: 20px; height: 20px; }
.var-col small { font-size: 11.5px; color: var(--muted); background: var(--line-2); border-radius: 99px; padding: 1px 7px; font-weight: 600; }
.var-tam:hover, .var-col:hover { border-color: var(--ink-2); }
.var-tam.active, .var-col.active { border-color: var(--brand-charcoal); box-shadow: 0 0 0 2px var(--brand-charcoal); }
.var-tam.active small { color: var(--ink-2); }
.var-tam.agotado, .var-col.agotado { opacity: .5; }
.var-col.agotado small { background: var(--red-bg); color: var(--red); }
.var-resumen { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-secondary); }
.var-resumen strong { font-size: 26px; letter-spacing: -.02em; }
.var-cant { display: flex; align-items: center; justify-content: space-between; }
.var-cant .var-paso { margin: 0; }
/* El botón de agregar queda siempre a la vista aunque el selector se desplace (celular) */
#var-agregar { position: sticky; bottom: 8px; box-shadow: var(--shadow-lg); }
@media (max-width: 600px) {
  .var-selector { grid-template-columns: 1fr; gap: 14px; }
  .var-vista { height: 120px; }
  .modal { padding: 10px; align-items: flex-end; }
  .var-box { max-height: 94vh; }
}
/* Ficha del producto: stock por combinación y mapa de lo que más se vende */
.var-modo { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.var-matriz th, .var-matriz td { padding: 8px 10px; }
.var-celda { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.var-celda strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.var-celda input { width: 72px; padding: 5px 7px; text-align: center; }
.var-calor td[style] { background: rgba(201,161,59, calc(var(--calor) * .55)); }
.var-top { display: flex; gap: 16px; align-items: center; border-bottom: 1px solid var(--line-2); }
.var-top > div { display: flex; flex-direction: column; }
.var-top strong { font-size: 18px; }
.var-config > summary { cursor: pointer; list-style: none; }
.var-config > summary::-webkit-details-marker { display: none; }
.var-config:not([open]) > summary { border-bottom: 0; }
.var-tamanos input[type=number] { width: 100px; padding: 6px 8px; }
.var-tamanos td { padding: 6px 8px; }
.var-colores { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.var-color { display: grid; grid-template-columns: 36px 46px 1fr auto; gap: 10px; align-items: center; }
.var-color input[type=color] { height: 38px; padding: 2px; cursor: pointer; }
.var-color.nuevo { padding-top: 8px; border-top: 1px dashed var(--line); }
.var-portada { display: grid; place-items: center; padding: 24px; }
.var-portada .clicker-svg { height: 100%; }
/* Las matrices anchas se desplazan dentro de su tarjeta en vez de ensanchar la página */
#variantes .grid > * { min-width: 0; }

/* ---------- Cotizador: vista rápida ---------- */
.cot-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.cot-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cot-main > .card + .card { margin-top: 0; }
/* Etiqueta en una línea con su ayuda «i»; el campo debajo */
.cot-page .cot-main label:not(.check) { display: block; }
.cot-page .cot-main label:not(.check) > :is(input, select, textarea, .input-group, .disc-row) { margin-top: 5px; }
.cot-lbl { font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.cot-cliente-fila { display: flex; gap: 6px; margin-top: 5px; }
.cot-cliente-fila select { flex: 1; min-width: 0; }
.cot-cond { margin-top: 8px; font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cot-cond-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--text-secondary); text-decoration: underline dotted; cursor: pointer; text-align: left; }
/* Ayuda breve: icono «i» con el texto al pasar el mouse o al tocarlo */
.info { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border); color: var(--muted); font: italic 600 10px/1 Georgia, serif; cursor: help; vertical-align: 1px; margin-left: 2px; }
.info:hover, .info:focus-visible { border-color: var(--ink-2); color: var(--ink); }
.info::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 240px; padding: 8px 10px;
  background: var(--brand-charcoal); color: #fff; font: 400 12px/1.4 var(--font); border-radius: 7px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 60; text-align: left; white-space: normal; }
.info:hover::after, .info:focus::after { opacity: 1; }
/* Tres tipos de dato: lo escrito por el usuario (borde dorado), lo automático (normal + etiqueta) y lo pendiente (rojo suave) */
.f-usuario { box-shadow: inset 3px 0 0 var(--brand-gold); }
.f-falta { border-color: #e7a3a3 !important; background: #fffafa; }
.f-tag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 99px; vertical-align: 1px; margin-left: 2px; }
.f-tag.auto { background: var(--line-2); color: var(--muted); }
.f-tag.mod { background: var(--brand-gold-soft); color: var(--brand-gold-text); }
.f-tag.cli { background: var(--blue-bg); color: var(--blue); }
.cot-punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-gold); margin: 0 6px 0 8px; vertical-align: 1px; flex-shrink: 0; }
/* Líneas: una fila tipo hoja de cálculo; en pantallas medianas, dos renglones */
.cot-lineas { display: flex; flex-direction: column; }
.cot-linea { padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.cot-linea:last-child { border-bottom: 0; }
.cot-linea.activa { background: #fdfcf8; }
.cot-fila { display: grid; gap: 10px 12px; align-items: end; }
.cot-fila label, .cot-fila .cl-lbl { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.cot-fila input, .cot-fila select { padding: 7px 9px; }
.cot-fila.v2 { grid-template-columns: 1.1fr .7fr 1fr .6fr 1fr 1.15fr auto; grid-template-areas: "desc desc q maq maq precio acc" "mat mat g t t precio acc"; }
.cot-fila.v2 .cl-mat { grid-area: mat; } .cot-fila.v2 .cl-g { grid-area: g; } .cot-fila.v2 .cl-t { grid-area: t; } .cot-fila.v2 .cl-maq { grid-area: maq; }
.cot-fila .cl-desc { grid-area: desc; } .cot-fila .cl-q { grid-area: q; } .cot-fila .cl-precio { grid-area: precio; } .cot-fila .cl-acc { grid-area: acc; }
.cot-fila.cat { grid-template-columns: 2fr .7fr 1.1fr .7fr 1.15fr auto; grid-template-areas: "desc q pu dp precio acc"; }
.cot-fila .cl-pu { grid-area: pu; } .cot-fila .cl-dp { grid-area: dp; }
.cot-hm { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.cot-hm input { min-width: 0; }
.cot-hm span { font-size: 12px; color: var(--muted); }
.cl-precio { display: flex; flex-direction: column; align-items: flex-end; text-align: right; align-self: center; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-secondary); min-height: 62px; justify-content: center; }
.cl-precio .lp-unit { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cl-precio small { font-size: 11px; }
.cl-acc { display: flex; gap: 4px; align-self: center; }
.cot-avisos:empty { display: none; }
.cot-avisos { margin-top: 8px; }
.cot-aviso { font-size: 12.5px; color: var(--warning); padding: 3px 0 3px 18px; position: relative; }
.cot-aviso::before { content: "!"; position: absolute; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--warning-bg); color: var(--warning); font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.cot-aviso.error { color: var(--danger); }
.cot-aviso.error::before { background: var(--danger-bg); color: var(--danger); }
/* Secciones avanzadas de la línea: cerradas por defecto, con un punto dorado si tienen ajustes */
.cot-lsecs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cot-lsec { flex: 1 1 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.cot-lsec:not([open]) { flex: 0 1 auto; }
.cot-lsec > summary { display: flex; align-items: center; padding: 6px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); list-style: none; min-height: 34px; }
.cot-lsec > summary::-webkit-details-marker { display: none; }
.cot-lsec > summary::before { content: "+"; font-weight: 700; margin-right: 7px; color: var(--muted); }
.cot-lsec[open] > summary::before { content: "−"; }
.cot-lsec-res { font-weight: 500; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.cot-lsec-cuerpo { padding: 4px 12px 12px; border-top: 1px solid var(--line-2); }
.cot-lsec-cuerpo .form-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; margin-top: 8px; }
.cot-sub { font-size: 12.5px; margin: 10px 0 6px; }
.cot-lsec-cuerpo .calc-rapidos { margin-top: 6px; }
/* Complementos por grupos (Insumos, Packaging, Personalización, Extras, Servicios), como la hoja de cálculo */
.cot-grupo + .cot-grupo { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.cot-grupo-head { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.cot-grupo .cfg-table select, .cot-grupo .cfg-table input { min-width: 0; width: 100%; }
.cot-grupo .cfg-table td:first-child { min-width: 220px; }
.cot-lsec-cuerpo .calc-rapidos .btn + .btn { margin-left: 0; }
/* Secciones de la cotización (condiciones comerciales, documento) */
.cot-sec > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 14px 18px; cursor: pointer; list-style: none; }
.cot-sec > summary::-webkit-details-marker { display: none; }
.cot-sec > summary::after { content: "Cambiar"; margin-left: auto; font-size: 12px; color: var(--muted); }
.cot-sec[open] > summary::after { content: "Cerrar"; }
.cot-sec[open] > summary { border-bottom: 1px solid var(--line-2); }
.cot-sec-tit { font-weight: 650; font-size: 14.5px; }
.cot-sec-res { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; flex-wrap: wrap; }
/* Resumen siempre visible */
.cot-resumen { position: sticky; top: 76px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; max-height: calc(100vh - 96px); overflow-y: auto; }
.cot-res-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cot-res-barra strong { display: block; font-size: 26px; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cot-res-barra #r-toggle, .cot-res-barra #r-guardar-m { display: none; }
.cot-res-cuerpo { margin-top: 10px; }
.cot-res-kv { gap: 6px 14px; }
.cot-res-kv dd { font-variant-numeric: tabular-nums; }
.cot-res-interno, .cot-res-entrega { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 13px; }
.cot-res-interno:empty, .cot-res-entrega:empty { display: none; }
.cot-res-fila { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.cot-res-fila b { font-variant-numeric: tabular-nums; text-align: right; }
.cot-res-alertas { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 13px; }
.cot-origen { margin-top: 12px; border-top: 1px solid var(--line-2); padding-top: 10px; font-size: 12.5px; }
.cot-origen > summary { cursor: pointer; font-weight: 650; font-size: 13px; }
.cot-origen-t { margin-top: 6px; }
.cot-origen-t td { padding: 4px 0; border: 0; vertical-align: top; }
.cot-origen-t td.num { padding-left: 10px; }
.cot-origen-t tr.sep td { border-top: 1px solid var(--line-2); padding-top: 6px; }
.cot-origen-t tr.muted td { color: var(--muted); }
.cot-origen-t tbody tr:hover { background: transparent; }
.cot-config-avisos { margin-top: 10px; font-size: 12px; color: var(--muted); }
.cot-config-avisos summary { cursor: pointer; }
.cot-config-avisos ul { margin: 6px 0 0; padding-left: 18px; }
#q-faltan .faltantes { margin-top: 12px; }
@media (max-width: 1100px) {
  .cot-layout { grid-template-columns: 1fr; }
  /* El resumen pasa a una barra fija abajo que se despliega */
  .cot-page .content { padding-bottom: 110px; }
  .cot-resumen { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 45; border-radius: 14px 14px 0 0; max-height: 82vh; box-shadow: 0 -8px 30px rgba(0,0,0,.14); padding: 12px 16px; }
  .cot-res-barra #r-toggle, .cot-res-barra #r-guardar-m { display: inline-flex; }
  .cot-res-cuerpo { display: none; }
  .cot-resumen.abierto .cot-res-cuerpo { display: block; }
  .cot-res-barra strong { font-size: 22px; }
}
@media (min-width: 861px) and (max-width: 1100px) { .cot-resumen { left: var(--sidebar); } }
@media (max-width: 640px) {
  .cot-linea { padding: 12px; }
  .cot-fila.v2 { grid-template-columns: 1fr 1fr; grid-template-areas: "desc desc" "mat mat" "g t" "q maq" "precio acc"; }
  .cot-fila.cat { grid-template-columns: 1fr 1fr; grid-template-areas: "desc desc" "q pu" "dp precio" "acc acc"; }
  .cl-precio { align-items: flex-start; text-align: left; }
  .cl-acc { justify-content: flex-end; }
  .cot-lsec, .cot-lsec:not([open]) { flex: 1 1 100%; }
  .cot-lsec-res { max-width: 150px; }
  .info::after { max-width: 200px; }
}

/* ============================================================
   Movimiento (MOTION_GUIDELINES.md). Solo transform y opacity. La intensidad la fija
   <body data-motion="alta|media|baja|ninguna"> (MOTION_MODULOS en bootstrap.php).
   ============================================================ */
@keyframes tdnFade { from { opacity: 0; } }
@keyframes tdnSube { from { transform: translateY(8px); } }
@keyframes tdnPop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes tdnGrow { from { transform: scaleX(0); } }
@keyframes tdnSpin { to { transform: rotate(360deg); } }
/* Entrada de la página. «backwards» y no «both»: al terminar no queda ningún transform/opacity aplicado,
   así no se crean contextos de apilamiento que dejen modales o barras fijas debajo de la barra superior. */
/* En «alta» los bloques solo suben (sin fundido): el texto se pinta desde el primer cuadro y el LCP no espera a la animación.
   Los modales (hijos directos en algunas páginas) quedan fuera para no repetir la entrada cada vez que se abren. */
[data-motion=alta] .content > :not(.modal) { animation: tdnSube var(--dur-complex) var(--ease-out) backwards; }
[data-motion=alta] .content > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
[data-motion=alta] .content > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
[data-motion=alta] .content > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
[data-motion=alta] .content > :nth-child(n+5) { animation-delay: calc(var(--stagger) * 4); }
[data-motion=media] .content > :not(.modal) { animation: tdnFade var(--dur-comp) var(--ease-out) backwards; }
[data-motion=alta] .bar > span { animation: tdnGrow 700ms var(--ease-out) 200ms backwards; }
/* Cambio de página (navegadores que lo soportan): fundido corto; el menú lateral no parpadea */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-micro); }
.sidebar { view-transition-name: tdn-menu; }
/* Venta rápida es la pantalla más repetitiva: sin fundido al entrar */
html:has(body[data-motion=ninguna])::view-transition-group(*) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
  .imp-carro, .imp-cabezal { animation: none !important; transform: translateY(-84px); }
  .imp-carro { transform: none; }
}
/* Pantallas táctiles: zonas de toque de al menos 44 px en botones y menú */
@media (pointer: coarse) {
  .btn, .btn-sm, .nav-link { min-height: 44px; }
  .btn-icon, .icon-btn { min-width: 44px; min-height: 44px; }
}

/* ============================================================
   Inicio (dashboard): portada oscura con el resumen del día
   ============================================================ */
.dash-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: center; padding: 28px 32px; margin-bottom: 20px; border-radius: var(--radius-lg); color: var(--text-on-dark); background-color: var(--brand-charcoal);
  /* Líneas de capa tenues: el motivo de la impresión 3D */
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 8px), linear-gradient(120deg, #1d1d21 0%, #111113 70%); }
.dash-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--brand-gold) 0%, rgba(201,161,59,0) 60%); }
.dash-fecha { margin: 0 0 6px; color: var(--text-on-dark-muted); font-size: var(--text-sm); }
.dash-fecha::first-letter { text-transform: uppercase; }
.dash-hero h1 { font-size: var(--text-2xl); letter-spacing: -.03em; color: #fff; }
.dash-hoy { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.dash-hoy-label { font-size: var(--text-sm); color: var(--text-on-dark-muted); }
.dash-hoy-valor { font-family: var(--font-display); font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.dash-hoy-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--text-on-dark-muted); }
.delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-weight: 600; font-size: 12px; }
.delta.up { background: rgba(34,197,94,.14); color: #86efac; }
.delta.down { background: rgba(248,113,113,.14); color: #fca5a5; }
.dash-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.btn-on-dark { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.14); }
.btn-on-dark:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.dash-arte { justify-self: end; width: 100%; max-width: 280px; }
.dash-arte svg { display: block; width: 100%; height: auto; overflow: visible; }
.dash-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 860px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Impresora que imprime una pieza capa por capa (una vez al cargar). Decorativa: aria-hidden */
.imp-marco { stroke: #3a3a40; stroke-width: 3; fill: none; stroke-linecap: round; }
.imp-cama { fill: #2c2c31; }
.imp-capa { fill: var(--brand-gold); transform-box: fill-box; transform-origin: center; animation: tdnGrow 240ms var(--ease-out) backwards; animation-delay: calc(400ms + var(--i) * 180ms); }
.imp-capa:nth-child(even) { fill: #b8912f; }
.imp-cabezal { animation: impSubir 2520ms steps(14, end) 400ms both; }
.imp-carro { animation: impBarrer 180ms var(--ease-in-out) 400ms 14 alternate both; }
.imp-carro rect { fill: #e4e4e7; }
.imp-carro path { fill: var(--brand-gold); }
.imp-varilla { stroke: #52525b; stroke-width: 2; }
.imp-luz { fill: #22c55e; animation: impLuz 1.4s ease-in-out 3s 3 both; }
@keyframes impSubir { from { transform: translateY(0); } to { transform: translateY(-84px); } }
@keyframes impBarrer { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes impLuz { 50% { opacity: .25; } }

@media (max-width: 1100px) { .dash-hero { grid-template-columns: minmax(0, 1fr) 200px; } }
@media (max-width: 760px) {
  .dash-hero { grid-template-columns: 1fr; padding: 22px 20px; }
  .dash-arte { display: none; }
  .dash-hoy-valor { font-size: 36px; }
  .dash-hero h1 { font-size: 22px; }
  .dash-acciones .btn { flex: 1 1 auto; }
}

/* Producción: el título de cada columna lleva el punto del color de su estado (mismo color que su insignia) */
.board-col h4 .col-estado { display: inline-flex; align-items: center; background: none; color: var(--ink-2); padding: 0; }
.board-col h4 .col-estado::before { margin-right: 8px; }
.board-col h4 .col-estado.badge-blue::before { background: var(--blue); }
.board-col h4 .col-estado.badge-purple::before { background: var(--purple); }
.board-col h4 .col-estado.badge-amber::before { background: var(--amber); }
.board-col h4 .col-estado.badge-green::before { background: var(--green); }
.board-col h4 .col-estado.badge-red::before { background: var(--red); }
.board-col h4 .col-estado.badge-gray::before { background: var(--muted); }

/* Login: ayuda «¿Olvidaste tu contraseña?» */
.auth-olvido { margin-top: 14px; font-size: 13px; color: var(--text-secondary); }
.auth-olvido > summary { cursor: pointer; color: var(--brand-gold-text); font-weight: 600; text-align: center; list-style: none; padding: 6px; border-radius: var(--radius-sm); }
.auth-olvido > summary::-webkit-details-marker { display: none; }
.auth-olvido > summary:hover { text-decoration: underline; }
.auth-olvido p { margin: 8px 0 0; line-height: 1.5; }
.auth-temporal { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 20px; font-weight: 600; text-align: center; padding: 14px; border: 1px dashed var(--brand-gold); border-radius: var(--radius-sm); background: var(--brand-gold-soft); user-select: all; letter-spacing: .02em; }

/* Cotizador: desglose de costos de la línea y descuento limitado por el precio mínimo en la tabla de volumen */
.cot-lsec[data-sec="desglose"] .cot-lsec-res { margin-left: 10px; max-width: none; }
.cot-desg td { padding: 6px 8px 6px 0; font-size: 13px; }
.cot-desg td.muted { font-size: 12px; }
.cot-desg tr.sep td { border-top: 1px solid var(--line); font-weight: 650; padding-top: 8px; }
.cot-desg tr.green td.num { color: var(--green); }
.cot-desg tr.red td.num { color: var(--red); }
.vol-tope { color: var(--warning); font-weight: 600; cursor: help; }

/* Documento de cotización: imagen de referencia, tiempo de entrega y precios por cantidad */
.doc-items td { vertical-align: middle; }
.doc-ref-col { width: 96px; }
.doc-ref img { width: 80px; height: 80px; object-fit: contain; border-radius: 6px; background: #f4f4f5; border: 1px solid #e5e5e5; }
.doc-entrega-col { width: 120px; text-align: center; }
.doc-entrega { text-align: center; font-weight: 600; border-left: 1px solid #e5e5e5; }
.doc-opciones { margin-top: 26px; break-inside: avoid; page-break-inside: avoid; }
.doc-opciones h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #444; margin-bottom: 8px; }
.doc-opciones th { background: #f4f4f5 !important; color: #333 !important; }
.doc-opciones tr.doc-op-actual td { background: #f8f1dc; }
.doc-op-nota { font-size: 11px; color: #666; margin: 6px 0 0; }
@media print { .doc-opciones tr.doc-op-actual td, .doc-opciones th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Editor: imagen de referencia de la línea y cantidades elegidas para la comparativa */
.cot-ref { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.cot-ref img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-secondary); }
.cot-ref .hint { margin: 0; }
.vol-incluir { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
/* Documento: términos y condiciones en una página aparte */
.doc-terminos { break-before: page; page-break-before: always; margin-top: 40px; padding-top: 28px; border-top: 1px dashed #ddd; }
.doc-terminos-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 2px solid #111; padding-bottom: 12px; }
.doc-terminos-head h2 { font-size: 24px; letter-spacing: .04em; text-transform: uppercase; }
.doc-terminos-head .brand-logo { width: 54px; height: 54px; color: #111; }
.doc-terminos-sub { font-weight: 600; font-size: 12.5px; margin: 10px 0 14px; padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; }
.doc-terminos-cuerpo { font-size: 11.5px; line-height: 1.55; color: #222; }
.doc-terminos-cuerpo h4 { font-size: 12px; margin: 12px 0 3px; color: #111; break-after: avoid; page-break-after: avoid; }
.doc-terminos-cuerpo p { margin: 0 0 4px; text-align: justify; }
@media print { .doc-terminos { margin-top: 0; padding-top: 0; border-top: 0; } }