/* ====================================================================
   Señora Gallina — Sistema de diseño "Rediseño Azul" (oscuro + claro)
   Oscuro por defecto. Space Grotesk (display) · Public Sans (cuerpo)
   · JetBrains Mono (números). Temas vía [data-theme] + CSS variables.
   Los nombres legacy (--yolk, --cream, --earth…) se conservan mapeados a
   la paleta azul para no romper plantillas; los nombres nuevos del diseño
   (--accent, --text-2, --side-*…) están disponibles en paralelo.
   ==================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Public+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---- TEMA OSCURO (por defecto) ---- */
:root, [data-theme="dark"] {
  --bg:        #0A0C12;
  --bg-2:      #0E1117;
  --surface:   #12151D;   /* cards/paneles */
  --surface-2: #171C26;   /* hover / elevado */
  --surface-3: #1F2533;
  --sidebar:   #06080D;
  --white:     #12151D;   /* legacy: superficie de card */
  --cream:     #171C26;   /* legacy: tinte/hover sutil */
  --earth:     #EDF1F8;   /* legacy: TEXTO principal */
  --text:      #EDF1F8;
  --text-2:    #9BA7B9;
  --feather:   #9BA7B9;   /* texto secundario */
  --muted:     #5B6677;
  --text-muted:#5B6677;
  --accent:    #3D6CE0;   /* acento principal (azul cobalto) */
  --accent-h:  #5E86F2;
  --accent-soft: rgba(61,108,224,.15);
  --accent-line: rgba(61,108,224,.42);
  --accent-ghost:rgba(61,108,224,.32);
  --yolk:      #3D6CE0;   /* legacy alias del acento */
  --yolk-bright:#5E86F2;
  /* --agendado: identidad morada para pedidos programados / futuro.
     Convención: morado = calendario / agendado (como Google Calendar). */
  --agendado:      #7F77DD;
  --agendado-h:    #AFA9EC;
  --agendado-dark: #534AB7;
  --agendado-soft: rgba(127,119,221,.18);
  --agendado-line: rgba(127,119,221,.42);
  --agendado-bg:   rgba(127,119,221,.08);
  --on-agendado:   #FFFFFF;
  --gold:      #E0A23C;
  --straw:     #AEB9CC;
  --dark:      #06080D;
  --success:   #46B07E;
  --chart-green: #4ADE80;
  --danger:    #E2706B;
  --warning:   #E0A23C;
  --info:      #3D6CE0;
  --success-soft: rgba(70,176,126,.15);
  --danger-soft:  rgba(226,112,107,.15);
  --warning-soft: rgba(224,162,60,.15);
  --line:        rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.15);
  --shadow:      0 16px 48px rgba(0,0,0,.55);
  --shadow-soft: 0 2px 14px rgba(0,0,0,0.35);
  --on-accent: #FFFFFF;   /* texto sobre botones acento */
  --logo:      #FFFFFF;
  --font-display: "Space Grotesk", -apple-system, sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 12px;
  --radius-sm: 8px;
}

