/* Panel del dueño (se apoya en /styles.css) */
.admin { background: #0e0d0d; }
.login { min-height: 100svh; display: grid; place-items: center; padding: 1.25rem; }
.login-caja { width: min(420px, 100%); display: grid; gap: .9rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem; }
.login-caja h1 { font-size: 1.6rem; text-transform: uppercase; }
.demo-caja { display: grid; gap: .5rem; margin-top: .4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--mute); }
.demo-caja strong { color: var(--ink); }

.adm-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .8rem; padding: .6rem 1.25rem; background: rgba(14, 13, 13, .94); border-bottom: 1px solid var(--line); }
.adm-head .logo small { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-left: .5rem; font-variation-settings: normal; }
.adm-acciones { margin-left: auto; display: flex; gap: .4rem; }
.rol { font-size: .74rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; background: var(--bg-4); color: var(--soft); }
.rol.demo { background: rgba(245, 179, 1, .14); color: var(--warn); }
.aviso-demo { margin: .8rem 1.25rem 0; font-size: .86rem; color: var(--soft); background: rgba(245, 179, 1, .08); border: 1px solid rgba(245, 179, 1, .3); border-radius: 12px; padding: .7rem .9rem; }
@media (max-width: 640px) { .adm-head .btn:first-child { display: none; } }

.adm-nav { display: flex; gap: .3rem; overflow-x: auto; padding: .7rem 1.25rem; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.adm-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem 1rem; border-radius: 10px; font-weight: 700; color: var(--mute); }
.adm-nav a:hover { color: var(--ink); background: var(--bg-3); }
.adm-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.burbuja { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: .74rem; display: inline-grid; place-items: center; }

.adm-main { width: min(1180px, 100%); margin-inline: auto; padding: 1.2rem 1.25rem 5rem; display: grid; gap: 1rem; }
.adm-main > section { display: grid; gap: 1rem; }
.adm-main .tarjeta h2 { font-size: 1rem; }
.sub { font-size: .95rem; text-transform: uppercase; margin-top: .4rem; font-variation-settings: "wdth" 100; }

.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { display: grid; gap: .1rem; padding: 1rem; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.kpi span { font-size: .8rem; color: var(--mute); font-weight: 600; }
.kpi strong { font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.1; }
.kpi small { font-size: .76rem; color: var(--dim); }
.kpi-rojo { background: var(--red); border-color: var(--red); }
.kpi-rojo span, .kpi-rojo small { color: rgba(255, 255, 255, .85); }
a.kpi:hover { border-color: var(--ink); }
.adm-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .adm-grid { grid-template-columns: 1.4fr 1fr; } }
.grafico svg { width: 100%; height: auto; display: block; }
.grafico text { fill: var(--mute); font-size: 11px; font-family: var(--sans); }
.ranking { padding-left: 1.2rem; display: grid; gap: .35rem; color: var(--soft); }
.ranking b { color: var(--ink); }
.lista-pedidos { list-style: none; padding: 0; display: grid; gap: .2rem; }
.lista-pedidos a { display: flex; justify-content: space-between; gap: .8rem; min-height: 44px; align-items: center; padding: .3rem .4rem; border-radius: 8px; }
.lista-pedidos a:hover { background: var(--bg-3); }

