/* ==========================================================================
   Encastre Stock · demo navegable
   Mismo lenguaje visual que encastredev.github.io: papel, líneas finas, esquinas rectas,
   Archivo + Newsreader + JetBrains Mono, verde "signal" como único acento. Claro y oscuro.
   Colores y tipografías: tocar SOLO los tokens de acá arriba.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* los mismos valores que el sitio (claro) */
  --fondo: #f1f3ef;          /* paper */
  --superficie: #f8f9f6;     /* sheet */
  --superficie-2: #eef1ec;
  --hover: #e8ece6;
  --tinta: #141a16;          /* text */
  --tinta-2: #565e58;        /* graphite */
  --tenue: #868e86;          /* soft */
  --linea: #d8dcd5;          /* rule */
  --linea-2: #b4bbb2;        /* rule-strong */
  --solido: #141a16;         /* solid */
  --sobre-solido: #f8f9f6;   /* on-solid */
  --acento: #1d5c45;         /* signal */
  --acento-2: #2c8a64;       /* signal-2 */
  --acento-suave: #e5ede8;   /* wash */
  --acento-borde: #b9d0c3;
  --cuadricula: rgba(29, 92, 69, .09);

  /* estados: siempre con ícono + texto */
  --ok-suave: #e5ede8;   --ok-tinta: #1d5c45;
  --aviso-suave: #f4ecd8; --aviso-tinta: #7a5710; --aviso-borde: #c9a24a;
  --alerta-suave: #f4e2dd; --alerta-tinta: #96321f; --alerta-borde: #c86a55;
  --info-suave: #e3eaee;  --info-tinta: #2c5266;

  --f-titulo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-lectura: "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-etiqueta: "Times New Roman", Times, Georgia, serif;

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1180px;
  --telefono-ancho: 390px;
  --telefono-alto: 844px;
  --telefono-borde: 11px;
}

/* oscuro: los mismos valores que el sitio */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e1210; --superficie: #151a17; --superficie-2: #1a201c; --hover: #1f2621;
    --tinta: #e8ede8; --tinta-2: #a3aba3; --tenue: #6f776f;
    --linea: #242c26; --linea-2: #38423a;
    --solido: #e8ede8; --sobre-solido: #0e1210;
    --acento: #4fbe8e; --acento-2: #74d6ab; --acento-suave: #15251e; --acento-borde: #2b4a3b;
    --cuadricula: rgba(79, 190, 142, .1);
    --ok-suave: #15251e; --ok-tinta: #74d6ab;
    --aviso-suave: #2a2415; --aviso-tinta: #e6c178; --aviso-borde: #8a6d2c;
    --alerta-suave: #2c1a16; --alerta-tinta: #ef9a86; --alerta-borde: #8e4535;
    --info-suave: #16222a; --info-tinta: #8fbcd4;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-texto); font-size: 14.5px; line-height: 1.5; color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.022em; text-wrap: balance; }
[hidden] { display: none !important; }
::selection { background: var(--acento); color: var(--sobre-solido); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); letter-spacing: 0; }
.tenue { color: var(--tenue); }
.tinta-2 { color: var(--tinta-2); }
.chico { font-size: 12.5px; }
.fuerte { font-weight: 600; }
.corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.i { display: inline-flex; width: 17px; height: 17px; flex: none; vertical-align: -3px; }
.i svg { width: 100%; height: 100%; stroke-width: 1.75; }
.i-sm { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- layout genérico ---------- */
.grilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: start; }
.grilla > *, .dos-col > *, .fila > *, .campo > *, .card-cuerpo > *, .form-grilla > * { min-width: 0; }
.dos-col { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.dos-col.parejo { grid-template-columns: minmax(0, 1fr); } /* un solo depósito en la demo */
.pila { display: grid; gap: 20px; align-content: start; }
.pila > * { min-width: 0; }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }

/* ==========================================================================
   SHELL ESCRITORIO: barra de navegación arriba, como el sitio
   ========================================================================== */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.lateral { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; height: 64px; padding: 0 var(--gutter); background: var(--fondo); border-bottom: 1px solid var(--linea); }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.marca-logo { font-family: var(--f-titulo); font-weight: 700; font-size: 19px; letter-spacing: -.03em; color: var(--tinta); }