/* ---- TEMA CLARO ---- */
[data-theme="light"] {
  --bg:        #EBEEF4;
  --bg-2:      #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F2F5FB;
  --surface-3: #E7EDF6;
  --sidebar:   #06080D;   /* el rail se queda oscuro en ambos temas */
  --white:     #FFFFFF;
  --cream:     #F2F5FB;
  --earth:     #0E1117;
  --text:      #0E1117;
  --text-2:    #51607A;
  --feather:   #51607A;
  --muted:     #8A97AB;
  --text-muted:#8A97AB;
  --accent:    #2D5BD6;
  --accent-h:  #1F47B8;
  --accent-soft: rgba(45,91,214,.12);
  --accent-line: rgba(45,91,214,.40);
  --accent-ghost:rgba(45,91,214,.30);
  --yolk:      #2D5BD6;
  --yolk-bright:#1F47B8;
  /* --agendado en tema claro: tono morado más oscuro para contraste sobre blanco */
  --agendado:      #5D54B0;
  --agendado-h:    #7F77DD;
  --agendado-dark: #3C3489;
  --agendado-soft: rgba(93,84,176,.12);
  --agendado-line: rgba(93,84,176,.36);
  --agendado-bg:   #EEEDFE;
  --on-agendado:   #FFFFFF;
  --gold:      #B07A1E;
  --straw:     #AEB9CC;
  --dark:      #06080D;
  --success:   #2F9466;
  --chart-green: #22C55E;
  --danger:    #C9514D;
  --warning:   #B07A1E;
  --info:      #2D5BD6;
  --success-soft: rgba(47,148,102,.14);
  --danger-soft:  rgba(201,81,77,.14);
  --warning-soft: rgba(176,122,30,.14);
  --line:        rgba(14,18,30,.10);
  --line-strong: rgba(14,18,30,.18);
  --shadow:      0 12px 34px rgba(20,30,60,.12);
  --shadow-soft: 0 1px 3px rgba(20,30,60,0.08);
  --on-accent: #FFFFFF;
  --logo:      #FFFFFF;
}

/* ---- Sidebar/rails: SIEMPRE oscuros (texto claro fijo en ambos temas) ---- */
:root, [data-theme="light"] {
  --side-text:   #AEB9CC;
  --side-text-2: #697590;
  --side-active: #FFFFFF;
  --side-line:   rgba(255,255,255,.07);
  --on-dark:       #EDF1F8;
  --on-dark-2:     #AEB9CC;
  --on-dark-muted: #697590;
  --on-dark-accent:#AEB9CC;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  /* Base 16px (antes 14px): agranda todo el sistema ~14% porque casi todo
     usa rem relativo al root. Pedido del dueño: texto más legible. */
  font-weight: 400; font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
::selection { background: rgba(80,130,240,.30); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(110,150,235,.32); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600; color: var(--text);
  margin: 0 0 .4em; letter-spacing: -.01em;
}
h1 { font-size: 2.1rem; font-weight: 600; }
h2 { font-size: 1.6rem; font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 500; }
a { color: var(--yolk); text-decoration: none; transition: color .15s; }
a:hover { color: var(--yolk-bright); }

.display { font-family: var(--font-display); }
/* Números: mono tabular para máxima legibilidad de datos */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.numero-grande {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 2.1rem; line-height: 1; color: var(--yolk);
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px;
}
.numero-grande .num { font-family: inherit; }
.label {
  font-family: var(--font-body); font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--feather);
}

