/* ========================================================================
   MADERA GANGA · Dashboard — Diseño limpio (mockup 03)
   Fuente de verdad: mockup 03.jpeg. Paleta navy/verde/blanco, tipografia
   HandelGothic + Playfair Display + Inter, sistema de espaciado de 8px.
   (El estilo anterior quedo respaldado en app.legacy.css — no se carga.)
   ======================================================================== */
@font-face {
  font-family: 'HandelGothic';
  src: url('/static/HandelGothic-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

:root {
  /* Paleta del mockup */
  --navy:#153A4E; --navy-2:#1d4d63;
  --green:#2E9E3F; --green-d:#1C7A45; --green-l:#EAF6EC;
  --bg:#F4F6F5;          /* fondo de la app */
  --surface:#FFFFFF;     /* tarjetas / sidebar */
  --bg-soft:#F0F3F1;     /* hover / rellenos suaves */
  --border:#E4E9E6;      /* borde neutro claro */
  --text:#1F2B32; --text-2:#66727A; --text-3:#98A2A8;
  --amber:#C08A2D; --blue:#2F6F8F; --danger:#C0392B;
  /* Alias: app.js referencia estos 3 desde app.legacy.css (nunca migraron
     acá). Sin esto quedan sin color: flecha de transferencia en Órdenes,
     borde de pago pendiente, y stock bajo en Inventario. */
  --gold:var(--amber); --warn:var(--amber); --info:var(--blue);

  /* Tipografia */
  --font-display:'HandelGothic','Inter','Segoe UI',sans-serif;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;

  /* Espaciado base 8px (8·16·24·32·48·64·96·128) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px;

  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(21,58,78,.04), 0 2px 8px rgba(21,58,78,.05);
  --shadow-lg:0 12px 32px rgba(21,58,78,.12);
  --sidebar-w:248px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); font-size:14px; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--green-l); }

/* ─── Layout ─── */
.layout { display:flex; min-height:100vh; }

/* ─── Sidebar (claro) ─── */
.sidebar {
  width:var(--sidebar-w); background:var(--surface); color:var(--text-2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:100;
}
.sidebar-brand { display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s3) var(--s2); border-bottom:1px solid var(--border); }
.brand-mark { width:42px; height:42px; border-radius:50%; object-fit:contain; background:#fff; }
.brand-text { font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:15px; letter-spacing:1px; line-height:1.1; }
.brand-text small { display:block; font-family:var(--font-body); font-weight:600; font-size:9px; letter-spacing:1.4px; color:var(--green-d); margin-top:3px; text-transform:uppercase; }

.sidebar-nav { flex:1; padding:var(--s2) var(--s2); overflow-y:auto; }
.nav-item {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s1);
  width:100%; padding:10px 12px; border:none; background:none;
  color:var(--text-2); font-size:13.5px; cursor:pointer; border-radius:var(--radius-sm);
  transition:background .15s,color .15s; margin-bottom:2px; text-align:left; font-weight:500; font-family:inherit;
}
.nav-item:hover { background:var(--bg-soft); color:var(--navy); }
.nav-item.active { background:var(--green-l); color:var(--green-d); font-weight:700; box-shadow:inset 3px 0 0 var(--green); }
.nav-sep { padding:var(--s2) 12px 6px; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-3); font-weight:700; }
.nav-badge { background:var(--amber); color:#fff; font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 6px; }
.nav-badge:empty { display:none; }

.sidebar-canales { margin:0 var(--s2) var(--s1); padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); }
.sidebar-canales .sc-title { font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-3); font-weight:700; margin-bottom:7px; }
.sidebar-canales .sc-row { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-2); padding:2px 0; }
.sidebar-canales .sc-dot { width:7px; height:7px; border-radius:50%; background:#c7cfcb; }
.sidebar-canales .sc-dot.on { background:var(--green); box-shadow:0 0 0 3px rgba(46,158,63,.15); }
.sidebar-canales .sc-tag { margin-left:auto; font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; }

.sidebar-tasa { margin:0 var(--s2) var(--s1); padding:10px 12px; font-size:12px; color:var(--text-2); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); }
.sidebar-tasa b { color:var(--green-d); font-variant-numeric:tabular-nums; }
.sidebar-foot { padding:12px var(--s3); border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-2); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px rgba(192,138,45,.15); }
.dot.ok { background:var(--green); box-shadow:0 0 0 3px rgba(46,158,63,.18); }
.dot.bad { background:var(--danger); box-shadow:0 0 0 3px rgba(192,57,43,.18); }

/* ─── Main ─── */
.main { flex:1; margin-left:var(--sidebar-w); padding:var(--s3) var(--s4); height:100vh; overflow:hidden; }

.view { display:none; }
.view.active { display:flex; flex-direction:column; height:calc(100vh - var(--s6)); overflow:hidden; animation:fadeUp .2s ease; }
@keyframes fadeUp { from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }

.view-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s3); }
.view-head h2 { font-family:var(--font-display); font-size:22px; font-weight:normal; letter-spacing:.8px; color:var(--navy); text-transform:uppercase; }
.view-head > span { font-family:var(--font-serif); font-style:italic; color:var(--text-2); font-size:14px; }

/* ─── Toggle de sucursal (segmented) ─── */
.suc-toggle { display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:3px; gap:2px; }
.suc-toggle button { border:none; background:none; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--text-2); padding:6px 14px; border-radius:999px; transition:all .15s; font-family:inherit; }
.suc-toggle button.active { background:var(--navy); color:#fff; }

/* ─── Cards ─── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s3); box-shadow:var(--shadow); }
.card h3 { font-family:var(--font-display); font-size:14px; font-weight:normal; letter-spacing:.6px; margin-bottom:var(--s2); color:var(--navy); text-transform:uppercase; }

/* ─── Tablas ─── */
.tabla-wrap { overflow-y:auto; overflow-x:hidden; flex:1; min-height:0; }
.tabla { width:100%; border-collapse:collapse; table-layout:fixed; }
.tabla th { text-align:left; padding:10px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3); border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:10; font-weight:700; }
.tabla td { height:44px; padding:8px 12px; border-bottom:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.tabla tr { height:44px; cursor:pointer; transition:background .12s; }
.tabla tbody tr:hover td { background:var(--bg-soft); }
.tabla tr.selected td { background:var(--green-l); box-shadow:inset 3px 0 0 var(--green); }

/* ─── Pills de estado ─── */
.pill { display:inline-block; padding:3px 11px; border-radius:20px; font-size:11.5px; font-weight:600; letter-spacing:.2px; }
.pill-nuevo { background:#E7EEF2; color:var(--navy); }
.pill-procesando { background:#F7EDD9; color:#8a6318; }
.pill-confirmado { background:var(--green-l); color:var(--green-d); }
.pill-cancelado { background:#F7E2DF; color:#a3352a; }

/* Chips de sucursal */
.badge-suc { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-suc::before { content:""; width:7px; height:7px; border-radius:50%; }
.badge-suc.s1 { background:#E7EEF2; color:var(--navy); } .badge-suc.s1::before { background:var(--navy); }
.badge-suc.s2 { background:var(--green-l); color:var(--green-d); } .badge-suc.s2::before { background:var(--green); }

/* ─── Inputs / Buttons ─── */
.input { padding:9px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:inherit; background:#fff; width:100%; transition:border-color .15s, box-shadow .15s; }
.input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(46,158,63,.14); }

.btn { padding:9px 18px; border:none; border-radius:var(--radius-sm); font-size:14px; font-family:inherit; cursor:pointer; font-weight:600; transition:all .15s; white-space:nowrap; }
.btn-primary { background:var(--green); color:#fff; }
.btn-primary:hover { background:var(--green-d); }
.btn-outline { background:#fff; border:1px solid var(--border); color:var(--text-2); }
.btn-outline:hover { background:var(--bg-soft); border-color:var(--green); color:var(--green-d); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-navy { background:var(--navy); color:#fff; }
.btn-navy:hover { background:var(--navy-2); }
.btn-sm { padding:6px 12px; font-size:12px; }

/* ─── Grids ─── */
.grid-ordenes { display:grid; grid-template-columns:1fr 390px; grid-template-rows:1fr; gap:var(--s3); flex:1; min-height:0; align-items:stretch; }
.grid-chat { display:grid; grid-template-columns:270px 1fr 330px; grid-template-rows:1fr; gap:var(--s2); flex:1; min-height:0; }
.grid-prov { display:grid; grid-template-columns:1.6fr 1fr 0.8fr; gap:var(--s2); align-content:start; }
.prov-scroll { max-height:250px; overflow-y:auto; overflow-x:hidden; }
.prov-scroll .tabla { table-layout:fixed; width:100%; }
.prov-scroll .tabla td { height:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prov-scroll .tabla tr { height:40px; }
.grid-cotiz { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr; gap:var(--s2); flex:1; min-height:0; }
.grid-cotiz .card { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.grid-prov-vertical { display:flex; flex-direction:column; gap:var(--s2); flex:1; min-height:0; }
.grid-prov-vertical .card { display:flex; flex-direction:column; min-height:0; flex:1; overflow:hidden; }
.grid-prov-vertical .prov-scroll { flex:1; min-height:0; max-height:none; overflow-y:auto; overflow-x:hidden; }
.grid-prov-vertical #prov-prod-content { flex:1; min-height:0; overflow-y:auto; }
.grid-kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-bottom:var(--s3); }
.grid-kpi-5 { grid-template-columns:repeat(5,1fr); }
.grid-charts { display:grid; grid-template-columns:2fr 1fr; gap:var(--s2); }
.grid-charts-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }

/* ─── KPI cards ─── */
.kpi { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); overflow:hidden; }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green); }
.kpi.warn::before { background:var(--amber); }
.kpi-label { font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-2); margin-bottom:8px; font-weight:600; }
.kpi-value { font-size:30px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.kpi-sub { font-size:11.5px; color:var(--text-2); margin-top:4px; }
.kpi-delta { font-size:12px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; }
.kpi-delta.up { color:var(--green-d); }
.kpi-delta.down { color:var(--danger); }
.kpi-delta.flat { color:var(--text-3); }

/* ─── Orden panel ─── */
.grid-ordenes .card { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.view.active > .card { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.orden-panel { overflow-y:auto; flex:1; min-height:0; }
#archivada-panel { overflow-y:auto; flex:1; min-height:0; }
.orden-panel h3 { margin-bottom:8px; }
.orden-panel .detalle-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; }
.orden-panel .detalle-label { color:var(--text-2); }
.orden-panel .items-list { margin:12px 0; }
.orden-panel .item-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; }
.orden-panel .total-row { font-size:18px; font-weight:700; color:var(--green-d); border-top:1px solid var(--border); padding-top:10px; margin-top:8px; }
.orden-panel .acciones { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; align-items:center; }
.estado-select { padding:7px 10px; border-radius:var(--radius-sm); border:1px solid var(--border); font-size:13px; font-family:inherit; }
.placeholder { color:var(--text-2); text-align:center; padding:var(--s6) var(--s3); font-family:var(--font-serif); font-style:italic; }

/* Aviso de transferencia */
.transfer-note { margin-top:12px; padding:11px 14px; background:#F7EDD9; border:1px solid #EAD9B0; border-left:4px solid var(--amber); border-radius:var(--radius-sm); font-size:13px; line-height:1.5; }
.transfer-note b { color:#8a6318; }

/* ─── Logística / Despacho ─── */
.despacho-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--s2); overflow-y:auto; flex:1; min-height:0; align-content:start; padding-bottom:8px; }
.despacho-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; border-top:3px solid var(--amber); }
.despacho-card.estado-en_transito { border-top-color:var(--blue); }
.despacho-card.estado-recibido { border-top-color:var(--green); opacity:.75; }
.despacho-card .dc-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.despacho-card .dc-id { font-weight:800; color:var(--navy); font-size:13px; font-variant-numeric:tabular-nums; }
.despacho-ruta { display:flex; align-items:center; gap:10px; margin:12px 0; font-size:13px; font-weight:600; }
.despacho-ruta .arrow { color:var(--green); font-size:18px; }
.despacho-items { font-size:12.5px; color:var(--text-2); line-height:1.5; margin-bottom:12px; }
.despacho-items b { color:var(--text); }
.despacho-steps { display:flex; gap:6px; }
.despacho-steps .btn { flex:1; }
.step-dot { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:20px; }
.step-pendiente { background:#F7EDD9; color:#8a6318; }
.step-en_transito { background:#E7EEF2; color:var(--navy); }
.step-recibido { background:var(--green-l); color:var(--green-d); }

/* ─── Panel del Dueño ─── */
.dueno-scroll { flex:1; min-height:0; overflow-y:auto; padding-right:4px; }
.dueno-sec { margin-bottom:var(--s2); }
.view-head-tools { display:flex; align-items:center; gap:10px; }
.card-sub { font-size:11.5px; color:var(--text-2); margin:-6px 0 8px; }

.dueno-ops { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--s2); align-items:start; }
/* Un solo scroll en la vista (.dueno-scroll): las listas ya no scrollean
   por su cuenta ni se cortan a una altura fija. */
.owner-list { }
.owner-item { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.owner-item:last-child { border-bottom:none; }
.owner-item .oi-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.owner-item .oi-bar { height:3px; background:var(--green-l); border-radius:2px; margin-top:4px; overflow:hidden; }
.owner-item .oi-bar > span { display:block; height:100%; background:var(--green); }
.ads-card { border-top:3px solid var(--amber); }
.ops-foot { font-size:11.5px; color:var(--text-3); text-align:center; padding-top:8px; }

/* ─── Sala de máquinas (salud del sistema) ─── */
.salud-card { border-top:3px solid var(--navy); }
.salud-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin:14px 0; }
.stat { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; }
.stat-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-2); font-weight:600; margin-bottom:6px; }
.stat-value { font-size:20px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:7px; }
.stat-sub { font-size:11.5px; color:var(--text-2); margin-top:3px; }
.salud-cols { display:grid; grid-template-columns:2fr 1fr; gap:var(--s2); align-items:start; }
.err-item { font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--text-2); border-bottom:1px solid var(--border); padding:6px 0; line-height:1.4; }
.err-item:last-child { border-bottom:none; }
.err-item b { color:var(--danger); font-variant-numeric:normal; }
.salud-ordenes { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* ─── Modal Meta Ads (antes: estilos inline) ─── */
.ads-preview { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:14px; }
.ads-preview-kicker { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--amber); font-weight:700; margin-bottom:6px; }
.ads-preview-title { font-weight:700; color:var(--navy); margin-bottom:6px; }
.ads-preview-body { font-size:13px; color:var(--text-2); line-height:1.5; }
.ads-meta { font-size:12px; color:var(--text-2); margin-top:10px; display:flex; flex-direction:column; gap:3px; }

/* ─── Estados de carga / error ─── */
.skeleton { background:linear-gradient(90deg,var(--bg-soft) 25%,var(--border) 50%,var(--bg-soft) 75%); background-size:200% 100%; animation:skeleton-shine 1.3s infinite; border-radius:var(--radius); }
@keyframes skeleton-shine { from{background-position:200% 0;} to{background-position:-200% 0;} }
.view-error { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--danger); border-radius:var(--radius); padding:16px 18px; font-size:13px; color:var(--text-2); grid-column:1/-1; }
.view-error button { margin-top:10px; }

/* ─── Chat ─── */
.grid-chat .card { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.chat-list { overflow-y:auto; flex:1; min-height:0; }
.chat-sesion { padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; }
.chat-sesion:hover { background:var(--bg-soft); }
.chat-sesion.active { background:var(--green-l); box-shadow:inset 3px 0 0 var(--green); }
.chat-sesion .s-name { font-weight:600; font-size:13px; }
.chat-sesion .s-meta { font-size:12px; color:var(--text-2); }
.chat-sesion.pausada { opacity:.6; }
.chat-sesion.pausada::after { content:" · Pausada"; color:var(--amber); font-weight:600; }

.chat-msgs { display:flex; flex-direction:column; overflow:hidden; }
.chat-scroll { flex:1; overflow-y:auto; padding:16px; }
.msg { margin-bottom:12px; max-width:78%; }
.msg-user { margin-left:auto; }
.msg-user .msg-bubble { background:var(--navy); color:#fff; }
.msg-ia .msg-bubble { background:var(--bg-soft); }
.msg-humano .msg-bubble { background:#F7EDD9; }
.msg-bubble { padding:9px 13px; border-radius:12px; font-size:14px; line-height:1.4; }
.msg-role { font-size:11px; color:var(--text-2); margin-bottom:3px; }
.chat-input { display:flex; gap:8px; padding:12px; border-top:1px solid var(--border); }
.banner-humano { background:#F7EDD9; color:#8a6318; padding:9px 14px; font-size:13px; font-weight:600; text-align:center; }

.chat-orden { overflow-y:auto; flex:1; min-height:0; }
.chat-orden h3 { margin-bottom:10px; }
.chat-orden .input { margin-bottom:8px; }
.prod-resultados { max-height:160px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; }
.prod-item { padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--border); font-size:13px; }
.prod-item:hover { background:var(--green-l); }
.orden-manual-item { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px solid var(--border); }
.orden-total { font-weight:700; color:var(--green-d); margin:8px 0; font-size:16px; }

/* ─── Auth cards ─── */
.auth-card { background:var(--bg); border-radius:var(--radius-sm); padding:9px 11px; margin-bottom:8px; border-left:3px solid var(--amber); }
.auth-card.aprobado { border-left-color:var(--green); }
.auth-card.rechazado { border-left-color:var(--danger); opacity:.7; }
.auth-card .auth-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.auth-card .auth-id { font-weight:700; font-size:12px; }
.auth-card .auth-det { font-size:11px; color:var(--text-2); line-height:1.3; }
.auth-card .auth-btns { display:flex; gap:4px; margin-top:6px; }

/* ─── Toasts ─── */
#toast-container { position:fixed; bottom:22px; right:22px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { background:#fff; border-radius:var(--radius-sm); padding:14px 18px; box-shadow:var(--shadow-lg); border-left:4px solid var(--blue); min-width:300px; max-width:380px; animation:slideIn .3s ease; font-size:14px; }
.toast.ok { border-left-color:var(--green); }
.toast.error { border-left-color:var(--danger); }
.toast.warn { border-left-color:var(--amber); }
.toast.info { border-left-color:var(--blue); }
.toast.fadeout { animation:slideOut .3s ease forwards; }
@keyframes slideIn { from{transform:translateX(100%); opacity:0;} to{transform:translateX(0); opacity:1;} }
@keyframes slideOut { to{transform:translateX(100%); opacity:0;} }

/* ─── Modal ─── */
.modal-overlay { position:fixed; inset:0; background:rgba(15,44,59,.45); backdrop-filter:blur(2px); z-index:5000; display:flex; align-items:center; justify-content:center; }
.modal { background:#fff; border-radius:var(--radius); padding:26px; min-width:400px; max-width:520px; box-shadow:var(--shadow-lg); }
.modal h3 { margin-bottom:16px; font-family:var(--font-display); color:var(--navy); text-transform:uppercase; letter-spacing:.6px; }
.modal .form-row { margin-bottom:12px; }
.modal .form-row label { display:block; font-size:13px; margin-bottom:4px; color:var(--text-2); }
.modal .modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }

/* ─── Charts ───
   Antes: altura fija de 320px + centrado por flex, pensado solo para
   Reportes I/II (canvas desnudo, sin <h3>). El Panel del Dueño lo
   neutralizaba con un override por ID. Ahora TODOS los charts (Dueño y
   Reportes) llevan <h3> + .chart-body con su propia altura, así que la
   regla base es la misma para ambos y no hace falta el override. */
.grid-charts .card, .grid-charts-3 .card { display:flex; flex-direction:column; }
.chart-body { position:relative; height:220px; }
.chart-body.sm { height:170px; }
canvas { max-width:100%; max-height:100%; }

/* ========================================================================
   RESPALDO ESTILO ANTERIOR
   El estilo previo ("Taller Cálido Premium": sidebar oscuro + textura de
   madera) se respaldó COMPLETO y deshabilitado en:
       dashboard/static/app.legacy.css   (no se carga)
   Este archivo (app.css) implementa el diseño limpio del mockup 03 como
   unica fuente de verdad, sin heredar ni mezclar el estilo anterior.
   ======================================================================== */

/* ═════ ENVÍOS (entrega al cliente: delivery / retiro) ═════ */
#view-envios.active { overflow-y:auto; gap:14px; }
.envios-seg { display:flex; flex-direction:column; gap:8px; }
.envios-seg-title { font-family:var(--font-display); font-size:13px; letter-spacing:.6px; text-transform:uppercase; color:var(--navy); font-weight:700; padding-left:2px; }
.envios-cols { display:flex; gap:10px; align-items:flex-start; overflow-x:auto; padding-bottom:6px; }
.env-col { flex:1 1 0; min-width:190px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:10px; display:flex; flex-direction:column; gap:8px; }
.env-col-head { font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-2); font-weight:700; display:flex; justify-content:space-between; align-items:center; }
.env-count { background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:1px 8px; font-size:11px; color:var(--navy); font-weight:700; }
.env-col .despacho-card { padding:11px 13px; border-top-width:3px; }
.despacho-card.estado-por_despachar, .despacho-card.estado-preparando { border-top-color:var(--amber); }
.despacho-card.estado-cargado, .despacho-card.estado-listo_retiro, .despacho-card.estado-en_camino, .despacho-card.estado-llegando { border-top-color:var(--blue); }
.despacho-card.estado-entregado, .despacho-card.estado-retirado { border-top-color:var(--green); opacity:.8; }
.env-total { font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; font-size:13px; }
.env-donde { font-size:12px; color:var(--text-2); margin-top:4px; }
.env-hora { font-size:11px; color:var(--text-3); margin-top:3px; }
.env-accion { margin-top:9px; }
.env-done { color:var(--green); font-weight:700; font-size:12.5px; }
.env-wait { display:inline-block; background:#FBF1DD; color:var(--amber); border:1px solid #EBD8A8; border-radius:var(--radius-sm); padding:4px 8px; font-size:11.5px; font-weight:600; line-height:1.3; }
.env-empty { color:var(--text-3); font-size:12px; text-align:center; padding:6px 0; }

/* ═════ PAGOS (portal de comprobantes) ═════ */
#view-pagos.active { overflow-y:auto; gap:14px; }
.pagos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.pago-thumb { width:100%; max-height:180px; object-fit:cover; border-radius:8px; border:1px solid var(--border); margin-top:8px; cursor:zoom-in; }
.pago-nothumb { margin-top:8px; padding:18px 10px; text-align:center; background:var(--bg); border:1px dashed var(--border); border-radius:8px; color:var(--text-3); font-size:12px; }
.pago-mini { width:44px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--border); cursor:zoom-in; display:block; }
#view-pagos .tabla td { white-space:normal; }