/* ════════════════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO — FERREOBRAS DEL VALLE S.A.S
   Amarillo maquinaria pesada + negro carbón.
   Identidad directa del logo del cliente.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Paleta Ferreobras */
  --carbon: #0E0E0E;
  --carbon-soft: #161616;
  --steel: #1C1C1C;
  --steel-light: #252525;
  --steel-border: #323232;

  --torch: #F5C400;            /* AMARILLO FERREOBRAS */
  --torch-dim: #C49D00;
  --torch-glow: rgba(245, 196, 0, 0.15);

  --ok-green: #3DDC84;
  --danger-red: #FF4D4D;
  --info-blue: #4A9EFF;

  --bone: #F0EAD6;
  --bone-dim: #A09A8A;
  --paper: #F5F0E8;
  --paper-line: #E8E2D6;
  --ink: #0E0E0E;
  --ink-dim: #6B7280;

  /* Tipografía */
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Forma */
  --radius-sm: 3px;
  --radius-md: 6px;
  --shadow-hard: 4px 4px 0 rgba(0,0,0,0.4);
  --shadow-soft: 0 2px 16px rgba(0,0,0,0.5);

  --topbar-bg: rgba(14,14,14,0.94);

  /* Movimiento — curvas orgánicas para transiciones premium */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);   /* desaceleración suave */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* leve overshoot tipo resorte */
}

[data-theme="light"] {
  --carbon:       #F5F5F5;
  --carbon-soft:  #FFFFFF;
  --steel:        #EBEBEB;
  --steel-light:  #E0E0E0;
  --steel-border: #C8C8C8;

  --torch:        #F5C400;
  --torch-dim:    #C49D00;
  --torch-glow:   rgba(245, 196, 0, 0.12);

  --bone:         #111111;
  --bone-dim:     #555555;
  --paper:        #FFFFFF;
  --paper-line:   #E0E0E0;
  --ink:          #111111;
  --ink-dim:      #6B7280;

  --topbar-bg:    rgba(255,255,255,0.94);
}

[data-theme="light"] ::-webkit-scrollbar-track { background: var(--steel); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--steel-border); }

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

body {
  font-family: var(--font-body);
  background: var(--carbon);
  color: var(--bone);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--torch); color: var(--carbon); }
:focus-visible { outline: 2px solid var(--torch); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.01em;
}
.mono { font-family: var(--font-mono); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--carbon); }
::-webkit-scrollbar-thumb { background: var(--steel-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--steel-border); }

/* ════════════════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════════════════ */

.app-shell {
  display: grid;
  /* clamp() en vez de un valor fijo: el sidebar se angosta con gusto en
     ventanas/tablets intermedias en vez de quedar desproporcionado. */
  grid-template-columns: clamp(200px, 20vw, 248px) 1fr;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--carbon-soft);
  border-right: 1px solid var(--steel-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100svh;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--steel-border);
  background: var(--torch);
}

.sidebar__brand-mark {
  width: 36px;
  height: 36px;
  background: var(--carbon);
  display: grid;
  place-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--torch);
  font-size: 13px;
  flex-shrink: 0;
  letter-spacing: 0;
}

.sidebar__brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--carbon);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sidebar__brand-text span {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  color: rgba(0,0,0,0.55);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.sidebar__nav {
  padding: 14px 12px;
  flex: 1;
  overflow-y: auto;
}

.sidebar__section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bone-dim);
  padding: 12px 12px 6px;
  font-weight: 700;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--bone-dim);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  border-left: 2px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.sidebar__link:hover { background: var(--steel); color: var(--bone); }
.sidebar__link.is-active {
  background: var(--torch-glow);
  color: var(--torch);
  border-left-color: var(--torch);
}
.sidebar__link svg { width: 17px; height: 17px; flex-shrink: 0; }

.sidebar__link .badge-count {
  margin-left: auto;
  background: var(--steel-light);
  color: var(--bone);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  font-family: var(--font-mono);
}
.sidebar__link.is-active .badge-count { background: var(--torch); color: var(--carbon); }