/* ---- Layout admin ---- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; flex-shrink: 0; background: var(--sidebar);
  color: var(--side-text); padding: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--side-line);
  position: sticky; top: 0; height: 100vh;
}
.sidebar .marca {
  padding: 18px 18px 16px; border-bottom: 1px solid var(--side-line);
  display: flex; align-items: center;
}
.sidebar .marca .wordmark { height: 22px; width: auto; max-width: 100%; object-fit: contain; }
.sidebar nav { padding: 10px 0; display: flex; flex-direction: column; overflow-y: auto; flex: 1; }
.side-section {
  font-family: var(--font-body); font-weight: 700; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--side-active);
  padding: 18px 20px 8px; margin-top: 10px;
  border-top: 1px solid var(--side-line);
  position: relative;
}
.side-section::before {
  content: ""; position: absolute; top: -1px; left: 20px;
  width: 28px; height: 2px; background: var(--accent-h, var(--accent));
}
.side-section:first-child { padding-top: 10px; margin-top: 0; border-top: none; }
.side-section:first-child::before { display: none; }
.sidebar nav a {
  display: flex; align-items: center; gap: 11px;
  color: var(--side-text); padding: 9px 18px;
  font-family: var(--font-body); font-size: .81rem; font-weight: 500;
  border-left: 2px solid transparent;
  transition: transform .18s cubic-bezier(.16,1,.3,1), background .15s, color .15s, border-color .15s;
}
.sidebar nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar nav a:hover { transform: translateX(3px); background: rgba(255,255,255,0.04); color: var(--side-active); }
.sidebar nav a.activo {
  background: var(--accent-soft); border-left-color: var(--accent); color: var(--side-active);
}
.sidebar .pie {
  margin-top: auto; padding: 13px 18px; border-top: 1px solid var(--side-line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .76rem; color: var(--side-text-2);
}
.sidebar .pie .pie-user { font-weight: 600; font-size: .76rem; color: var(--side-active); }
.sidebar .pie .pie-rol { font-family: var(--font-mono); font-size: .62rem; color: var(--side-text-2); }
.sidebar .pie a {
  color: var(--side-text-2); border: 1px solid var(--side-line); width: 30px; height: 30px;
  border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.sidebar .pie a:hover { color: var(--accent); border-color: var(--accent-line); }

.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  padding: 0 22px; height: 54px; display: flex; align-items: center; justify-content: space-between;
}
.topbar .titulo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--text);
  letter-spacing: -.01em;
}
.topbar .crumb {
  font-family: var(--font-mono); font-weight: 500; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted);
}
.topbar .crumb-sep { color: var(--line-strong); }
main.pagina { padding: 22px; flex: 1; }

/* ---- Theme toggle ---- */
.theme-toggle {
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--feather); width: 34px; height: 34px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 1rem; display: inline-flex; align-items: center;
  justify-content: center; transition: background .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--yolk); border-color: var(--yolk); }

/* ---- Cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.card:hover { border-color: var(--accent-line); box-shadow: var(--shadow); transform: translateY(-3px); }
.card.no-hover:hover { background: var(--surface); border-color: var(--line); transform: none; box-shadow: none; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-line); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.kpi .label { display: block; margin-bottom: 8px; }
.kpi .numero-grande { color: var(--yolk); }

hr, .sep { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* ---- Botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-body); font-weight: 500; font-size: .86rem;
  padding: 9px 17px; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--yolk); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--yolk-bright); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--yolk); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 22px; font-size: 1rem; }

/* ---- Formularios ---- */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; margin-bottom: 6px; font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px; color: var(--feather);
}
input, select, textarea {
  width: 100%; font-family: var(--font-body); font-size: .92rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 10px 12px; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
select option { background: var(--surface); color: var(--text); }
input[type="checkbox"] { accent-color: var(--yolk); }

/* ---- Chips ---- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 600;
  letter-spacing: .3px; padding: 3px 9px; border-radius: 6px; font-family: var(--font-mono);
}
.chip-success { background: var(--success-soft); color: var(--success); }
.chip-danger  { background: var(--danger-soft);  color: var(--danger); }
.chip-info    { background: var(--accent-soft);  color: var(--accent); }
.chip-yolk    { background: var(--accent-soft);  color: var(--accent); }

/* ---- Tablas ---- */
table.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.tabla th {
  text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--feather); font-weight: 600; padding: 10px 12px;
  border-bottom: 1px solid var(--line-strong);
}
table.tabla td {
  padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: .88rem; color: var(--text);
}
table.tabla tr:hover td { background: var(--surface-2); }

/* ---- Flash / toasts ---- */
.flashes { list-style: none; padding: 0; margin: 0 0 18px; }
.flashes li {
  padding: 11px 16px; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 8px;
  border: 1px solid var(--line); background: var(--surface);
  animation: flashIn .35s ease;
}
@keyframes flashIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.flashes .danger  { background: rgba(196,96,96,.12);  color: var(--danger);  border-color: rgba(196,96,96,.3); }
.flashes .success { background: rgba(106,175,106,.12); color: var(--success); border-color: rgba(106,175,106,.3); }
.flashes .info    { background: rgba(90,143,170,.12);  color: var(--info);    border-color: rgba(90,143,170,.3); }

