/* minegocio.css -- el panel real del titular (miNegocio, acento terracota --
   ESTILO_VISUAL_FUNCAR.md: "terracota -- Empresas/miNegocio". Corregido
   2026-10-05, este archivo tenía el acento lima de Personas por error de
   arrastre, nunca actualizado cuando se fijó la paleta por segmento).
   Herramienta de uso diario, mismo criterio que dashboards-demo.html -- CLARO
   por default, oscuro SOLO si el usuario lo eligio con el boton sol/luna (UX-09,
   2026-10-20); el sistema operativo ya no decide (regla de Rodrigo,
   2026-10-20: no hay bloque prefers-color-scheme que active oscuro). La CSP
   de esta pagina (script-src 'self', sin 'unsafe-inline') no permite un
   script inline en <head>: el tema guardado lo aplica tema-inicial.js
   (servido como /minegocio.js?m=tema-inicial, sincrono en <head>) antes del
   primer paint.
   Archivo aparte (no <style> inline): mismo motivo que el resto del sitio.
   Texto/enlaces con acento usan --accent-text (#A3481F en claro, AA sobre
   blanco y sobre el fondo), nunca el acento crudo (UX-10). */

:root{
  --ink:#F3F4EF;
  --surface:#FFFFFF;
  --surface-2:#E8EADF;
  --terracota:#A3481F;
  --terracota-hover:#8A3618;
  --bone:#0B0D0A;
  --muted:#4F5646;
  --line:rgba(11,13,10,.16);
  --danger:#A63A25;
  --ok:#2E7A5C;
  --alerta:#8A5F13;
  --btn-text:#FFFFFF;
  --accent-text:#A3481F;
  --seleccion:#FBE9DE;
  --dur-x:170ms;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  color-scheme:light;
}
/* Oscuro: SOLO lo activa la eleccion explicita del usuario con el boton
   sol/luna (data-tema="oscuro", se recuerda en localStorage, clave
   funcar_tema). Sin eleccion, claro siempre. */
:root[data-tema="oscuro"]{
  --ink:#0B0D0A;
  --surface:#14180F;
  --surface-2:#1C2116;
  --terracota:#D97B4F;
  --terracota-hover:#E8926B;
  --bone:#F3F4EF;
  --muted:#A3A99A;
  --line:rgba(243,244,239,.16);
  --danger:#E08B78;
  --ok:#6FBF9E;
  --alerta:#E0B978;
  --btn-text:#0B0D0A;
  --accent-text:#D97B4F;
  --seleccion:rgba(217,123,79,.10);
}
:root[data-tema="claro"]{color-scheme:light}
:root[data-tema="oscuro"]{color-scheme:dark}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ink);color:var(--bone);
  font-family:'Archivo',system-ui,sans-serif;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