.marca-encastre { display: inline-flex; align-items: center; gap: 10px; }
.marca-encastre svg { width: 22px; height: 20px; flex: none; }
.marca-encastre svg path:first-child { fill: var(--tinta); }
.marca-sub { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); padding-left: 12px; border-left: 1px solid var(--linea-2); }
.menu { display: flex; align-items: stretch; gap: 26px; flex: 1; height: 100%; min-width: 0; }
.menu-grupo, .menu-item.pronto, .menu-item .n, .menu-item .tag, .menu-item > .i { display: none; }
.menu-item { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 500; font-size: 14px; color: var(--tinta-2); border-bottom: 1.5px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .18s, border-color .18s; }
.menu-item:hover { color: var(--tinta); border-bottom-color: var(--acento); }
.menu-item.activo { color: var(--tinta); border-bottom-color: var(--acento); }
.menu-item .t-corto { display: none; }
.lateral-pie { display: flex; align-items: center; gap: 12px; flex: none; font-size: 12px; color: var(--tenue); }
.lateral-pie strong { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); border: 1px solid var(--acento-borde); padding: 3px 8px; }
.lateral-pie span { display: none; }
.lateral-pie a { color: var(--tinta-2); text-underline-offset: 3px; }

.principal { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.barra-sup { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 18px var(--gutter) 0; }
.barra-sup .titulo-sup { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.barra-sup .titulo-sup .n { color: var(--acento); font-weight: 600; }
.barra-sup .titulo-sup .badge { display: none; }
.barra-sup .espacio { flex: 1; }
.usuario { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.avatar { width: 30px; height: 30px; background: var(--solido); color: var(--sobre-solido); display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: 11px; flex: none; }
.usuario small { display: block; color: var(--tenue); font-size: 11.5px; line-height: 1.2; }
.contenido { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 22px var(--gutter) 48px; flex: 1; }

/* ---------- banda de flujo (lo que llega de otra pantalla) ---------- */
.flujo { display: grid; gap: 8px; margin-bottom: 22px; }
.flujo-item { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: var(--acento-suave); border-left: 3px solid var(--acento); flex-wrap: wrap; }
.flujo-item .i { color: var(--acento); }
.flujo-item .desde { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-2); }
.flujo-item a { color: var(--acento); }

/* ---------- navegación entre pantallas ---------- */
.nav-pantallas { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 20px var(--gutter) 28px; border-top: 1px solid var(--linea); }
.nav-pantallas a.paso { display: flex; flex-direction: column; gap: 2px; text-decoration: none; padding: 10px 14px; border: 1px solid var(--linea); background: var(--superficie); min-width: 0; transition: border-color .18s; }
.nav-pantallas a.paso:hover { border-color: var(--acento); }
.nav-pantallas a.paso small { font-family: var(--f-mono); color: var(--tenue); font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; }
.nav-pantallas a.paso span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-pantallas a.sig { text-align: right; align-items: flex-end; }
.nav-pantallas .vacio { visibility: hidden; }
.indice-desplegable { position: relative; }
.indice-desplegable summary { list-style: none; cursor: pointer; }
.indice-desplegable summary::-webkit-details-marker { display: none; }
.indice-lista { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(340px, 86vw); background: var(--superficie); border: 1px solid var(--linea-2); padding: 6px; z-index: 40; max-height: 70vh; overflow: auto; }
.indice-lista a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; text-decoration: none; }
.indice-lista a:hover, .indice-lista a.activo { background: var(--acento-suave); }
.indice-lista .n { font-family: var(--f-mono); font-size: 11px; color: var(--acento); }
.indice-lista .disp { color: var(--tenue); }

/* ==========================================================================
   SHELL TELÉFONO
   ========================================================================== */
.escenario { display: flex; flex-wrap: wrap; gap: 48px; justify-content: center; align-items: flex-start; padding: 40px var(--gutter) 48px; }
.escenario-info { flex: 1 1 300px; max-width: 420px; display: grid; gap: 16px; align-content: start; min-width: 0; padding-top: 24px; }
.escenario-info .antetitulo { margin: 8px 0 0; }
.escenario-info h1 { font-size: 34px; font-weight: 700; letter-spacing: -.035em; }
.escenario-info p { font-family: var(--f-lectura); font-size: 17px; }
.escenario-info .panel .fuerte { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.escenario-info ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--tinta-2); }
.telefono {
  width: calc(var(--telefono-ancho) + var(--telefono-borde) * 2);
  height: calc(var(--telefono-alto) + var(--telefono-borde) * 2);
  border: var(--telefono-borde) solid #0c0f0d; border-radius: 52px; background: var(--fondo);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18), inset 0 0 0 2px #262c28; overflow: hidden; display: flex; flex-direction: column; position: relative; flex: none;
}
.estado-tel { height: 46px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0; font-weight: 600; font-size: 14px; background: var(--fondo); color: var(--tinta); position: relative; }
.estado-tel::after { content: ""; position: absolute; left: 50%; top: 9px; width: 112px; height: 30px; border-radius: 20px; background: #0c0f0d; transform: translateX(-50%); }
.estado-tel .iconos { display: flex; gap: 5px; align-items: center; }
.estado-tel .bateria { width: 24px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; padding: 1px; }
.estado-tel .bateria::before { content: ""; display: block; height: 100%; width: 78%; background: currentColor; border-radius: 1px; }
.barra-app { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 18px 14px; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.barra-app .t { font-weight: 700; font-size: 22px; letter-spacing: -.03em; }
.barra-app .t small { display: block; font-family: var(--f-mono); font-weight: 500; font-size: 10px; color: var(--tenue); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; }
.cuerpo-app { flex: 1; overflow-y: auto; padding: 16px 14px 20px; display: grid; gap: 14px; align-content: start; }
.cuerpo-app > * { min-width: 0; }
.pestanas { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--fondo); border-top: 1px solid var(--linea); padding: 0 8px 18px; }
.pestana { display: grid; justify-items: center; gap: 3px; padding: 10px 4px 6px; text-decoration: none; font-size: 11px; font-weight: 500; color: var(--tenue); border-top: 2px solid transparent; margin-top: -1px; }
.pestana .i { width: 20px; height: 20px; }
.pestana.activa { color: var(--tinta); border-top-color: var(--acento); }
.pestana.activa .i { color: var(--acento); }

/* ==========================================================================
   COMPONENTES
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 1.5px solid var(--linea-2); background: transparent; color: var(--tinta); font-family: var(--f-titulo); font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; white-space: nowrap; max-width: 100%; transition: background .2s, color .2s, border-color .2s; }
.btn:hover { border-color: var(--acento); color: var(--acento); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn .i { width: 16px; height: 16px; }
.btn-oscuro { background: var(--solido); border-color: var(--solido); color: var(--sobre-solido); }
.btn-oscuro:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-acento { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-acento:hover { background: var(--solido); border-color: var(--solido); color: var(--sobre-solido); }
.btn-fantasma { border-color: transparent; }
.btn-fantasma:hover { border-color: var(--linea-2); color: var(--tinta); }
.btn-chico { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn-grande { min-height: 50px; padding: 0 24px; font-size: 15px; }
.btn-bloque { width: 100%; }
.btn-icono { width: 34px; min-height: 34px; padding: 0; }
@media (prefers-color-scheme: dark) { .btn-oscuro:hover, .btn-acento { color: #0e1210; } }

.card { background: var(--superficie); border: 1px solid var(--linea); min-width: 0; }
.card-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px 12px; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.card-titulo { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; display: flex; gap: 10px; align-items: center; }
.card-titulo .i { display: none; }
.card-titulo::before { content: ""; width: 8px; height: 8px; background: var(--acento); flex: none; }
.card-sub { color: var(--tenue); font-size: 12.5px; margin-top: 3px; }
.card-cuerpo { padding: 16px 20px 18px; }
.panel { background: var(--fondo); border: 1px solid var(--linea); padding: 14px 16px; min-width: 0; }

.cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--linea); }
.cabecera > div { min-width: 0; }
.antetitulo { font-family: var(--f-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--tenue); margin-bottom: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.antetitulo::before { content: ""; width: 26px; height: 1.5px; background: var(--acento); flex: none; }
.antetitulo .i { display: none; }
.antetitulo a { text-underline-offset: 3px; }
.titulo { font-weight: 700; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.035em; line-height: 1.05; }
.bajada { font-family: var(--f-lectura); font-size: 17px; line-height: 1.55; color: var(--tinta-2); margin-top: 10px; max-width: 36em; }

.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; white-space: nowrap; line-height: 1.4; border: 1px solid transparent; }
.badge .i { width: 12px; height: 12px; vertical-align: -1px; }
.b-ok { background: var(--ok-suave); color: var(--ok-tinta); }
.b-aviso { background: var(--aviso-suave); color: var(--aviso-tinta); border-color: var(--aviso-borde); }
.b-alerta { background: var(--alerta-suave); color: var(--alerta-tinta); border-color: var(--alerta-borde); }
.b-info { background: var(--info-suave); color: var(--info-tinta); }
.b-neutro { background: var(--superficie-2); color: var(--tinta-2); }
.b-oscuro { background: var(--solido); color: var(--sobre-solido); }
.b-acento { background: var(--acento); color: #fff; }
.b-borde { border-color: var(--linea-2); color: var(--tinta-2); }
.b-etapa2 { border: 1px dashed var(--linea-2); color: var(--tinta-2); }
.b-etapa1 { border-color: var(--acento-borde); color: var(--acento); }
@media (prefers-color-scheme: dark) { .b-acento { color: #0e1210; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--linea-2); font-family: var(--f-mono); font-size: 12px; text-decoration: none; cursor: pointer; background: transparent; max-width: 100%; transition: border-color .18s, color .18s; }
.chip:hover { border-color: var(--acento); color: var(--acento); }
.chip.activo { background: var(--solido); color: var(--sobre-solido); border-color: var(--solido); }

.alerta { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; font-size: 13.5px; border-left: 3px solid; }
.alerta .i { width: 16px; height: 16px; margin-top: 1px; }
.alerta.aviso { background: var(--aviso-suave); color: var(--aviso-tinta); border-color: var(--aviso-borde); }
.alerta.info { background: var(--info-suave); color: var(--info-tinta); border-color: var(--info-tinta); }
.alerta.error { background: var(--alerta-suave); color: var(--alerta-tinta); border-color: var(--alerta-borde); }
.alerta.ok { background: var(--ok-suave); color: var(--ok-tinta); border-color: var(--acento); }

/* ---------- formularios ---------- */
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.input, .select { height: 42px; border: 1px solid var(--linea-2); background: var(--superficie); padding: 0 12px; outline: none; width: 100%; min-width: 0; border-radius: 0; transition: border-color .18s; }
.select { padding-right: 32px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868e86' stroke-width='1.75'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.input:focus, .select:focus { border-color: var(--acento); }
.input-chico { height: 34px; font-size: 13px; }
.buscador { position: relative; min-width: 0; }
.buscador .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tenue); pointer-events: none; }
.buscador .input { padding-left: 38px; }
.form-grilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.campo > .stepper { justify-self: start; }
.form-grilla .completo { grid-column: 1 / -1; }
.segmentos { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--linea-2); max-width: 100%; }
.segmentos button { border: 0; background: transparent; padding: 9px 14px; font-weight: 600; font-size: 13px; color: var(--tinta-2); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .18s, color .18s; }
.segmentos button + button { border-left: 1px solid var(--linea); }
.segmentos button:hover { color: var(--tinta); }
.segmentos button .i { width: 15px; height: 15px; }
.segmentos button[aria-pressed="true"] { background: var(--solido); color: var(--sobre-solido); }
.segmentos button.seg-pronto { color: var(--tenue); cursor: not-allowed; }
.tag-seg { font-family: var(--f-mono); font-size: 9.5px; border: 1px dashed var(--linea-2); padding: 0 5px; white-space: nowrap; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.interruptor input { appearance: none; width: 38px; height: 20px; background: var(--linea-2); position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--superficie); transition: transform .15s; }
.interruptor input:checked { background: var(--acento); }
.interruptor input:checked::after { transform: translateX(18px); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--acento); margin: 0; flex: none; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--linea-2); background: var(--superficie); flex: none; }
.stepper button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--tinta); font-size: 20px; cursor: pointer; transition: background .15s, color .15s; }
.stepper button:hover { background: var(--acento-suave); color: var(--acento); }
.stepper input { width: 52px; height: 40px; border: 0; border-left: 1px solid var(--linea); border-right: 1px solid var(--linea); background: transparent; text-align: center; outline: none; color: var(--tinta); font-family: var(--f-mono); font-size: 16px; font-weight: 600; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- tablas ---------- */
.tabla-caja { width: 100%; }
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--tenue); padding: 12px 14px; border-bottom: 1.5px solid var(--tinta); white-space: nowrap; }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla th.num, .tabla td.num { text-align: right; }
.tabla td.num b { font-family: var(--f-mono); font-weight: 600; }
.tabla tbody tr.fila-dato { cursor: pointer; transition: background .15s; }
.tabla tbody tr.fila-dato:hover { background: var(--superficie-2); }
.tabla tbody tr.abierta { background: var(--acento-suave); }
.tabla tr.detalle > td { background: var(--fondo); padding: 16px 16px 20px; }
.tabla .codigo { font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; overflow-wrap: anywhere; }
.tabla .desc { font-weight: 600; }
.tabla .sub { font-size: 12px; color: var(--tenue); margin-top: 1px; }
.tabla .flecha { width: 30px; color: var(--tenue); }
.tabla .flecha .i { transition: transform .15s; }
.tabla tr.abierta .flecha .i { transform: rotate(90deg); color: var(--acento); }
.tabla-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px; flex-wrap: wrap; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--linea); align-items: center; }
.filtros > * { min-width: 0; }
.filtros .buscador { flex: 1 1 280px; }
.filtros .select { width: auto; flex: 0 1 200px; }
.resultados { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 20px; font-size: 13px; color: var(--tinta-2); flex-wrap: wrap; }
mark { background: var(--acento-suave); color: var(--acento); font-weight: 600; padding: 0 2px; box-shadow: inset 0 -1.5px 0 var(--acento); }
.coincide { font-size: 11.5px; color: var(--tinta-2); margin-top: 4px; display: flex; gap: 5px; align-items: center; }
.tooltip { position: fixed; z-index: 90; pointer-events: none; background: var(--solido); color: var(--sobre-solido); font-size: 12.5px; padding: 8px 10px; max-width: 260px; }