.sidebar__footer {
  border-top: 1px solid var(--steel-border);
  padding: 14px 16px;
}
.sidebar__user { display: flex; align-items: center; gap: 10px; }
.sidebar__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--torch);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--carbon);
  flex-shrink: 0;
}
.sidebar__user-info { flex: 1; min-width: 0; }
.sidebar__user-name { font-size: 13px; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user-role { font-size: 11px; color: var(--bone-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.sidebar__version {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--bone-dim);
  margin-left: 6px;
  opacity: 0.55;
}
.sidebar__logout {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  color: var(--bone-dim);
  border: 1px solid var(--steel-border);
  flex-shrink: 0;
}
.sidebar__logout:hover { color: var(--danger-red); border-color: var(--danger-red); }
.sidebar__logout svg { width: 15px; height: 15px; }

.theme-toggle {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--steel-border);
  background: var(--steel);
  color: var(--bone-dim);
  transition: color 0.15s, border-color 0.15s;
}
.theme-toggle:hover {
  color: var(--torch);
  border-color: var(--torch);
}
.theme-toggle svg { width: 18px; height: 18px; }

/* Oscuro: muestra sol (para ir a claro). Claro: muestra luna (para ir a oscuro) */
[data-theme="dark"]  .icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: none; }

/* ── Menú móvil (hamburguesa + drawer) ───────────────────────────────── */
.topbar__left { display: flex; align-items: center; gap: 12px; }

.menu-toggle {
  display: none;
  width: 38px; height: 38px;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--steel-border);
  background: var(--steel);
  flex-shrink: 0;
}
.menu-toggle span {
  display: block;
  width: 16px; height: 2px;
  background: var(--bone-dim);
  transition: background 0.15s;
}
.menu-toggle:hover span { background: var(--torch); }

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 290;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out-soft),
              visibility 0s linear 0.3s;
}
.sidebar-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease-out-soft),
              visibility 0s;
}

/* ── Topbar + Main ───────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--steel-border);
  position: sticky; top: 0;
  background: var(--topbar-bg);
  backdrop-filter: blur(6px);
  z-index: 20;
}
.topbar__title { font-size: 19px; font-weight: 600; color: var(--bone); }
.topbar__subtitle { font-size: 13px; color: var(--bone-dim); margin-top: 2px; }
.topbar__actions { display: flex; align-items: center; gap: 14px; }

.content {
  padding: 28px 32px 60px;
  flex: 1;
  animation: content-enter 0.42s var(--ease-out-soft) both;
}

/* La shell (sidebar/topbar) permanece fija; solo el contenido entra en cada
   navegación. Al ser navegación completa (MPA), la animación se ejecuta sola. */
@keyframes content-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Campana ─────────────────────────────────────────────────────────── */
.notif-bell {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--steel-border);
  background: var(--steel);
  color: var(--bone-dim);
}
.notif-bell:hover { color: var(--bone); border-color: var(--torch); }
.notif-bell svg { width: 18px; height: 18px; }
.notif-bell__dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 20px;
  background: var(--torch); color: var(--carbon);
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  display: grid; place-items: center;
  border: 2px solid var(--carbon);
}
.notif-bell__dot.is-hidden { display: none; }

.notif-panel {
  position: absolute; top: 56px; right: 32px;
  width: 360px; max-height: 420px; overflow-y: auto;
  background: var(--steel);
  border: 1px solid var(--steel-border);
  box-shadow: var(--shadow-soft);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transform-origin: top right;
  transition: opacity 0.22s var(--ease-out-soft),
              transform 0.22s var(--ease-out-soft),
              visibility 0s linear 0.22s;
}
.notif-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.22s var(--ease-out-soft),
              transform 0.22s var(--ease-out-soft),
              visibility 0s;
}
.notif-panel__header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--steel-border);
  font-weight: 600; font-size: 13px; color: var(--bone);
  display: flex; justify-content: space-between; align-items: center;
}
.notif-panel__header button { background: none; border: none; color: var(--torch); font-size: 12px; font-weight: 500; }
.notif-item {
  padding: 13px 16px;
  border-bottom: 1px solid var(--steel-border);
  display: flex; gap: 10px; align-items: flex-start;
  transition: background 0.1s;
}
.notif-item:last-child { border-bottom: none; }
a.notif-item:hover { background: var(--steel-light); cursor: pointer; }
.notif-item__dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--bone-dim); }
.notif-item__dot.tipo-nuevo_pedido { background: var(--torch); }
.notif-item__dot.tipo-despachado { background: var(--ok-green); }
.notif-item__text { font-size: 13px; color: var(--bone); line-height: 1.4; }
.notif-item__time { font-size: 11px; color: var(--bone-dim); margin-top: 3px; font-family: var(--font-mono); }
.notif-empty { padding: 30px 16px; text-align: center; color: var(--bone-dim); font-size: 13px; }