.adm-barra { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; }
.chips-fila { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.chips-fila .chip b { margin-left: .35rem; font-weight: 800; color: var(--red); }
.chips-fila .chip[aria-pressed="true"] b { color: var(--red-d); }
.adm-barra .buscador { flex: 1 1 260px; max-width: 360px; margin: 0; }

.lista-cards { display: grid; gap: .6rem; }
.fila-pedido { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; width: 100%; text-align: left; padding: .9rem 1rem; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.fila-pedido:hover { border-color: var(--line-2); }
.fila-pedido .num { font-weight: 800; }
.fila-pedido .total { font-weight: 800; text-align: right; }
.fila-pedido .det { grid-column: 1 / -1; font-size: .84rem; color: var(--mute); }
.fila-pedido .que { grid-column: 1 / -1; font-size: .84rem; color: var(--soft); }
.fila-pedido .alerta { color: var(--warn); font-weight: 700; }
.pago-chip { font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; background: var(--bg-4); color: var(--soft); margin-left: .3rem; }

.fila-producto { display: grid; grid-template-columns: 56px 1fr auto; gap: .8rem; align-items: center; width: 100%; text-align: left; padding: .7rem .8rem; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.fila-producto:hover { border-color: var(--line-2); }
.fila-producto img { width: 56px; height: 68px; object-fit: cover; border-radius: 8px; background: var(--foto); }
.fila-producto .nom { font-weight: 700; }
.fila-producto .det { font-size: .82rem; color: var(--mute); }
.fila-producto .stock { font-weight: 800; text-align: right; }
.fila-producto .stock.bajo { color: var(--warn); }
.fila-producto .stock.cero { color: var(--red); }
.etiq-chica { font-size: .7rem; font-weight: 800; padding: .1rem .4rem; border-radius: 6px; background: var(--bg-4); margin-left: .3rem; }
.etiq-chica.amarilla { background: rgba(245, 179, 1, .14); color: var(--warn); }

.cajon-ancho { width: min(620px, 100%); }
.det-bloque { display: grid; gap: .4rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.det-bloque h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-variation-settings: "wdth" 100; }
.det-bloque p, .det-bloque li { font-size: .92rem; }
.acciones-pedido { display: grid; gap: .5rem; }
.acciones-pedido .fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.historial { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: .86rem; }
.historial li { display: grid; gap: .05rem; padding-left: .8rem; border-left: 2px solid var(--line-2); }
.historial li.alerta { border-color: var(--warn); }
.historial small { color: var(--dim); }
.btn-peligro { color: var(--red); border-color: rgba(229, 56, 59, .5); }
.btn-wa { background: #25d366; color: #062b14; }

.editor { display: grid; gap: 1rem; }
.fila-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 560px) { .fila-4 { grid-template-columns: repeat(4, 1fr); } }
.presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.talles-editor { display: grid; gap: .4rem; }
.talle-fila { display: grid; grid-template-columns: 1fr 1fr 44px; gap: .4rem; }
.talle-fila input { min-height: 44px; padding: .5rem .7rem; font-size: 16px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); width: 100%; }
.talle-fila button { border-radius: 10px; font-size: 1.3rem; color: var(--mute); }
.talle-fila button:hover { background: var(--bg-3); color: var(--red); }
.fotos-editor { display: flex; flex-wrap: wrap; gap: .5rem; }
.foto-mini { position: relative; width: 84px; height: 104px; border-radius: 10px; overflow: hidden; background: var(--foto); }
.foto-mini img { width: 100%; height: 100%; object-fit: cover; }
.foto-mini button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .75); color: #fff; font-size: 1rem; }
.foto-mini .principal { position: absolute; left: 4px; bottom: 4px; font-size: .62rem; font-weight: 800; background: var(--red); color: #fff; padding: .1rem .3rem; border-radius: 4px; }
.subir { position: relative; justify-self: start; }
.subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.galeria-demo { display: flex; flex-wrap: wrap; gap: .4rem; }
.galeria-demo button { width: 60px; height: 74px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--foto); }
.galeria-demo button:hover { border-color: var(--red); }
.galeria-demo img { width: 100%; height: 100%; object-fit: cover; }
.interruptores { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.interruptor { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; cursor: pointer; font-weight: 600; font-size: .92rem; }
.interruptor input { width: 22px; height: 22px; accent-color: var(--red); }
.editor-acciones { display: flex; flex-wrap: wrap; gap: .5rem; position: sticky; bottom: 0; padding: .8rem 0 calc(.8rem + env(safe-area-inset-bottom)); background: var(--bg-2); border-top: 1px solid var(--line); }
.tabla-tarifas input { width: 100%; min-width: 76px; min-height: 40px; padding: .35rem .5rem; font-size: 16px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); }
.tabla-tarifas th small { display: block; font-weight: 400; color: var(--dim); }