/* workspace.css — La cara de escritorio de MATRIZ (docs/diseno/ux-app-v01.md, seccion 2B).
   Redencion del error real: en desktop la app se veia como una app de celular estirada
   (barra de mano de lado a lado, columna angosta centrada). Esto es un ERP de escritorio de
   verdad: sidebar persistente + topbar + grid de 12 columnas. Mismo lenguaje visual
   (Fraunces/Inter, coral, papel/noche, dataviz protagonista): lo que cambia es la ESTRUCTURA.

   Regla de oro de este archivo: TODO vive detras de @media (min-width: 1000px). Debajo de
   1000px no se toca un pixel de la cara movil (2.2 a 2.8): es L1, no se negocia. */

/* Paneles que SOLO existen en la cara de escritorio (el tablero de Riesgo, 2B.6): ocultos por
   defecto para que la cara movil (que los ignora del todo) ni los reserve en el flujo. */
.solo-escritorio{ display:none; }

/* Bug real encontrado (Fase 3.0, validando en navegador de verdad, no pre-existente de esta
   vuelta pero nunca visto en pantalla): #sidebar/.sidebar no tenia NINGUNA regla fuera de
   @media(min-width:1000px) (todo el resto de este archivo, incluida su definicion base de
   display:flex, vive ahi adentro). Sin esto, por debajo de 1000px el <aside class="sidebar">
   (que shell.js llena siempre, sin importar el ancho) se pintaba con el default del navegador:
   bloque suelto, sin flex, con los <svg> de los iconos a su tamano intrinseco (~300x150px cada
   uno) tapando toda la pantalla movil. Mismo patron que .solo-escritorio de arriba: oculto por
   defecto aca, y el resto de este archivo ya lo vuelve a mostrar (display:flex) a partir de 1000px. */
.sidebar{ display:none; }
/* Mismo bug, mismo origen: #topbar lo llena shell.setTopbar() en CADA ruta sin mirar el ancho
   (titulo, "+ Registrar", selector de periodo); sin este default se colaba sin estilo arriba de
   la banda de marca movil. */
.topbar{ display:none; }

/* ============================================================ */
/* 2B.1 — Transicion digna entre 900 y 999px (todavia cara movil) */
/* ============================================================ */
@media (min-width:900px) and (max-width:999px){
  .barra-mano{
    left:50%; right:auto; transform:translateX(-50%); width:560px;
    bottom:var(--sp-4); border-radius:var(--r-lg); box-shadow:var(--sombra-hoja);
  }
  /* Acá la barra ya viene centrada con un translateX, así que apartarla pide las DOS
     traslaciones en la misma declaración: un `transform` nuevo reemplaza al anterior, no se
     suma. Sin esto, al enfocar un campo la barra se iría al costado además de abajo. */
  body[data-ruta="conteo"][data-tecleando] .barra-mano{
    transform: translate(-50%, 110%);
  }
}