/* ════════════════════════════════════════════════════════════════════════
   COMPONENTES
   ════════════════════════════════════════════════════════════════════════ */

/* ── Métricas ─────────────────────────────────────────────────────────── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.metric-card {
  background: var(--steel);
  border: 1px solid var(--steel-border);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.metric-card::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--torch));
}
.metric-card--yellow { --accent: var(--torch); }
.metric-card--green  { --accent: var(--ok-green); }
.metric-card--torch  { --accent: var(--torch); }
.metric-card--comision {
  --accent: var(--torch);
  background: linear-gradient(135deg, var(--steel) 60%, rgba(245,196,0,0.06));
  border-color: rgba(245,196,0,0.25);
}

.metric-card__label {
  font-size: 11.5px; color: var(--bone-dim);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; margin-bottom: 10px;
  text-align: center;
}
.metric-card__value {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; color: var(--bone); line-height: 1;
  text-align: center;
}
.metric-card__value--torch { color: var(--torch); }
.metric-card__sub {
  font-size: 12px; color: var(--bone-dim); margin-top: 6px;
}

/* ── Tarjeta de comisión grande (asesor) ─────────────────────────────── */
.comision-hero {
  background: var(--torch);
  color: var(--carbon);
  padding: 24px 28px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.comision-hero__left {}
.comision-hero__eyebrow {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(0,0,0,0.55);
  margin-bottom: 6px;
}
.comision-hero__valor {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 700;
  color: var(--carbon); line-height: 1;
}
.comision-hero__sub { font-size: 13px; color: rgba(0,0,0,0.55); margin-top: 5px; }
.comision-hero__icon { opacity: 0.25; }
.comision-hero__icon svg { width: 56px; height: 56px; }

/* ── Panels ───────────────────────────────────────────────────────────── */
.panel {
  background: var(--steel);
  border: 1px solid var(--steel-border);
  margin-bottom: 22px;
}
.panel__header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--steel-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.panel__title { font-size: 14.5px; font-weight: 600; color: var(--bone); }
.panel__body { padding: 20px; }
.panel__body--flush { padding: 0; }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform 0.08s, background 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }

.btn--primary { background: var(--torch); color: var(--carbon); border-color: var(--torch); }
.btn--primary:hover { background: #FFD426; border-color: #FFD426; }

.btn--ghost { background: transparent; border-color: var(--steel-border); color: var(--bone); }
.btn--ghost:hover { border-color: var(--bone-dim); }

.btn--danger-ghost { background: transparent; border-color: var(--steel-border); color: var(--danger-red); }
.btn--danger-ghost:hover { border-color: var(--danger-red); background: rgba(255,77,77,0.08); }

.btn--sm { padding: 7px 13px; font-size: 12.5px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ── Formularios ─────────────────────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field__label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--bone-dim); margin-bottom: 7px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.field__hint { font-size: 12px; color: var(--bone-dim); margin-top: 5px; }
.field__hint--strong { color: var(--torch); font-weight: 600; }

.input, .select, textarea.input {
  width: 100%;
  background: var(--carbon-soft);
  border: 1px solid var(--steel-border);
  color: var(--bone);
  padding: 11px 13px;
  font-size: 14px;
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
  transition: border-color 0.12s;
}
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--torch);
}
.input::placeholder { color: var(--bone-dim); }

/* ── Campo de valor monetario ($ + separador de miles en vivo) ───────── */
.campo-moneda { position: relative; }
.campo-moneda__prefijo {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--bone-dim); font-weight: 600; font-size: 14px;
  pointer-events: none;
}
.campo-moneda__input { padding-left: 26px; }

select.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A09A8A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}

.checkbox-row { display: flex; align-items: center; gap: 10px; }
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--torch); }
.checkbox-row label { font-size: 13.5px; color: var(--bone); cursor: pointer; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }

.layout-split { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }

/* ── Tablas ───────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data-table { width: 100%; border-collapse: collapse; }

.data-table thead th {
  text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--bone-dim); font-weight: 700;
  padding: 12px 20px;
  border-bottom: 1px solid var(--steel-border);
  background: var(--carbon-soft);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--steel-border);
  font-size: 14px; color: var(--bone); vertical-align: middle;
}
.data-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.data-table tbody tr:last-child td { border-bottom: none; }

.cell-strong { font-weight: 600; }
.cell-dim { color: var(--bone-dim); }
.cell-mono { font-family: var(--font-mono); font-size: 13px; }

/* `display:flex` directamente sobre un <td> hace que algunos navegadores
   calculen el ancho/alto de esa columna por fuera del algoritmo normal de
   tablas, y el borde inferior de la fila queda desalineado entre filas
   (las "líneas" que se ven disparejas al lado derecho). En vez de eso, la
   celda se queda como celda de tabla normal y el espaciado entre botones
   se logra con márgenes, no con flexbox en el <td>. */
.table-actions {
  text-align: right;
  white-space: nowrap;
}
.table-actions > * { vertical-align: middle; }
.table-actions > form { display: inline-block; }
.table-actions > *:not(:first-child) { margin-left: 8px; }

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.badge--pendiente      { background: rgba(245,196,0,0.15);  color: var(--torch); }
.badge--en_preparacion { background: rgba(74,158,255,0.15); color: var(--info-blue); }
.badge--despachado     { background: rgba(61,220,132,0.15); color: var(--ok-green); }
.badge--cancelado      { background: rgba(255,77,77,0.15);  color: var(--danger-red); }
.badge--verde          { background: rgba(61,220,132,0.16); color: var(--ok-green); }
.badge--amarillo       { background: rgba(255,199,76,0.18); color: #c48a00; }
.badge--rojo           { background: rgba(255,77,77,0.16); color: var(--danger-red); }
.badge--verde          { background: rgba(61,220,132,0.16); color: var(--ok-green); }
.badge--amarillo       { background: rgba(255,199,76,0.18); color: #c48a00; }
.badge--rojo           { background: rgba(255,77,77,0.16); color: var(--danger-red); }

/* ── Riel de estado (signature element) ──────────────────────────────── */
.estado-riel { display: flex; align-items: center; }
.estado-riel__paso { flex: 1; position: relative; text-align: center; }
.estado-riel__linea { height: 4px; background: var(--steel-border); position: relative; }
.estado-riel__paso.is-completo .estado-riel__linea { background: var(--torch); }
.estado-riel__paso.is-actual .estado-riel__linea   { background: var(--torch); }
.estado-riel__paso:last-child.is-completo .estado-riel__linea { background: var(--ok-green); }
.estado-riel__paso:last-child.is-actual   .estado-riel__linea { background: var(--ok-green); }

.estado-riel__nodo {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--carbon); border: 3px solid var(--steel-border); z-index: 2;
}
.estado-riel__paso.is-completo .estado-riel__nodo,
.estado-riel__paso.is-actual   .estado-riel__nodo  { border-color: var(--torch); }
.estado-riel__paso:last-child.is-completo .estado-riel__nodo,
.estado-riel__paso:last-child.is-actual   .estado-riel__nodo { border-color: var(--ok-green); }
.estado-riel__etiqueta {
  display: block; margin-top: 14px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--bone-dim); font-weight: 700;
}
.estado-riel__paso.is-completo .estado-riel__etiqueta,
.estado-riel__paso.is-actual   .estado-riel__etiqueta { color: var(--bone); }

/* ── Placa código de pedido ──────────────────────────────────────────── */
.codigo-placa {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--carbon-soft); border: 1px solid var(--steel-border);
  padding: 5px 11px;
  font-family: var(--font-mono); font-weight: 600; color: var(--torch);
  font-size: 12.5px; border-radius: var(--radius-sm);
}

/* ── Pills de categoría / filtros ─────────────────────────────────────
   Barra contenida tipo "segmented control": el grupo entero tiene su
   propio fondo/borde (se ajusta al contenido, no se estira), así no se ve
   como botones sueltos flotando en el espacio vacío del panel. */
