/* CATER Gestión — uso principal en computadora, completo en celular. Identidad de la web pública. */

@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --azul: #323e92; --azul-oscuro: #262f73; --azul-suave: #eceefa;
  --tinta: #1a2052; --grafito: #24262b; --gris: #565b63; --tenue: #6b6f77;
  /* Tono «claro suave» (pedido de Fernando: el blanco puro cansa la vista). Contrastes de texto ≥ 4,5:1 (WCAG AA). */
  --linea: #cfcdc6; --fondo: #efeee9; --papel: #f8f7f3; --superficie: #e5e4df; --campo: #fdfcfa;
  --kraft: #b98c5a; --kraft-oscuro: #755536; --kraft-claro: #efe3d2;
  --bien: #137a43; --bien-fondo: #e6f4ec; --mal: #b42318; --mal-fondo: #fdecea; --aviso: #8a5a00; --aviso-fondo: #fff4dc;
  --f-texto: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-titulos: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --radio: 10px; --radio-chico: 6px;
  --menu: 248px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.5 var(--f-texto); color: var(--grafito); background: var(--fondo); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; font-weight: 500; text-underline-offset: .18em; }
a:hover { color: var(--azul-oscuro); text-decoration: underline; }
h1, h2, h3 { font-family: var(--f-titulos); font-weight: 600; color: var(--tinta); line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.3rem); }
h2 { font-size: 1.35rem; }
p { margin: 0 0 .9em; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; background: var(--fondo); padding: .1em .35em; border-radius: 4px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #f2b23a; outline-offset: 2px; border-radius: 3px; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: var(--radio-chico); }
.saltar:focus { top: 8px; }
.tenue { color: var(--tenue); }
.opcional { font-weight: 400; color: var(--tenue); font-size: .9em; }
.vacio { color: var(--gris); padding: 8px 0; }

/* ── Botones ── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 44px; padding: .55em 1.1em;
  font: 600 .98rem/1.2 var(--f-texto); text-decoration: none; border-radius: var(--radio-chico); border: 2px solid transparent; cursor: pointer;
}
.boton--primario { background: var(--azul); color: #fff; }
.boton--primario:hover { background: var(--azul-oscuro); }
.boton--claro { background: var(--papel); color: var(--azul); border-color: var(--linea); }
.boton--claro:hover { border-color: var(--azul); }
.boton--peligro { background: var(--mal); color: #fff; }
.boton--peligro:hover { background: #8f1c13; }
.boton--chico { min-height: 36px; padding: .3em .8em; font-size: .9rem; }
.boton--ancho { width: 100%; }
.enlace { background: none; border: 0; padding: 0; color: var(--azul); font: inherit; font-weight: 500; cursor: pointer; }
.enlace:hover { text-decoration: underline; }
.botonera { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ── Estructura con menú ── */
.barra {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 12px;
  background: var(--papel); border-bottom: 1px solid var(--linea);
}
.barra__menu { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; background: none; border: 1px solid var(--linea); border-radius: var(--radio-chico); font: 600 .95rem var(--f-texto); color: var(--tinta); cursor: pointer; }
.barra__marca { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.barra__marca img { width: 120px; }
.barra__marca span, .menu__marca span { font: 600 .95rem var(--f-titulos); color: var(--kraft); letter-spacing: .02em; }
.barra__usuario { margin-left: auto; font-size: .9rem; color: var(--gris); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu {
  position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(86vw, var(--menu)); background: var(--papel); border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; padding: 16px 12px; overflow-y: auto; transform: translateX(-102%); transition: transform .2s ease;
}
.menu.abierto { transform: none; box-shadow: 0 0 40px rgba(26,32,82,.25); }
.velo { position: fixed; inset: 0; z-index: 40; background: rgba(14,18,48,.35); }
.menu__marca { display: flex; align-items: flex-end; gap: 8px; padding: 4px 8px 18px; text-decoration: none; }
.menu__marca img { width: 150px; }
.menu__grupo { margin: 18px 10px 6px; font-size: .78rem; font-weight: 600; color: var(--tenue); letter-spacing: .04em; }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__lista a, .menu__pie a, .menu__pie button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border-radius: var(--radio-chico);
  color: var(--grafito); text-decoration: none; font: 500 1rem var(--f-texto); background: none; border: 0; cursor: pointer; text-align: left;
}
.menu__lista a:hover, .menu__pie a:hover, .menu__pie button:hover { background: var(--fondo); }
.menu__lista a[aria-current], .menu__pie a[aria-current] { background: var(--azul-suave); color: var(--azul); font-weight: 600; }
.menu .icono { flex: none; color: currentColor; }
.menu__pie { margin-top: auto; border-top: 1px solid var(--linea); padding-top: 10px; }
.menu__pie small { display: block; font-size: .8rem; color: var(--tenue); font-weight: 400; }
.menu__pie form { margin: 0; }

.principal { padding: 20px 14px 48px; max-width: 1280px; }

@media (min-width: 1024px) {
  .barra { display: none; }
  .menu { transform: none; width: var(--menu); box-shadow: none; }
  .velo { display: none !important; }
  .con-menu .principal { margin-left: var(--menu); padding: 28px 36px 64px; }
}

/* ── Cabecera de página ── */
.cabecera { margin-bottom: 18px; }
.cabecera--acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cabecera--acciones h1 { margin: 0; }
.cabecera__sub { color: var(--gris); margin: 0; }
.volver { display: inline-block; margin-bottom: 6px; font-size: .95rem; }
.volver::before { content: "‹ "; }

/* ── Tarjetas y grillas ── */
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; margin-bottom: 16px; }
.tarjeta > h2:first-child { margin-top: 0; }
.tarjeta h2:not(:first-child) { margin-top: 20px; }
.tarjeta--angosta { max-width: 640px; }
.grilla-2 { display: grid; gap: 0 16px; }
@media (min-width: 900px) { .grilla-2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.form .grilla-2 { gap: 0 16px; }

/* ── Avisos y estados ── */
.aviso { border-radius: var(--radio-chico); padding: 12px 14px; margin-bottom: 14px; border: 1px solid transparent; }
.aviso--ok { background: var(--bien-fondo); border-color: #a9d8bd; color: #0d5a31; }
.aviso--error { background: var(--mal-fondo); border-color: #f1aba5; color: #7a1a12; }
.aviso--aviso { background: var(--aviso-fondo); border-color: #f0d38f; color: #5e3e00; }
.aviso--info { background: var(--azul-suave); border-color: #cfd4f0; color: var(--tinta); }
.aviso a { color: inherit; font-weight: 600; }
.estado { display: inline-block; font-size: .8rem; font-weight: 600; padding: .15em .55em; border-radius: 999px; vertical-align: .05em; }
.estado--bien { background: var(--bien-fondo); color: var(--bien); }
.estado--mal { background: var(--mal-fondo); color: var(--mal); }
.estado--neutro { background: var(--fondo); color: var(--tenue); }

/* ── Formularios ── */
.form { margin: 0; }
.campo { margin-bottom: 14px; }
.campo label { display: block; font-weight: 600; margin-bottom: 5px; color: var(--tinta); }
.campo__ayuda { font-size: .9rem; color: var(--gris); margin: 5px 0 0; }
.campo__error { font-size: .92rem; color: var(--mal); margin: 5px 0 0; font-weight: 500; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="url"], input[type="search"], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; font: 400 1rem/1.4 var(--f-texto); color: var(--grafito);
  background: var(--campo); border: 1px solid #b4b1a8; border-radius: var(--radio-chico);
}
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: 2px solid rgba(50,62,146,.22); outline-offset: 0; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--mal); }
.clave { position: relative; display: block; }
.clave input { padding-right: 64px; }
.clave__ver { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 10px; background: var(--fondo); border: 0; border-radius: 4px; font: 600 .85rem var(--f-texto); color: var(--azul); cursor: pointer; }
.form--en-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.form--en-linea .campo { margin: 0; flex: 1 1 200px; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
legend { font-weight: 600; color: var(--tinta); margin-bottom: 8px; padding: 0; }
.opciones { display: grid; gap: 8px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio-chico); cursor: pointer; background: var(--papel); }
.opcion:hover { border-color: var(--azul); }
.opcion input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--azul); }
.opcion strong { display: block; color: var(--tinta); }
.opcion small { display: block; color: var(--gris); font-size: .88rem; }
.opcion--simple { border: 0; padding: 4px 0; background: none; align-items: center; }
.filtros { display: grid; gap: 0 12px; align-items: end; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 14px 0; margin-bottom: 12px; }
.filtros .boton { margin-bottom: 14px; }
@media (min-width: 900px) { .filtros { grid-template-columns: 1.4fr 1.4fr 1fr 1fr auto; } }

/* ── Tablas: en computadora tabla, en celular tarjetas ── */
.tabla { width: 100%; border-collapse: collapse; background: var(--papel); }
.tabla th { text-align: left; font-size: .85rem; font-weight: 600; color: var(--gris); padding: 10px 12px; border-bottom: 2px solid var(--linea); position: sticky; top: 0; background: var(--papel); }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr:hover td { background: #fafbfe; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla .acciones form { margin: 0; display: inline; }
.tabla .detalle { font-size: .9rem; color: var(--gris); max-width: 520px; overflow-wrap: anywhere; }
.tabla tr.inactivo td { color: var(--tenue); }
.tabla--tarjetas { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.fila-enlace { font-weight: 600; }
@media (max-width: 767px) {
  .tabla:not(.tabla--compacta) thead { display: none; }
  .tabla:not(.tabla--compacta), .tabla:not(.tabla--compacta) tbody, .tabla:not(.tabla--compacta) tr, .tabla:not(.tabla--compacta) td { display: block; width: 100%; }
  .tabla:not(.tabla--compacta) tr { border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 10px; padding: 6px 0; background: var(--papel); }
  .tabla--tarjetas { border: 0; background: none; }
  .tabla:not(.tabla--compacta) td { border: 0; padding: 4px 12px; text-align: left !important; }
  .tabla td[data-titulo]::before { content: attr(data-titulo); display: block; font-size: .78rem; color: var(--tenue); }
  .tabla .acciones { padding-top: 8px; }
  .tabla tr:hover td { background: none; }
}

/* ── Piezas varias ── */
.actividad { list-style: none; margin: 0 0 10px; padding: 0; }
.actividad li { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.actividad time { display: block; font-size: .85rem; color: var(--tenue); }
.actividad__quien { font-weight: 600; color: var(--tinta); }
.datos { display: grid; gap: 10px; margin: 0; }
@media (min-width: 640px) { .datos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.datos div { background: var(--fondo); border-radius: var(--radio-chico); padding: 12px 14px; }
.datos dt { font-size: .85rem; color: var(--gris); }
.datos dd { margin: 2px 0 0; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.permisos { display: grid; gap: 14px; margin-bottom: 16px; }
@media (min-width: 1100px) { .permisos { grid-template-columns: 1fr 1fr; } }
.permisos__grupo { border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 10px 12px 4px; margin: 0; }
.permisos__grupo legend { padding: 0 6px; }
.permiso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--fondo); }
.permiso:first-of-type { border-top: 0; }
.permiso__nombre { flex: 1 1 220px; }
.permiso select { width: auto; min-width: 150px; min-height: 38px; padding: 6px 8px; }
.zona-riesgo { border-color: #f1c5c0; }
.pasos { padding-left: 1.2em; }
.pasos li { margin-bottom: 14px; }
.qr { width: 220px; height: 220px; margin: 12px 0; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 10px; }
.qr svg { width: 100%; height: 100%; }
.clave-manual { display: inline-block; letter-spacing: .08em; word-break: break-all; }
.codigos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.codigos code { display: block; text-align: center; font-size: 1.1rem; padding: 8px; background: var(--fondo); }
.paginas { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.error-pagina { max-width: 560px; padding: 24px 0; }

/* ── Pantallas sin menú (ingreso) ── */
.simple { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 32px; background: var(--fondo); }
.simple__caja { width: 100%; max-width: 420px; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 28px 24px; box-shadow: 0 10px 30px rgba(26,32,82,.06); }
.simple__logo { width: 200px; margin: 0 auto 22px; }
.simple__titulo { font-size: 1.7rem; text-align: center; }
.simple__nota { font-size: .92rem; color: var(--gris); text-align: center; margin: 16px 0 0; }

/* ── Fase 2: clientes, productos, stock, importación ── */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.buscador { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.buscador input[type="search"] { flex: 1 1 320px; }
.buscador .opcion { margin: 0; }
.filtros--productos { grid-template-columns: 1fr; }
@media (min-width: 900px) { .filtros--productos { grid-template-columns: 2fr 1.4fr 1fr 1.2fr auto; } }
.vacio-grande { background: var(--papel); border: 1px dashed #c7cad8; border-radius: var(--radio); padding: 28px 20px; text-align: center; color: var(--gris); }
.vacio-grande .botonera { justify-content: center; }
.cabecera--ficha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.cabecera--ficha .volver { flex-basis: 100%; margin: 0; }
.ficha-titulo { display: flex; align-items: center; gap: 14px; }
.ficha-titulo h1 { margin: 0 0 4px; }
.ficha-titulo__logo { width: 64px; height: 64px; object-fit: contain; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 4px; }
.pestanas { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--linea); margin-bottom: 16px; scrollbar-width: thin; }
.pestanas a { flex: none; padding: 10px 14px; text-decoration: none; color: var(--gris); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { color: var(--tinta); }
.pestanas a[aria-current] { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }
.lista-datos { display: grid; gap: 0; margin: 0; }
.lista-datos div { display: grid; grid-template-columns: 160px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--fondo); }
.lista-datos dt { color: var(--gris); font-size: .92rem; }
.lista-datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .lista-datos div { grid-template-columns: 1fr; gap: 0; } }
.lista-simple { margin: 0 0 12px; padding-left: 1.1em; }
.lista-simple li { margin: 4px 0; }
.lista-items { list-style: none; margin: 0 0 14px; padding: 0; }
.lista-items li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.subform { border-top: 1px solid var(--linea); padding-top: 14px; margin-top: 8px; }
.subform h3 { font-size: 1.1rem; }
.nota-destacada { border-left: 4px solid var(--kraft); }
.sello { display: inline-block; font-size: .78rem; font-weight: 600; padding: .15em .55em; border-radius: 999px; background: var(--kraft-claro); color: #6b4a26; }
.estado--normal { background: var(--bien-fondo); color: var(--bien); }
.estado--bajo { background: var(--aviso-fondo); color: var(--aviso); }
.estado--critico { background: #ffe3d6; color: #9a3412; }
.estado--sin_stock { background: var(--mal-fondo); color: var(--mal); }
.estado--critico::before, .estado--sin_stock::before { content: "! "; }
.mas { color: var(--bien); font-weight: 600; }
.menos { color: var(--mal); font-weight: 600; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.cifras div { background: var(--fondo); border-radius: var(--radio-chico); padding: 12px; }
.cifras span { display: block; font-size: .85rem; color: var(--gris); }
.cifras strong { font: 600 1.7rem/1.1 var(--f-titulos); color: var(--tinta); }
.cifras small { color: var(--gris); margin-left: 4px; }
.resumen-estados { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.resumen-estados a { display: block; background: var(--papel); border: 1px solid var(--linea); border-left-width: 4px; border-radius: var(--radio); padding: 12px 14px; text-decoration: none; color: var(--grafito); }
.resumen-estados a[aria-current] { box-shadow: 0 0 0 2px var(--azul) inset; }
.resumen-estados strong { display: block; font: 600 1.6rem/1.1 var(--f-titulos); color: var(--tinta); }
.resumen-estados__sin_stock { border-left-color: var(--mal) !important; }
.resumen-estados__critico { border-left-color: #c2410c !important; }
.resumen-estados__bajo { border-left-color: #d79b00 !important; }
.resumen-estados__normal { border-left-color: var(--bien) !important; }
.archivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.archivo { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--linea); border-radius: var(--radio-chico); }
.archivo__vista { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--fondo); border-radius: var(--radio-chico); overflow: hidden; }
.archivo__vista img { width: 100%; height: 100%; object-fit: contain; }
.archivo__ext { font: 600 .85rem var(--f-titulos); color: var(--gris); }
.archivo__datos { display: flex; flex-direction: column; min-width: 0; }
.archivo__datos strong { overflow-wrap: anywhere; }
.archivo__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.archivo__acciones form { margin: 0; }
@media (min-width: 900px) { .archivo { grid-template-columns: 64px 1fr auto; } .archivo__acciones { grid-column: auto; } }
.opciones--fila { grid-template-columns: 1fr; }
@media (min-width: 700px) { .opciones--fila { grid-template-columns: repeat(3, 1fr); } }
.desplegable > summary { cursor: pointer; font-weight: 600; color: var(--azul); padding: 6px 0; }
details.tarjeta.desplegable > summary { color: var(--tinta); }
.botonera--arriba { margin: 0 0 14px; }
.botonera form { margin: 0; }
.tabla-desplazable { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.tabla--compacta th, .tabla--compacta td { padding: 6px 10px; font-size: .9rem; white-space: nowrap; }
.fila-error td { background: #fff7f6; }
.fila-error--detalle td { color: var(--mal); white-space: normal; font-weight: 500; border-bottom: 2px solid #f1aba5; }
.atajos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

/* ── Confirmación ── */
.confirmar { border: 0; border-radius: 12px; padding: 22px; max-width: 440px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(14,18,48,.3); }
.confirmar::backdrop { background: rgba(14,18,48,.45); }
.confirmar form { margin: 0; }

@media print {
  .menu, .barra, .botonera, .saltar { display: none !important; }
  .con-menu .principal { margin: 0; padding: 0; }
  .tarjeta { border: 0; }
}
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }

/* ── Fase 3: presupuestos, pedidos, remitos ── */
.estado--info { background: var(--azul-suave); color: var(--azul); }
.estado--aviso { background: var(--aviso-fondo); color: var(--aviso); }
.selector-chico { width: auto; flex: 0 1 220px; }
.botonera--cabecera { margin-top: 0; }
.botonera--acciones { margin: 0 0 16px; }
.entrada-num { width: 8.5em; min-height: 38px !important; padding: 6px 8px !important; text-align: right; font-variant-numeric: tabular-nums; }
.entrada-num--corta { width: 5.5em; }
.tabla--items td { vertical-align: middle; }
.items-pie { display: flex; justify-content: flex-end; margin-top: 12px; }
.totales { margin: 16px 0 0 auto; max-width: 420px; display: grid; gap: 0; }
.totales div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--fondo); }
.totales dt { color: var(--gris); }
.totales dd { margin: 0; font-variant-numeric: tabular-nums; }
.totales__total { border-top: 2px solid var(--azul); border-bottom: 0 !important; padding-top: 10px !important; }
.totales__total dt, .totales__total dd { font: 600 1.35rem/1.2 var(--f-titulos); color: var(--tinta); }
.agregar-item { display: grid; gap: 0 12px; align-items: end; }
.agregar-item .campo { margin-bottom: 12px; }
.agregar-item .boton { margin-bottom: 12px; }
@media (min-width: 900px) {
  .agregar-item { grid-template-columns: minmax(260px, 3fr) 1fr 1fr 1fr auto; }
  .agregar-item--libre { grid-template-columns: minmax(240px, 3fr) 1fr 1fr 1.2fr auto; }
}
.mensaje-compartir { margin: 6px 0 4px; background: var(--fondo); }
.campo__etiqueta { display: block; font-weight: 600; color: var(--tinta); }
@media (max-width: 767px) {
  .tabla--items td.num { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; }
  .tabla--items td.num::before { display: inline !important; }
  .tabla--items td.acciones { text-align: right !important; }
  .totales { margin-left: 0; max-width: none; }
}
.ficha-titulo h1 .estado { font-family: var(--f-texto); font-size: .85rem; vertical-align: .35em; margin-left: 4px; }
#entregas h3 { margin-top: 22px; }
#entregas .form > .boton { margin-bottom: 8px; }

/* Carpeta del cliente en la red */
.carpeta-red__ruta { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.carpeta-red__ruta code { font-size: 1rem; }
.solo-celu { display: none; }
@media (max-width: 1023px) { .solo-compu { display: none !important; } .solo-celu { display: block; } }

/* Fase 4: cobros, cuentas, caja */
.medios { display: grid; gap: 12px; margin-bottom: 10px; }
.medio { border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 12px 12px 0; margin: 0; }
.medio--error { border-color: #f1aba5; background: #fffafa; }
.medio__fila, .medio__cheque { display: grid; gap: 0 12px; }
@media (min-width: 900px) { .medio__fila { grid-template-columns: 1fr 1fr 2fr; } .medio__cheque { grid-template-columns: repeat(5, 1fr); } }
.total-cobro { font-size: 1.15rem; margin: 12px 0; }
.total-cobro strong { font: 600 1.5rem var(--f-titulos); color: var(--tinta); }
.cifras--dos { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) { .cifras, .cifras--dos { grid-template-columns: 1fr; } }
.aviso.form--en-linea { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Guía de uso: los números en rojo son los mismos que se dibujan sobre las capturas (tools/guia_capturas.py) */
:root { --marca: #e0261b; }
.guia-grupo h2 { margin: 26px 0 12px; }
.guia-indice { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .guia-indice { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .guia-indice { grid-template-columns: repeat(3, 1fr); } }
.guia-indice__opcion { display: flex; gap: 12px; height: 100%; padding: 16px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--grafito); text-decoration: none; }
.guia-indice__opcion:hover { border-color: var(--azul); }
.guia-indice__opcion .icono { flex: none; color: var(--azul); margin-top: 2px; }
.guia-indice__opcion strong { display: block; font: 600 1.15rem var(--f-titulos); color: var(--tinta); margin-bottom: 2px; }
.guia-indice__opcion small { display: block; font-size: .93rem; color: var(--gris); line-height: 1.45; }
.guia-buscar { max-width: 720px; margin-bottom: 8px; }
.guia-buscar label { display: block; font: 600 1.2rem var(--f-titulos); color: var(--tinta); margin-bottom: 6px; }
.guia-resultados { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.guia-resultados a { display: block; padding: 10px 14px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-chico); text-decoration: none; }
.guia-resultados a:hover { border-color: var(--azul); }
.guia-resultados strong { display: block; color: var(--tinta); }
.guia-resultados small { color: var(--tenue); }
.guia-casos div:target { background: var(--kraft-claro); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; }
.guia-para-que { font-size: 1.08rem; max-width: 70ch; margin-top: 10px; }
.guia-captura__cuerpo { display: grid; gap: 18px; }
.guia-captura__imagen { display: block; border: 1px solid var(--linea); border-radius: var(--radio-chico); overflow: hidden; background: var(--fondo); }
.guia-captura__imagen:hover { border-color: var(--azul); }
.guia-captura--celular .guia-captura__imagen { max-width: 330px; }
@media (min-width: 900px) {
  .guia-captura--celular .guia-captura__cuerpo { grid-template-columns: 330px 1fr; align-items: start; }
  .guia-marcas { columns: 2; column-gap: 28px; }
  .guia-captura--celular .guia-marcas { columns: 1; }
}
.guia-marcas { list-style: none; margin: 0; padding: 0; counter-reset: marca; }
.guia-marcas li { counter-increment: marca; position: relative; padding: 2px 0 0 40px; margin-bottom: 14px; break-inside: avoid; }
.guia-marcas li::before {
  content: counter(marca); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--marca); color: #fff; font: 600 .95rem/28px var(--f-texto); text-align: center;
}
.guia-casos { margin: 0; display: grid; gap: 14px; }
.guia-casos div { border-left: 3px solid var(--kraft); padding-left: 14px; }
.guia-casos dt { font-weight: 600; color: var(--tinta); margin-bottom: 3px; }
.guia-casos dd { margin: 0; }
.guia-pasar { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 24px; }
.guia-pasar a { display: block; padding: 10px 14px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-chico); text-decoration: none; font-weight: 600; }
.guia-pasar small { display: block; font-weight: 400; color: var(--tenue); font-size: .85rem; }
.enlaces-cliente { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0; }
.guia-pasar__siguiente { margin-left: auto; text-align: right; }

/* Panel «Página web» */
.web-portada { align-items: start; }
.web-lista { list-style: none; margin: 0 0 8px; padding: 0; }
.web-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.web-lista__acciones { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.web-espacio { margin-top: 14px; font-size: .92rem; }
.web-arbol { list-style: none; margin: 0 0 12px; padding: 0; }
.web-arbol__fila { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.web-arbol__fila--hija { padding-left: 22px; }
.web-arbol__fila--hija .web-arbol__nombre::before { content: "↳ "; color: var(--tenue); }
.web-arbol__nombre { font-weight: 600; }
.web-arbol__fila:not(.web-arbol__fila--hija) .web-arbol__nombre { font-size: 1.05rem; }
.web-arbol__datos { display: flex; gap: 8px; align-items: center; font-size: .9rem; }
.web-arbol__mover { display: flex; gap: 4px; }
.boton--icono { min-width: 34px; min-height: 34px; padding: 0 8px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-chico); color: var(--azul); font-weight: 600; cursor: pointer; }
.boton--icono:hover { border-color: var(--azul); }
.web-bloques { display: grid; gap: 12px; margin-bottom: 10px; }
@media (min-width: 900px) { .web-bloques { grid-template-columns: 1fr 1fr; } }
.web-bloque { border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 12px 12px 4px; margin: 0; }
.web-fila-botones { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.botonera--fija { position: sticky; bottom: 0; z-index: 5; background: var(--fondo); padding: 12px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 500; }
.check input { width: 20px; height: 20px; }
.vista-google { border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 12px 14px; background: var(--papel); max-width: 640px; font-family: Arial, sans-serif; }
.vista-google__url { display: block; color: #202124; font-size: 13px; }
.vista-google__titulo { display: block; color: #1a0dab; font-size: 19px; line-height: 1.3; margin: 3px 0; }
.vista-google__desc { display: block; color: #4d5156; font-size: 14px; line-height: 1.5; }
.contador--largo { color: var(--aviso); font-weight: 600; }
.web-galeria { border: 1px solid var(--linea); border-radius: var(--radio-chico); margin-bottom: 12px; background: var(--papel); }
.web-galeria > summary { cursor: pointer; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.web-galeria > form { padding: 0 14px 6px; }
.web-fotos { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.web-foto { position: relative; border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 8px; background: var(--papel); display: grid; gap: 6px; align-content: start; cursor: grab; }
.web-foto--portada { border-color: var(--azul); box-shadow: 0 0 0 2px rgba(50,62,146,.25); }
.web-foto.arrastrando, .web-marca.arrastrando { opacity: .45; }
.web-foto img { width: 100%; height: 150px; object-fit: contain; background: var(--fondo); border-radius: 4px; }
.web-foto input, .web-foto textarea { min-height: 36px; padding: 6px 8px; font-size: .92rem; }
.web-foto__sello { position: absolute; top: 12px; left: 12px; background: var(--azul); color: #fff; font-size: .78rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.web-foto__acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.web-subir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px 14px; border-top: 1px dashed var(--linea); }
.web-subir__estado { color: var(--gris); font-size: .92rem; }
.web-nueva-galeria { margin-top: 8px; }
.web-filas { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.web-fila { display: grid; gap: 8px; border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 10px; background: var(--papel); }
@media (min-width: 900px) { .web-fila { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) auto; align-items: center; } .web-fila textarea { grid-column: span 2; } }
.web-campo__titulo { font-size: 1.15rem; }
.web-checks { display: grid; gap: 2px 18px; }
@media (min-width: 900px) { .web-checks { grid-template-columns: 1fr 1fr; } }
.web-elegir { display: flex; align-items: center; gap: 10px; }
.web-elegir img { width: 96px; height: 72px; object-fit: cover; border-radius: 4px; background: var(--fondo); }
.elegidor { width: min(1000px, 96vw); max-height: 90vh; border: 0; border-radius: var(--radio); padding: 16px; }
.elegidor::backdrop { background: rgba(26,32,82,.45); }
.elegidor__cab { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.elegidor__cab h2 { margin: 0; flex: 1 1 auto; }
.elegidor__cab input { flex: 1 1 260px; }
.elegidor__grilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.elegidor__grilla button { width: 100%; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--papel); padding: 6px; cursor: pointer; text-align: left; font: inherit; font-size: .82rem; }
.elegidor__grilla button:hover, .elegidor__grilla button:focus-visible { border-color: var(--azul); }
.elegidor__grilla img { width: 100%; height: 110px; object-fit: contain; background: var(--fondo); display: block; margin-bottom: 4px; }
.web-marcas { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.web-marca { border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 10px; display: grid; gap: 6px; background: var(--papel); cursor: grab; }
.web-marca img { width: 100%; height: 80px; object-fit: contain; }
.web-marca input[type=text] { min-height: 36px; padding: 6px 8px; }

/* Filas que se tocan enteras (sin subrayado): «Para hoy», stock con aviso */
.lista-items--enlaces li { position: relative; padding: 0; border-bottom: 1px solid var(--linea); }
.lista-items--enlaces li > a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; color: var(--grafito); font-weight: 500; border-radius: var(--radio-chico); }
.lista-items--enlaces li > a:hover { background: var(--superficie); text-decoration: none; color: var(--tinta); }
.lista-items--enlaces li > a:focus-visible { outline-offset: -2px; }
.lista-items--enlaces .fila__texto { flex: 1 1 auto; }
.lista-items--enlaces .fila__dato { font-weight: 600; color: var(--tinta); }
.lista-items--enlaces .fila__dato.tenue { color: var(--tenue); font-weight: 500; }
.lista-items--enlaces li > a::after { content: "›"; font-size: 1.4rem; line-height: 1; color: var(--azul); }

/* Ayudas «?» junto a los campos: se abren al pasar el mouse, con el teclado o tocando (celular) */
.campo__cab { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.campo__cab label { margin-bottom: 0; }
.ayuda { position: relative; display: inline-flex; }
.ayuda__boton { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--azul); background: var(--papel); color: var(--azul);
  font: 600 .78rem/1 var(--f-texto); padding: 0; cursor: help; display: inline-grid; place-items: center; }
.ayuda__boton:hover, .ayuda__boton[aria-expanded="true"] { background: var(--azul); color: #fff; }
.ayuda__globo { display: none; position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: min(300px, 80vw);
  background: var(--tinta); color: #fff; font: 400 .9rem/1.4 var(--f-texto); padding: 9px 11px; border-radius: var(--radio-chico); box-shadow: 0 6px 18px rgba(26,32,82,.22); }
.ayuda__globo::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--tinta); }
.ayuda:hover .ayuda__globo, .ayuda__boton:focus-visible + .ayuda__globo, .ayuda__boton[aria-expanded="true"] + .ayuda__globo { display: block; }
.ayuda--izquierda .ayuda__globo { left: 0; transform: none; }
.ayuda--izquierda .ayuda__globo::after { left: 14px; }
@media (max-width: 640px) { .ayuda__globo { left: auto; right: -8px; transform: none; } .ayuda__globo::after { left: auto; right: 12px; } }