/* ============================================================ */
/* El corte: 1000px. Aca muere la barra de mano para siempre y entra el shell (2B.1). */
/* ============================================================ */
@media (min-width:1000px){

  /* #banda-marca (el ID, no la clase): la clase .banda-marca se reusa tal cual dentro del
     mini-mockup de Ajustes (docs/diseno/ajustes-marca-v1.md, seccion 4.3) para previsualizar la
     banda REAL sin re-tintar la app. Bug real encontrado al validar en vivo: apuntar por clase
     ocultaba tambien esa vista previa en escritorio (el mini-mockup quedaba con 0px de alto). El
     header real de la cara movil es el UNICO elemento con este id en toda la app. */
  #banda-marca, .barra-mano{ display:none; }

  #app{ flex-direction:row; height:100dvh; min-height:0; }

  /* ---------------- Sidebar (2B.2) ---------------- */
  .sidebar{
    display:flex; flex-direction:column; width:var(--sidebar-w-compact); flex:none;
    height:100%; overflow-y:auto; background:var(--paper-2); border-right:1px solid var(--line);
  }
  [data-tema="noche"] .sidebar{ background:var(--surface); }

  .sidebar__marca{
    display:flex; align-items:center; gap:var(--sp-3); height:72px; padding:0 var(--sp-5);
    flex:none; border:none; background:none; cursor:pointer; text-align:left; width:100%;
  }
  .sidebar__marca-logo{ width:26px; height:20px; color:var(--marca); flex:none; }
  /* Fase 3.1.3: logo SUBIDO -> <img> (ver util.js renderLogoTenant), mismo tamano que el SVG. */
  .sidebar__marca-logo-img{ width:100%; height:100%; object-fit:contain; display:block; }
  .sidebar__marca-nombre{
    font-family:var(--font-marca); font-size:17px; color:var(--ink); line-height:1.1;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  .sidebar__grupo{ padding:var(--sp-2) var(--sp-3); }
  .sidebar__filete{ margin:var(--sp-2) var(--sp-4); border-top:1px solid var(--line); }

  .sidebar__item{
    display:flex; align-items:center; gap:var(--sp-3); height:44px; padding:0 var(--sp-4);
    border-radius:var(--r-sm); margin:2px 0; border:none; background:none; cursor:pointer;
    text-align:left; width:100%; color:var(--ink-2); font-family:var(--font-sis); font-size:15px;
    position:relative; text-decoration:none;
  }
  .sidebar__item:hover{ background:var(--paper); }
  [data-tema="noche"] .sidebar__item:hover{ background:var(--paper-2); }
  .sidebar__item svg{ width:20px; height:20px; flex:none; stroke:currentColor; stroke-width:1.75; fill:none; }
  .sidebar__item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }

  .sidebar__item--activo{
    background:var(--marca-tenue); color:var(--marca-ink); font-weight:600;
  }
  .sidebar__item--activo::before{
    content:""; position:absolute; left:-1px; top:6px; bottom:6px; width:3px;
    background:var(--marca); border-radius:2px;
  }

  .sidebar__globo{
    min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--marca-tenue);
    color:var(--marca-ink); font-size:11.5px; font-weight:700; display:flex; align-items:center;
    justify-content:center; flex:none;
  }
  .sidebar__item--activo .sidebar__globo{ background:var(--marca); color:#fff; }
  /* Bug real encontrado (Fase 3.0, valido tambien para el globo de Riesgo que ya existia): el
     atributo `hidden` puesto por JS (globo.hidden = true) NO alcanza para esconder el globo,
     porque una regla de AUTOR con `display` (la de arriba) le gana al `[hidden]{display:none}`
     del user-agent aunque la especificidad de ambas sea igual (el origen de la hoja de estilos
     manda antes que la especificidad). Sin esto, "Facturas"/"Me deben" mostraban una pildora
     roja vacia en estado sano/sin deuda. */
  .sidebar__globo[hidden]{ display:none; }

  .sidebar__pie{
    margin-top:auto; padding:var(--sp-4) var(--sp-5); flex:none;
    border-top:1px solid var(--line);
  }
  .sidebar__pie .matriz{ font-size:12px; color:var(--ink-3); }
  .sidebar__pie .darfu{ font-size:11px; color:var(--ink-3); margin-top:2px; }

  /* ---------------- Columna derecha: topbar + area de trabajo ---------------- */
  .ws-columna{ min-width:0; height:100%; overflow:hidden; }

  .topbar{
    display:flex; align-items:center; gap:var(--sp-4); height:var(--topbar-h); flex:none;
    padding:0 var(--ws-pad-compact); border-bottom:1px solid var(--line); background:var(--paper);
    position:sticky; top:0; z-index:5;
  }
  .topbar__titulo{ font-family:var(--font-marca); font-size:22px; color:var(--ink); line-height:1; }
  .topbar__fecha{ font-size:13px; color:var(--ink-2); margin-left:var(--sp-3); }
  .topbar__espaciador{ flex:1; }
  /* Segmentado del periodo (topbar de escritorio): mismo patron neumorphic que .segmentado de
     base.css (docs/diseno/tema-y-neumorphism-v1.md, 7.1): track hundido, thumb activo extruido. */
  .topbar__periodo{
    display:flex; gap:2px; background:var(--superficie-neu); box-shadow:var(--sombra-neu-inset-suave);
    border-radius:var(--r-sm); padding:2px;
  }
  .topbar__periodo button{
    border:none; background:none; padding:6px 12px; border-radius:8px; font-size:13px; font-weight:600;
    color:var(--ink-2); cursor:pointer; transition: box-shadow var(--mo-tacto), background var(--mo-tacto);
  }
  .topbar__periodo button.activo{ background:var(--superficie-neu); color:var(--ink); box-shadow:var(--sombra-neu-media); }
  .topbar__periodo button:focus-visible{ box-shadow:var(--sombra-foco-neu); }
  .topbar__periodo button.activo:focus-visible{ box-shadow:var(--sombra-neu-media), var(--sombra-foco-neu); }
  /* Boton primario de la topbar: mismo tratamiento que .boton--marca (7.1/7.3): neumorphism "de
     color", con el 1px de limite no-textual y el anillo de foco de doble capa. */
  .topbar__registrar{
    height:40px; padding:0 var(--sp-4); border-radius:var(--r-sm); border:1px solid var(--marca-accion);
    background:var(--marca-accion); color:#fff; font-weight:700; font-size:14px; cursor:pointer;
    display:flex; align-items:center; gap:6px; box-shadow:var(--sombra-marca-alta);
    transition: box-shadow var(--mo-tacto), filter var(--mo-tacto);
  }
  .topbar__registrar:hover{ filter:brightness(1.05); }
  .topbar__registrar:active{ box-shadow:var(--sombra-marca-inset); }
  .topbar__registrar:focus-visible{ box-shadow:var(--sombra-marca-alta), var(--sombra-foco-neu); }
  .topbar__ayuda{
    width:28px; height:28px; border-radius:var(--r-pill); border:1px solid var(--line-fuerte);
    background:none; color:var(--ink-3); font-size:13px; cursor:pointer; flex:none;
  }
  /* Salir (Fase 3.14, login real): mismo marco discreto que .topbar__ayuda (circulo, borde fino,
     tinta apagada), a proposito nunca --neg/--marca: cerrar sesion no es una accion destructiva
     ni la accion primaria de la pantalla, es chrome de cuenta, siempre disponible pero callado. */
  .topbar__salir{
    width:28px; height:28px; border-radius:var(--r-pill); border:1px solid var(--line-fuerte);
    background:none; color:var(--ink-3); cursor:pointer; flex:none;
    display:flex; align-items:center; justify-content:center;
  }
  .topbar__salir:hover{ color:var(--ink); border-color:var(--line-fuerte); }
  .topbar__salir svg{ width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none; }
  /* Interruptor de tema Papel/Noche de escritorio (docs/diseno/tema-y-neumorphism-v1.md, 7.1):
     mismo tratamiento neumorphic que el ◐ movil de la banda de marca (.banda-marca__toggle-tema),
     pero sobre --paper (la topbar es neutra, no coral), asi que comparte tono de verdad con su
     plano: es el ejemplo "de libro" del patron, no el hibrido que hace falta en la banda coral. */
  .topbar__toggle-tema{
    width:36px; height:36px; flex:none; border-radius:var(--r-pill); border:none;
    background:var(--superficie-neu); color:var(--ink); font-size:16px; line-height:1;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:var(--sombra-neu-media); transition: box-shadow var(--mo-tacto);
  }
  .topbar__toggle-tema:active{ box-shadow:var(--sombra-neu-inset); }
  .topbar__toggle-tema:focus-visible{ box-shadow:var(--sombra-neu-media), var(--sombra-foco-neu); }

  main{ overflow-y:auto; height:100%; }
  main > #vista{ padding:var(--ws-pad-compact); max-width:none; }

  /* ---------------- Grid del workspace (2B.3) ---------------- */
  .ws-grid{
    display:grid; grid-template-columns:repeat(8, 1fr); gap:var(--ws-gutter);
    max-width:none; padding:0; margin:0;
  }
  /* Dentro de un .ws-grid, cada bloque mobile se convierte en PANEL: lamina de papel con
     filete, radio, SIN sombra (nunca el mar de cards con drop-shadow prohibido). */
  .ws-grid > .bloque{
    border:1px solid var(--line); border-radius:var(--panel-radio); background:var(--surface);
    padding:var(--panel-pad); margin:0;
  }
  /* El hero (cifra protagonista) no lleva kicker frio: se distingue por jerarquia, no por chrome.
     Unico panel del workspace con neumorphism (docs/diseno/tema-y-neumorphism-v1.md, 7.1/10.1):
     reemplaza el --surface + filete comun de los demas paneles por el plano tactil, sin filete. */
  .ws-grid > .bloque[data-b="titular"]{
    display:flex; flex-direction:column; justify-content:center;
    background:var(--superficie-neu); box-shadow:var(--sombra-neu-alta); border:none;
  }
  /* En escritorio la cifra vive DENTRO de un panel de ancho acotado: el clamp de 13vw la
     llevaba a 88px (un carteloon grotesco). Aca manda por jerarquia, no por tamanio bruto. */
  .ws-grid .cifra-titular{ font-size:clamp(40px, 3.4vw, 54px); font-variation-settings:'opsz' 60; }
  .ws-grid .cifra-titular[data-largo="media"]{ font-size:clamp(36px, 3vw, 48px); }
  .ws-grid .cifra-titular[data-largo="larga"]{ font-size:clamp(30px, 2.6vw, 42px); }

  /* Compacto (1000 a 1279): 8 columnas. */
  #vista-hoy.ws-grid{
    grid-template-areas:
      "titular titular titular titular titular riesgo riesgo riesgo"
      "nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen"
      "envivo envivo envivo envivo envivo envivo envivo envivo"
      "waterfall waterfall waterfall waterfall waterfall waterfall waterfall waterfall"
      "subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio"
      "margen margen margen margen margen margen margen margen"
      "tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia";
  }
  /* Rubro sin perecederos (costura, preset.perecederos=false): no hay panel "riesgo". El
     titular ocupa lo que antes compartia con el, y "hoy en vivo" se corre a su lugar. */
  #vista-hoy.ws-grid.ws-grid--sin-riesgo{
    grid-template-areas:
      "titular titular titular titular titular envivo envivo envivo"
      "nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen"
      "waterfall waterfall waterfall waterfall waterfall waterfall waterfall waterfall"
      "subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio"
      "margen margen margen margen margen margen margen margen"
      "tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia";
  }
  #vista-verdad.ws-grid{
    grid-template-areas:
      "titular titular titular titular titular titular titular titular"
      "waterfall waterfall waterfall waterfall waterfall waterfall waterfall waterfall"
      "esferas esferas esferas esferas esferas esferas esferas esferas"
      "margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo"
      "subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio"
      "tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia";
  }
  /* D2 (docs/diseno/precio-y-alerta-margen-v1.md 3.2): "Lo que te saca plata" solo aparece si hay
     algo en perdida/flaco (seccion 5, "estados vacios"); sin eso, saca la fila entera. */
  #vista-verdad.ws-grid.ws-grid--sin-margen-riesgo{
    grid-template-areas:
      "titular titular titular titular titular titular titular titular"
      "waterfall waterfall waterfall waterfall waterfall waterfall waterfall waterfall"
      "esferas esferas esferas esferas esferas esferas esferas esferas"
      "subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio"
      "tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia";
  }
  [data-b="margen-riesgo"]{ grid-area:margenriesgo; }
  [data-b="titular"]{ grid-area:titular; }
  [data-b="riesgo"]{ grid-area:riesgo; }
  /* D2 (docs/diseno/precio-y-alerta-margen-v1.md 3.3): fila propia de ancho completo. Cuando esta
     [hidden] (sin nudges esa sesion) queda una fila de alto 0 + el gap del grid: un costo
     cosmetico chico y aceptado (mismo espiritu que .ws-grid--sin-alerta-margen de Productos, sin
     la variante completa por el cruce con riesgo/sin-riesgo). */
  [data-b="nudge-margen"]{ grid-area:nudgemargen; }
  [data-b="envivo"]{ grid-area:envivo; }
  [data-b="waterfall"]{ grid-area:waterfall; }
  [data-b="subsidio"]{ grid-area:subsidio; }
  [data-b="margen"]{ grid-area:margen; }
  [data-b="tendencia"]{ grid-area:tendencia; }
  [data-b="esferas"]{ grid-area:esferas; }

  /* Fase 4.2 (docs/diseno/fase42-simulador-v1.md, seccion 9): el banco de trabajo (insumo +
     palanca) queda STICKY a la izquierda mientras el temblor de la derecha se scrollea, mismo
     patron exacto que [data-b="detalle"] del master-detail (linea de mas abajo de este archivo).
     La banda de ensayo NO es admin-panel: sin filete/fondo propio de card (su propia piel vive en
     simular.css), asi que se le resta el tratamiento generico de .ws-grid > .bloque. */
  [data-b="ensayo"]{ grid-area:ensayo; }
  #vista-simular [data-b="ensayo"]{ border:none; background:none; padding:0 0 var(--sp-3); }
  [data-b="banco"]{ grid-area:banco; align-self:start; position:sticky; top:var(--sp-4); }
  [data-b="resultado"]{ grid-area:resultado; min-width:0; }
  #vista-simular.ws-grid{
    grid-template-areas:
      "ensayo ensayo ensayo ensayo ensayo ensayo ensayo ensayo"
      "banco banco banco banco resultado resultado resultado resultado";
  }

  /* Tablero de Riesgo (2B.6): reemplaza a la lista movil agrupada por dia. La lista movil se
     esconde entera; los 3 paneles del tablero (ocultos por defecto en base.css con
     .solo-escritorio) pasan a ser items del grid. */
  [data-b="resumen-riesgo"]{
    grid-area:resumen; border:1px solid var(--line); border-radius:var(--panel-radio);
    background:var(--surface); padding:var(--panel-pad);
  }
  /* La cifra y la cinta son DOS .bloque separados en movil (cada uno con su propio filete),
     para no tocar ese ritmo ya validado. Adentro del panel unico de escritorio, en cambio, se
     leen como un solo cuerpo: sin filete ni padding propio, solo un respiro entre los dos. */
  [data-b="resumen-riesgo"] .bloque{ border:none; padding:0; margin-top:var(--sp-4); }
  [data-b="resumen-riesgo"] .bloque:first-child{ margin-top:0; }
  #vista-riesgo.ws-grid{
    grid-template-areas:
      "resumen resumen resumen resumen resumen resumen resumen resumen"
      "vh vh vh manana manana manana semana semana";
  }
  [data-b="tablero-vh"]{ grid-area:vh; }
  [data-b="tablero-manana"]{ grid-area:manana; }
  [data-b="tablero-semana"]{ grid-area:semana; }
  .lista-movil{ display:none; }
  .solo-escritorio{ display:block; }

  /* Pantallas "en construccion" (2B.7): un solo panel de ancho completo. */
  .ws-grid.ws-grid--simple{ grid-template-columns:1fr; }

  /* El selector de periodo movil de La Verdad vive dentro del contenido (movil); en escritorio
     el mismo control vive en la topbar (2B.5), asi que el de adentro se esconde. */
  [data-selector]{ display:none; }

  /* El boton "Exportar" movil (docs/diseno/exportar-imprimir-v1.md, 2.4) vive en la cabecera del
     bloque (Facturas/La Verdad); en escritorio el mismo hueco lo cubre el slot `accion` de la
     topbar (shell.js setTopbar), asi que el de adentro se esconde, mismo criterio exacto que
     [data-selector] arriba. */
  .accion-movil{ display:none; }

  .panel__kicker{
    font-size:var(--t-kicker); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-3); margin:0 0 var(--sp-3);
  }

  /* ---------------- Master-detail (7B.0): Productos / Inventario / Compras / Gastos ---------------- */
  [data-b="lista"]{ grid-area:lista; min-width:0; }
  [data-b="detalle"]{ grid-area:detalle; min-width:0; }
  /* Compacto (1000-1279, 8 cols): 5/3. Pleno (>=1280, 12 cols): 7/5, salvo Gastos (8/4, 7B.4). */
  #vista-inventario.ws-grid, #vista-compras.ws-grid, #vista-clientes.ws-grid{
    grid-template-areas: "lista lista lista lista lista detalle detalle detalle";
    align-items:start;
  }
  /* Productos (7B.1) suma una fila de ancho completo arriba del master-detail para el bloque D2
     "Ojo con estos" (docs/diseno/precio-y-alerta-margen-v1.md, seccion 3.1): mismo patron exacto
     que "resumen" en Fiado/Pagar. .ws-grid--sin-alerta-margen (sin producto en perdida/flaco, o
     mientras carga) saca la fila entera: nunca un hueco vacio fantasma reservado. */
  /* ==========================================================================
     PRODUCTOS EN TABLET (2026-08-17): la lista va ENTERA y el detalle debajo.
     ==========================================================================
     La clienta usa una Galaxy Tab S9 FE de 10", horizontal, en la base del forro. Ahí cae en esta
     banda, y con el master-detail al costado la lista se quedaba con 5 de 8 columnas: la tabla de
     productos tiene cinco columnas (producto, línea, precio, materia prima, CONTRIBUCIÓN) y la
     última quedaba CORTADA fuera de la pantalla.

     Textual, 2026-08-17 21:14 UTC: "cuando se despliega la receta ya no es posible cerrar el
     recuadro y ya no se visualiza la información de la contribución".

     La contribución es lo que le dice cuánto le deja cada producto, o sea el número por el que
     existe esta pantalla. Perderlo de vista por abrir un detalle es perder la pantalla entera.

     Se apilan SOLO acá y SOLO en esta banda: de 1280 para arriba el costado sí entra (7 de 12
     para la lista) y se queda como está. Y es una sola pantalla, no todas las de lista+detalle:
     Productos es la única con cinco columnas, de las cuales dos son plata. */
  #vista-productos.ws-grid{
    grid-template-areas:
      "alerta alerta alerta alerta alerta alerta alerta alerta"
      "lista  lista  lista  lista  lista  lista  lista  lista"
      "detalle detalle detalle detalle detalle detalle detalle detalle";
    align-items:start;
  }
  #vista-productos.ws-grid.ws-grid--sin-alerta-margen{
    grid-template-areas:
      "lista lista lista lista lista lista lista lista"
      "detalle detalle detalle detalle detalle detalle detalle detalle";
  }
  /* Red de seguridad: si aun asi no entrara (una tablet mas angosta, un idioma con nombres mas
     largos), la tabla scrollea DENTRO de su caja en vez de cortar la columna en seco. Cortar sin
     aviso es lo unico que no se puede hacer con una columna de plata. */
  #vista-productos [data-b="lista"]{ overflow-x:auto; }
  [data-b="alerta-margen"]{ grid-area:alerta; }
  #vista-gastos.ws-grid{
    grid-template-areas: "lista lista lista lista lista lista detalle detalle";
    align-items:start;
  }
  [data-b="detalle"] .bloque, [data-b="detalle"]{ position:sticky; top:var(--sp-4); }

  /* Fiado (#vista-fiado, seccion 4.2 del diseno de facturacion) y su espejo Pagar (#vista-pagar,
     docs/diseno/pagar-y-anular-v1.md A.2): un bloque "TE DEBEN"/"DEBÉS" de ancho completo arriba
     (F1, su propio marco, nunca el waterfall del P&L) + el mismo master-detail 7/5 de
     Productos/Inventario/Compras debajo. */
  #vista-fiado.ws-grid, #vista-pagar.ws-grid{
    grid-template-areas:
      "resumen resumen resumen resumen resumen resumen resumen resumen"
      "lista lista lista lista lista detalle detalle detalle";
  }
  [data-b="resumen"]{ grid-area:resumen; }

  /* ---------------- Ajustes (docs/diseno/ajustes-layout-escritorio-v1.md): rail de controles
     (izquierda) + vista previa de marca pineada (derecha). Antes de esto, la raiz de Ajustes
     montaba solo `.contenido` (sin ws-grid): en escritorio quedaba una columna angosta narrativa
     flotando en medio del workspace, con hueco muerto a los lados. Compacto (1000-1279, 8 col): 5/3. ---------------- */
  #vista-ajustes.ws-grid{
    grid-template-areas:
      "intro   intro   intro   intro   intro   preview preview preview"
      "tema    tema    tema    tema    tema    preview preview preview"
      "marca   marca   marca   marca   marca   preview preview preview"
      "negocio negocio negocio negocio negocio preview preview preview";
    align-items:start;
  }
  #vista-ajustes [data-b="intro"]{ grid-area:intro; }
  #vista-ajustes [data-b="tema"]{ grid-area:tema; }
  #vista-ajustes [data-b="marca"]{ grid-area:marca; }
  #vista-ajustes [data-b="negocio"]{ grid-area:negocio; }
  /* La preview ocupa las 4 filas del rail derecho pero se pinea arriba con su propio alto de
     contenido: mismo patron que [data-b="detalle"] del master-detail (linea 281 de este archivo). */
  #vista-ajustes [data-b="preview"]{
    grid-area:preview; align-self:start; position:sticky; top:var(--sp-4);
  }
  /* El intro es header de pagina (kicker + lede), no un panel de settings: sin filete/fondo/padding de card. */
  #vista-ajustes [data-b="intro"]{ border:none; background:none; padding:0 0 var(--sp-2); }

  /* Formulario fiscal a 2 columnas: razon social | RTN en una fila, direccion a ancho completo,
     telefono en su propia fila (4.6 del diseno). Evita que las lineas de un input se estiren
     infinito dentro del panel ancho de escritorio. `.campo--ancho-completo` es el hook que usa
     el campo Direccion (ajustes.js) para ocupar las dos columnas. */
  #vista-ajustes [data-b="fiscal"]{
    display:grid; grid-template-columns:1fr 1fr; column-gap:var(--sp-4);
  }
  #vista-ajustes [data-b="fiscal"] > .kicker,
  #vista-ajustes [data-b="fiscal"] > h2,
  #vista-ajustes [data-b="fiscal"] > .campo__ayuda,
  #vista-ajustes [data-b="fiscal"] > button,
  #vista-ajustes [data-b="fiscal"] > .filas-solo-lectura,
  #vista-ajustes [data-b="fiscal"] .campo--ancho-completo{
    grid-column: 1 / -1;
  }

  /* Tabla densa del maestro (desktop): header + filas, sin sombra, un filete por fila. */
  .tabla-datos{ width:100%; border-collapse:collapse; }
  .tabla-datos thead th{
    text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-3); padding:0 var(--sp-2) var(--sp-2); border-bottom:1px solid var(--line-fuerte);
  }
  /* Los montos no se parten NUNCA en dos lineas ("L 8,000.00" en un solo renglon): el
     numero que la dueña vino a leer se lee de un vistazo, no se descifra. */
  .tabla-datos thead th.num, .tabla-datos td.num{ text-align:right; white-space:nowrap; padding-left:var(--sp-4); }
  .tabla-datos tbody tr{ cursor:pointer; }
  .tabla-datos tbody tr:hover{ background:var(--paper-2); }
  .tabla-datos tbody tr.tabla-datos__fila--activa{ background:var(--marca-tenue); }
  .tabla-datos tbody tr.tabla-datos__fila--sub td{ color:var(--ink-3); }
  .tabla-datos td{ padding:var(--sp-2); border-bottom:1px solid var(--line); font-size:14px; }
  .tabla-datos tbody tr:last-child td{ border-bottom:none; }
  .tabla-datos td.tabla-datos__nombre{ font-weight:600; color:var(--ink); }

  /* Panel de detalle vacio (nada seleccionado todavia, 7B.1). */
  .detalle-vacio{ text-align:center; padding:var(--sp-8) var(--sp-4); color:var(--ink-3); font-size:14px; }
}