.pill-grid {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  background: var(--carbon-soft);
  border: 1px solid var(--steel-border);
  border-radius: 14px;
}
.pill {
  padding: 8px 18px; border: none;
  border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--bone-dim); background: transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.pill:hover { color: var(--bone); background: var(--steel); }
.pill.is-active { background: var(--torch); color: var(--carbon); }
.pill.is-active:hover { background: var(--torch); color: var(--carbon); }

/* ── Selector de productos (nuevo pedido) ────────────────────────────── */
.producto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

.producto-card {
  background: var(--carbon-soft); border: 1px solid var(--steel-border);
  padding: 14px; transition: border-color 0.12s;
}
.producto-card.is-en-carrito { border-color: var(--torch); }
.producto-card__nombre { font-weight: 600; font-size: 13.5px; color: var(--bone); margin-bottom: 4px; }
.producto-card__meta { font-size: 11.5px; color: var(--bone-dim); margin-bottom: 8px; display: flex; gap: 8px; }
.producto-card__precio { font-family: var(--font-mono); font-weight: 700; color: var(--torch); font-size: 15px; margin-bottom: 10px; }
.producto-card__comision { color: var(--torch); font-weight: 700; font-size: 11px; background: rgba(245,196,0,0.1); padding: 2px 7px; border-radius: 10px; }

.qty-control { display: flex; align-items: center; border: 1px solid var(--steel-border); border-radius: var(--radius-sm); overflow: hidden; }
.qty-control button { width: 30px; height: 30px; background: var(--steel); border: none; color: var(--bone); font-size: 16px; font-weight: 700; }
.qty-control button:hover { background: var(--steel-light); }
.qty-control input {
  flex: 1; text-align: center; background: var(--carbon);
  border: none; color: var(--bone);
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  height: 30px; width: 40px;
}
.qty-control input:focus { outline: none; }

/* ── Carrito flotante ────────────────────────────────────────────────── */
.carrito-flotante { position: sticky; top: 96px; background: var(--steel); border: 1px solid var(--steel-border); }
.carrito-flotante__header {
  padding: 15px 18px; border-bottom: 1px solid var(--steel-border);
  display: flex; justify-content: space-between; align-items: center;
}
.carrito-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 18px; border-bottom: 1px solid var(--steel-border);
  font-size: 13px; gap: 8px;
}
.carrito-item__nombre { flex: 1; color: var(--bone); }
.carrito-item__cant { color: var(--bone-dim); font-family: var(--font-mono); }
.carrito-item__subtotal { font-family: var(--font-mono); font-weight: 700; color: var(--bone); min-width: 70px; text-align: right; }
.carrito-item__borrar { color: var(--bone-dim); background: none; border: none; font-size: 16px; line-height: 1; }
.carrito-item__borrar:hover { color: var(--danger-red); }
.carrito-vacio { padding: 28px 18px; text-align: center; color: var(--bone-dim); font-size: 13px; }
.carrito-total {
  padding: 16px 18px;
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--steel-border);
}
.carrito-total__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bone-dim); font-weight: 700; }
.carrito-total__valor { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--torch); }

/* comision en el carrito */
.carrito-comision {
  padding: 10px 18px;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(245,196,0,0.07);
  border-top: 1px dashed rgba(245,196,0,0.25);
}
.carrito-comision__label { font-size: 12px; color: var(--torch); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.carrito-comision__valor { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--torch); }

/* ── Detalle pedido / factura ────────────────────────────────────────── */
.factura-linea { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--steel-border); }
.factura-linea:last-child { border-bottom: none; }

.comision-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(245,196,0,0.12); color: var(--torch);
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px;
  transition: background 0.12s;
}
a.comision-tag:hover { background: rgba(245,196,0,0.22); }
a.comision-tag svg { width: 12px; height: 12px; }