/* ====================================================================
   LOGIN
   ==================================================================== */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 18%, rgba(212,137,74,.10), transparent 55%),
    var(--bg);
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px 32px; box-shadow: var(--shadow-soft);
  animation: cardIn .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
.login-card .marca {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 2.1rem; color: var(--yolk); text-align: center; margin-bottom: 4px;
}
.login-card .subtitulo {
  text-align: center; color: var(--feather); font-size: .76rem; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 24px;
}

/* ====================================================================
   ÁREA REPARTIDOR (móvil)
   ==================================================================== */
.rep-shell {
  max-width: 520px; margin: 0 auto; min-height: 100vh; background: var(--bg);
  display: flex; flex-direction: column;
}
.rep-topbar {
  background: var(--sidebar); color: var(--on-dark); padding: 15px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.rep-topbar .marca { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--on-dark-accent); }
.rep-main { flex: 1; padding: 18px; padding-bottom: 84px; }

.rep-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px; background: #06080D;
  border-top: 1px solid rgba(255,255,255,.08); display: flex; z-index: 50;
}
.rep-nav-ind {
  position: absolute; top: 0; left: 0; width: 25%; height: 2px; background: var(--yolk);
  transition: transform .32s var(--ease-cine);
}
.rep-nav a {
  flex: 1; text-align: center; font: 500 .58rem var(--font-body); color: var(--feather);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 0 13px; transition: color .2s;
}
.rep-nav a svg { width: 21px; height: 21px; }
.rep-nav a.activo { color: var(--yolk); }

.rep-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.rep-card .rc-head { display: flex; justify-content: space-between; align-items: baseline; }
.rep-card .rc-num { font-family: var(--font-mono); font-size: 1rem; color: var(--feather); }
.rep-card .rc-total { font-weight: 600; font-size: 1.45rem; color: var(--yolk); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rep-card .rc-cliente { font-weight: 700; font-size: 1.2rem; margin: 8px 0 3px; color: var(--text); }
.rep-card .rc-dir { color: var(--feather); font-size: .95rem; margin-bottom: 6px; }
.rep-card .rc-detalle { font-size: .95rem; margin-bottom: 12px; color: var(--text); }
.rep-card .rc-pago { font-size: .9rem; font-weight: 500; }
.rep-card .rc-acciones { display: flex; gap: 8px; margin-top: 12px; }
.rep-card .rc-acciones .btn { flex: 1; }

.jornada-bar {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.jornada-bar .jb-info { font-size: .82rem; }
.jornada-bar .jb-info strong { color: var(--yolk); }

.rc-contacto { display: flex; gap: 8px; margin-bottom: 8px; }
.rc-contacto a {
  flex: 1; text-align: center; padding: 8px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font-size: .85rem; font-weight: 500; color: var(--text);
}
.rep-pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.rep-pin-grid button {
  font-family: var(--font-display); font-size: 1.8rem; padding: 18px 0;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); color: var(--text); cursor: pointer; transition: background .12s;
}
.rep-pin-grid button:active { background: var(--yolk); color: var(--on-accent); }
.rep-pin-display {
  text-align: center; font-family: var(--font-display); font-size: 2.6rem;
  letter-spacing: 12px; color: var(--yolk); min-height: 1.2em;
}

/* ====================================================================
   KANBAN
   ==================================================================== */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.kanban-col { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); min-height: 120px; }