/* ============================================================ */
/* Pleno (>=1280px): sidebar 248px, grid de 12 columnas.          */
/* ============================================================ */
@media (min-width:1280px){
  .sidebar{ width:var(--sidebar-w); }
  .topbar{ padding:0 var(--ws-pad); }
  main > #vista{ padding:var(--ws-pad); }

  .ws-grid{ grid-template-columns:repeat(12, 1fr); }

  #vista-hoy.ws-grid{
    grid-template-areas:
      "titular titular titular titular titular riesgo riesgo riesgo riesgo envivo envivo envivo"
      "nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen"
      "waterfall waterfall waterfall waterfall waterfall waterfall waterfall subsidio subsidio subsidio subsidio subsidio"
      "margen margen margen margen margen margen margen tendencia tendencia tendencia tendencia tendencia";
  }
  #vista-hoy.ws-grid.ws-grid--sin-riesgo{
    grid-template-areas:
      "titular titular titular titular titular titular titular envivo envivo envivo envivo envivo"
      "nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen nudgemargen"
      "waterfall waterfall waterfall waterfall waterfall waterfall waterfall subsidio subsidio subsidio subsidio subsidio"
      "margen margen margen margen margen margen margen tendencia tendencia tendencia tendencia tendencia";
  }
  #vista-verdad.ws-grid{
    grid-template-areas:
      "titular titular titular titular titular titular titular titular esferas esferas esferas esferas"
      "waterfall waterfall waterfall waterfall waterfall waterfall waterfall waterfall esferas esferas esferas esferas"
      "margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo margenriesgo"
      "subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio"
      "tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia";
  }
  #vista-verdad.ws-grid.ws-grid--sin-margen-riesgo{
    grid-template-areas:
      "titular titular titular titular titular titular titular titular esferas esferas esferas esferas"
      "waterfall waterfall waterfall waterfall waterfall waterfall waterfall waterfall esferas esferas esferas esferas"
      "subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio subsidio"
      "tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia tendencia";
  }
  #vista-riesgo.ws-grid{
    grid-template-areas:
      "resumen resumen resumen resumen resumen resumen resumen resumen resumen resumen resumen resumen"
      "vh vh vh vh manana manana manana manana semana semana semana semana";
  }
  #vista-inventario.ws-grid, #vista-compras.ws-grid, #vista-clientes.ws-grid{
    grid-template-areas: "lista lista lista lista lista lista lista detalle detalle detalle detalle detalle";
  }
  #vista-productos.ws-grid{
    grid-template-areas:
      "alerta alerta alerta alerta alerta alerta alerta alerta alerta alerta alerta alerta"
      "lista  lista  lista  lista  lista  lista  lista  detalle detalle detalle detalle detalle";
  }
  #vista-productos.ws-grid.ws-grid--sin-alerta-margen{
    grid-template-areas: "lista lista lista lista lista lista lista detalle detalle detalle detalle detalle";
  }
  #vista-gastos.ws-grid{
    grid-template-areas: "lista lista lista lista lista lista lista lista detalle detalle detalle detalle";
  }
  #vista-fiado.ws-grid, #vista-pagar.ws-grid{
    grid-template-areas:
      "resumen resumen resumen resumen resumen resumen resumen resumen resumen resumen resumen resumen"
      "lista lista lista lista lista lista lista detalle detalle detalle detalle detalle";
  }
  /* Fase 4.2: pleno (12 col), banco 4/resultado 8 (mismo espiritu 1/3 - 2/3 que el master-detail). */
  #vista-simular.ws-grid{
    grid-template-areas:
      "ensayo ensayo ensayo ensayo ensayo ensayo ensayo ensayo ensayo ensayo ensayo ensayo"
      "banco banco banco banco resultado resultado resultado resultado resultado resultado resultado resultado";
  }
  /* Ajustes: pleno (12 col), rail mas ancho 8/4. */
  #vista-ajustes.ws-grid{
    grid-template-areas:
      "intro   intro   intro   intro   intro   intro   intro   intro   preview preview preview preview"
      "tema    tema    tema    tema    tema    tema    tema    tema    preview preview preview preview"
      "marca   marca   marca   marca   marca   marca   marca   marca   preview preview preview preview"
      "negocio negocio negocio negocio negocio negocio negocio negocio preview preview preview preview";
  }
}