/* ---------- listas ---------- */
.lista-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.lista-item:last-child { border-bottom: 0; }
.pin { width: 38px; height: 38px; background: var(--acento-suave); border: 1px solid var(--acento-borde); color: var(--acento); display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: 11.5px; flex: none; }
.mov-ic { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border: 1px solid; }
.mov-ic .i { width: 16px; height: 16px; }
.mov-ingreso { background: var(--ok-suave); color: var(--ok-tinta); border-color: var(--acento-borde); }
.mov-egreso { background: var(--alerta-suave); color: var(--alerta-tinta); border-color: var(--alerta-borde); }
.mov-ajuste { background: var(--aviso-suave); color: var(--aviso-tinta); border-color: var(--aviso-borde); }
.mov-transferencia { background: var(--info-suave); color: var(--info-tinta); border-color: var(--info-tinta); }
.cant-mas { color: var(--ok-tinta); font-family: var(--f-mono); font-weight: 600; }
.cant-menos { color: var(--alerta-tinta); font-family: var(--f-mono); font-weight: 600; }
.nuevo { animation: destello 2.4s ease-out; }
@keyframes destello { 0%, 30% { background: var(--acento-suave); } 100% { background: transparent; } }
.desplegable { border-bottom: 1px solid var(--linea); }
.desplegable:last-child { border-bottom: 0; }
.desplegable > summary { list-style: none; cursor: pointer; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary .chev { transition: transform .15s; color: var(--tenue); }
.desplegable[open] > summary .chev { transform: rotate(90deg); color: var(--acento); }
.desplegable-cuerpo { padding: 0 0 14px 50px; }

.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 16px; font-size: 14px; }
.kv dt { color: var(--tinta-2); min-width: 0; }
.kv dd { margin: 0; text-align: right; font-family: var(--f-mono); font-weight: 600; font-size: 13.5px; }
.kv dd b { font-weight: 600; }
.kv .total { border-top: 1px solid var(--linea); padding-top: 10px; }
.vacio-estado { padding: 36px 16px; text-align: center; color: var(--tenue); display: grid; justify-items: center; gap: 8px; font-family: var(--f-lectura); font-size: 16px; }
.vacio-estado .i { width: 28px; height: 28px; }