/* Columna de cancelados: tinte rojo para identificarla a la vista */
.kanban-col[data-estado="cancelado"] { background: var(--danger-soft); border-color: var(--danger); }
.kanban-col[data-estado="cancelado"] .kanban-col-head { color: var(--danger); }
.kanban-col[data-estado="cancelado"] .kanban-badge { background: var(--danger); color: #fff; }
.kanban-col[data-estado="cancelado"] .kanban-card { opacity: .82; }
.kanban-col[data-estado="cancelado"] .kanban-card .kc-cliente,
.kanban-col[data-estado="cancelado"] .kanban-card .kc-total { text-decoration: line-through; }

/* Columna "Entregado" en verde — mismo tratamiento visual que cancelado, pero positivo */
.kanban-col[data-estado="entregado"] { background: var(--success-soft); border-color: var(--success); }
.kanban-col[data-estado="entregado"] .kanban-col-head { color: var(--success); }
.kanban-col[data-estado="entregado"] .kanban-badge { background: var(--success); color: #fff; }
.kanban-col[data-estado="entregado"] .kanban-card { border-left: 3px solid var(--success); }
.kanban-col[data-estado="entregado"] .kanban-card .kc-total { color: var(--success); }
.kanban-col-head {
  font-family: var(--font-body); font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--feather); padding: 12px 14px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.kanban-badge { background: var(--yolk); color: var(--on-accent); font-family: var(--font-mono); font-size: .68rem; padding: 1px 8px; border-radius: 10px; }
.kanban-col-body { padding: 10px; min-height: 80px; display: flex; flex-direction: column; gap: 10px; }
.kanban-col-body.drag-over { background: var(--accent-soft); outline: 2px dashed var(--accent-line); outline-offset: -4px; }
.kanban-card {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 11px 12px; cursor: grab; transition: box-shadow .15s, border-color .15s, transform .1s;
}
.kanban-card:hover { box-shadow: var(--shadow-soft); border-color: var(--yolk); transform: translateY(-1px); }
.kanban-card.dragging { opacity: .5; }
.kc-top { display: flex; justify-content: space-between; align-items: baseline; }
.kc-top strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); }
.kc-total { font-weight: 600; color: var(--yolk); font-family: var(--font-mono); }
.kc-cliente { font-weight: 500; margin: 3px 0; }
.kc-detalle { font-size: .82rem; color: var(--feather); }
.kc-dir { font-size: .78rem; color: var(--feather); margin: 4px 0; font-style: italic; }
.kc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.kc-rep { font-size: .72rem; display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.kc-rep i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.kc-hora { font-size: .72rem; color: var(--feather); margin-left: auto; font-family: var(--font-mono); }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 460px;
  max-height: 86vh; overflow-y: auto; border: 1px solid var(--line-strong);
  animation: cardIn .25s cubic-bezier(.2,.8,.2,1);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-x { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--feather); }
#m-body { padding: 18px 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Responsive ---- */
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .sidebar { width: 188px; }
}