/* ============================================================ */
/* Amplio (>=1728px): el area se limita a 1560px y crece el gutter lateral. */
/* ============================================================ */
@media (min-width:1728px){
  main > #vista{ max-width:var(--ws-max); margin:0 auto; padding-left:calc(var(--ws-pad) * 1.4); padding-right:calc(var(--ws-pad) * 1.4); }
}

/* ============================================================ */
/* "+ Registrar": modal centrado de 560px con segmented control de 4 verbos (2B.2). */
/* Reutiliza .overlay-hoja / .hoja (que YA se centran a partir de 560px de ancho): lo que */
/* cambia es el contenido, no el mecanismo de apertura/cierre. */
/* ============================================================ */
.modal-registrar__tabs{
  display:flex; gap:2px; background:var(--superficie-neu); box-shadow:var(--sombra-neu-inset-suave);
  border-radius:var(--r-sm); padding:2px; margin-bottom:var(--sp-4);
}
.modal-registrar__tabs button{
  flex:1; border:none; background:none; padding:9px 4px; border-radius:8px; font-size:13.5px;
  font-weight:600; color:var(--ink-2); cursor:pointer; transition: box-shadow var(--mo-tacto), background var(--mo-tacto);
}
.modal-registrar__tabs button.activo{ background:var(--superficie-neu); color:var(--ink); box-shadow:var(--sombra-neu-media); }
.modal-registrar__tabs button:focus-visible{ box-shadow:var(--sombra-foco-neu); }
.modal-registrar__tabs button.activo:focus-visible{ box-shadow:var(--sombra-neu-media), var(--sombra-foco-neu); }
.modal-registrar__buscador{
  width:100%; min-height:44px; padding:0 var(--sp-3); border-radius:var(--r-sm); border:1px solid var(--line-fuerte);
  background:var(--paper); color:var(--ink); font-size:15px; margin-bottom:var(--sp-3);
}
/* ===== Paginador del historial de Compras (2026-08-16) =====================================
   Las dos flechas y la cuenta. En movil se apilan los tres en fila con la cuenta al medio, que
   es donde el ojo la busca. Los botones deshabilitados se ven apagados y no se esconden: una
   flecha que desaparece hace dudar de si existia. */
