/* Panel de control — estilo.css (identidad BALAM v1.2, docs/identidad-visual.md).
   Spec: docs/superpowers/specs/2026-10-20-panel-de-control-design.md §5.
   Este archivo es el CSS que sirve el panel (Task 15 lo copia byte a byte a
   src/box/panel_web/estilo.css): solo clases de la aplicación. El armazón del
   prototipo (teléfonos en fila, rótulos, burbuja de Telegram) vive en el
   <style> de index.html y no se sirve.
   Herramienta interna densa: fondo blanco siempre, botón principal en tinta,
   cobalto solo para lo que se toca (pestaña activa, chip activo, enlaces,
   foco). Sin modo oscuro, por decisión de la identidad. Componentes y tres
   estados de los botones tomados del prototipo de compras v8 (V8-9). */
:root{
  --tinta:#17130F; --papel:#FFFFFF; --arena:#EFE6D8; --hueso-claro:#F6F0E6;
  --linea:#E6E6E2; --piedra:#6D665D;
  --cobalto:#2447C9; --cobalto-palido:#E9EDFD;
  --agave:#487243; --barro:#B4452C; --barro-tint:#F7E6E1;
  --obsidiana-3:#2B241C;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}

/* --- base --- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--font);font-size:16px;line-height:1.35;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--cobalto);outline-offset:2px}
input,select{font:inherit}
a{color:var(--cobalto)}

/* --- armazón: una columna de 520 px --- */
.app{position:relative;max-width:520px;margin:0 auto;min-height:100dvh;background:var(--papel);display:flex;flex-direction:column;border-left:1px solid transparent;border-right:1px solid transparent}
@media (min-width:521px){.app{border-color:var(--linea)}}

.brand{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 20px 0}
.brand img{height:26px;width:auto;display:block}
.brand b{font-size:15px;letter-spacing:.14em;font-weight:600}
.brand span{font-size:12px;color:var(--piedra);margin-left:auto}

/* menú por alcance (§5.9): pestañas de texto, la activa en cobalto */
/* seis pestañas no caben a 390 px: el menú baja a un segundo renglón, nunca se esconde */
.menu{display:flex;flex-wrap:wrap;column-gap:18px;row-gap:0;padding:0 20px;margin-top:8px;border-bottom:1px solid var(--linea)}
.menu button,.menu a{flex:none;font-size:15px;color:var(--piedra);padding:10px 0 8px;border-bottom:2px solid transparent;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}
.menu button.on,.menu a.on{color:var(--cobalto);font-weight:600;border-bottom-color:var(--cobalto)}

.top{padding:14px 20px 6px}
.top h2{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere}
.top .sub{font-size:14px;color:var(--piedra);margin-top:2px}
.body{flex:1;padding:0 20px 32px}
.p{font-size:14px;color:var(--piedra);margin:12px 0 6px}
.hint{font-size:13px;color:var(--piedra);margin:6px 0 0}
.seccion{font-size:13px;font-weight:600;color:var(--piedra);margin:22px 0 4px}

/* --- botones: tres niveles, tres estados (V8-9) --- */
.cta,.ghost,.text-button{transition:transform .08s ease,background-color .12s ease,border-color .12s ease,opacity .12s ease}
.cta{width:100%;background:var(--tinta);color:var(--papel);border-radius:12px;padding:15px 18px;font-weight:600;font-size:16px;display:flex;justify-content:center;gap:10px;align-items:center;text-align:center;min-height:52px;position:relative;overflow:hidden;margin-top:12px}
.cta:active:not(:disabled){transform:translateY(1px);background:#000}
.cta:disabled{background:var(--hueso-claro);color:var(--piedra);cursor:default}
.cta.procesando{background:var(--obsidiana-3);cursor:progress}
.cta.listo{background:var(--agave)}
.cta .barra{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}
.cta.procesando .barra::before{content:"";display:block;height:2px;width:40%;background:var(--agave);animation:correr 1.1s linear infinite}
@keyframes correr{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.cta.rojo{background:var(--barro)}
.ghost{width:100%;border:1px solid var(--linea);border-radius:12px;padding:13px;font-weight:500;font-size:15px;margin-top:8px;min-height:48px;background:var(--papel);color:var(--tinta);text-align:center;position:relative;overflow:hidden}
.ghost:active:not(:disabled){transform:translateY(1px);background:var(--hueso-claro);border-color:var(--piedra)}
.ghost:disabled{opacity:.5;cursor:default}
.ghost.chico{width:auto;margin:0;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;font-size:14px}
.ghost.peligro{color:var(--barro);border-color:var(--barro)}
.ghost.procesando{cursor:progress;color:var(--piedra)}
.ghost.procesando .barra{position:absolute;left:0;right:0;bottom:0;height:2px}
.ghost.procesando .barra::before{content:"";display:block;height:2px;width:40%;background:var(--agave);animation:correr 1.1s linear infinite}
.ghost.listo{color:var(--agave);border-color:var(--agave)}
.text-button{color:var(--cobalto);font-size:14px;min-height:44px;text-align:left;display:inline-flex;align-items:center}
.text-button:active{opacity:.6}
.text-button.peligro{color:var(--barro)}
.porque{font-size:13px;color:var(--barro);margin:6px 0 0;min-height:18px}
.porque.ok{color:var(--piedra)}
.tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center}
.tools .ghost,.tools .text-button{width:auto;margin-top:0;flex:none}

/* --- entrar --- */
.login{padding-top:8px}
.entry{display:block;margin:14px 0 0;font-size:14px;color:var(--piedra)}
.entry input,.entry select{display:block;width:100%;margin-top:4px;border:1px solid var(--linea);border-radius:12px;padding:13px 14px;font-size:16px;color:var(--tinta);background:var(--papel)}
.entry .chips{margin-top:6px}

/* --- portada (§5.2) --- */
.franja{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--linea);border-radius:12px;padding:14px 16px;margin:10px 0 4px;text-align:left;min-height:52px}
.franja b{font-size:16px;font-weight:600}
.franja span{color:var(--cobalto);font-size:20px;line-height:1}
.franja:active{background:var(--hueso-claro)}
a.franja,a.lista-fila{color:inherit;text-decoration:none}
.bloque{font-size:13px;font-weight:600;color:var(--piedra);margin:22px 0 2px}
.lista-fila{width:100%;display:flex;align-items:center;gap:12px;min-height:56px;padding:9px 0;border-bottom:1px solid var(--linea);text-align:left}
.lista-fila .t{flex:1;min-width:0;font-size:16px;font-weight:500}
.lista-fila .n{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.lista-fila .n.mal{font-size:13px;font-weight:500;color:var(--barro)}.lista-fila .f{color:var(--piedra);font-size:18px;line-height:1}
.lista-fila.cero .t,.lista-fila.cero .n{color:var(--piedra);font-weight:400}
.lista-fila:active{background:var(--hueso-claro)}

/* --- lista genérica (§5.3) --- */
.regla{border:1px solid var(--linea);border-left:3px solid var(--tinta);border-radius:0 12px 12px 0;padding:10px 14px;margin:10px 0 6px;font-size:14px}
.regla .t{font-size:12px;font-weight:600;color:var(--piedra);margin-bottom:4px}
.regla ol{margin:0;padding-left:18px}
.regla li{margin:2px 0}
.tarjeta{padding:14px 0;border-bottom:1px solid var(--linea)}
.tarjeta:last-child{border-bottom:0}
.tarjeta .cab{display:flex;gap:12px;align-items:flex-start}
.tarjeta .cab>div{flex:1;min-width:0}
.tarjeta .tit{font-weight:600;font-size:16px;overflow-wrap:anywhere}
.tarjeta .meta{font-size:13px;color:var(--piedra);margin-top:2px}
.tarjeta .pres{margin:8px 0 2px;padding:0;list-style:none}
.tarjeta .pres li{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:6px 0;border-bottom:1px dashed var(--linea);font-variant-numeric:tabular-nums}
.tarjeta .pres li span{color:var(--piedra);flex:none}
.tarjeta .pres li.tachado{color:var(--piedra);text-decoration:line-through}
.tarjeta .motivo{font-size:13px;color:var(--barro);margin-top:2px}
.parecidos{background:var(--cobalto-palido);border-radius:12px;padding:10px 12px;margin:10px 0}
.parecidos .t{font-size:13px;color:var(--piedra);margin-bottom:4px}
.parecidos .uno{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(36,71,201,.12)}
.parecidos .uno:last-of-type{border-bottom:0}
.parecidos .uno .l{min-width:0;font-size:15px;overflow-wrap:anywhere}
.parecidos .uno .l small{display:block;color:var(--piedra);font-size:13px}
.parecidos .uno .ghost.chico{flex:none}
.parecidos .uno.col{flex-direction:column;align-items:stretch;gap:0}
.parecidos .uno.col .ghost{margin-top:8px}
.etiqueta{display:inline-block;font-size:12px;font-weight:500;border-radius:999px;padding:3px 9px;background:var(--arena);color:var(--tinta);margin-left:6px;vertical-align:middle}
.etiqueta.alan{background:var(--barro-tint);color:var(--barro)}
.etiqueta.claude{background:var(--cobalto-palido);color:var(--cobalto)}
.etiqueta.mal{background:var(--barro-tint);color:var(--barro)}
.listo-chip{display:flex;align-items:center;gap:8px;color:var(--agave);font-weight:600;padding:14px 0;border-bottom:1px solid var(--linea)}
.aviso{background:var(--barro-tint);color:var(--barro);border-radius:10px;padding:12px 14px;font-size:14px;font-weight:500;margin:10px 0}
.vacio{text-align:center;padding:40px 8px;font-size:15px;color:var(--piedra)}
.vacio b{display:block;font-size:17px;font-weight:600;color:var(--tinta);margin-bottom:4px}
.fotos{display:flex;gap:8px;margin-top:8px}
.foto{width:56px;height:72px;border:1px solid var(--linea);border-radius:10px;background:repeating-linear-gradient(0deg,var(--papel) 0 6px,var(--hueso-claro) 6px 8px);flex:none;display:block}

/* selector número + unidad (sin texto libre) */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--linea);border-radius:999px;padding:9px 14px;font-size:15px;min-height:40px;background:var(--papel);color:var(--tinta)}
.chip.on{background:var(--cobalto);color:var(--papel);border-color:var(--cobalto);font-weight:500}
.chip:active:not(:disabled){transform:translateY(1px)}
.chip:disabled{opacity:.5;cursor:default}
.numu{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.kg{width:96px;height:40px;border:1px solid var(--linea);border-radius:999px;text-align:center;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--papel);color:var(--tinta)}
.kg.has{border-color:var(--cobalto);color:var(--cobalto)}
.kg.chico{width:72px;height:36px}
.entry input.kg{display:inline-block;width:96px;height:40px;margin-top:0;padding:0 8px;border-radius:999px;font-weight:600;text-align:center}
.entry input.kg.has{border-color:var(--cobalto);color:var(--cobalto)}
.eco{font-size:14px;color:var(--agave);margin:8px 0 0;min-height:19px}
.eco.mal{color:var(--barro)}