/* ---------- fotos de producto ---------- */
.foto { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--acento-suave); }
.foto.sin-foto { display: grid; place-items: center; color: var(--acento); border: 1px solid var(--linea); background: repeating-linear-gradient(0deg, transparent 0 11px, var(--cuadricula) 11px 12px), repeating-linear-gradient(90deg, transparent 0 11px, var(--cuadricula) 11px 12px), var(--acento-suave); }
.foto.sin-foto .i { width: 40%; height: 40%; max-width: 28px; max-height: 28px; }
.foto-mini { width: 46px; height: 46px; flex: none; }
.foto-hero { width: 104px; height: 104px; flex: none; }
.foto-evento { display: inline-block; width: 34px; height: 34px; vertical-align: middle; margin-right: 6px; }
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.subir-foto { position: relative; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 6px; aspect-ratio: 1; border: 1.5px dashed var(--linea-2); color: var(--tinta-2); font-size: 12px; font-weight: 600; text-align: center; padding: 6px; transition: border-color .18s, color .18s; }
.subir-foto:hover, .subir-foto:focus-within { border-color: var(--acento); color: var(--acento); }
.subir-foto input, .btn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.btn.con-archivo { position: relative; }

/* ---------- éxito y avisos flotantes ---------- */
.exito { text-align: center; padding: 36px 20px; display: grid; justify-items: center; gap: 12px; }
.exito-ic { width: 56px; height: 56px; background: var(--acento); color: #fff; display: grid; place-items: center; animation: pop .35s ease-out; }
.exito-ic .i { width: 30px; height: 30px; }
.exito h2 { font-weight: 700; font-size: 26px; letter-spacing: -.03em; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-color-scheme: dark) { .exito-ic { color: #0e1210; } }
.toast-caja { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 95; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--solido); color: var(--sobre-solido); padding: 13px 16px; display: flex; gap: 10px; align-items: center; animation: pop .2s ease-out; font-size: 13.5px; }
.toast .i { color: var(--acento-2); }

/* ==========================================================================
   ETIQUETA IMPRESA (simula el rollo: siempre blanco y negro)
   ========================================================================== */
.etq-fondo { background: repeating-linear-gradient(0deg, transparent 0 15px, var(--cuadricula) 15px 16px), repeating-linear-gradient(90deg, transparent 0 15px, var(--cuadricula) 15px 16px), var(--acento-suave); border: 1px solid var(--linea); padding: 22px; display: grid; place-items: center; min-width: 0; }
.etq-pre { container-type: inline-size; width: 100%; max-width: 420px; aspect-ratio: 100 / 70; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); position: relative; overflow: hidden; }
.etq-pre .capa-pre { position: absolute; inset: 0; transition: opacity .2s; }
.etq-pre.solo-impresion .capa-pre { opacity: .07; }
.etq-pre .franja { position: absolute; left: 4.5%; right: 4.5%; top: 7%; height: 25%; background: #111; display: flex; flex-direction: column; justify-content: center; padding-left: 5%; }
.logo-etq { font-family: var(--f-titulo); font-weight: 700; color: #fff; font-size: 10cqw; line-height: .9; letter-spacing: .02em; }
.franja .lema { color: #fff; font-family: var(--f-mono); font-size: 2.6cqw; letter-spacing: .4em; margin-top: 1.4cqw; }
.etq-pre .tipo { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-family: var(--f-etiqueta); font-size: 6.2cqw; color: #111; }
.etq-pre .cols { position: absolute; left: 6%; right: 6%; top: 53%; display: grid; grid-template-columns: 1fr 1.25fr .45fr; font-family: var(--f-etiqueta); font-size: 5cqw; color: #111; }
.etq-pre .cols span:nth-child(2) { text-align: center; }
.etq-pre .cols span:nth-child(3) { text-align: right; }
.etq-pre .capa-imp { position: absolute; inset: 0; transition: transform .15s; }
.etq-pre .datos { position: absolute; left: 6%; right: 6%; bottom: 10%; display: grid; grid-template-columns: 1.25fr 1.1fr .4fr; column-gap: 2%; align-items: end; font-family: "Arial Narrow", Arial, sans-serif; font-weight: 700; color: #000; font-size: 5cqw; line-height: 1; transform: scaleY(1.18); transform-origin: bottom; }
.etq-pre .datos span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.etq-pre .datos span:nth-child(2) { text-align: center; }
.etq-pre .datos span:nth-child(3) { text-align: right; }
.etq-pre .cb { position: absolute; left: 22%; right: 22%; top: 66%; height: 10%; outline: 1px dashed rgba(0, 0, 0, .25); outline-offset: 2px; }
.etq-pre .cb svg { width: 100%; height: 100%; }
.etq-pre .guia { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(208, 59, 59, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(208, 59, 59, .18) 1px, transparent 1px); background-size: 10% 14.2857%; }

/* ==========================================================================
   PORTADA
   ========================================================================== */
.portada-top { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 64px; padding: 0 var(--gutter); background: var(--fondo); border-bottom: 1px solid var(--linea); }
.hero { border-bottom: 1px solid var(--linea); background: repeating-linear-gradient(0deg, transparent 0 31px, var(--cuadricula) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, var(--cuadricula) 31px 32px); }
.hero-in { max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: clamp(56px, 9vw, 112px) var(--gutter) clamp(48px, 7vw, 88px); display: grid; gap: 22px; }
.hero .antetitulo { margin: 0; }
.hero h1 { font-weight: 700; font-size: clamp(36px, 6vw, 64px); line-height: 1.03; letter-spacing: -.038em; max-width: 15em; }
.hero h1 em { font-style: normal; color: var(--acento); }
.hero p { font-family: var(--f-lectura); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--tinta-2); max-width: 34em; }
.seccion { max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) 0; }
.seccion h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(21px, 2.5vw, 27px); font-weight: 600; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--linea); }
.seccion h2::before { content: ""; width: 9px; height: 9px; background: var(--acento); flex: none; }
.seccion > p { font-family: var(--f-lectura); font-size: 17px; color: var(--tinta-2); max-width: 36em; margin-bottom: 20px; }
.seccion .grilla { gap: 1px; background: var(--linea); border: 1px solid var(--linea); align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seccion .grilla > .card { background: var(--superficie); }
#indice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dolor { padding: clamp(20px, 3vw, 30px); display: grid; gap: 8px; border: 0; }
.dolor .i { color: var(--acento); width: 22px; height: 22px; }
.dolor strong { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.dolor .chico { font-family: var(--f-lectura); font-size: 15.5px; line-height: 1.5; }
.pantalla-card { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 22px; text-decoration: none; border: 0; transition: background .18s; }
.pantalla-card:hover { background: var(--acento-suave); }
.pantalla-card .num-p { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--acento); }
.pantalla-card strong { font-size: 17px; font-weight: 600; }
.pantalla-card ul { margin: 0; padding-left: 16px; color: var(--tinta-2); font-size: 13px; display: grid; gap: 3px; }
.pasos-demo { counter-reset: paso; display: flex; flex-direction: column; }
.paso-demo { display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1.35fr); gap: 4px 24px; padding: 22px 0; border: 0; border-top: 1px solid var(--linea); background: transparent; text-decoration: none; align-items: baseline; }
.paso-demo:first-child { border-top: 1.5px solid var(--tinta); }
.paso-demo::before { counter-increment: paso; content: "0" counter(paso); font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--acento); }
.paso-demo strong { font-size: 18px; font-weight: 600; letter-spacing: -.018em; }
.paso-demo .chico { font-family: var(--f-lectura); font-size: 16px; }
.paso-demo:hover strong { color: var(--acento); }
.pie-portada { max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 40px var(--gutter) 48px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--tenue); }

/* ==========================================================================
   MODAL (exportar a Excel)
   ========================================================================== */
.modal-fondo { position: fixed; inset: 0; z-index: 60; background: rgba(14, 18, 16, .5); display: grid; place-items: center; padding: 16px; }
.modal { background: var(--superficie); border: 1px solid var(--linea-2); width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; min-width: 0; }
.modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--linea); }
.modal-cuerpo { padding: 18px 20px; overflow: auto; min-width: 0; }
.modal-cuerpo > * { min-width: 0; }
.modal-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--linea); flex-wrap: wrap; }
.check input[type="radio"] { accent-color: var(--acento); }