.paginador{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line);
}
.paginador__cuenta{ font-size:12px; color:var(--ink-3); margin:var(--sp-3) 0 0; text-align:center; }
.paginador .paginador__cuenta{ margin:0; flex:1; }
.paginador .boton[disabled]{ opacity:.45; cursor:default; }

/* ===== Buscador de Inventario (2026-08-15) =================================================
   Misma receta visual que .modal-registrar__buscador, que ya estaba probada: 44px de alto
   minimo (objetivo tactil), borde fuerte y el fondo del papel. No se inventa un control nuevo
   para una pantalla nueva.
   La cuenta ("3 de 40 materias") va DEBAJO y en tono apagado: es referencia, no titulo. */
.inv-buscador{ margin-bottom:var(--sp-3); }
.inv-buscador__campo{
  width:100%; min-height:44px; padding:0 var(--sp-3); border-radius:var(--r-sm); border:1px solid var(--line-fuerte);
  background:var(--paper); color:var(--ink); font-size:15px;
}
.inv-buscador__campo:focus-visible{ box-shadow:var(--sombra-foco-neu); outline:none; }
.inv-buscador__cuenta{ font-size:12px; color:var(--ink-3); margin:var(--sp-2) 0 0; }
.inv-buscador__vacio{ color:var(--ink-3); text-align:center; padding:var(--sp-4) 0; }