a{color:var(--accent-text)}
::placeholder{color:var(--muted);opacity:1}
button{font-family:inherit}
[hidden]{display:none !important}
@media(prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------------------------------------------------- cabecera */
.cabecera{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
.cabecera-in{
  max-width:720px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.logo{
  font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:17px;
  letter-spacing:-.02em;flex:none;
}
.logo .negocio{color:var(--accent-text)}
.cuenta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.cuenta-nombre{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cuenta-email{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#btn-salir{flex:none}
/* Boton sol/luna (UX-09): cuadrado de 44 px, mismo borde que .btn-secundario. */
.toggle-tema{
  flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--bone);border:1px solid var(--line);border-radius:10px;
  cursor:pointer;padding:0;transition:background var(--dur-x) var(--ease-out);
}
.toggle-tema:hover{background:var(--surface-2)}
.toggle-tema:active{transform:scale(.97)}
.toggle-tema:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.toggle-tema svg{width:20px;height:20px;display:block}

/* ---------------------------------------------------- avisos */
.banner-error, .aviso-sesion{
  max-width:720px;margin:14px auto 0;padding:11px 16px;border-radius:10px;font-size:13.5px;
}
.banner-error{background:rgba(166,58,37,.12);color:var(--danger);border:1px solid var(--danger)}
.banner-error:empty{display:none}
.aviso-sesion{background:rgba(138,95,19,.12);color:var(--alerta);border:1px solid var(--alerta)}
.aviso-sesion a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------- layout general */
.layout{max-width:1080px;margin:0 auto;display:flex;align-items:flex-start;gap:24px}
main.wrap{max-width:720px;margin:0;padding:20px 16px 72px;flex:1 1 auto;min-width:0}

/* ---------------------------------------------------- nav lateral agrupada */
.panel-nav{
  flex:none;width:208px;padding:20px 8px 20px 0;position:sticky;top:53px;
  max-height:calc(100vh - 53px);overflow-y:auto;
}
.nav-grupo + .nav-grupo{margin-top:18px}
.nav-grupo-titulo{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:0 12px;margin-bottom:6px;
}
.panel-nav ul{list-style:none}
.panel-nav .nav-link{
  display:flex;align-items:center;gap:10px;padding:9px 12px 9px 9px;border-radius:9px;
  border-left:3px solid transparent;font-size:14px;font-weight:500;
  color:var(--bone);text-decoration:none;min-height:40px;line-height:22px;
  transition:background var(--dur-x) var(--ease-out),color var(--dur-x) var(--ease-out),
    border-color var(--dur-x) var(--ease-out);
}
.panel-nav .nav-link:hover{background:var(--surface-2)}
.panel-nav .nav-link:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.panel-nav .nav-icono{
  width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Estado activo -- reforzado (pedido de Rodrigo 2026-10-05, Fable vio
   Cobrando.app como referencia): un cambio de color de texto solo no se ve
   claro en pantalla chica -- fondo + borde lateral de acento, misma regla
   en escritorio y mobile, nunca solo color de texto. */
.panel-nav .nav-link[aria-current="page"]{
  background:var(--seleccion);color:var(--accent-text);font-weight:600;
  border-left-color:var(--accent-text);
}

/* ---------------------------------------------------- celular: barra inferior con texto + hoja «Más»
   Fase 4 supermercados (docs/INICIO_POR_SUCURSAL.md). Hasta 860 px el nav lateral deja de ser
   una tira de íconos arriba: la navegación es una barra FIJA ABAJO con 4 o 5 destinos con TEXTO
   (Inicio, Vender, Productos, Stock, Más; minegocio.js muestra solo los que el usuario puede
   ver) y «Más» abre el nav completo como hoja. El estado activo no depende solo del color: borde
   superior de 3 px + fondo. Áreas tactiles de 56 px de alto (WCAG 2.5.5: 44 px). */
:root{--alto-barra:58px}
.barra-inferior{display:none}
@media (max-width:860px){
  .layout{flex-direction:column;gap:0;align-items:stretch}
  .barra-inferior{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:4;
    background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .barra-inferior ul{list-style:none;display:flex}
  .barra-inferior li{flex:1 1 0;min-width:0}
  .barra-link{
    appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;width:100%;min-height:var(--alto-barra);padding:6px 2px 5px;margin:0;
    border:none;border-top:3px solid transparent;border-radius:0;background:transparent;
    color:var(--muted);font:inherit;font-size:12px;font-weight:500;line-height:1.15;
    text-decoration:none;cursor:pointer;
    transition:background var(--dur-x) var(--ease-out),color var(--dur-x) var(--ease-out);
  }
  .barra-link:active{background:var(--surface-2)}
  .barra-link:focus-visible{outline:2px solid var(--accent-text);outline-offset:-5px}
  .barra-link[aria-current="page"], .barra-link[aria-expanded="true"]{
    color:var(--accent-text);border-top-color:var(--accent-text);background:var(--seleccion);font-weight:600;
  }
  /* Con la hoja abierta solo «Más» se ve activo (no dos destinos a la vez). */
  .barra-inferior:has(#barra-mas[aria-expanded="true"]) .barra-link[aria-current="page"]:not(#barra-mas){
    color:var(--muted);border-top-color:transparent;background:transparent;font-weight:500;
  }
  .barra-icono{
    width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .barra-texto{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  main.wrap{padding-bottom:calc(var(--alto-barra) + env(safe-area-inset-bottom,0px) + 28px)}

  /* La hoja «Más»: el nav completo, sobre la barra, con el texto de cada sección. */
  .panel-nav{
    display:none;position:fixed;left:0;right:0;top:auto;
    bottom:calc(var(--alto-barra) + env(safe-area-inset-bottom,0px));z-index:3;
    width:auto;max-width:none;max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;
    padding:10px 16px 16px;background:var(--surface);border-top:1px solid var(--line);
  }
  .panel-nav.abierta{display:block}
  .nav-grupo + .nav-grupo{margin-top:14px}
  .nav-grupo-titulo{padding:0 2px}
  .panel-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .panel-nav .nav-link{min-height:48px;white-space:normal}
  /* Lo que ya está en la barra no se repite en la hoja (ni un grupo que se quedó sin nada). */
  .panel-nav li.en-barra{display:none}
  .nav-grupo:not(:has(li:not(.en-barra):not([hidden]))){display:none}
}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.panel + .panel{margin-top:16px}
.panel-cab{padding:15px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-cab h2{font-size:15px;font-weight:600;letter-spacing:-.01em}
.link-secundario{font-size:13px;font-weight:500;white-space:nowrap}
.panel-body{padding:18px 20px}

/* ---------------------------------------------------- listas */
.lista{list-style:none}
.fila{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.lista .fila:last-child{border-bottom:none}
.fila.compacta{padding:0;border-bottom:none}
.fila .principal{font-size:14px;font-weight:500}
.fila .secundario{font-size:12.5px;color:var(--muted);margin-top:2px}
.fila .val{font-size:14px;font-weight:600;white-space:nowrap}
/* Métricas del dueño (CAPTURA_METRICAS_DUENO_Y_PROVEEDORES.md §1 de funcar-hermes):
   un producto vendido con pérdida (ganancia_minor < 0) se resalta con el mismo
   color de alerta que el resto del panel usa para errores -- nunca un color
   propio inventado para esta pieza. */
.fila .val.negativo{color:var(--danger)}
/* Benchmark de precios (DISENO_IMPORT_CATALOGO_SEPA.md §8.3 de funcar-hermes):
   el detalle se despliega DEBAJO de la fila, no al lado -- `.wrap` deja que
   el tercer hijo (`.benchmark-detalle`, `flex-basis:100%`) caiga a su propia
   linea dentro del mismo flex container, sin una segunda `<li>` ni un modal. */
.fila.wrap{flex-wrap:wrap}
.fila .acciones{display:flex;align-items:center;gap:10px}
.benchmark-detalle{flex:1 0 100%;margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.5}
.benchmark-detalle .error{margin-top:0}
/* Historial de delegación ARCA (estado "Revocada", DISENO_DATOS_FISCALES_TAB_REVOCACION_
   ARCA.md §3): mismo patrón que .benchmark-detalle -- despliega DEBAJO de la fila. */
.fila-datos-fiscales-historial{flex:1 0 100%;margin-top:8px}
.lista-historial-delegacion{list-style:none;margin-top:4px}
.lista-historial-delegacion li{padding:2px 0;font-size:12.5px;color:var(--muted)}

.vacio{padding:22px 0;text-align:center;color:var(--muted);font-size:13px}

/* estado: para activa/inactiva, no es un acento de marca */
.estado{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);flex:none}
.estado .punto{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.estado.ok{color:var(--ok)} .estado.ok .punto{background:var(--ok)}
.estado.danger{color:var(--danger)} .estado.danger .punto{background:var(--danger)}

/* ---------------------------------------------------- formularios */
.campo{margin-bottom:14px;max-width:460px}
.campo:last-of-type{margin-bottom:16px}
.campo label, .campo-etiqueta{display:block;font-weight:500;font-size:13.5px;margin-bottom:7px}
.campo .nota-label{margin-top:12px}
.campo input, .campo select{
  width:100%;min-height:44px;font:inherit;font-size:15px;color:var(--bone);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;padding:9px 13px;
  transition:border-color var(--dur-x) var(--ease-out);
}
.campo input:focus-visible, .campo select:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text)}

/* Botón de mostrar/ocultar contraseña, ojito clásico -- pedido real de Rodrigo
   (2026-10-15): cualquier campo de login/alta/restablecer tiene que tenerlo. */
.campo-pass{position:relative}
.campo-pass input{padding-right:48px}
.btn-ver-pass{
  position:absolute;right:0;top:0;bottom:0;margin:auto 0;height:44px;width:44px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--muted);cursor:pointer;padding:0;
}
.btn-ver-pass svg{width:18px;height:18px;display:block}
.btn-ver-pass:hover{color:var(--accent-text)}
.btn-ver-pass:focus-visible{outline:1px solid var(--accent-text);outline-offset:1px}
.btn-ver-pass[aria-pressed="true"]{color:var(--accent-text)}

.form-alta{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.form-alta .campo{margin-bottom:0;flex:1 1 220px}
.form-alta .btn{flex:none}

.form-perfil{display:flex;flex-direction:column}
/* Mismo problema que .form-alta de arriba: sin esto el boton (sin .campo)
   se estira al ancho del contenedor flex en vez de quedar al ancho de los
   campos (max-width:460px), bastante mas angosto. */
.form-perfil .btn{flex:none}
.nota{color:var(--muted);font-size:12.5px;margin-top:6px}

/* ---------------------------------------------------- perfil: logo */
.logo-fila{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.logo-previa{
  width:64px;height:64px;flex:none;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--line);background-size:cover;background-position:center;
}
/* Sin foto cargada (auditoría de UX/UI 2026-10-13): antes era un cuadrado
   gris igual a un placeholder roto, sin forma de distinguir los dos casos.
   Borde punteado + un ícono de imagen vacío (SVG inline, sin asset nuevo)
   en vez de una foto real -- mismo --muted que ya usa el resto del panel
   para texto secundario. */
.logo-previa.vacia{
  border-style:dashed;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F5646' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:28px;
}
.logo-controles{display:flex;flex-direction:column;align-items:flex-start;gap:0}

.form-stock{display:flex;flex-direction:column}
.campo-cantidad{max-width:160px}
/* Precio de lista: editor en linea de cada fila de Stock y producto sin precio en el PoS. */
.precio-editor{flex:1 0 100%;max-width:none;margin:8px 0 0}
.precio-editor input{max-width:160px;margin-bottom:10px}
.fila.sin-precio{opacity:.75;cursor:not-allowed}

/* ---------------------------------------------------- catálogo: variantes y combos
   docs/23-BENCHMARK-COBRANDO-APP.md §1.2/4.2. Vive dentro de la sección Stock
   (misma beta), separado del formulario de movimiento por un borde superior. */
.catalogo-variantes{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.catalogo-variantes h3{font-size:15px;font-weight:600;margin-top:22px}
.catalogo-variantes h3:first-child{margin-top:0}

/* Paleta curada de acento del storefront (DISENO_ACENTO_PERSONALIZADO_
   COMERCIO.md de funcar-hermes) -- clases con color fijo, nunca un atributo
   style="" inline (CSP de esta pagina: style-src 'self' sin 'unsafe-inline',
   ver CABECERAS_MINEGOCIO en app/api/frontend_web.py). Los 8 hex son los
   mismos que `COLORES_ACENTO_VALIDOS` de app/api/titular.py. */
.paleta-acento{display:flex;flex-wrap:wrap;gap:10px}
.swatch-acento{
  width:40px;height:40px;border-radius:50%;border:2px solid var(--line);cursor:pointer;
  padding:0;transition:border-color var(--dur-x) var(--ease-out),transform var(--dur-x) var(--ease-out);
}
.swatch-acento[aria-pressed="true"]{border-color:var(--bone);transform:scale(1.08)}
.swatch-acento:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.swatch-terracota{background:#C15E31}
.swatch-azul-petroleo{background:#1D6E79}
.swatch-azul-marino{background:#2A4B8D}
.swatch-violeta{background:#6B4FA0}
.swatch-magenta-vino{background:#8C2F5C}
.swatch-verde-oliva{background:#5B6B2F}
.swatch-pizarra{background:#45506B}
.swatch-marron-cafe{background:#6B4226}

/* ---------------------------------------------------- miniatura del storefront (Apariencia)
   `minegocio.js::pintarVistaPreviaMiTienda()`, despacho 2026-10-14. Hex fijos
   copiados del `:root` en MODO CLARO de tienda.css (NO las variables de este
   archivo, que sí cambian con el tema elegido) -- el storefront real
   siempre arranca claro, sin selector manual (ver tienda.css), así que la
   miniatura tiene que verse igual sin importar si el panel de miNegocio está
   en oscuro. `--mock-acento` lo fija JS por comercio (color_primario elegido
   arriba), vía CSSOM -- nunca un atributo style="" (CSP: style-src 'self'
   sin 'unsafe-inline', ver CABECERAS_MINEGOCIO en app/api/frontend_web.py). */
.mitienda-mock{
  --mock-superficie:#FFFFFF;--mock-superficie-2:#E8EADF;--mock-hueso:#0B0D0A;
  --mock-tenue:#4F5646;--mock-linea:rgba(11,13,10,.16);--mock-acento:#C15E31;
  max-width:300px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--mock-superficie);font-family:'Archivo',system-ui,sans-serif;
}
.mitienda-mock-cab{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:var(--mock-superficie);border-bottom:1px solid var(--mock-linea);
}
.mitienda-mock-logo{
  flex:none;width:20px;height:20px;border-radius:6px;background:var(--mock-acento);
  color:#fff;font-weight:700;font-size:11px;line-height:20px;text-align:center;
}
.mitienda-mock-nombre{
  flex:1 1 auto;min-width:0;font-weight:700;font-size:11.5px;color:var(--mock-hueso);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mitienda-mock-banner{
  margin:8px;background:var(--mock-superficie-2);border-left:3px solid var(--mock-acento);
  border-radius:6px;padding:6px 8px;font-size:10.5px;font-weight:600;color:var(--mock-hueso);
}
.mitienda-mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px}
.mitienda-mock-tarjeta{
  background:var(--mock-superficie);border:1px solid var(--mock-linea);border-radius:8px;
  overflow:hidden;display:flex;flex-direction:column;
}
.mitienda-mock-foto{aspect-ratio:1;background:var(--mock-superficie-2);background-size:cover;background-position:center}
/* Tema "Tienda grande" (DISENO_MITIENDA_ONLINE_TEMAS.md de funcar-hermes
   §2.2/§2.4): foto más grande (4:3), nombre más chico, sin descripción --
   mismo criterio exacto que `body[data-tema="tienda_grande"]` en tienda.css. */
.mitienda-mock-grande .mitienda-mock-foto{aspect-ratio:4/3}
.mitienda-mock-prod-nombre{
  padding:4px 5px 0;font-size:9.5px;font-weight:600;color:var(--mock-hueso);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mitienda-mock-prod-precio{padding:2px 5px 5px;font-size:10px;font-weight:700;color:var(--mock-hueso);margin-top:auto}
.mitienda-mock-prod-precio.sin-precio{color:var(--mock-tenue);font-weight:500}
.mitienda-mock-vacio{padding:18px 10px;text-align:center;font-size:11.5px;color:var(--mock-tenue)}
.mitienda-mock-resumen-texto{color:var(--muted);font-size:12.5px;margin-top:8px}

.segmentado{display:flex;flex-wrap:wrap;gap:8px}
.segmentado button{
  flex:1 1 90px;background:var(--surface-2);border:1px solid var(--line);color:var(--bone);
  border-radius:9px;padding:10px 14px;font-size:13.5px;font-weight:500;cursor:pointer;min-height:44px;
  transition:border-color var(--dur-x) var(--ease-out),background var(--dur-x) var(--ease-out);
}
.segmentado button[aria-pressed="true"]{border-color:var(--accent-text);background:var(--seleccion);color:var(--accent-text);font-weight:600}
.segmentado button:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

.error{color:var(--danger);font-size:13.5px;font-weight:500;margin-top:8px}
.error:empty{display:none}
.exito{color:var(--ok);font-size:13.5px;font-weight:500;margin-top:8px}
.exito:empty{display:none}

/* Aviso fiscal persistente (Impuestos/IIBB): mismo color/semántica que
   `.aviso-sesion` (var(--alerta)) pero SIEMPRE visible, nunca un banner que
   se oculta -- es el límite de responsabilidad legal del producto, no un
   error transitorio de sesión. */
.aviso-fiscal{
  margin-top:14px;padding:11px 16px;border-radius:10px;font-size:13.5px;
  background:rgba(138,95,19,.12);color:var(--alerta);border:1px solid var(--alerta);
}

/* ---------------------------------------------------- botones */
.btn{
  appearance:none;border:none;border-radius:10px;padding:0 18px;font-size:14px;
  font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;min-height:44px;transition:transform 100ms var(--ease-out),background var(--dur-x) var(--ease-out),opacity var(--dur-x) var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.btn[disabled]{opacity:.6;cursor:progress}
/* Gateo por delegación ARCA (DISENO_DATOS_FISCALES_TAB_REVOCACION_ARCA.md §3.2): mismo
   opacity que el disabled de "acción en curso" de arriba, pero cursor distinto -- esto es
   permanente hasta delegar, no una espera momentánea. */
.btn[disabled].btn-gateado{cursor:not-allowed}
.nota-gateado{color:var(--alerta)}
.btn-primario{background:var(--terracota);color:var(--btn-text)}
.btn-primario:hover{background:var(--terracota-hover)}
.btn-secundario{background:transparent;color:var(--bone);border:1px solid var(--line)}
.btn-secundario:hover{background:var(--surface-2)}

/* ---------------------------------------------------- dialogo de confirmacion (reusable)
   <dialog> nativo (pedido de Rodrigo 2026-10-05 + Fable): panel de uso diario,
   por eso SIN elevacion tonal ni box-shadow (ESTILO_VISUAL_FUNCAR.md -- esa
   jerarquia esta reservada a landing/marketing y a Empresas con submenus,
   prohibida acá) -- misma superficie plana que el resto del panel, un borde
   nada mas. */
.dialogo-confirmar{
  /* El reset global `*{margin:0}` de arriba pisa el `margin:auto` que el
     navegador le da por default a <dialog> para centrarlo -- hay que
     restituirlo acá a mano, si no el diálogo queda pegado arriba a la
     izquierda del viewport en vez de centrado. */
  margin:auto;
  border:1px solid var(--line);border-radius:14px;padding:0;box-shadow:none;
  background:var(--surface);color:var(--bone);width:min(360px,calc(100vw - 32px));
}
.dialogo-confirmar::backdrop{background:rgba(11,13,10,.45)}
:root[data-tema="oscuro"] .dialogo-confirmar::backdrop{background:rgba(0,0,0,.6)}
/* mismo ícono de "sin foto", trazo claro para que se lea sobre fondo oscuro
   (un data-URI no puede leer var(--muted), se duplica con el hex de dark) */
:root[data-tema="oscuro"] .logo-previa.vacia{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A99A' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}
.dialogo-confirmar-in{padding:20px}
.dialogo-confirmar-in h3{font-size:16px;font-weight:600}
.dialogo-confirmar-resumen{margin:14px 0 18px}
.dialogo-confirmar-resumen dt{font-size:12.5px;color:var(--muted);margin-top:10px}
.dialogo-confirmar-resumen dt:first-child{margin-top:0}
.dialogo-confirmar-resumen dd{font-size:16px;font-weight:600;margin-top:2px}
.dialogo-confirmar-acciones{display:flex;gap:10px}
.dialogo-confirmar-acciones .btn{flex:1 1 auto}

/* ---------------------------------------------------- calendario de turnos */
.campo-chico{max-width:130px}

.estado.alerta{color:var(--alerta)} .estado.alerta .punto{background:var(--alerta)}

.cal-semana-nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:4px 0 16px;
}
.cal-semana-label{font-size:13.5px;font-weight:600}

.cal-dia{border-top:1px solid var(--line);padding:14px 0}
.cal-dia:first-child{border-top:none;padding-top:0}
.cal-dia-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cal-dia-fecha{font-size:13.5px;font-weight:600}
.cal-dia-horario{font-size:12.5px;color:var(--muted)}
.cal-dia-horario.cerrado{color:var(--danger)}

.cal-reservas{list-style:none;margin-top:8px}
.cal-reserva{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 0;border-top:1px solid var(--line);
}
.cal-reservas .cal-reserva:first-child{border-top:none}
.cal-reserva-info{display:flex;align-items:center;gap:12px;min-width:0}
.cal-reserva-horario{
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;flex:none;width:98px;
}
.cal-reserva-datos{min-width:0}
.cal-reserva-cliente{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-reserva-precio{font-size:12.5px;color:var(--muted);margin-top:2px}
.cal-reserva.cancelada .cal-reserva-cliente{color:var(--muted);text-decoration:line-through}
.cal-reserva-derecha{display:flex;align-items:center;gap:12px;flex:none}
.cal-reserva-acciones{display:flex;gap:8px;flex:none}
.cal-reserva-acciones .btn{padding:0 14px;font-size:13px}

.cal-vacio{padding:4px 0 2px;color:var(--muted);font-size:13px}

details.cal-form-detalle{border-top:1px solid var(--line);padding-top:14px;margin-top:16px}
details.cal-form-detalle summary{
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--accent-text);
  list-style:none;display:flex;align-items:center;gap:7px;min-height:32px;
}
details.cal-form-detalle summary::-webkit-details-marker{display:none}
details.cal-form-detalle summary::before{content:'+';font-size:17px;line-height:1}
details.cal-form-detalle[open] summary::before{content:'–'}
details.cal-form-detalle summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
details.cal-form-detalle .form-alta{margin-top:14px}

.campo-abierto{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;padding:0}
.campo-abierto input{width:18px;height:18px;flex:none;accent-color:var(--accent-text)}

/* ---------------------------------------------------- reportes de ventas */
.form-filtro-reportes{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.form-filtro-reportes .campo{margin-bottom:0}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.kpi{
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;
}
.kpi-valor{font-size:19px;font-weight:700;letter-spacing:-.01em}
.kpi-etiqueta{font-size:12px;color:var(--muted)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs .tab{
  background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
  font-size:13.5px;font-weight:500;padding:10px 12px;cursor:pointer;white-space:nowrap;min-height:40px;
}
.tabs .tab[aria-selected="true"]{color:var(--accent-text);border-bottom-color:var(--accent-text);font-weight:600}
.tabs .tab:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

/* ------ sub-navegación vertical a la derecha (PoS, Reportes) -------
   Pedido de Rodrigo 2026-10-05: las dos .tabs horizontales (no la nav
   principal, esa ya es vertical) pasan a una columna a la derecha del
   contenido -- mismo lenguaje visual que .panel-nav/.nav-link (fondo en
   hover, resaltado en el activo) en vez de inventar un esquema de color
   nuevo. El orden en el HTML sigue siendo tabs-primero/contenido-después
   (tablist antes del tabpanel es el orden de lectura correcto para un
   lector de pantalla); `order` es lo que la mueve visualmente a la
   derecha en escritorio sin tocar el DOM. */
.tabs-layout{display:flex;gap:20px;align-items:flex-start}
.tabs-layout .tabs-contenido{flex:1 1 auto;min-width:0;order:1}
.tabs-layout .tabs.tabs-vertical{
  flex:none;width:150px;order:2;flex-direction:column;gap:2px;
  border-bottom:none;margin-bottom:0;overflow-x:visible;
}
.tabs.tabs-vertical .tab{
  display:block;width:100%;text-align:left;white-space:normal;
  border-bottom:none;border-radius:9px;padding:9px 12px;
}
.tabs.tabs-vertical .tab:hover{background:var(--surface-2)}
.tabs.tabs-vertical .tab[aria-selected="true"]{
  background:var(--seleccion);color:var(--accent-text);border-bottom-color:transparent;
}

/* Mismo criterio de breakpoint que .panel-nav (línea ~113): por debajo de
   un ancho chico, una columna angosta fija a la derecha le come demasiado
   espacio al contenido -- vuelve a ser una fila horizontal arriba, como
   antes. Breakpoint propio (600px, entre el de .kpis y el de .panel-nav)
   porque .tabs-layout vive adentro de main.wrap, ya angosto por su cuenta
   antes de que .panel-nav colapse a los 860px. */
@media (max-width:600px){
  .tabs-layout{flex-direction:column}
  .tabs-layout .tabs-contenido{order:2}
  .tabs-layout .tabs.tabs-vertical{
    order:1;width:100%;flex-direction:row;gap:4px;overflow-x:auto;
    border-bottom:1px solid var(--line);margin-bottom:16px;
  }
  .tabs.tabs-vertical .tab{display:inline-block;width:auto;white-space:nowrap;border-bottom:2px solid transparent}
  .tabs.tabs-vertical .tab[aria-selected="true"]{background:none;border-bottom-color:var(--accent-text)}
}

.tab-panel h3{font-size:13.5px;font-weight:600;margin:14px 0 6px}
.tab-panel h3:first-child{margin-top:0}
/* Evolución semanal (despacho "gráficos de evolución de gastos", 2026-10-12):
   altura fija para que Chart.js (responsive:true, maintainAspectRatio:false) tenga
   un contenedor del que tomar medida -- sin esto el canvas crece sin límite. */
.grafico-evolucion{position:relative;height:220px;margin:10px 0}
.ranking{list-style:none;counter-reset:ranking}
.ranking li{counter-increment:ranking}
.ranking li .principal::before{content:counter(ranking) '. ';color:var(--muted)}

@media (max-width:520px){
  .kpis{grid-template-columns:repeat(2,1fr)}
}

/* ---------------------------------------------------- punto de venta (PoS) */
.carrito-cantidad{
  width:64px;min-height:36px;font:inherit;font-size:13.5px;color:var(--bone);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:8px;
  padding:4px 8px;margin-top:4px;
}
.carrito-derecha{display:flex;align-items:center;gap:10px;flex:none}
.carrito-derecha .btn{padding:0 12px;font-size:13px}
.pos-total{margin:6px 0 16px;padding-top:10px;border-top:1px solid var(--line)}
.pos-total .secundario{font-weight:600;color:var(--bone)}
.pos-total .val{font-size:17px}
.form-caja{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.form-caja .campo{margin-bottom:0}
.pos-cheque-reintento{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.pos-cheque-reintento[hidden]{display:none}

/* ---------------------------------------------------- whatsapp */
.fila-whatsapp{margin-bottom:16px}

/* ---------------------------------------------------- mi cuenta (suscripcion a facturador) */
.mi-cuenta-plan{margin-bottom:4px}
.fila-mi-cuenta-pago .acciones{display:flex;align-items:center;gap:10px;flex:none}
.fila-mi-cuenta-pago .acciones .btn{padding:0 14px;font-size:13px;white-space:nowrap}

/* ---------------------------------------------------- marketplace (vidriera online) */
.fila-marketplace-link{margin-bottom:4px}
.fila-marketplace-link .val{font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
.form-marketplace-config{display:flex;flex-direction:column}
.form-marketplace-config .campo-abierto{margin-bottom:16px}
/* Los <h3> de miTIENDA online (Banner destacado/Redes sociales/Ícono por
   categoría/Vista previa) quedaban pegados al botón "Guardar" de la sección
   anterior -- el reset global (*{margin:0}) les saca el margen por default
   del navegador y nadie lo reponía. */
#mitienda-bloque-activo h3{margin-top:32px;margin-bottom:12px}
.fila-marketplace-producto{display:block;padding:0;border-bottom:none}
.fila-marketplace-producto:not(:last-child){border-bottom:1px solid var(--line)}
.mp-producto-detalles{width:100%}
/* Fila compacta por default (DISENO_CATALOGO_COMPACTO.md): el marcador
   nativo de <summary> hace de icono de expandir, no se agrega uno aparte. */
.mp-producto-resumen{
  display:flex;align-items:center;gap:12px;padding:10px 4px;cursor:pointer;
  list-style-position:outside;
}
.mp-producto-resumen::-webkit-details-marker{margin-right:2px}
.mp-producto-resumen > div{flex:1 1 auto;min-width:0}
.mp-producto-foto{width:36px;height:36px;border-radius:9px;flex:none}
.mp-producto-publicado-resumen{flex:none;white-space:nowrap}
.mp-producto-expandido{
  display:flex;flex-direction:column;gap:10px;padding:4px 4px 16px 28px;
}
.mp-producto-foto-btn{flex:none;font-size:13px;padding:0 12px;min-height:36px;align-self:flex-start}
.mp-producto-descripcion{
  width:100%;min-height:56px;font:inherit;font-size:13.5px;color:var(--bone);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;padding:9px 13px;
  resize:vertical;
}
.mp-producto-descripcion:focus-visible{
  outline:2px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text);
}

/* Catalogo: categoria/subcategoria/marca/modelo + atributos + fotos
   adicionales (DISENO_CATALOGO_FOTOS_Y_ATRIBUTOS.md de funcar-hermes). */
.mp-producto-catalogo{display:flex;flex-wrap:wrap;gap:8px}
.mp-producto-catalogo input{
  flex:1 1 130px;min-width:0;font:inherit;font-size:13.5px;color:var(--bone);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;
  padding:8px 12px;min-height:38px;
}
.mp-producto-catalogo input:focus-visible{
  outline:2px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text);
}

.mp-atributos{display:flex;flex-direction:column;gap:6px}
.mp-atributos-fila{display:flex;gap:6px;align-items:center}
.mp-atributos-fila input{
  flex:1 1 0;min-width:0;font:inherit;font-size:13px;color:var(--bone);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:9px;
  padding:7px 10px;min-height:36px;
}
.mp-atributos-fila input:focus-visible{
  outline:2px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text);
}
.mp-atributo-quitar{flex:none;min-height:36px;padding:0 10px;font-size:12.5px}
.mp-atributo-agregar{align-self:flex-start;font-size:12.5px;padding:0 12px;min-height:34px}

.mp-producto-fotos-adicionales{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mp-foto-adicional{position:relative;width:44px;height:44px;flex:none}
.mp-foto-adicional .logo-previa{width:44px;height:44px;border-radius:10px}
.mp-foto-adicional-quitar{
  position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:100px;
  border:1px solid var(--line);background:var(--surface);color:var(--bone);font-size:12px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
}
.mp-foto-adicional-agregar{flex:none;font-size:13px;padding:0 12px;min-height:36px}

.fila-marketplace-pedido .acciones{display:flex;align-items:center;gap:10px;flex:none}

/* ---------------------------------------------------- equipo: alta y provisoria */
.form-equipo{display:flex;flex-direction:column;margin-top:16px}

/* ---------------------------------------------------- equipo: colaboradores de PoS */
.subseccion{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}
.subseccion h3{font-size:14px;font-weight:600;margin-bottom:6px}
.subseccion .nota{margin-top:0;margin-bottom:12px}
.form-colaborador-pos{display:flex;flex-direction:column;margin-top:12px}
.fila-colaborador-pos .acciones{display:flex;gap:8px;flex:none}
.fila-colaborador-pos .acciones .btn{padding:0 14px;font-size:13px}

.campo-permisos{border:none}
.campo-permisos legend{padding:0}

/* ---------------------------------------------------- equipo: caja chica (docs/18 §11) */
.form-caja-chica{display:flex;flex-direction:column;margin-top:12px}
.fila-caja-chica{flex-wrap:wrap}
.fila-caja-chica .acciones{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap}
.fila-caja-chica .acciones .btn{padding:0 14px;font-size:13px;white-space:nowrap}
.fila-caja-chica details{flex:1 1 100%;margin-top:8px}
.fila-caja-chica summary{font-size:12.5px;color:var(--muted);cursor:pointer}

/* ---------------------------------------------------- cuentas corrientes: delegación de cobro */
.fila-cuenta-corriente{flex-wrap:wrap}
.fila-cuenta-corriente .acciones{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap}
.fila-cuenta-corriente .acciones select{width:auto;min-height:36px;padding:0 10px;font-size:13px}
.fila-cuenta-corriente .acciones .btn{padding:0 14px;font-size:13px;white-space:nowrap}
.fila-cuenta-corriente details{flex:1 1 100%;margin-top:8px}
.fila-cuenta-corriente summary{font-size:12.5px;color:var(--muted);cursor:pointer}
.historial-derivaciones{list-style:none;margin-top:8px;padding-left:14px;border-left:1px solid var(--line)}
.historial-derivaciones li{font-size:12.5px;color:var(--muted);padding:4px 0}
.historial-derivaciones .vacio{padding:4px 0;text-align:left}

/* ---------------------------------------------------- gastos (panel del dueño) */
/* DISENO_PANEL_GASTOS_EMPLEADOS.md de funcar-hermes, despacho 2026-10-13: el
   gasto editado muestra, debajo, cómo estaba ANTES de la última corrección --
   tenue e itálica a propósito, para que se note que es historial y no el
   dato vigente (que ya está arriba, en `.principal`/`.val`). */
.fila-gasto{flex-wrap:wrap}
.fila-gasto .leyenda-anterior{
  flex:1 1 100%;margin-top:6px;font-size:12px;font-style:italic;color:var(--muted);
}
.permiso{
  display:flex;align-items:center;gap:9px;padding:9px 0;font-size:14px;cursor:pointer;
}
.permiso input{width:18px;height:18px;flex:none;accent-color:var(--accent-text)}
/* Casilla dentro de un .campo (ej. "Marco fino alrededor", UX-11): sin esto
   `.campo input` (ancho completo, 44 px de alto, fondo y borde de campo de
   texto) le gana a `.permiso input` y la casilla se ve como un cuadrado enorme. */
.campo .permiso{display:flex;margin-bottom:0;min-height:44px;padding:0;font-size:14px;font-weight:500}
.campo .permiso input{width:18px;min-height:0;height:18px;padding:0;margin:0;background:none;border-radius:4px}

.consentimiento{
  display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted);
  cursor:pointer;line-height:1.45;
}
.consentimiento input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--accent-text)}

.provisoria{
  background:var(--seleccion);border:1px solid var(--accent-text);border-radius:12px;
  padding:16px 18px;margin-bottom:16px;
}
.provisoria-titulo{font-size:13.5px;font-weight:600;margin-bottom:8px}
.provisoria-valor{
  font-size:19px;font-weight:700;letter-spacing:.02em;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px;
  word-break:break-all;
}
.provisoria-aviso{font-size:12.5px;color:var(--muted);margin-bottom:12px}

@media (max-width:520px){
  .cabecera-in{padding:10px 16px}
  main.wrap{padding:16px 12px 64px}
  .panel-body{padding:16px}
  .form-alta{flex-direction:column;align-items:stretch}
  .form-alta .btn{width:100%}
  .campo-chico{max-width:none}
  .cal-reserva-derecha{width:100%;justify-content:space-between}
}

/* ---------------------------------------------------- areas tactiles en movil (UX-18)
   44 px minimo (WCAG 2.5.5 / HIG) en lo que se toca con el pulgar: navegacion,
   pestanas de PoS y Reportes y cantidad del carrito. Solo en pantallas
   angostas: en escritorio se mantiene la densidad actual. */
@media (max-width:860px){
  .panel-nav .nav-link{min-height:44px;min-width:44px}
  .tabs .tab{min-height:44px}
  .carrito-cantidad{min-height:44px}
}

/* ---------------------------------------------------- Productos (catálogo paginado)
   docs/CATALOGO_PAGINADO.md. Tabla en pantallas anchas, tarjetas en celular
   (catalogo.js decide cuál dibujar con matchMedia, mismo corte que abajo).
   Plano: bordes de 1 px, sin sombras ni degradados (ESTILO_VISUAL_FUNCAR.md). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
main.wrap:has(#s-catalogo:not([hidden])){max-width:860px}
.cat-total{font-size:13px;color:var(--muted);margin-bottom:10px}
.cat-total:empty{display:none}
.cat-buscador{display:flex;gap:10px;margin-bottom:14px}
.cat-buscador input{
  flex:1 1 auto;min-width:0;min-height:44px;font:inherit;font-size:15px;color:var(--bone);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;padding:9px 13px;
}
.cat-buscador input:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text)}
.cat-buscador .btn{flex:none}
.cat-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.cat-barra .segmentado{flex:0 1 260px}
.cat-filtros{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 14px;align-items:end}
.cat-filtros .campo{max-width:none;margin-bottom:12px}
.cat-tabla-caja{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.cat-tabla{width:100%;border-collapse:collapse;font-size:14px}
.cat-tabla th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.cat-tabla td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cat-tabla tbody tr:last-child td{border-bottom:none}
.cat-tabla th.num, .cat-tabla td.num{text-align:right;white-space:nowrap}
.cat-tabla .negativo{color:var(--danger)}
.cat-producto .principal{font-size:14px;font-weight:500}
.cat-producto .secundario{font-size:12.5px;color:var(--muted);margin-top:2px}
.cat-alertas{display:flex;flex-wrap:wrap;gap:4px 12px}
.cat-tarjetas{list-style:none;display:flex;flex-direction:column;gap:10px}
.cat-tarjeta{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface)}
.cat-cifras{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-top:6px}
.cat-cifra{font-size:17px;font-weight:600}
.cat-cifra.negativo{color:var(--danger)}
.cat-tarjeta .secundario{font-size:12.5px;color:var(--muted)}
.cat-tarjeta .cat-alertas{margin-top:6px}
.estado.alerta{color:var(--alerta)} .estado.alerta .punto{background:var(--alerta)}
.cat-paginas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.cat-rango{font-size:13px;color:var(--muted);text-align:center}
@media (max-width:640px){
  .cat-buscador{flex-direction:column}
  .cat-buscador .btn{width:100%}
  .cat-barra .btn, .cat-barra .segmentado{flex:1 1 100%}
  .cat-filtros{grid-template-columns:1fr 1fr}
  .cat-paginas .btn{flex:1 1 0}
}

/* ---------------------------------------------------- disponibilidad provisoria y remito
   (docs/DISENO_STOCK_PROVISORIO_REMITO.md §5). Un solo acento (--accent-text), superficies
   planas, sin sombras ni degradados. La marca de "lote viejo" lleva TEXTO ademas del color. */
.prov{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.prov > .segmentado{margin-bottom:16px}
.prov-vista > .nota{margin-bottom:12px}
.prov h3{font-size:13.5px;font-weight:600;margin:6px 0 6px}
.prov-tarjeta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 16px;margin-bottom:16px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
}
.prov-cifra{font-size:32px;font-weight:600;line-height:1.1;color:var(--bone)}
.prov-tarjeta-texto{flex:1 1 180px;min-width:0}
.prov-fila-buscar{display:flex;gap:8px;align-items:stretch}
.prov-fila-buscar input{flex:1 1 auto;min-width:0}
.prov-fila-buscar .btn{flex:none}
.prov-agregar{display:flex;flex-wrap:wrap;gap:0 14px;align-items:flex-end}
.prov-agregar .campo{flex:1 1 150px}
.prov-agregar .campo-cantidad{flex:0 1 140px}
.prov-agregar > .btn{margin-bottom:14px}
.prov-filtros{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:flex-end;margin-bottom:8px}
.prov-filtros .campo{margin-bottom:8px}
.prov-filtros .campo-abierto{min-height:44px;margin-bottom:8px}
.prov-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.prov .fila .acciones{flex-wrap:wrap;justify-content:flex-end}
.prov .fila .secundario.prov-dif{color:var(--bone)}
.prov-viejo{color:var(--alerta);font-weight:600}
.prov-frenado{color:var(--danger);font-weight:600}
.prov-detalle{flex:1 0 100%;margin-top:8px;font-size:13px}
.prov-detalle li{padding:2px 0}
#prov-remito-resultado:focus{outline:2px solid var(--accent-text);outline-offset:4px}
.prov-resultado-linea .secundario{margin-top:1px}
.prov-vendible{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.prov-vendible .secundario{margin-top:0}
@media (max-width:520px){
  .prov-tarjeta{flex-direction:column;align-items:flex-start}
  .prov-tarjeta .btn{width:100%}
  .prov-tarjeta-texto{flex:0 0 auto}
  #prov-remito-confirmar,#prov-alta-guardar{width:100%}
  .prov .fila .acciones.prov-linea-acciones{justify-content:space-between;align-items:center}
  .prov .fila .acciones.prov-linea-acciones .btn{flex:0 0 auto;min-width:120px}
  .prov-agregar .campo,.prov-agregar .campo-cantidad{flex:1 1 100%;max-width:none}
  .prov-agregar > .btn{width:100%}
  .prov .fila{flex-wrap:wrap}
  .prov .fila .acciones{flex:1 0 100%;justify-content:flex-start}
  .prov .fila .acciones .btn{flex:1 1 auto}
  .prov-acciones .btn{width:100%}
}

/* Caja: el 409 de stock (docs/DISENO_STOCK_PROVISORIO_REMITO.md §5.6) */
.pos-faltantes{margin-top:10px}
.pos-faltantes .fila{flex-wrap:wrap}
.pos-faltantes .fila .acciones{flex-wrap:wrap}
@media (max-width:520px){
  .pos-faltantes .fila .acciones{flex:1 0 100%;flex-direction:column;align-items:stretch}
}

/* ---------------------------------------------------- Inicio por sucursal
   docs/INICIO_POR_SUCURSAL.md. Una tarjeta por sucursal con hechos de la base; plano, bordes de
   1 px, sin sombras ni degradados (ESTILO_VISUAL_FUNCAR.md). Importes en mono; el estado va en
   TEXTO (Operando / Sin cajas abiertas), no solo en color. */
main.wrap:has(#s-inicio:not([hidden])){max-width:860px}
.ini-resumen{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ini-fecha{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ini-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-top:8px}
.ini-total .ini-etiqueta{flex:1 0 100%}
.ini-etiqueta{font-size:12.5px;color:var(--muted)}
.ini-importe{font-size:24px;font-weight:600;line-height:1.2}
.ini-total-grande .ini-importe{font-size:34px;font-weight:700}
.ini-sub{font-size:12.5px;color:var(--muted)}
.ini-dolar{font-size:13px;color:var(--muted);margin-top:10px}
.ini-tarjetas{
  list-style:none;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
}
.ini-tarjetas.ini-una{grid-template-columns:minmax(0,520px)}
.ini-tarjeta{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--surface)}
.ini-tarjeta-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.ini-nombre{font-size:16px;font-weight:600;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere}
.ini-datos{margin-top:8px}
.ini-dato{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;
  padding:10px 0;border-top:1px solid var(--line);
}
.ini-valor{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:2px 10px;
  font-size:15px;font-weight:600;text-align:right;
}
.ini-alerta{color:var(--alerta)}
.ini-ok{color:var(--ok)}
.ini-sin-datos{color:var(--muted);font-weight:500}
.ini-ver{min-height:44px;padding:0 14px;font-size:13px}
#ini-consultado:empty{display:none}

/* ---------------------------------------------------- Selector de producto con búsqueda (Stock)
   Reemplaza a los <select> con una opción por producto (NU-04): campo de texto + lista de
   hasta 20 resultados del servidor. Plano: borde de 1 px, sin sombras ni degradados. */
.selector-producto{position:relative}
.selector-producto input{width:100%}
.selector-lista{
  list-style:none;margin:4px 0 0;padding:0;position:absolute;left:0;right:0;z-index:20;
  max-height:280px;overflow-y:auto;background:var(--surface);color:var(--bone);
  border:1px solid var(--line);border-radius:8px;
}
.selector-lista[hidden]{display:none}
.selector-lista li{
  padding:9px 12px;min-height:44px;cursor:pointer;border-bottom:1px solid var(--line);
}
.selector-lista li:last-child{border-bottom:none}
.selector-lista li[aria-selected="true"]{background:var(--seleccion);outline:2px solid var(--accent-text);outline-offset:-2px}
.selector-lista li.sin-resultados{cursor:default;color:var(--muted)}
.selector-lista .principal{font-size:14px;font-weight:500}
.selector-lista .secundario{font-size:12.5px;color:var(--muted);margin-top:2px}
#stock-mas{margin-top:12px}