/* D6: Admin mobile-responsive ────────────────────────────────────────
   Bajo 760px el sidebar se convierte en drawer (oculto por defecto).
   Botón hamburguesa en el topbar abre/cierra. Tablas con overflow.    */
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
    width: 240px; height: 100vh;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 0 0 0 9999px transparent;
  }
  .sidebar.abierto { transform: translateX(0); box-shadow: 0 0 0 9999px rgba(0,0,0,.5); }
  .menu-burger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text); border-radius: 8px;
    cursor: pointer; font-size: 1.25rem; padding: 0; line-height: 1; flex-shrink: 0;
  }
  .menu-burger:hover { background: var(--surface); }
  .topbar { padding: 12px !important; gap: 8px !important; flex-wrap: wrap; }
  .topbar .titulo { font-size: .92rem; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pagina { padding: 12px !important; }
  .tabla { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-half { grid-template-columns: 1fr !important; }
  /* Cards full width sin gaps grandes */
  .card { padding: 14px !important; }
  /* Indicadores topbar: ocultar label, dejar solo número */
  #ind-topbar .ind-chip span:not(.ind-n) { display: none; }
}
.menu-burger { display: none; }

/* ====================================================================
   CINEMÁTICA — keyframes y utilidades de movimiento
   Easing firma: cubic-bezier(.16,1,.3,1) (ease-out-expo)
   ==================================================================== */
:root { --ease-cine: cubic-bezier(.16,1,.3,1); }

@keyframes glowIn { 0%{opacity:0;transform:scale(.6)} 100%{opacity:1;transform:scale(1)} }
@keyframes glowPulse { 0%,100%{opacity:.85;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
@keyframes henReveal { 0%{opacity:0;transform:translateY(26px) scale(.9);clip-path:inset(100% 0 0 0)} 60%{opacity:1} 100%{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0)} }
@keyframes breathe { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-3px) scale(1.018)} }
@keyframes fadeUp { 0%{opacity:0;transform:translateY(18px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { 0%{opacity:0;transform:translateY(-14px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes slideInLeft { 0%{opacity:0;transform:translateX(-26px)} 100%{opacity:1;transform:translateX(0)} }
@keyframes slideInRight { 0%{opacity:0;transform:translateX(40px)} 100%{opacity:1;transform:translateX(0)} }
@keyframes cardIn { 0%{opacity:0;transform:translateY(22px) scale(.985)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes rowIn { 0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes barGrow { 0%{transform:scaleY(0)} 100%{transform:scaleY(1)} }
@keyframes floatUp { 0%{opacity:0;transform:translateY(0) scale(.6)} 12%{opacity:.5} 88%{opacity:.35} 100%{opacity:0;transform:translateY(-220px) scale(1)} }
@keyframes dotFill { 0%{opacity:0;transform:scale(.2)} 60%{opacity:1;transform:scale(1.25)} 100%{opacity:1;transform:scale(1)} }
@keyframes shimmer { 0%{background-position:-340px 0} 100%{background-position:340px 0} }
@keyframes toastIn { 0%{opacity:0;transform:translateX(28px) scale(.96)} 100%{opacity:1;transform:translateX(0) scale(1)} }
@keyframes spinEgg { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes wobble { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes scnIn { 0%{opacity:0;transform:scale(1.02)} 100%{opacity:1;transform:scale(1)} }
@keyframes takeCard { 0%{transform:scale(1)} 28%{transform:scale(1.035)} 100%{opacity:0;transform:scale(.9) translateY(-14px)} }
@keyframes checkPop { 0%{opacity:0;transform:scale(.2)} 55%{opacity:1;transform:scale(1.18)} 100%{opacity:1;transform:scale(1)} }
@keyframes pulseRing { 0%{opacity:.7;transform:scale(.6)} 100%{opacity:0;transform:scale(1.8)} }

/* Transición de sección entre páginas (View Transitions API, MPA) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fadeDown .25s var(--ease-cine) reverse; }
::view-transition-new(root) { animation: scnIn .42s var(--ease-cine); }

/* Entradas globales (las dispara cinematica.js con stagger) */
.sidebar { animation: slideInLeft .55s var(--ease-cine) both; }
.topbar  { animation: fadeDown .5s var(--ease-cine) both; }
.cine-card { animation: cardIn .6s var(--ease-cine) both; }
.cine-row  { animation: rowIn .5s var(--ease-cine) both; }

/* Login cinematográfico CARDLESS (estilo Claude Design) — inmersivo y robusto.
   Columna flotante sobre el fondo oscuro con glow + viñeta. Sin tarjeta. */
.login-scene {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #0D0B08; position: relative; overflow: hidden; padding: 24px;
}
.login-glow {
  position: absolute; top: 38%; left: 50%; width: 900px; height: 900px;
  margin: -450px 0 0 -450px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(212,137,74,.20), rgba(201,160,58,.08) 38%, transparent 66%);
  animation: glowIn 2.2s var(--ease-cine), glowPulse 7s ease-in-out 2.2s infinite;
}
.login-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 36%, transparent 30%, rgba(13,11,8,.7) 78%, #0D0B08 100%);
}
.login-col {
  position: relative; z-index: 2; width: 100%; max-width: 340px; text-align: center;
  animation: fadeUp .6s var(--ease-cine);
}
.login-logo { width: 210px; margin: 0 auto 12px; }
.login-logo img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 0 22px rgba(212,137,74,.30));
  animation: fadeUp .85s var(--ease-cine), breathe 5.5s ease-in-out 1s infinite;
}
.login-sub {
  font: 400 .62rem var(--font-mono); text-transform: uppercase; letter-spacing: .3em;
  color: #6E6253; margin-bottom: 28px;
  animation: fadeUp .7s var(--ease-cine) .2s backwards;
}
.login-col form { text-align: left; }
.lf { margin-bottom: 14px; animation: fadeUp .6s var(--ease-cine) backwards; }
.lf:nth-of-type(1) { animation-delay: .30s; }
.lf:nth-of-type(2) { animation-delay: .42s; }
.lf label {
  display: block; font: 500 .6rem var(--font-body); text-transform: uppercase;
  letter-spacing: .15em; color: #8A7C68; margin-bottom: 7px;
}
.lf input {
  width: 100%; background: #161310; border: 1px solid rgba(201,133,58,.22);
  border-radius: 2px; padding: .78rem .85rem; font: 400 .92rem var(--font-body); color: #EDE8DF;
  transition: border-color .2s, box-shadow .2s;
}
.lf input:focus { outline: none; border-color: #D4894A; box-shadow: 0 0 0 3px rgba(212,137,74,.16); }
.login-btn {
  margin-top: 8px; width: 100%; font: 600 .74rem var(--font-body); text-transform: uppercase;
  letter-spacing: .1em; color: #1A1208; background: #D4894A; border: none; padding: .92rem;
  border-radius: 2px; cursor: pointer; transition: transform .12s, box-shadow .25s, background .2s;
  animation: fadeUp .6s var(--ease-cine) .54s backwards;
}
.login-btn:hover { background: #E8974A; box-shadow: 0 0 28px rgba(212,137,74,.45); }
.login-btn:active { transform: scale(.98); }
.login-alt {
  display: inline-block; margin-top: 18px; font: 400 .76rem var(--font-body); color: #9A8E7E;
  animation: fadeUp .6s var(--ease-cine) .66s backwards;
}
.login-alt:hover { color: #D4894A; }
.login-flashes { margin: 0 0 14px; }

/* Partículas ambientales (motas doradas) */
.particulas { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.particulas i {
  position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(212,137,74,.5); animation: floatUp linear infinite;
}

/* Toasts */
.toast-wrap { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.toast {
  background: var(--surface-3); border: 1px solid var(--line-strong); border-left: 3px solid var(--yolk);
  border-radius: var(--radius-sm); padding: 12px 16px; font-size: .9rem; color: var(--text);
  box-shadow: var(--shadow-soft); animation: toastIn .45s var(--ease-cine) both;
}
.toast.success { border-left-color: var(--success); }
.toast.danger  { border-left-color: var(--danger); }
.toast.info    { border-left-color: var(--info); }
.toast.saliendo { animation: toastIn .35s var(--ease-cine) reverse both; }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 680px 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--radius-sm);
}

/* Repartidor — feedback cinematográfico */
.rep-card.tomando { animation: takeCard .55s var(--ease-cine) both; }
.rep-card.entregando { animation: takeCard .55s var(--ease-cine) both; }
.exito-overlay {
  position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
  background: rgba(13,11,8,.78); animation: scnIn .25s var(--ease-cine) both;
}
.exito-overlay .check {
  width: 96px; height: 96px; border-radius: 50%; background: rgba(106,175,106,.16);
  border: 2px solid var(--success); color: var(--success); font-size: 3rem;
  display: flex; align-items: center; justify-content: center; animation: checkPop .55s var(--ease-cine) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .login-glow { display: none; }
}