/* ==========================================================================
   RESPONSIVE (siempre al final)
   ========================================================================== */
@media (max-width: 1180px) {
  .dos-col { grid-template-columns: minmax(0, 1fr); }
  #tabla-inventario th:nth-child(4), #tabla-inventario td:nth-child(4),
  #tabla-inventario th:nth-child(9), #tabla-inventario td:nth-child(9) { display: none; }
}

@media (max-width: 960px) {
  .lateral { gap: 20px; }
  .marca-sub, .lateral-pie, .usuario { display: none; }
  .menu { gap: 20px; }
  .menu-item .t-largo { display: none; }
  .menu-item .t-corto { display: inline; }
  #tabla-inventario th:nth-child(5), #tabla-inventario td:nth-child(5),
  #tabla-inventario th:nth-child(7), #tabla-inventario td:nth-child(7) { display: none; }
  .seccion .grilla, #indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paso-demo { grid-template-columns: 40px minmax(0, 1fr); }
  .paso-demo .chico { grid-column: 2; }
}

@media (max-width: 640px) {
  /* barra de arriba como barra de app: logo solo ícono y los 4 ítems con ícono arriba y texto abajo */
  .lateral { height: auto; gap: 8px; padding: 0 8px 0 14px; }
  .marca-txt { display: none; }
  .menu { gap: 0; justify-content: space-between; }
  .menu-item { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 2px 9px; font-size: 11px; border-bottom-width: 2px; }
  .menu-item > .i { display: inline-flex; width: 20px; height: 20px; }
  .menu-item.activo > .i { color: var(--acento); }
  .menu-item .t-corto { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .barra-sup { display: none; }
  .contenido { padding-top: 18px; }
  .cabecera { margin-bottom: 16px; padding-bottom: 14px; gap: 10px; }
  .bajada, .flujo > .chico { display: none; }
  .card-cab, .card-cuerpo, .filtros, .resultados { padding-left: 16px; padding-right: 16px; }
  .tabla th, .tabla td { padding: 11px 8px; }
  .tabla td.codigo { white-space: nowrap; }
  #tabla-inventario th:nth-child(1), #tabla-inventario td:nth-child(1),
  #tabla-inventario th:nth-child(8), #tabla-inventario td:nth-child(8) { display: none; }
  /* la regla de arriba no tiene que ocultar la fila de detalle (una sola celda) */
  #tabla-inventario tr.detalle > td { display: table-cell; }
  .nav-pantallas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nav-pantallas .indice-desplegable { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .desplegable-cuerpo { padding-left: 0; }
  .dos-col.parejo { grid-template-columns: minmax(0, 1fr); }
  /* un solo depósito y filtros secundarios: fuera en el celular */
  #f-dep, .filtros .interruptor, #exportar, .resultados .fila > .fila:has(#f-lista) { display: none; }
  .filtros .select { flex: 1 1 45%; }
  /* detalle desplegado del inventario: solo dónde está y precios, así los botones quedan a mano */
  .detalle .grilla { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .detalle .grilla > :nth-child(n+3) { display: none; }
  .detalle .fila .btn { flex: 1 1 auto; }
  /* movimiento: botones grandes y formulario corto, así "Cómo queda" aparece enseguida */
  .segmentos { display: flex; width: 100%; }
  .segmentos button { flex: 1 1 auto; justify-content: center; padding: 11px 8px; }
  #tipos .segmentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tipos .segmentos button + button { border-left: 0; }
  #tipos .segmentos button:nth-child(even) { border-left: 1px solid var(--linea); }
  #tipos .segmentos button:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .campo:has(#deps), .campo:has(#ref) { display: none; }
  .form-grilla { gap: 14px; }
  .campo > .stepper { justify-self: start; }
  .stepper button { width: 46px; height: 46px; }
  .stepper input { height: 46px; }
  .exito .fila .btn { flex: 1 1 100%; }
  .seccion .grilla, #indice { grid-template-columns: minmax(0, 1fr); }
}

/* teléfono real: el marco desaparece y la app ocupa la pantalla */
@media (max-width: 480px) {
  .escenario { padding: 0; gap: 0; }
  .escenario-info { order: 2; padding: 24px var(--gutter); max-width: none; }
  .telefono { width: 100%; height: auto; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .estado-tel { display: none; }
  .barra-app { position: sticky; top: 0; z-index: 10; padding-top: 14px; }
  .cuerpo-app { overflow: visible; }
  .pestanas { position: sticky; bottom: 0; z-index: 10; padding-bottom: 10px; }
}

@media print { body { background: #fff; } }