/* renglones de inventario y de corrección */
.renglon{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--linea)}
.renglon .name{flex:1;min-width:0}
.renglon .name b{display:block;font-weight:500;font-size:16px}
.renglon .name span{display:block;font-size:13px;color:var(--piedra);font-variant-numeric:tabular-nums}
.renglon.fuera .name b,.renglon.fuera .name span{color:var(--piedra);text-decoration:line-through}

/* --- catálogo (§5.4) --- */
.search{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--tinta);padding:0 2px;margin:4px 0 6px;min-height:48px}
.search input{flex:1;border:0;background:none;padding:10px 0;font-size:17px;outline:none;min-width:0;color:var(--tinta)}
.search .x{color:var(--piedra);font-size:20px;min-width:32px;min-height:40px}
.search .lupa{width:18px;height:18px;flex:none;fill:none;stroke:var(--piedra);stroke-width:2;stroke-linecap:round}
.res{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 2px;min-height:56px;border-bottom:1px solid var(--linea);text-align:left;font-size:16px}
.res small{display:block;color:var(--piedra);font-size:13px}
.res.on{color:var(--cobalto)}
.ficha{border:1px solid var(--linea);border-radius:12px;padding:14px;margin-top:12px}
.ficha h3{margin:0;font-size:18px;font-weight:600}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:14px}
.ficha dt{color:var(--piedra)}
.ficha dd{margin:0;overflow-wrap:anywhere}
.de-alan{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.de-alan .ghost{margin-top:0;flex:1;text-align:left;padding:13px 14px}
.acc{border:1px solid var(--linea);border-radius:12px;margin-top:14px;overflow:hidden}
.acc>.cab{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:600;background:var(--hueso-claro);width:100%;text-align:left}
.acc>.cab .n{color:var(--piedra);font-weight:400;font-size:13px}
.acc .in{padding:2px 16px 16px}
.acc.apagado>.cab{background:var(--papel);color:var(--piedra)}
/* desplegable cerrado por omisión (portada de Alan: lo de los agentes) */
details.acc>summary.cab{list-style:none;cursor:pointer;min-height:52px}
details.acc>summary.cab::-webkit-details-marker{display:none}
details.acc>summary.cab .n::after{content:"  ⌄";color:var(--piedra)}
details.acc[open]>summary.cab .n::after{content:"  ⌃"}
details.acc .in .lista-fila:last-child{border-bottom:0}

/* --- pedidos y panadería (§5.5, §5.6) --- */
.dia{font-size:13px;font-weight:600;color:var(--piedra);margin:20px 0 0}
.pedido{padding:12px 0;border-bottom:1px solid var(--linea)}
.pedido .cab{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pedido .cab b{font-weight:500;font-size:16px}
.estado{font-size:13px;color:var(--piedra);flex:none}
.estado.surtido{color:var(--cobalto)}
.estado.confirmado{color:var(--agave)}
.msg{background:var(--hueso-claro);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px}
.msg .g{display:block;font-size:12px;color:var(--piedra);margin-bottom:4px;white-space:normal}

/* --- cuentas (§5.7) --- */
.cuenta{padding:12px 0;border-bottom:1px solid var(--linea)}
.cuenta .cab{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.cuenta .cab b{font-weight:500;font-size:16px}
.cuenta .cab .u{font-size:13px;color:var(--piedra);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cuenta .meta{font-size:13px;color:var(--piedra);margin-top:2px}
.cuenta.baja .cab b{color:var(--piedra)}
.alcance{display:grid;grid-template-columns:84px 1fr;gap:8px;align-items:center;margin-top:10px}
.alcance>span{font-size:14px;color:var(--piedra)}

/* --- bitácora (§7) --- */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.bit{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--linea)}
.bit .h{font-size:14px;color:var(--piedra);font-variant-numeric:tabular-nums;flex:none;width:42px;padding-top:1px}
.bit .c{flex:1;min-width:0}
.bit .lista{font-size:13px;color:var(--piedra)}
.bit .accion{font-size:15px;overflow-wrap:anywhere}
.bit .nota{font-size:13px;color:var(--piedra);margin-top:3px}
.bit .nota.mal{color:var(--barro)}
.bit .nota.ok{color:var(--agave)}
.bit .tools{margin-top:4px}

@media (prefers-reduced-motion:reduce){.cta.procesando .barra::before,.ghost.procesando .barra::before{animation:none;width:100%}.cta,.ghost,.chip,.text-button{transition:none}}