.modal-registrar__atajos{ font-size:12px; color:var(--ink-3); margin-top:var(--sp-4); text-align:center; }
.modal-registrar__atajos kbd{
  background:var(--paper-2); border:1px solid var(--line-fuerte); border-radius:4px; padding:1px 5px;
  font-family:var(--font-sis); font-size:11px;
}
@media (min-width:1000px){
  .mosaico--desktop{ grid-template-columns:repeat(4, 1fr); }
}

/* Estado "en construccion" (2B.7): honesto, nunca un 404. */
.en-construccion{ text-align:center; padding:var(--sp-8) var(--sp-6); }
.en-construccion p{ font-size:15px; color:var(--ink-2); max-width:48ch; margin:0 auto var(--sp-4); line-height:1.55; }
.en-construccion h2{ font-family:var(--font-marca); font-size:var(--t-titulo); margin-bottom:var(--sp-3); }

/* ===========================================================================
   Fase 5.6 · Conteo fisico de inventario (#/contar)
   ---------------------------------------------------------------------------
   La va a usar parada frente a una estanteria, con el celular en una mano. Por
   eso: campo grande, objetivo tactil comodo, y el estado de cada renglon legible
   de un vistazo SIN depender solo del color (hay una marca a la izquierda y el
   texto del delta, que es la regla de accesibilidad de la casa).
   =========================================================================== */

/* El contador se ancla arriba. Con 74 insumos son ~13 pantallas de scroll (medido en
   390px el 2026-08-12) y el "38 de 74" se iba del viewport en la septima fila: quedaba
   contando a ciegas justo en el inventario largo, que es el unico para el que existe
   esta pantalla. Lleva fondo propio SI o SI: pegado y transparente, las filas se leerian
   por debajo. En movil el fondo es el de la pagina (--paper); en el workspace de
   escritorio el panel es --surface (ver el bloque de 1000px mas abajo). */
.conteo-avance {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--paper);
  padding: var(--sp-2) 0;
}
.conteo-avance__barra {
  flex: 1 1 160px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.conteo-avance__barra span {
  display: block;
  height: 100%;
  background: var(--marca);
  transition: width .25s ease;
}

.conteo-lista { display: flex; flex-direction: column; }

.conteo-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "nombre  delta"
    "sistema campo";
  gap: 2px var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* La marca de estado es un filete a la izquierda: sobrevive al modo alto contraste
   y no depende de que se distinga un color de otro. */
.conteo-fila::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
}
.conteo-fila--faltante::before { background: var(--neg); }
.conteo-fila--sobrante::before { background: var(--marca); }
.conteo-fila--cuadra::before   { background: var(--line); }

.conteo-fila__nombre  { grid-area: nombre; font-weight: 600; }
.conteo-fila__sistema { grid-area: sistema; display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.conteo-fila__campo   { grid-area: campo; display: flex; align-items: center; gap: var(--sp-2); }
.conteo-fila__delta   { grid-area: delta; text-align: right; font-variant-numeric: tabular-nums; }
.conteo-fila--faltante .conteo-fila__delta { color: var(--neg); font-weight: 600; }
.conteo-fila--cuadra   .conteo-fila__delta { color: var(--ink-3); font-weight: 400; }

/* 96px alcanza para "1250.5" y el objetivo tactil queda por encima del minimo. */
.conteo-fila__campo input {
  width: 96px;
  min-height: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Ancho FIJO, no minimo. Con min-width la unidad estiraba la celda segun su largo
   ("gramos" contra "g") y cada fila dejaba el campo en una x distinta: contando 74
   renglones en un celular, el blanco al que apunta el pulgar se movia de fila en fila.
   Fijo, todos los campos quedan en la misma columna; la unidad larga se recorta con
   puntos suspensivos antes que desalinear la columna. */
.conteo-fila__um {
  width: 4.5em;
  flex: 0 0 4.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conteo-aviso {
  grid-column: 1 / -1;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--neg);
  font-size: .92em;
}

.conteo-resumen {
  display: flex;
  gap: var(--sp-6);
  margin: var(--sp-4) 0;
  flex-wrap: wrap;
}
.conteo-resumen strong { display: block; font-size: 1.4rem; }

.conteo-pie {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

.conteo-previos { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.conteo-previos li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }

/* En pantalla ancha el renglon entra en una sola linea. La columna "el sistema dice" va a
   ancho fijo por lo mismo que la unidad: "el sistema dice 205950 ml" es mucho mas ancho que
   "el sistema dice 3 Unidad", y con `auto` cada fila empujaba el campo a otra x. */
@media (min-width: 720px) {
  .conteo-fila {
    grid-template-columns: 1fr 20ch auto auto;
    grid-template-areas: "nombre sistema campo delta";
  }
  .conteo-fila__sistema { justify-content: flex-end; }
  .conteo-fila__delta { min-width: 7ch; }
}

/* El panel del workspace no es del color de la pagina: el contador pegado tiene que
   llevar el fondo del panel o las filas se le verian por debajo al hacer scroll. */
@media (min-width: 1000px) {
  .conteo-avance { background: var(--surface); }
}

/* C-12: la fecha del sobrante perecedero. Ocupa la fila entera debajo del renglon.
   OJO: no se le pone `display` propio a proposito. Se esconde con el atributo
   [hidden], y una clase con display:flex/grid le ganaria (el UA solo aporta
   display:none con la especificidad mas baja que existe). Esa trampa ya se pago
   dos veces en este proyecto. */
.conteo-caduca {
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--line);
}
.conteo-caduca label { display: block; font-size: .92em; }
.conteo-caduca input { min-height: 44px; }

/* Fase 5.8 · Aviso de version nueva. Abajo, sobre la barra de mano, como la cinta de
   confirmacion: es informacion, no una alarma, y no puede tapar lo que la duenia esta
   haciendo. Solo aparece en la APK (ver actualizacion.js). */
.aviso-version {
  position: fixed;
  left: var(--sp-3); right: var(--sp-3); bottom: calc(var(--sp-3) + 64px);
  z-index: 60;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-fuerte);
  border-radius: 12px;
  background: var(--flaco);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.aviso-version__texto { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.aviso-version__texto span { font-size: .92em; color: var(--ink-3); }
.aviso-version__cerrar {
  background: none; border: 0; color: var(--ink-3);
  min-width: 44px; min-height: 44px; cursor: pointer; font-size: 1rem;
}
@media (min-width: 720px) { .aviso-version { left: auto; right: var(--sp-5); max-width: 460px; } }