/* Panel NetBo con el design system Yapa (tema negro): barra lateral negra, lienzo #0C0C0C, tarjetas #1A1917,
   acento ámbar #FFC100 y Helvetica. Solo presentación: el comportamiento vive en js/.
   Sin fuentes remotas: la política de seguridad del panel solo permite recursos propios. */
:root {
  --fondo: #000; --lienzo: #0c0c0c; --tarjeta: #1a1917; --elevada: #23211e;
  --texto: #fff; --suave: #b8b8b8; --borde: rgba(255,255,255,.12); --borde-fuerte: rgba(255,255,255,.24);
  --primario: #ffc100; --primario-suave: rgba(255,193,0,.14); --sobre-primario: #000;
  --peligro: #f97066; --peligro-suave: rgba(249,112,102,.14); --exito: #86efac; --exito-suave: rgba(134,239,172,.14);
  --info: #93c5fd; --info-suave: rgba(147,197,253,.14); --aviso: #ffc100;
  --sombra: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.35);
  --radio: 12px; --menu-ancho: 252px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; min-height:100vh; font:14px/1.5 "Helvetica Neue",Helvetica,Arimo,Arial,sans-serif; background:var(--fondo); color:var(--texto); -webkit-font-smoothing:antialiased; }
a { color:var(--primario); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible, .click:focus-visible { outline:2px solid var(--primario); outline-offset:2px; }
::selection { background:var(--primario); color:#000; }
* { scrollbar-width:thin; scrollbar-color:#3c3c3c transparent; }

/* ---------- Estructura ---------- */
.layout { display:grid; grid-template-columns:var(--menu-ancho) 1fr; min-height:100vh; background:var(--lienzo); }
.menu { position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--fondo); border-right:1px solid var(--borde); padding:20px 14px 16px; display:flex; flex-direction:column; gap:2px; }
.menu h1 { margin:0 0 18px; padding:0 4px; }
.marca { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.marca-admin { margin-left:6px; padding:3px 12px; border-radius:99px; background:var(--primario); color:#000; font-size:12px; font-weight:700; font-style:italic; letter-spacing:.22em; line-height:1.3; }
.logo { display:block; width:100%; max-width:170px; height:auto; }
.login-logo { margin:0 0 20px; }
.menu a { position:relative; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:#d6d6d6; font-weight:500; text-decoration:none; transition:background-color .15s ease,color .15s ease; }
.menu a::before { content:""; flex:0 0 18px; width:18px; height:18px; background:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; opacity:.85; }
.menu a:hover { background:rgba(255,255,255,.07); color:#fff; }
.menu a.activo { background:var(--primario-suave); color:var(--primario); font-weight:700; }
.menu a.activo::after { content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--primario); }
.menu a .estado { margin-left:auto; border:0; background:var(--primario); color:#000; font-weight:700; padding:1px 8px; font-size:11px; }
.menu a[href="#/ajustes"] { margin-top:14px; }
.menu a[href="#/ajustes"]::after { content:none; }
.menu .pie { margin-top:auto; padding:12px; border:1px solid var(--borde); border-radius:12px; background:var(--tarjeta); font-size:12px; color:var(--suave); display:flex; flex-direction:column; gap:2px; }
.menu .pie > div:first-child { color:#fff; font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.menu .pie a { margin-top:8px; padding:7px 10px; border:1px solid var(--borde-fuerte); border-radius:8px; justify-content:center; font-size:13px; color:#fff; }
.menu .pie a::before { content:none; }
.menu .pie a:hover { border-color:var(--primario); color:var(--primario); background:transparent; }
.contenido { padding:32px 40px 56px; max-width:1240px; width:100%; min-width:0; }
.contenido h2 { margin:0 0 22px; font-size:28px; line-height:1.15; font-style:italic; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.contenido h2 .estado { font-size:12px; font-style:normal; text-transform:none; letter-spacing:0; }
.contenido h3 { margin:28px 0 12px; font-size:16px; font-weight:700; }
.tarjeta > h3:first-child, .tarjeta h3:first-child { margin-top:0; }
.contenido > .fila { margin-bottom:6px; }
.contenido > p:first-child a { display:inline-flex; align-items:center; gap:6px; color:var(--suave); font-weight:500; }
.contenido > p:first-child a:hover { color:var(--primario); text-decoration:none; }

/* ---------- Tarjetas y datos ---------- */
.tarjeta { background:var(--tarjeta); border:1px solid var(--borde); border-radius:var(--radio); padding:20px; margin-bottom:18px; box-shadow:var(--sombra); }
.tarjeta p { margin:0 0 8px; }
.tarjeta p:last-child { margin-bottom:0; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-bottom:18px; }
.dato { display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:6px; background:var(--tarjeta); border:1px solid var(--borde); border-radius:6px 6px 28px 6px; padding:20px; box-shadow:var(--sombra); color:inherit; transition:border-color .15s ease,transform .15s ease; }
a.dato:hover { border-color:var(--primario); transform:translateY(-2px); text-decoration:none; }
.dato b { display:block; font-size:28px; white-space:nowrap; line-height:1.1; font-weight:700; color:var(--primario); letter-spacing:-.02em; }
.dato span { color:var(--suave); font-size:13px; font-weight:500; }

/* ---------- Tablas ---------- */
.tabla { background:var(--tarjeta); border:1px solid var(--borde); border-radius:var(--radio); overflow:auto; margin-bottom:18px; box-shadow:var(--sombra); }
table { width:100%; border-collapse:collapse; background:transparent; }
.tabla table { border:0; }
th, td { padding:13px 16px; text-align:left; border-bottom:1px solid var(--borde); vertical-align:middle; }
th { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--suave); background:rgba(255,255,255,.03); white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
td:first-child { white-space:nowrap; }
tbody tr { transition:background-color .12s ease; }
tbody tr:hover { background:rgba(255,193,0,.05); }
tr.click { cursor:pointer; }
td.fila { display:table-cell; white-space:nowrap; text-align:right; }
td.fila > * { vertical-align:middle; }
td.fila > * + * { margin-left:8px; }
td.fila > a:not(.boton) { display:inline-flex; align-items:center; min-height:38px; padding:8px 16px; border:1px solid var(--borde-fuerte); border-radius:8px; color:#fff; font-weight:600; }
td.fila > a:not(.boton):hover { border-color:var(--primario); color:var(--primario); text-decoration:none; }
td form { display:flex; gap:8px; align-items:center; }
td form input { max-width:150px; }

/* ---------- Formularios ---------- */
.campo { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.tarjeta > .campo, form > .campo { max-width:680px; }
.campo span { font-size:13px; font-weight:600; color:#e6e6e6; }
.campo small { color:var(--suave); font-size:12px; }
input, select, textarea { font:inherit; min-height:40px; padding:9px 12px; border:1px solid var(--borde-fuerte); border-radius:8px; background:var(--lienzo); color:var(--texto); width:100%; transition:border-color .15s ease,box-shadow .15s ease; }
input::placeholder, textarea::placeholder { color:#7d7d7d; }
input:hover, select:hover, textarea:hover { border-color:rgba(255,255,255,.4); }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--primario); box-shadow:0 0 0 3px rgba(255,193,0,.22); }
input:disabled, select:disabled, textarea:disabled { opacity:.55; cursor:not-allowed; }
input[type=checkbox], input[type=radio] { width:18px; min-height:0; height:18px; padding:0; accent-color:var(--primario); vertical-align:middle; margin-right:6px; }
input[type=file] { padding:7px 10px; }
input[type=file]::file-selector-button { margin-right:12px; padding:6px 12px; border:1px solid var(--borde-fuerte); border-radius:6px; background:var(--elevada); color:#fff; font:inherit; cursor:pointer; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select { height:40px; }
textarea { min-height:110px; resize:vertical; }
label { cursor:pointer; }
.fila { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.fila:has(> .campo) { align-items:flex-end; }
.fila > * { width:auto; }
.fila > .campo { flex:1 1 180px; margin-bottom:0; max-width:none; }
.fila > .campo > input, .fila > .campo > select { width:100%; }
.tarjeta:has(> .campo ~ .campo ~ .campo ~ .campo) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; align-content:start; }
.tarjeta:has(> .campo ~ .campo ~ .campo ~ .campo) > .campo { max-width:none; }
.tarjeta:has(> .campo ~ .campo ~ .campo ~ .campo) > :is(h2,h3,p,hr,label:not(.campo),button,.fila,.suave,div:not(.campo)),
.tarjeta:has(> .campo ~ .campo ~ .campo ~ .campo) > .campo:is(:has(textarea),:has(input[type=file]),:has(.miniatura)) { grid-column:1 / -1; }
.tarjeta:has(> .campo ~ .campo ~ .campo ~ .campo) > :is(button,label:not(.campo)) { justify-self:start; }
.tarjeta:has(> .campo ~ .campo ~ .campo ~ .campo) > .campo:first-of-type { grid-column:1 / -1; }
.tarjeta:has(> .campo ~ .campo ~ .campo ~ .campo) > br { display:none; }
.tarjeta > label:not(.campo) { display:flex; align-items:center; gap:8px; margin:4px 0 14px; }
form.tarjeta > .fila:last-child, .tarjeta > .fila + .fila { margin-top:6px; }

/* ---------- Botones ---------- */
.boton { display:inline-flex; align-items:center; justify-content:center; gap:6px; font:inherit; font-weight:700; min-height:38px; padding:8px 16px; border-radius:8px; border:1px solid var(--primario); background:var(--primario); color:var(--sobre-primario); cursor:pointer; transition:filter .15s ease,transform .05s ease,background-color .15s ease,border-color .15s ease; }
.boton:hover:not(:disabled) { filter:brightness(1.08); }
.boton:active:not(:disabled) { transform:translateY(1px); }
.boton.secundario { background:transparent; color:#fff; border-color:var(--borde-fuerte); font-weight:600; }
.boton.secundario:hover:not(:disabled) { border-color:var(--primario); color:var(--primario); filter:none; }
.boton.peligro { background:var(--peligro-suave); border-color:rgba(249,112,102,.45); color:#fca5a5; }
.boton.peligro:hover:not(:disabled) { background:var(--peligro); border-color:var(--peligro); color:#000; filter:none; }
.boton:disabled { opacity:.45; cursor:not-allowed; }
a.boton { text-decoration:none; }

/* ---------- Estados ---------- */
.estado { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:600; line-height:1.4; border:1px solid var(--borde); color:var(--suave); white-space:nowrap; }
.estado:not(.menu .estado)::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.estado.Enviado { color:var(--primario); background:var(--primario-suave); border-color:transparent; }
.estado.Confirmado { color:var(--info); background:var(--info-suave); border-color:transparent; }
.estado.Entregado { color:var(--exito); background:var(--exito-suave); border-color:transparent; }
.estado.Cancelado { color:#fca5a5; background:var(--peligro-suave); border-color:transparent; }
.estado.Vencido { color:#d0d0d0; background:rgba(255,255,255,.08); border-color:transparent; }
.menu a .estado::before { content:none; }

/* ---------- Varios ---------- */
.suave { color:var(--suave); }
.miniatura { width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--borde); background:var(--lienzo); }
.galeria-item { display:inline-flex; flex-direction:column; align-items:center; gap:6px; margin:4px 8px 8px 0; }
.nota { border-left:3px solid var(--primario); background:rgba(255,193,0,.06); border-radius:0 8px 8px 0; padding:8px 12px; margin:8px 0; }
hr { border:0; border-top:1px solid var(--borde); margin:16px 0; }
pre { margin:0; white-space:pre-wrap; word-break:break-word; font:12px/1.5 ui-monospace,Menlo,Consolas,monospace; color:#d6d6d6; }

/* ---------- Avisos, modal y acceso ---------- */
.aviso { position:fixed; right:20px; bottom:20px; max-width:420px; padding:12px 16px 12px 18px; border-radius:10px; background:var(--elevada); color:#fff; border:1px solid var(--borde-fuerte); border-left:4px solid var(--primario); box-shadow:0 14px 40px rgba(0,0,0,.55); font-weight:600; z-index:20; animation:entrada .22s ease; }
.aviso.error { border-left-color:var(--peligro); }
.aviso.oculto { display:none; }
@keyframes entrada { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.modal-fondo { position:fixed; inset:0; background:rgba(0,0,0,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); display:grid; place-items:center; z-index:30; }
.modal { background:var(--tarjeta); border:1px solid var(--borde-fuerte); padding:24px; border-radius:14px; width:min(420px,92vw); display:flex; flex-direction:column; gap:14px; box-shadow:0 24px 70px rgba(0,0,0,.6); }
body:has(.login) { background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,193,0,.12),transparent 70%) fixed,#000; }
.login { max-width:400px; margin:12vh auto 0; padding:32px; border-radius:16px; display:flex; flex-direction:column; }
.login .logo { max-width:190px; mix-blend-mode:lighten; }
.login .boton { width:100%; margin-top:6px; min-height:42px; }

/* ---------- Iconos del menú (máscaras SVG; la política de seguridad permite data: en imágenes) ---------- */
.menu a[href="#/"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E"); }
.menu a[href="#/pedidos"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.menu a[href="#/productos"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
.menu a[href="#/categorias"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E"); }
.menu a[href="#/stock"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); }
.menu a[href="#/banners"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); }
.menu a[href="#/ajustes"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); }
.menu a[href="#/auditoria"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); }
.menu a[href="#/cuenta"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }

/* ---------- Adaptable ---------- */
@media (max-width:960px) {
  .layout { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .menu { position:static; height:auto; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:4px; overflow-x:auto; overflow-y:hidden; padding:10px 12px; border-right:0; border-bottom:1px solid var(--borde); }
  .menu h1 { margin:0 12px 0 0; flex:0 0 auto; }
  .marca { flex-direction:row; align-items:center; gap:8px; }
  .marca-admin { margin-left:0; }
  .logo { max-width:96px; }
  .menu a { flex:0 0 auto; padding:8px 12px; white-space:nowrap; }
  .menu a.activo::after { content:none; }
  .menu a[href="#/ajustes"] { margin-top:0; }
  .menu .pie { margin:0 0 0 8px; flex:0 0 auto; flex-direction:row; align-items:center; gap:10px; padding:6px 10px; }
  .menu .pie > div { display:none; }
  .menu .pie a { margin:0; }
  .contenido { padding:20px 16px 40px; }
  .contenido h2 { font-size:22px; }
}
@media (max-width:760px) {
  .tarjeta:has(> .campo ~ .campo ~ .campo ~ .campo) { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .grid { grid-template-columns:1fr 1fr; gap:12px; }
  .dato { padding:16px; }
  .dato b { font-size:22px; }
  th, td { padding:10px 12px; }
}


/* Chips de métodos de pago en ajustes */
.chips-container { display:flex; flex-wrap:wrap; gap:8px; min-height:36px; padding:8px 0; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px; border:1.5px solid var(--borde-fuerte); background:rgba(255,255,255,.06); font-size:13px; font-weight:500; color:#fff; }
.chip-quitar { background:none; border:none; cursor:pointer; color:var(--suave); font-size:16px; line-height:1; padding:0; display:flex; align-items:center; }
.chip-quitar:hover { color:var(--peligro); }

/* Contador de pedidos pendientes del menú: oculto cuando es 0 (el atributo hidden no basta con display:inline-flex). */
.estado[hidden] { display:none; }
/* Interruptor del sonido de aviso de pedidos nuevos, dentro del pie del menú. */
.menu .pie .sonido { align-self:flex-start; margin-top:6px; padding:0; border:0; background:none; color:var(--suave); font:inherit; font-size:12px; text-decoration:underline; cursor:pointer; }
.menu .pie .sonido:hover { color:#fff; }