/* ── Flashes ─────────────────────────────────────────────────────────── */
.flash-stack { position: fixed; top: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.flash {
  padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500; border-left: 3px solid;
  box-shadow: var(--shadow-soft);
  background: var(--steel); color: var(--bone);
  animation: flash-in 0.2s ease-out;
}
@keyframes flash-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.flash--success { border-color: var(--ok-green); }
.flash--error   { border-color: var(--danger-red); }
.flash--warning { border-color: var(--torch); }
.flash--info    { border-color: var(--info-blue); }

/* ── Empty states ─────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--bone-dim); }
.empty-state svg { width: 42px; height: 42px; margin-bottom: 14px; opacity: 0.5; }
.empty-state__title { font-size: 15px; font-weight: 600; color: var(--bone); margin-bottom: 6px; }
.empty-state__text { font-size: 13.5px; }

/* ── Modal ────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s var(--ease-out-soft),
              visibility 0s linear 0.26s;
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.26s var(--ease-out-soft),
              visibility 0s;
}
.modal-box {
  background: var(--steel); border: 1px solid var(--steel-border);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  transform: translateY(8px) scale(0.97);
  transition: transform 0.32s var(--ease-spring);
}
.modal-overlay.is-open .modal-box {
  transform: translateY(0) scale(1);
}

/* Accesibilidad: si el usuario pidió menos movimiento en su sistema,
   desactivamos todas las transiciones/animaciones sin perder funcionalidad. */
@media (prefers-reduced-motion: reduce) {
  .content { animation: none; }
  .notif-panel, .notif-panel.is-open,
  .modal-overlay, .modal-overlay.is-open,
  .modal-box, .modal-overlay.is-open .modal-box {
    transition: none;
  }
}
.modal-box__header { padding: 18px 20px; border-bottom: 1px solid var(--steel-border); display: flex; justify-content: space-between; align-items: center; }
.modal-box__title { font-size: 16px; font-weight: 600; }
.modal-box__close { background: none; border: none; color: var(--bone-dim); font-size: 22px; }
.modal-box__body { padding: 20px; }
.modal-box__footer { padding: 16px 20px; border-top: 1px solid var(--steel-border); display: flex; justify-content: flex-end; gap: 10px; }

/* ── Login ────────────────────────────────────────────────────────────── */
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.login-screen__visual {
  background: var(--torch);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px; position: relative; overflow: hidden;
}
.login-screen__visual::before {
  content: "";
  position: absolute; width: 500px; height: 500px;
  background: rgba(0,0,0,0.06);
  border-radius: 50%;
  top: -150px; right: -150px;
}
.login-screen__form {
  display: flex; align-items: center; justify-content: center;
  padding: 40px; background: var(--carbon); position: relative;
}
.login-card {
  width: 100%;
  max-width: 430px;
  background: #E3E3E3;
  border: 1px solid #CECECE;
  padding: 30px 24px 22px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}
.login-theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
}
.login-card__eyebrow { color: var(--torch); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.login-card__title { font-size: 26px; margin-bottom: 8px; }
.login-card__subtitle { color: var(--bone-dim); font-size: 14px; margin-bottom: 32px; }

[data-theme="dark"] .login-screen__form { background: #121212; }
[data-theme="dark"] .login-card {
  background: #1B1B1B;
  border-color: #343434;
  box-shadow: 0 16px 34px rgba(0,0,0,0.45);
}

.login-visual__quote { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.25; color: var(--carbon); max-width: 400px; position: relative; z-index: 1; }
.login-visual__brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.login-visual__brand-logo { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; border: 2px solid rgba(0,0,0,0.12); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.login-visual__brand-text { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #111111; text-transform: uppercase; line-height: 1.2; }
.login-visual__brand-text span { display: block; font-size: 11px; font-weight: 500; color: rgba(17,17,17,0.9); text-transform: uppercase; letter-spacing: 0.05em; }
.login-visual__bullets {
  position: relative;
  z-index: 1;
  background: rgba(25, 25, 25, 0.09);
  border: 1px solid rgba(25, 25, 25, 0.2);
  border-radius: 16px;
  padding: 18px 18px 16px;
  max-width: 420px;
  backdrop-filter: blur(2px);
}
.login-visual__bullets-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; color: var(--carbon); }
.login-visual__bullets-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: rgba(0,0,0,0.78); font-weight: 600; font-size: 14px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .layout-split { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    /* clamp: en teléfonos angostos no ocupa casi toda la pantalla, y en
       teléfonos/tablets más anchos no queda angosto y apretado. */
    width: clamp(240px, 78vw, 280px);
    /* 100svh (viewport "pequeño", el tamaño cuando la barra del navegador
       está totalmente visible) en vez de 100dvh: dvh se recalcula cada vez
       que el navegador móvil oculta/muestra su barra de direcciones al
       hacer scroll, lo que hacía que el menú se viera "encoger" mientras
       estaba abierto. svh se mantiene fijo y evita ese salto visual. */
    height: 100svh;
    overflow-y: auto;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease-out-soft);
  }
  .sidebar.is-open { transform: translateX(0); }
  .menu-toggle { display: flex; }
  .sidebar-backdrop { display: block; }
  .login-screen { grid-template-columns: 1fr; background: #DDDDDD; }
  .login-screen__visual {
    display: flex;
    min-height: 154px;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    gap: 0;
    overflow: visible;
  }
  .login-screen__visual::before { display: none; }
  .login-visual__brand { width: 100%; justify-content: center; }
  .login-visual__brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .login-visual__brand-text { font-size: 16px; }
  .login-visual__brand-text { color: #111111; }
  .login-visual__brand-text span { font-size: 11px; color: rgba(17,17,17,0.9); }
  .login-visual__quote,
  .login-visual__bullets { display: none; }
  .login-screen__form {
    background: #DDDDDD;
    padding: 14px;
    align-items: flex-start;
  }
  .login-card { max-width: none; }
  .login-card { padding: 28px 20px 20px; box-shadow: none; }
  .login-theme-toggle {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: var(--steel);
    border-color: var(--steel-border);
    color: var(--bone-dim);
  }
  .login-card__subtitle { margin-bottom: 26px; }
  .content { padding: 20px; }
  .topbar {
    padding: 12px 16px;
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .topbar__left { flex: 1 1 100%; min-width: 0; }
  .topbar__left > div { min-width: 0; }
  .topbar__title {
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar__subtitle {
    font-size: 12px;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .topbar__actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .notif-panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }
  .carrito-flotante { position: static; }

  /* ── Filtros "Todos / Pendientes / ..." — grilla simétrica, centrada y
     con su propio margen (en vez de estirarse pegada a los bordes) ───── */
  .pill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 6px auto 18px;
  }
  .pill {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  /* ── Tablas de pedidos → tarjetas apiladas ───────────────────────────
     Se activa solo en <table class="data-table data-table--stack">, para
     no afectar tablas donde el scroll horizontal sigue siendo mejor
     (productos, categorías, equipo). Cada <td> necesita data-label="...". */
  .data-table--stack thead { display: none; }
  .data-table--stack,
  .data-table--stack tbody,
  .data-table--stack tr,
  .data-table--stack td {
    display: block;
    width: 100%;
  }
  .data-table--stack tr {
    margin-bottom: 12px;
    border: 1px solid var(--steel-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .data-table--stack tr:last-child { margin-bottom: 0; }
  .data-table--stack td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--steel-border);
    text-align: left;
    min-width: 0;
  }
  .data-table--stack tr:hover { background: none; }
  .data-table--stack td:last-child { border-bottom: none; }
  .data-table--stack td::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--bone-dim);
  }
  .data-table--stack td > form { width: 100%; }
  .data-table--stack td.table-actions {
    align-items: stretch;
    background: var(--carbon-soft);
  }
  .data-table--stack td.table-actions::before { display: none; }
  .data-table--stack td.table-actions { gap: 8px; }
  .data-table--stack td.table-actions .btn { width: 100%; }

  [data-theme="dark"] .login-screen { background: #131313; }
  [data-theme="dark"] .login-screen__form { background: #131313; }
}
@media (max-width: 560px) {
  .login-screen__visual { min-height: 152px; padding: 16px 18px; }
  .login-visual__brand { justify-content: center; }
  .login-visual__brand-logo { width: 48px; height: 48px; }
  .login-visual__brand-text { font-size: 15px; }
  .login-visual__brand-text span { font-size: 10px; }
  .login-theme-toggle { top: 14px; right: 14px; }
  .login-screen__form { padding: 14px; }
  .login-card { padding: 26px 18px 18px; }
  .content { padding: 16px 12px 48px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card__label, .metric-card__value { text-align: left; }
  .producto-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .modal-box { max-width: calc(100vw - 24px); max-height: 85vh; }
  .topbar__actions { gap: 8px; }
  .data-table thead th, .data-table tbody td { padding: 10px 10px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }