:root{
  --primary-50:#eef2ff;--primary-100:#e0e7ff;--primary-500:#6366f1;--primary-600:#4f46e5;--primary-700:#4338ca;
  --slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;
  --slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;
  --emerald-50:#ecfdf5;--emerald-600:#059669;--emerald-700:#047857;
  --red-50:#fef2f2;--red-500:#ef4444;--red-600:#dc2626;--red-700:#b91c1c;
  --amber-50:#fffbeb;--amber-600:#d97706;
  --chip-green-bg:#ecfdf5;--chip-green-fg:#047857;--chip-green-bd:#6ee7b7;
  --chip-blue-bg:#eff6ff;--chip-blue-fg:#1d4ed8;--chip-blue-bd:#93c5fd;
  --chip-yellow-bg:#fffbeb;--chip-yellow-fg:#b45309;--chip-yellow-bd:#fcd34d;
  --chip-purple-bg:#f5f3ff;--chip-purple-fg:#6d28d9;--chip-purple-bd:#c4b5fd;
  --chip-orange-bg:#fff7ed;--chip-orange-fg:#c2410c;--chip-orange-bd:#fdba74;
  --ink:var(--slate-800);--muted:var(--slate-500);--paper:var(--slate-50);--white:#fff;--line:var(--slate-200);
  --radius:12px;--radius-lg:16px;
  --shadow-sm:0 1px 2px 0 rgb(15 23 42 / .04),0 1px 3px 0 rgb(15 23 42 / .06);
  --shadow-md:0 4px 10px -2px rgb(15 23 42 / .06),0 2px 6px -2px rgb(15 23 42 / .04);
}
/* Tema oscuro: sigue la preferencia del sistema por defecto; [data-tema] lo
   fuerza cuando el usuario lo elige a mano desde el boton "Tema oscuro"
   (ver app/templates/_tema.html). --white ya no es literal "blanco": es el
   token de fondo de tarjeta/superficie, mas claro que --paper (fondo de
   pagina) para dar sensacion de elevacion. */
@media(prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --primary-50:#1e2248;--primary-100:rgba(99,102,241,.35);--primary-500:#818cf8;--primary-600:#6366f1;--primary-700:#818cf8;
    --slate-50:#1a2336;--slate-100:#212c42;--slate-200:#2d3a52;--slate-300:#3c4a66;--slate-400:#64748b;
    --slate-500:#94a3b8;--slate-600:#b0bcce;--slate-700:#cbd5e1;--slate-800:#e2e8f0;--slate-900:#f8fafc;
    --emerald-50:#0f2a22;--emerald-600:#34d399;--emerald-700:#6ee7b7;
    --red-50:#341417;--red-500:#f87171;--red-600:#ef4444;--red-700:#fca5a5;
    --amber-50:#332108;--amber-600:#f59e0b;
    --chip-green-bg:#0f2a22;--chip-green-fg:#6ee7b7;--chip-green-bd:#134e3a;
    --chip-blue-bg:#1e2a4a;--chip-blue-fg:#93c5fd;--chip-blue-bd:#1e3a6e;
    --chip-yellow-bg:#2e2408;--chip-yellow-fg:#fcd34d;--chip-yellow-bd:#4a3a0f;
    --chip-purple-bg:#241b3d;--chip-purple-fg:#c4b5fd;--chip-purple-bd:#3b2e5c;
    --chip-orange-bg:#2e1a0a;--chip-orange-fg:#fdba74;--chip-orange-bd:#4a2a10;
    --paper:#0a0f1a;--white:#131b2c;
    --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .3),0 1px 3px 0 rgb(0 0 0 / .3);
    --shadow-md:0 4px 10px -2px rgb(0 0 0 / .35),0 2px 6px -2px rgb(0 0 0 / .25);
  }
}
:root[data-tema="oscuro"]{
  --primary-50:#1e2248;--primary-100:rgba(99,102,241,.35);--primary-500:#818cf8;--primary-600:#6366f1;--primary-700:#818cf8;
  --slate-50:#1a2336;--slate-100:#212c42;--slate-200:#2d3a52;--slate-300:#3c4a66;--slate-400:#64748b;
  --slate-500:#94a3b8;--slate-600:#b0bcce;--slate-700:#cbd5e1;--slate-800:#e2e8f0;--slate-900:#f8fafc;
  --emerald-50:#0f2a22;--emerald-600:#34d399;--emerald-700:#6ee7b7;
  --red-50:#341417;--red-500:#f87171;--red-600:#ef4444;--red-700:#fca5a5;
  --amber-50:#332108;--amber-600:#f59e0b;
  --chip-green-bg:#0f2a22;--chip-green-fg:#6ee7b7;--chip-green-bd:#134e3a;
  --chip-blue-bg:#1e2a4a;--chip-blue-fg:#93c5fd;--chip-blue-bd:#1e3a6e;
  --chip-yellow-bg:#2e2408;--chip-yellow-fg:#fcd34d;--chip-yellow-bd:#4a3a0f;
  --chip-purple-bg:#241b3d;--chip-purple-fg:#c4b5fd;--chip-purple-bd:#3b2e5c;
  --chip-orange-bg:#2e1a0a;--chip-orange-fg:#fdba74;--chip-orange-bd:#4a2a10;
  --paper:#0a0f1a;--white:#131b2c;
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .3),0 1px 3px 0 rgb(0 0 0 / .3);
  --shadow-md:0 4px 10px -2px rgb(0 0 0 / .35),0 2px 6px -2px rgb(0 0 0 / .25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
*{scrollbar-width:thin;scrollbar-color:var(--slate-300) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background-color:var(--slate-300);border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background-color:var(--slate-400)}
*::-webkit-scrollbar-corner{background:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .15s,color .15s}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;color:var(--slate-900)}
h1{font-size:26px;margin:0 0 4px}
h2{font-size:16px;margin:0 0 16px}
a{color:var(--primary-600)}
p{color:var(--slate-600)}

/* ---------- layout shell ---------- */
aside{position:fixed;inset:0 auto 0 0;width:264px;background:var(--white);border-right:1px solid var(--line);padding:24px 18px;display:flex;flex-direction:column;overflow-y:auto}
.brand,.logo{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--slate-900);text-decoration:none;display:flex;align-items:center;gap:8px}
.brand span,.logo span{display:block;color:var(--primary-600);font-size:19px}
.brand-icono{width:21px;height:21px;flex-shrink:0;color:var(--primary-600)}
.icono{width:17px;height:17px;flex-shrink:0}
nav{display:grid;gap:2px;margin-top:28px}
nav .grupo{margin:18px 0 6px;padding:0 12px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-400)}
nav a{color:var(--slate-600);text-decoration:none;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:11px}
nav a .icono{color:var(--slate-400)}
nav a:hover{background:var(--slate-100);color:var(--slate-900)}
nav a.activo{background:var(--primary-50);color:var(--primary-700);font-weight:600}
nav a.activo .icono{color:var(--primary-600)}
nav hr{border:0;border-top:1px solid var(--line);margin:16px 4px}
.profile{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:2px}
.profile .avatar{width:32px;height:32px;border-radius:50%;background:var(--primary-600);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;margin-bottom:8px}
.profile small{color:var(--muted);font-size:12px}
.profile strong{font-size:13.5px;color:var(--slate-900);margin-bottom:4px}
.link{border:0;background:none;color:var(--slate-500);padding:6px 0;cursor:pointer;font-size:13px;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.link .icono{width:15px;height:15px;color:var(--slate-400)}
.link:hover{color:var(--primary-600)}
.link:hover .icono{color:var(--primary-600)}
main{margin-left:264px;padding:36px 40px;max-width:1320px}
header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--primary-600);font-weight:700;font-size:11px;margin:0 0 4px}

/* ---------- cards / stats ---------- */
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-sm);margin:0 0 20px;overflow:auto}
.panel h2{padding-bottom:14px;border-bottom:1px solid var(--slate-100);margin-bottom:16px}
.panel header{margin:0 0 0;align-items:center}
.panel header h2{padding:0;border:0;margin:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stats article{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-sm)}
.stats span{display:block;color:var(--muted);font-size:12.5px;font-weight:500}
.stats strong{display:block;font-size:24px;margin-top:6px;color:var(--slate-900);letter-spacing:-.01em}
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.modules a{display:flex;gap:14px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm)}
.modules a:hover{border-color:var(--primary-500)}
.modules a>span,.module-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--primary-50);color:var(--primary-600);font-weight:800;flex-shrink:0}
.modules strong{color:var(--slate-900);font-size:14px}
.modules small{display:block;color:var(--muted);margin-top:2px;font-size:12.5px}

/* ---------- forms ---------- */
.grid-form{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 16px;align-items:end}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stack{display:grid;gap:13px}
label{display:grid;gap:6px;color:var(--slate-600);font-size:13px;font-weight:500}
input,select,textarea{width:100%;border:1px solid var(--slate-300);border-radius:9px;padding:9px 11px;background:var(--white);font:inherit;font-size:13.5px;color:var(--ink);transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}
input:disabled{background:var(--slate-50);color:var(--muted)}
textarea{min-height:86px;resize:vertical}
label.check{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13.5px;font-weight:400;color:var(--ink)}
label.check input{width:auto}
.multi{display:flex;flex-wrap:wrap;gap:8px 16px}

button{border:0;border-radius:9px;padding:9px 16px;background:var(--primary-600);color:#fff;font-weight:600;font-size:13.5px;cursor:pointer;transition:background .12s;box-shadow:0 1px 2px rgb(79 70 229 / .15)}
button:hover{background:var(--primary-700)}
button:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}
button:disabled{background:var(--slate-200);color:var(--slate-400);cursor:not-allowed;box-shadow:none}
button.peligro{background:var(--red-600);box-shadow:0 1px 2px rgb(220 38 38 / .15)}
button.peligro:hover{background:var(--red-700)}
a > button{pointer-events:none}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--slate-100)}
th{color:var(--slate-500);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--slate-50)}
th:first-child,td:first-child{padding-left:14px}
tbody tr:hover{background:var(--slate-50)}
.empty{text-align:center;color:var(--muted);padding:32px 12px;background:none!important}
.low td{color:var(--red-700);background:var(--red-50)}

/* ---------- badges / alerts ---------- */
.badge{background:var(--emerald-50);color:var(--emerald-700);padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;display:inline-block;white-space:nowrap}
.badge.baja{background:var(--red-50);color:var(--red-700)}
.badge.ubicacion-badge{background:var(--primary-50);color:var(--primary-600)}
.alert{background:var(--red-50);color:var(--red-700);border-left:3px solid var(--red-500);padding:11px 14px;border-radius:8px;font-size:13.5px;margin-bottom:16px}
.exito{background:var(--emerald-50);color:var(--emerald-700);border-left:3px solid var(--emerald-600);padding:11px 14px;border-radius:8px;font-size:13.5px;margin-bottom:16px}

/* ---------- misc shared ---------- */
/* !important a proposito: es una utilidad "ocultar", tiene que ganar sin
   importar que otra clase con la misma especificidad (p. ej. display:flex
   de una tarjeta) se cargue despues en operations.css. */
.hidden{display:none!important}
.muted{color:var(--muted);font-size:13px}
details summary{cursor:pointer;color:var(--primary-600);font-weight:600;font-size:13px;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"";}
details[open] summary{margin-bottom:12px}
details form{margin-top:12px;max-width:360px}
details form + form{margin-top:8px}
ul.lista{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
ul.lista li{font-size:13.5px}
ul.lista li.empty{color:var(--muted);text-align:left;padding:6px 0}
.total-carrito{font-size:17px;font-weight:700;text-align:right;color:var(--slate-900)}
.paginacion{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:16px;color:var(--muted);font-size:13px}
.paginacion a{color:var(--primary-600);text-decoration:none;font-weight:600}
#buscar{width:100%;border:1px solid var(--slate-300);border-radius:9px;padding:10px 12px;font:inherit;font-size:13.5px}
.lista-resultados{margin-top:8px;display:grid;gap:6px;max-height:320px;overflow-y:auto}
.resultado{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--white);cursor:pointer;border:1px solid var(--line);transition:border-color .12s,box-shadow .12s,transform .12s}
.resultado:hover{border-color:var(--primary-500);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.resultado-icono{width:32px;height:32px;border-radius:9px;background:var(--primary-50);color:var(--primary-600);display:grid;place-items:center;font-weight:800;font-size:12.5px;flex-shrink:0}
.resultado-info{flex:1;min-width:0}
.resultado-nombre{font-weight:600;font-size:13.5px;color:var(--slate-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resultado-meta{font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resultado-meta .resultado-ubicacion{color:var(--primary-600);font-weight:600}
.resultado-precio{font-weight:700;color:var(--primary-600);font-size:13.5px;flex-shrink:0;white-space:nowrap}
code{background:var(--slate-100);padding:1px 6px;border-radius:5px;font-size:.9em;color:var(--slate-700)}
hr{border:0;border-top:1px solid var(--line)}

/* ---------- login / standalone screens ---------- */
.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 15% 10%,var(--primary-50),transparent 45%),var(--slate-50)}
.login-card{width:min(408px,calc(100% - 32px));background:var(--white);border-radius:20px;padding:36px;box-shadow:var(--shadow-md);border:1px solid var(--line)}
.login-card .logo{color:var(--slate-900);font-size:22px}
.login-card h1{margin-top:26px;font-size:22px}
.login-card>p{color:var(--muted);font-size:13.5px}
.login-card form{display:grid;gap:15px;margin-top:22px}
.welcome{text-align:center;padding:55px}
.welcome .module-icon{margin:auto;width:56px;height:56px;font-size:22px}
.welcome p{max-width:600px;margin:auto;color:var(--muted);line-height:1.6}
.tema-flotante{position:fixed;top:16px;right:18px}
.demo-landing{max-width:640px;width:min(640px,calc(100% - 32px))}
.demo-cards{display:grid;gap:12px;margin-top:22px}
.demo-card{all:unset;cursor:pointer;display:flex;gap:14px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);text-align:left;transition:border-color .12s}
.demo-card:hover{border-color:var(--primary-500)}
.demo-card:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}
.demo-card strong{display:block;color:var(--slate-900);font-size:14px}
.demo-card small{display:block;color:var(--muted);margin-top:2px;font-size:12.5px}
.demo-banner{background:var(--amber-50);color:var(--amber-600);padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;text-align:center;margin-bottom:20px}
.demo-banner a{color:inherit;margin-left:8px}

/* ---------- mapa de almacen ---------- */
.mapa-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.mapa-layout{display:flex;gap:16px;align-items:flex-start}
.mapa-viewport-wrap{flex:1;min-width:0}
.mapa-panel{flex:0 0 38%;max-width:400px;min-width:260px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm)}
.mapa-panel.hidden{display:none}
.mapa-viewport{position:relative;overflow:auto;min-height:420px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px}
.mapa-plano-canvas{position:absolute;inset:0}
.mapa-fab{position:absolute;top:10px;left:10px;z-index:5;width:36px;height:36px;border-radius:50%;background:var(--primary-600);color:#fff;border:0;font-size:19px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);line-height:1}
.mapa-fab.hidden{display:none}
.mapa-zoom-controls{position:absolute;top:10px;right:10px;z-index:5;display:flex;align-items:center;gap:2px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:4px 8px;box-shadow:var(--shadow-sm)}
.mapa-zoom-btn{background:transparent;border:0;color:var(--ink);font-size:15px;width:22px;height:22px;cursor:pointer;border-radius:50%;line-height:1}
.mapa-zoom-btn:hover{background:var(--slate-100)}
.mapa-zoom-pct{font-size:11px;color:var(--muted);min-width:32px;text-align:center}
.mapa-zoom-sep{width:1px;height:16px;background:var(--line);margin:0 2px}
.mapa-estante-rect{position:absolute;border-radius:8px;border:1.5px solid;cursor:grab;display:flex;align-items:center;justify-content:center;padding:4px;font-size:11px;font-weight:700;text-align:center;overflow:hidden;user-select:none;touch-action:none;transition:box-shadow .12s}
.mapa-estante-rect:active{cursor:grabbing}
.mapa-estante-rect.is-selected{box-shadow:0 0 0 2px var(--primary-500);z-index:2}
.mapa-estante-nombre{pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapa-resize-handle{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,currentColor 50%);opacity:.5;border-bottom-right-radius:8px}
.mapa-estante-green{background:var(--chip-green-bg);border-color:var(--chip-green-bd);color:var(--chip-green-fg)}
.mapa-estante-blue{background:var(--chip-blue-bg);border-color:var(--chip-blue-bd);color:var(--chip-blue-fg)}
.mapa-estante-yellow{background:var(--chip-yellow-bg);border-color:var(--chip-yellow-bd);color:var(--chip-yellow-fg)}
.mapa-estante-purple{background:var(--chip-purple-bg);border-color:var(--chip-purple-bd);color:var(--chip-purple-fg)}
.mapa-estante-orange{background:var(--chip-orange-bg);border-color:var(--chip-orange-bd);color:var(--chip-orange-fg)}
.mapa-panel-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.mapa-panel-acciones{display:flex;gap:6px;flex-shrink:0}
.mapa-grid-pisos{display:flex;flex-direction:column;gap:6px}
.mapa-piso-row{display:flex;align-items:center;gap:8px}
.mapa-piso-label{font-size:11px;font-weight:700;color:var(--muted);width:22px;flex-shrink:0}
.mapa-cuadrantes{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1}
.mapa-cuadrante{aspect-ratio:1;border:1px solid var(--line);border-radius:6px;background:var(--slate-50);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}
.mapa-cuadrante.is-ocupada{background:var(--chip-green-bg);border-color:var(--chip-green-bd);color:var(--chip-green-fg);cursor:pointer;font-weight:700}
.mapa-cuadrante.is-resaltada{outline:2px solid var(--primary-500);outline-offset:1px}
.mapa-cuadrante.is-elegida{background:var(--chip-blue-bg);border-color:var(--chip-blue-bd);color:var(--chip-blue-fg);font-weight:700;cursor:pointer}
.mapa-cuadrante-vacia{visibility:hidden}
.mapa-productos-lista{margin:0;padding-left:18px;font-size:13px}
.mapa-popup-layout{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.mapa-popup-mini{flex:1.6;min-width:220px}
.mapa-popup-detalle{flex:1;min-width:200px;max-width:220px}
.mapa-popup-mini-plano{position:relative;height:260px;border:1px solid var(--line);border-radius:var(--radius);background:var(--slate-50);overflow:hidden}
.mapa-popup-mini-rect{position:absolute;border-radius:6px;border:1.5px solid;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:2px;text-align:center}
.mapa-popup-mini-rect.is-clickable{cursor:pointer}
.mapa-popup-mini-rect.is-resaltado{box-shadow:0 0 0 2px var(--primary-500);z-index:2}
.mapa-popup-detalle-header{margin-bottom:8px}
.mapa-popup-codigo{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}
.mapa-modal{border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-md);background:var(--white);color:var(--ink);max-width:min(600px,calc(100vw - 32px));width:100%}
.mapa-modal::backdrop{background:rgba(15,23,42,.55)}
.mapa-modal h3{margin:0 0 16px;font-size:16px}
.mapa-modal .form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.mapa-modal .form-actions .espaciador{margin-right:auto}
@media(max-width:900px){.mapa-layout{flex-direction:column}.mapa-panel{flex:1 1 auto;max-width:none;width:100%}}
@media(max-width:640px){.mapa-popup-layout{flex-direction:column}.mapa-popup-detalle{max-width:none}}

/* ---------- mapa de mesas (restaurante) ---------- */
.mesa-rect{border-radius:14px}
/* Tamaño fijo en px (no %) a proposito: asi son circulos perfectos sin
   importar el aspect-ratio de la mesa que las rodea (ver sillasHtml en
   restaurante_mesas_mapa.js). pointer-events:none para no interferir con el
   drag/resize del rect de la mesa. */
.mesa-silla{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--slate-300);border:1.5px solid var(--white);transform:translate(-50%,-50%);pointer-events:none;box-shadow:var(--shadow-sm)}
.mesa-detalle{margin:6px 0}

@media(max-width:850px){
  aside{position:static;width:auto;height:auto}
  .profile{display:none}
  nav{display:flex;flex-wrap:wrap;overflow:auto;margin-top:16px}
  nav .grupo{display:none}
  main{margin:0;padding:22px}
  .stats,.modules,.grid-form,.split{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .stats,.modules,.grid-form,.split{grid-template-columns:1fr}
  .login-card{padding:26px}
}