* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

main,
main > section,
.tarjeta > *,
#ficha > *,
.pagina > *,
.pestanas,
.pestanas-panel,
.ficha-seccion > *,
.grilla > *,
.encabezado-ficha > * {
  min-width: 0;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

main.angosto {
  max-width: 360px;
  margin-top: 10vh;
}

.tarjeta {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
}

label {
  display: grid;
  gap: 4px;
  font-size: 14px;
}

input {
  padding: 8px 10px;
  font-size: 16px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
}

button {
  padding: 8px 14px;
  font-size: 15px;
  border: 0;
  border-radius: 10px;
  background: var(--azul);
  color: var(--sobre-azul);
  cursor: pointer;
}

button:disabled {
  opacity: 0.6;
}

/* Enlaces con aspecto de botón (Pagar, Imprimir recibo, Abrir WhatsApp…): igual que button. */
a.boton {
  display: inline-block;
  padding: 8px 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: normal;
  border-radius: 10px;
  background: var(--azul);
  color: var(--sobre-azul);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
a.boton.secundario {
  background: var(--boton-secundario);
}
a.boton[hidden] {
  display: none;
}

.error {
  min-height: 1.2em;
  margin: 0;
  color: var(--error);
}

.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--azul);
  color: var(--sobre-azul);
}

.barra span {
  margin-left: auto;
}

.barra button {
  background: var(--superficie);
  color: var(--azul);
}

.barra a {
  color: inherit;
  text-decoration: none;
}

main:has(table) {
  max-width: 960px;
}

/* Temas: el atributo data-tema de <html> (parámetro "tema", con excepción por usuario) elige la paleta.
   --azul es el color principal de cada tema (se mantiene el nombre para no tocar el resto de las reglas). */
:root {
  --azul: #1f5fae;
  --azul-claro: #e8f0fa;
  --azul-claro-2: #d9e6f8;
  --azul-oscuro: #17396b;
  --sobre-azul: #fff;
  --fondo: #f5f5f5;
  --superficie: #fff;
  --superficie-suave: #f2f4f7;
  --superficie-traslucida: rgba(255, 255, 255, 0.9);
  --texto: #222;
  --texto-suave: #6b7480;
  --borde: #dde2ea;
  --borde-fuerte: #b8c2d0;
  --error: #b00020;
  --exito: #1f6b2a;
  --foco: rgba(31, 95, 174, 0.25);
  --resaltado: #f0b400;
  --boton-secundario: #6b7480;
  --alto-barra: 52px;
  --ancho-menu: 248px;
  color-scheme: light;
}

:root[data-tema="verde"] {
  --azul: #1e7a46;
  --azul-claro: #e6f4ec;
  --azul-claro-2: #cfe8da;
  --azul-oscuro: #145233;
  --foco: rgba(30, 122, 70, 0.25);
}

:root[data-tema="gris"] {
  --azul: #3f4a56;
  --azul-claro: #eceff2;
  --azul-claro-2: #dce1e6;
  --azul-oscuro: #252c33;
  --foco: rgba(63, 74, 86, 0.3);
}

:root[data-tema="contraste"] {
  --azul: #0033a0;
  --azul-claro: #e6ecfa;
  --azul-claro-2: #c9d6f5;
  --azul-oscuro: #001a52;
  --fondo: #fff;
  --superficie-suave: #f0f0f0;
  --texto: #000;
  --texto-suave: #222;
  --boton-secundario: #333;
  --borde: #555;
  --borde-fuerte: #000;
  --error: #9e0000;
  --foco: rgba(0, 51, 160, 0.55);
  --resaltado: #ff8c00;
}

:root[data-tema="oscuro"] {
  --azul: #3a7bd5;
  --azul-claro: #1d2938;
  --azul-claro-2: #24364d;
  --azul-oscuro: #cfe0f7;
  --sobre-azul: #fff;
  --fondo: #14171c;
  --superficie: #1e232a;
  --superficie-suave: #282e37;
  --superficie-traslucida: rgba(30, 35, 42, 0.9);
  --texto: #e6e9ee;
  --texto-suave: #a3abb6;
  --borde: #343b45;
  --borde-fuerte: #4b5563;
  --error: #ff6b7a;
  --exito: #5fcf7a;
  --foco: rgba(58, 123, 213, 0.45);
  --resaltado: #ffc23d;
  --boton-secundario: #4b5563;
  color-scheme: dark;
}

body.con-menu {
  padding-top: var(--alto-barra);
  padding-left: var(--ancho-menu);
  transition: padding-left 0.15s;
}

body.con-menu .barra {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  left: 0;
  height: var(--alto-barra);
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

body.menu-colapsado {
  --ancho-menu: 64px;
}

.icono-svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-hamburguesa {
  display: none;
  padding: 6px;
  background: transparent !important;
  color: var(--sobre-azul) !important;
}

.menu-lateral {
  position: fixed;
  z-index: 30;
  top: var(--alto-barra);
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: var(--ancho-menu);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  transition: width 0.15s, transform 0.2s;
}

.menu-modulos {
  flex: 1;
  margin: 0;
  padding: 10px 8px;
  list-style: none;
}

.menu-modulo,
.menu-enlace-modulo,
.menu-colapsar {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--texto);
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.menu-colapsar:hover {
  background: var(--superficie-suave);
}

/* Nivel 1 - módulo: fila con fondo azul suave, negrita; abierto o actual = azul del sistema */
.menu-modulos > li + li {
  margin-top: 6px;
}

.menu-modulo,
.menu-enlace-modulo {
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  font-weight: 600;
}

.menu-modulo:hover:not(:disabled),
.menu-enlace-modulo:hover {
  background: var(--azul-claro-2);
}

.menu-modulo:disabled {
  background: var(--superficie-suave);
  color: var(--texto-suave);
  cursor: default;
}

.menu-item.abierto > .menu-modulo,
.menu-enlace-modulo.activa {
  background: var(--azul);
  color: var(--sobre-azul);
}

.menu-item.abierto > .menu-modulo:hover {
  background: var(--azul);
  filter: brightness(0.9);
}

.menu-chevron {
  display: flex;
  margin-left: auto;
  transition: transform 0.15s;
}

.menu-chevron .icono-svg {
  width: 16px;
  height: 16px;
}

.menu-item.abierto .menu-chevron {
  transform: rotate(90deg);
}

.menu-pronto {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--superficie-suave);
  color: var(--texto-suave);
  font-size: 11px;
}

.menu-submenu {
  margin: 6px 0 10px 10px;
}

/* Nivel 2 - grupo (Registros / Informes / Herramientas): franja gris suave, mayúsculas pequeñas en azul */
.seccion-plegable + .seccion-plegable {
  margin-top: 6px;
}

.seccion-boton {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--superficie-suave);
  color: var(--azul);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.seccion-boton:hover {
  background: var(--superficie-suave);
}

.seccion-boton[aria-expanded="true"] {
  background: var(--azul-claro);
}

.seccion-cantidad {
  padding: 0 6px;
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 10px;
  letter-spacing: 0;
}

/* Nivel 3 - ítems: texto normal, indentados, con una línea vertical que los agrupa */
.menu-submenu .seccion-plegable > ul {
  margin: 4px 0 4px 12px;
  padding-left: 8px;
  border-left: 2px solid var(--azul-claro-2);
}

.seccion-chevron {
  display: flex;
  margin-left: auto;
  transition: transform 0.15s;
}

.seccion-chevron .icono-svg {
  width: 14px;
  height: 14px;
}

.seccion-boton[aria-expanded="true"] .seccion-chevron {
  transform: rotate(90deg);
}

.menu-submenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-submenu a {
  display: block;
  margin: 1px 0;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--texto);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

.menu-submenu a:hover {
  background: var(--superficie-suave);
}

.menu-submenu a.activa {
  background: var(--azul-claro);
  color: var(--azul);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--azul);
}

.menu-colapsar {
  margin: 8px;
  width: auto;
  border-top: 1px solid var(--borde);
  border-radius: 0;
  color: var(--texto-suave);
  font-size: 13px;
}

body.menu-colapsado .menu-texto,
body.menu-colapsado .menu-submenu {
  display: none;
}

body.menu-colapsado .menu-colapsar .icono-svg {
  transform: rotate(180deg);
}

.menu-fondo {
  display: none;
}

@media (max-width: 900px) {
  body.con-menu,
  body.con-menu.menu-colapsado {
    padding-left: 0;
  }

  .menu-hamburguesa {
    display: flex;
  }

  .menu-lateral,
  body.menu-colapsado .menu-lateral {
    width: 270px;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s, visibility 0.2s;
  }

  body.menu-abierto .menu-lateral {
    visibility: visible;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
  }

  body.menu-colapsado .menu-texto {
    display: initial;
  }

  body.menu-colapsado .menu-submenu:not([hidden]) {
    display: block;
  }

  body.menu-abierto .menu-lateral {
    transform: translateX(0);
  }

  body.menu-abierto .menu-fondo {
    position: fixed;
    z-index: 25;
    inset: var(--alto-barra) 0 0 0;
    display: block;
    background: rgba(0, 0, 0, 0.3);
  }

  .menu-colapsar {
    display: none;
  }

  .barra #usuario {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (max-width: 1023px) {
  main {
    padding: 12px;
  }

  .tarjeta {
    padding: 14px;
  }

  th,
  td {
    padding: 6px 8px;
  }
}

.tarjetas-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}

.tarjeta-modulo {
  min-height: 190px;
  padding: 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
}

.tarjeta-modulo-cabecera {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.tarjeta-modulo-cabecera h2 {
  margin: 0;
  font-size: 18px;
}

.tarjeta-modulo-icono {
  display: flex;
  padding: 10px;
  border-radius: 10px;
  background: var(--azul-claro);
  color: var(--azul);
}

.tarjeta-modulo-icono .icono-svg {
  width: 24px;
  height: 24px;
}

.tarjeta-modulo .seccion-boton {
  padding: 8px;
  border-top: 1px solid var(--superficie-suave);
  border-radius: 0;
}

.tarjeta-modulo .seccion-boton:hover {
  border-radius: 6px;
}

.tarjeta-modulo .seccion-plegable ul {
  margin: 0 0 6px;
  padding: 0 8px;
  list-style: none;
  columns: 2;
  column-gap: 12px;
}

.tarjeta-modulo .seccion-plegable a {
  display: block;
  padding: 3px 0;
  color: var(--azul);
  font-size: 14px;
  text-decoration: none;
  break-inside: avoid;
}

.tarjeta-modulo .seccion-plegable a:hover {
  text-decoration: underline;
}

.herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.herramientas input {
  flex: 1;
  min-width: 0;
}

.tabla-contenedor {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--borde);
  text-align: left;
}

th {
  background: var(--superficie-suave);
}

/* Cifras de ancho parejo en todas las tablas: los importes quedan alineados. */
table {
  font-variant-numeric: tabular-nums;
}

/* Fila resaltada al pasar el mouse o tocarla. :where() deja la especificidad en cero para que
   cualquier fila marcada (seleccionada, total, error…) conserve su propio color. */
:where(tbody tr:hover) {
  background-color: color-mix(in srgb, var(--azul) 8%, transparent);
}

/* Listados largos de solo lectura (25 filas o más, sin campos de carga): scroll propio con los
   títulos fijos arriba. Las grillas de carga ya tienen el suyo (.detalle-lineas) y quedan como están. */
.tabla-contenedor:has(> table > tbody > tr:nth-child(25)):not(:has(input, select, textarea)):not(.detalle-lineas):not(.tabla-historial):not(.tabla-permisos) {
  max-height: clamp(320px, calc(100vh - var(--alto-barra) - 160px), 900px);
  overflow: auto;
}

.tabla-contenedor:has(> table > tbody > tr:nth-child(25)):not(:has(input, select, textarea)) > table > thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie-suave);
  box-shadow: inset 0 -1px 0 var(--borde);
}

@media print {
  .tabla-contenedor {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Pantallas táctiles (iPad, teléfono): botones y campos de 44 px de alto, más fáciles de tocar.
   En la PC no cambia nada. :where() deja la especificidad en cero: lo que ya fija su propio alto,
   los botones chicos y lo que está dentro de una tabla quedan como están. */
@media (pointer: coarse) {
  :where(button:not(.mini, .seccion-boton), a.boton:not(.mini), input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="hidden"]), select) {
    min-height: 44px;
  }

  :where(td, th) :where(button, a.boton, input, select) {
    min-height: 0;
  }
}

td.acciones {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

td.acciones button {
  padding: 4px 10px;
  font-size: 13px;
}

/* Botones al final de una fila que no rompen la tabla (td.acciones es flex): en una línea y del tamaño de td.acciones. */
td.botones-fila {
  white-space: nowrap;
  text-align: right;
}

td.botones-fila > * + * {
  margin-left: 6px;
}

td.botones-fila button,
td.botones-fila a.boton {
  padding: 4px 10px;
  font-size: 13px;
}

/* CDC de 44 dígitos en una sola línea (pedido de Fredy 05-11-2026); la columna se puede achicar con el tirador. */
td.celda-cdc {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

button.peligro {
  background: var(--error);
}

button.secundario {
  background: var(--boton-secundario);
}

.paginado {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 12px;
}

dialog.dialogo-ancho {
  width: min(1100px, calc(100vw - 32px));
}

dialog.dialogo-ancho .tabla-contenedor {
  max-height: 60vh;
  overflow-y: auto;
}

dialog h2 {
  margin: 0;
  font-size: 18px;
}

#ficha-campos {
  display: grid;
  gap: 12px;
}

select {
  padding: 8px 10px;
  font-size: 16px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

main.ancho {
  max-width: 1600px;
}

dialog.dialogo-ficha {
  width: min(1000px, calc(100vw - 32px));
}

dialog.dialogo-ficha #ficha-campos {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

dialog.dialogo-ficha #ficha-campos > .pestanas {
  grid-column: 1 / -1;
}

dialog.dialogo-ficha .ficha-seccion:not(.dos-columnas) {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

tr.clic {
  cursor: pointer;
}

tr.clic:hover,
tr.clic:focus {
  background: var(--azul-claro);
  outline: none;
}

.encabezado-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.encabezado-ficha.apilado {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.encabezado-ficha.apilado .acciones {
  justify-content: flex-end;
}

.encabezado-ficha h1 {
  margin: 8px 0;
  font-size: 20px;
}

.aviso {
  margin: 0;
  color: var(--exito);
}

#ficha {
  display: grid;
  gap: 12px;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 12px 14px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
}

legend {
  padding: 0 6px;
  font-weight: 600;
}

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 14px;
}

.campo {
  display: grid;
  gap: 4px;
  align-content: start;
  font-size: 14px;
}

.campo.completo {
  grid-column: 1 / -1;
}

.campo.doble {
  grid-column: span 2;
}

@media (max-width: 600px) {
  .campo.doble {
    grid-column: 1 / -1;
  }
}

/* Casilla o radio con su etiqueta en la misma línea, alineados a la izquierda (también label.casilla sin .campo). */
.campo.casilla,
label.casilla {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.campo.casilla > input,
label.casilla > input {
  flex: none;
  width: auto;
  margin: 0;
}

.grupo-opciones .campo.casilla > span {
  white-space: nowrap;
}

.grupo-opciones > div {
  display: grid;
  gap: 4px;
}

.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select,
.campo textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
}

.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled {
  background: var(--superficie-suave);
  color: var(--texto);
}

textarea {
  padding: 8px 10px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
  resize: vertical;
}

.mayusculas {
  text-transform: uppercase;
}

.pestanas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 2px solid var(--azul);
}

.pestanas-lista button {
  flex: none;
  padding: 8px 14px;
  border-radius: 6px 6px 0 0;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
}

.pestanas-lista button[aria-selected="true"] {
  background: var(--azul);
  color: var(--sobre-azul);
}

.pestanas-lista button:disabled {
  background: var(--borde);
  color: var(--texto-suave);
  cursor: not-allowed;
}

.pestanas-panel {
  padding-top: 12px;
}

.pagina {
  display: grid;
  gap: 12px;
}

button.icono {
  min-width: 38px;
  padding: 8px 10px;
}

button.orden {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
}

button.orden .flecha {
  min-width: 10px;
  font-size: 10px;
}

th.numero,
td.numero {
  text-align: right;
  white-space: nowrap;
}

.selector {
  margin-bottom: 10px;
}

.selector button.activo {
  background: var(--azul);
}

.tabla-precios.modo-lista1 th:nth-child(3),
.tabla-precios.modo-lista1 td:nth-child(3) {
  display: none;
}

.tabla-precios td {
  padding: 4px 6px;
}

.tabla-precios input {
  width: 100%;
  min-width: 80px;
  padding: 5px 8px;
  font-size: 14px;
  text-align: right;
}

table.grilla-lineas {
  table-layout: fixed;
}

.grilla-lineas th {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Asa para cambiar el ancho: una raya vertical siempre visible entre títulos, más marcada al pasar el mouse. */
.tirador-columna {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
}

.tirador-columna::after {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  right: 3px;
  width: 2px;
  border-radius: 1px;
  background: var(--borde-fuerte);
}

.tirador-columna:hover,
.tirador-columna.arrastrando {
  background: var(--foco);
}

.tirador-columna:hover::after,
.tirador-columna.arrastrando::after {
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--azul);
}

@media (pointer: coarse) {
  .tirador-columna {
    width: 18px;
  }

  .tirador-columna::after {
    right: 6px;
  }
}

.restablecer-columnas {
  padding: 0 6px;
  min-height: 0;
  font-size: 14px;
  line-height: 1.4;
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--borde);
}

.celda-texto {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tabla-lineas td {
  padding: 4px 6px;
  vertical-align: middle;
}

.tabla-lineas input {
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  font-size: 14px;
}

.tabla-lineas td.numero input {
  text-align: right;
}

.celda-codigo {
  display: flex;
  gap: 4px;
}

.boton-lupa,
.boton-quitar {
  flex: none;
  padding: 4px 7px;
  font-size: 13px;
}

dialog.dialogo-busqueda .tarjeta > input {
  width: 100%;
  font-size: 18px;
}

dialog.dialogo-busqueda .tabla-contenedor {
  max-height: 55vh;
  overflow-y: auto;
}

/* Buscador de producto: resultados y, al costado, el stock por depósito del producto marcado. */
.busqueda-con-stock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 12px;
  align-items: start;
}

.stock-depositos {
  max-height: 55vh;
  overflow-y: auto;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 8px;
  background: var(--superficie-suave);
}

.stock-depositos h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.stock-depositos table {
  width: 100%;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.stock-depositos tr.total td {
  font-weight: 700;
  border-top: 1px solid var(--borde-fuerte);
}

@media (max-width: 900px) {
  .busqueda-con-stock { grid-template-columns: 1fr; }
  .stock-depositos { max-height: 30vh; }
}

.tabla-busqueda tr[aria-selected="true"] td {
  background: var(--azul-claro);
}

.tabla-busqueda {
  table-layout: fixed;
}

.tabla-busqueda th:nth-child(1) {
  width: 60px;
}

.tabla-busqueda th:nth-child(2) {
  width: 95px;
}

.tabla-busqueda th:nth-child(4) {
  width: 85px;
}

.tabla-busqueda th:nth-child(5) {
  width: 75px;
}

.tabla-busqueda th:nth-child(6),
.tabla-busqueda th:nth-child(7) {
  width: 105px;
}

.tabla-busqueda td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

td.negativo {
  color: var(--error);
}

tr.anulado td {
  color: var(--texto-suave);
  text-decoration: line-through;
}

.filtros-movimiento {
  flex-wrap: wrap;
  align-items: flex-end;
}

/* El texto de búsqueda no se achica por debajo de un ancho usable aunque los combos sean largos. */
.filtros-movimiento > input[type="search"] {
  flex: 1 1 240px;
  min-width: 200px;
}

.filtros-movimiento select {
  max-width: 260px;
}

.tabla-precios input:disabled,
.campo output {
  background: var(--superficie-suave);
}

.campo output {
  padding: 8px 10px;
  border-radius: 6px;
}

.buscador-combo {
  position: relative;
}

.buscador-lista {
  position: absolute;
  z-index: 10;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  max-height: 260px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.buscador-lista li {
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
}

.buscador-lista li[aria-selected="true"],
.buscador-lista li:hover {
  background: var(--azul-claro);
}

.buscador-lista li.vacio {
  color: var(--texto-suave);
  cursor: default;
}

.nota {
  margin: 0 0 8px;
  color: var(--texto-suave);
  font-size: 13px;
}

.vista-imagen {
  display: block;
  max-width: 100%;
  max-height: 240px;
  margin: 0.5rem 0;
  border: 1px solid var(--borde, var(--borde-fuerte));
  border-radius: 4px;
}

.reporte-filtros .grilla + .grilla {
  margin-top: 12px;
}

.encabezado-reporte {
  margin: 20px 0 8px;
}

.encabezado-reporte h2 {
  margin: 0 0 4px;
}

.tabla-reporte td.numero,
.tabla-reporte th.numero {
  text-align: right;
  white-space: nowrap;
}

.tabla-reporte .fila-grupo td,
.tabla-contenedor tr.fila-grupo td {
  font-weight: 600;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
}

.tabla-reporte .fila-subtotal td,
.tabla-reporte .fila-total td {
  font-weight: 600;
  border-top: 1px solid var(--borde);
}

.tabla-reporte .fila-total td {
  border-top-width: 2px;
}

.imagen-producto {
  display: block;
  max-width: 100%;
  max-height: 320px;
  margin: 4px 0 8px;
  border: 1px solid var(--borde);
  border-radius: 4px;
  object-fit: contain;
}

.ficha-seccion {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

.ficha-seccion.dos-columnas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}

@media (max-width: 640px) {
  .ficha-seccion.dos-columnas {
    grid-template-columns: 1fr;
  }
}

tr.seleccionada td {
  background: var(--azul-claro);
}

#panel-componentes, #panel-mano-obra {
  margin-top: 12px;
}

#tabla-mano-obra {
  table-layout: fixed;
  width: 100%;
}

#tabla-mano-obra th:nth-child(2) { width: 90px; }
#tabla-mano-obra th:nth-child(3) { width: 120px; }
#tabla-mano-obra th:nth-child(4) { width: 120px; }
#tabla-mano-obra th:nth-child(5) { width: 44px; }

#tabla-mano-obra input,
#tabla-mano-obra select {
  width: 100%;
  min-width: 0;
}
.tabla-historial {
  max-height: min(40vh, 320px);
  overflow-y: auto;
}

.tabla-historial thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.pie-historial {
  color: var(--texto-suave);
  text-align: center;
}

.pie-historial button {
  margin-left: 8px;
}
.pie-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 10px 0;
  color: var(--texto-suave);
  font-size: 14px;
}

.pie-lista .aviso {
  margin: 0;
}
.enlace-barra {
  color: inherit;
  font-size: 13px;
  opacity: 0.9;
}

.tabla-permisos {
  max-height: min(60vh, 560px);
  overflow: auto;
}

.tabla-permisos thead th,
.tabla-permisos .fila-masiva td {
  position: sticky;
  z-index: 1;
  background: var(--superficie-suave);
}

.tabla-permisos thead tr:first-child th {
  top: 0;
}

/* 09-11-2026: encabezados que ordenan con un clic (permisos de usuario) */
.tabla-permisos th.ordenable {
  cursor: pointer;
  user-select: none;
}

.tabla-permisos th.ordenable:hover {
  text-decoration: underline;
}

.tabla-permisos .fila-masiva td {
  top: 37px;
  white-space: nowrap;
}

.centro {
  text-align: center;
}

button.mini,
a.boton.mini {
  padding: 2px 6px;
  font-size: 12px;
}
.nota.bloque {
  display: block;
}

/* Filtros de informes con la disposición del formulario VFP; los agregados de la web van en "Más filtros" */
.lienzo-filtros {
  margin-bottom: 8px;
}

.lienzo-filtros .buscador,
.lienzo-filtros .buscador input {
  width: 100%;
  height: 100%;
}

.mas-filtros {
  margin-top: 8px;
}

/* Volver a la pantalla de origen (camino) y atajos de teclado en los botones */
.miga {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--texto-suave);
}

.miga-camino strong {
  color: var(--texto);
}

kbd.atajo {
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font: 10px ui-monospace, Consolas, monospace;
  opacity: 0.7;
}

/* Plan de cuentas: árbol a la izquierda, ficha a la derecha */
.plan-cuentas {
  display: grid;
  /* Ancho del árbol: el elegido con el separador o 480 px (en pantallas chicas, proporcional, mínimo 320). */
  grid-template-columns: var(--ancho-arbol, clamp(320px, 45%, 480px)) 10px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}

.plan-separador {
  align-self: stretch;
  min-height: 200px;
  border-radius: 4px;
  cursor: col-resize;
  background: linear-gradient(var(--borde), var(--borde)) center / 2px 100% no-repeat;
}

.plan-separador:hover,
.plan-separador:focus-visible {
  background: linear-gradient(var(--azul), var(--azul)) center / 3px 100% no-repeat;
  outline: none;
}

@media (max-width: 900px) {
  .plan-cuentas {
    grid-template-columns: 1fr;
  }

  .plan-separador {
    display: none;
  }
}

.plan-arbol {
  position: sticky;
  top: calc(var(--alto-barra) + 8px);
  max-height: calc(100vh - var(--alto-barra) - 24px);
  overflow: hidden;
  grid-template-rows: auto auto auto auto 1fr;
}

/* Filtros del árbol: tipo de cuenta y cuenta padre */
.plan-filtros {
  margin-bottom: 0;
}

.plan-filtro {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 130px;
  min-width: 0;
}

.plan-filtro.ancho {
  flex: 2 1 220px;
}

.plan-filtro span {
  font-size: 0.85em;
  color: var(--texto-suave);
}

.plan-filtro select {
  width: 100%;
  min-width: 0;
}

.plan-acciones {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
}

.arbol,
.arbol ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.arbol {
  overflow: auto;
  min-height: 200px;
}

.arbol ul ul {
  margin-left: 14px;
  padding-left: 6px;
  border-left: 1px solid var(--borde);
}

.arbol-tipo + .arbol-tipo {
  margin-top: 8px;
}

.arbol-tipo-titulo {
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--superficie-suave);
  color: var(--azul);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.arbol-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
}

.arbol-fila:hover {
  background: var(--superficie-suave);
}

.arbol-fila.activa {
  background: var(--azul-claro);
  box-shadow: inset 3px 0 0 var(--azul);
  font-weight: 600;
}

.arbol-fila.anulada {
  color: var(--texto-suave);
  text-decoration: line-through;
}

.arbol-flecha {
  flex: none;
  width: 18px;
  padding: 0;
  background: none;
  color: var(--texto-suave);
  font-size: 12px;
}

.arbol-flecha:disabled {
  opacity: 1;
  cursor: default;
}

.arbol-codigo {
  flex: none;
  min-width: 70px;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--azul-oscuro);
}

.arbol-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arbol-marca {
  flex: none;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--superficie-suave);
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 400;
}

.arbol-alerta {
  flex: none;
  color: var(--resaltado);
}

.plan-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.plan-campos .doble {
  grid-column: span 2;
}

@media (max-width: 600px) {
  .plan-campos {
    grid-template-columns: 1fr;
  }

  .plan-campos .doble {
    grid-column: auto;
  }
}

.plan-fiscal .solo-interno {
  display: none;
}

.plan-observaciones {
  padding: 8px 12px;
  border-left: 3px solid var(--resaltado);
  border-radius: 4px;
  background: var(--superficie-suave);
  font-size: 14px;
}

.plan-observaciones ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

tr.clicable {
  cursor: pointer;
}

tr.clicable:hover td {
  background: var(--superficie-suave);
}

/* Selector de tema en la barra */
.selector-tema {
  width: auto;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 13px;
}

.selector-tema option {
  background: var(--superficie);
  color: var(--texto);
}

/* Código de producto como enlace a la ficha */
a.enlace-producto {
  color: var(--azul);
  text-decoration: none;
  cursor: pointer;
}

a.enlace-producto:hover,
a.enlace-producto:focus-visible {
  text-decoration: underline;
}

/* Informes: papel y orientación junto al botón PDF */
.opciones-pdf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.opciones-pdf select {
  width: auto;
  padding: 6px 8px;
  font-size: 13px;
}

.pdf-medidas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.pdf-medidas[hidden] {
  display: none;
}

.pdf-medidas input {
  width: 64px;
  padding: 6px;
  font-size: 13px;
  text-align: right;
}

/* Parámetros: disposición copiada de los formularios VFP (posiciones en píxeles) */
.lienzo-scroll {
  overflow: auto;
  max-width: 100%;
  padding-bottom: 4px;
}

.lienzo-vfp {
  position: relative;
  font: 11px Tahoma, "Segoe UI", sans-serif;
  color: var(--texto);
}

.vfp-control input[inputmode="decimal"] {
  text-align: right;
}

.herramientas .casilla-linea {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.lienzo-vfp > * {
  position: absolute;
}

.vfp-marco {
  border: 1px solid var(--borde-fuerte);
  border-radius: 3px;
  pointer-events: none;
}

.vfp-etiqueta {
  white-space: nowrap;
  line-height: 15px;
}

.vfp-control input:not([type="checkbox"]):not([type="radio"]),
.vfp-control select,
.vfp-control textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 1px 4px;
  font: inherit;
  border: 1px solid var(--borde-fuerte);
  border-radius: 2px;
  background: var(--superficie);
}

.vfp-control textarea {
  resize: none;
}

/* Fechas del diseño VFP (72 px): sin el ícono del calendario y con poco relleno para que se vea el año completo. */
.vfp-control input[type="date"] {
  padding: 1px 2px;
}

.vfp-control input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

.lienzo-vfp label,
.lienzo-vfp input,
.lienzo-vfp th,
.lienzo-vfp td {
  font: inherit;
  margin: 0;
}

.vfp-casilla label,
.vfp-opciones label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
}

.vfp-casilla input,
.vfp-opciones input {
  margin: 0;
}

/* Como en VFP, el texto de una casilla no pisa al control vecino (el texto completo queda en el tooltip). */
.vfp-casilla {
  overflow: hidden;
}

.vfp-opciones {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 2px;
}

.vfp-opciones label {
  position: absolute;
}

.vfp-paginas .pestanas-panel {
  position: relative;
}

.vfp-grilla {
  border-collapse: collapse;
  font: inherit;
}

.vfp-grilla th,
.vfp-grilla td {
  padding: 0;
  border: 1px solid var(--borde-fuerte);
  font-weight: normal;
  text-align: center;
}

.vfp-grilla th {
  padding: 2px 4px;
  background: var(--superficie-suave);
}

.vfp-grilla input {
  width: 100%;
  border: 0;
  padding: 2px 4px;
  font: inherit;
  text-align: right;
}

.vfp-control.coincide,
.vfp-grilla td.coincide,
label.campo.coincide {
  outline: 2px solid var(--resaltado);
  outline-offset: 2px;
  border-radius: 2px;
}

.con-nombres .vfp-control::after {
  content: attr(data-campo);
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 2;
  padding: 0 3px;
  font-size: 10px;
  line-height: 12px;
  color: var(--texto-suave);
  background: var(--superficie-traslucida);
  pointer-events: none;
}

/* Filtro de selección múltiple en informes (casillas en una caja con desplazamiento). */
.filtro-varios {
  display: flex; flex-direction: column; gap: 2px; max-height: 9.5em; overflow-y: auto; padding: 4px 6px;
  border: 1px solid var(--borde-fuerte); border-radius: 4px; background: var(--superficie); min-width: 12em;
}
.filtro-varios label { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: normal; }

/* Informes con imágenes: miniatura en la tabla y catálogo en tarjetas. */
.celda-imagen { width: 64px; text-align: center; }
.miniatura-informe { max-width: 60px; max-height: 60px; display: block; margin: auto; }
.sin-imagen { color: var(--texto-suave); font-size: 0.8em; }
.tarjetas-informe { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 8px 0; }
.tarjeta-informe { border: 1px solid var(--borde); border-radius: 6px; padding: 8px; background: var(--superficie); display: flex; flex-direction: column; gap: 3px; }
.tarjeta-informe p { margin: 0; font-size: 0.9em; }
.tarjeta-imagen { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--superficie-suave); border-radius: 4px; }
.imagen-tarjeta { max-width: 100%; max-height: 146px; }
.tarjeta-descripcion { min-height: 2.4em; }

/* Actualizar precios: valores que cambian en la vista previa. */
.cambio { font-weight: bold; color: var(--exito); }

/* Filas que abren su documento (Movimientos de la ficha de producto, informes). */
tr.fila-enlace { cursor: pointer; }
tr.fila-enlace:hover td, tr.fila-enlace:focus td { background: var(--resaltado); }
tr.fila-enlace:focus { outline: 2px solid var(--foco); outline-offset: -2px; }

/* Ficha de producto: imagen ampliable y visor a pantalla completa. */
.imagen-producto { cursor: zoom-in; }
dialog.visor-imagen { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0;
  background: transparent; display: flex; align-items: center; justify-content: center; }
dialog.visor-imagen:not([open]) { display: none; }
dialog.visor-imagen::backdrop { background: rgba(0, 0, 0, 0.85); }
.visor-imagen-foto { max-width: 96vw; max-height: 94vh; object-fit: contain; background: #fff; cursor: zoom-out; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
.visor-imagen-cerrar { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; font-size: 20px;
  background: rgba(255, 255, 255, 0.9); color: #000; border: 0; cursor: pointer; }

/* Miniaturas de producto en transacciones y buscador (estilo del WebApp: cuadradas, redondeadas, clic para ampliar). */
.miniatura-producto { display: inline-flex; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--superficie-suave);
  vertical-align: middle; cursor: zoom-in; align-items: center; justify-content: center; }
.miniatura-producto.sin { cursor: default; }
.miniatura-producto img { width: 100%; height: 100%; object-fit: cover; }
.miniatura-producto:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
td.celda-miniatura { width: 56px; padding: 2px 4px; text-align: center; }
@media (max-width: 800px) { .miniatura-producto { width: 40px; height: 40px; } td.celda-miniatura { width: 48px; } }

/* Imágenes de recepción y devolución de servicios de reparación. */
.galeria-servicio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.galeria-servicio figure {
  margin: 0;
  width: 132px;
  font-size: 12px;
}

.galeria-servicio img {
  width: 132px;
  height: 100px;
  object-fit: cover;
  border: 1px solid var(--borde, #ccc);
  border-radius: 4px;
  cursor: zoom-in;
}

/* Pestaña Utilitarios de la ficha de producto. */
.acciones.utilitarios button.activo {
  outline: 2px solid var(--acento, #1f5fbf);
}

tr.total td {
  font-weight: bold;
  border-top: 1px solid var(--borde);
}

ul.lista-opciones {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 6px;
}

ul.lista-opciones button {
  width: 100%;
  text-align: left;
}

/* Compra: pie con opciones, tipo y totales. */
.compra-pie {
  align-items: start;
  margin-top: 12px;
}

.compra-pie legend.sub {
  margin-top: 8px;
  font-weight: 600;
}

dl.totales-compra {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 16px;
  margin: 0;
  justify-content: end;
}

dl.totales-compra dt {
  text-align: right;
  color: var(--texto-suave, #555);
}

dl.totales-compra dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

dl.totales-compra dd.total {
  font-weight: 700;
  font-size: 1.1em;
}

/* ---------- Grilla de íconos (Inicio y páginas de módulo) ---------- */
:root {
  --modulo-stock: #e8833a;
  --modulo-compra: #3b82c4;
  --modulo-venta: #2f9e6f;
  --modulo-finanza: #7a5cc9;
  --modulo-contabilidad: #c0504d;
  --modulo-sistema: #5b6b7d;
  --modulo-comision: #c79a1c;
  --modulo-rrhh: #d0558f;
  --modulo-servicios: #1f9aa8;
  --modulo-veterinaria: #8b5e3c;
  --modulo-web: #6f9a1f;
}

:root[data-tema="oscuro"] {
  --modulo-stock: #c96d28;
  --modulo-compra: #2f6ea8;
  --modulo-venta: #23825a;
  --modulo-finanza: #6448ab;
  --modulo-contabilidad: #a8403d;
  --modulo-sistema: #4c5a6a;
  --modulo-comision: #a98214;
  --modulo-rrhh: #b04476;
  --modulo-servicios: #18808c;
  --modulo-veterinaria: #744e31;
  --modulo-web: #5b7f19;
}

:root[data-tema="contraste"] {
  --modulo-stock: #a3470a;
  --modulo-compra: #0b4f8a;
  --modulo-venta: #0b6640;
  --modulo-finanza: #4b2b9a;
  --modulo-contabilidad: #8e1c18;
  --modulo-sistema: #2f3b48;
  --modulo-comision: #6f5000;
  --modulo-rrhh: #8a1450;
  --modulo-servicios: #035a64;
  --modulo-veterinaria: #5a3519;
  --modulo-web: #3f5a00;
}

ul.grilla-iconos {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 12px;
}

@media (min-width: 1500px) {
  ul.grilla-iconos {
    grid-template-columns: repeat(8, minmax(132px, 1fr));
  }
}

a.icono-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-radius: 12px;
  color: var(--texto);
  text-decoration: none;
  text-align: center;
}

a.icono-app:hover .icono-app-cuadro {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgb(0 0 0 / 0.22);
}

a.icono-app:focus-visible {
  outline: 3px solid var(--color-app);
  outline-offset: 2px;
}

.icono-app-cuadro {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: var(--color-app);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.18);
  transition: transform 0.12s, box-shadow 0.12s;
}

.icono-app-cuadro svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono-app-nombre {
  font-size: 0.92em;
  line-height: 1.25;
  max-width: 140px;
  overflow-wrap: anywhere;
}

/* Lupa de las pantallas de consulta ("Ver …"): mismo ícono y color que la de carga, con la lupa abajo a la derecha. */
.icono-app-ver {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-app);
  border: 2px solid var(--fondo, #fff);
  display: grid;
  place-items: center;
}

.icono-app-cuadro .icono-app-ver svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.icono-app-insignia {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #d32f2f;
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--fondo, #fff);
}

.seccion-iconos h2 {
  font-size: 1.05em;
  margin: 18px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--borde);
}

/* Inicio: Informes y Herramientas como lista compacta plegable. */
details.seccion-lista {
  margin-top: 18px;
  border-top: 1px solid var(--borde);
}

details.seccion-lista summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-weight: 600;
  font-size: 1.05em;
  cursor: pointer;
}

details.seccion-lista summary:focus-visible {
  outline: 3px solid var(--color-app);
  outline-offset: 2px;
}

.seccion-lista-cantidad {
  font-size: 0.8em;
  font-weight: 600;
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--color-app);
  color: #fff;
  text-align: center;
}

ul.lista-opciones-modulo {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  columns: 3 260px;
  column-gap: 24px;
}

ul.lista-opciones-modulo li {
  break-inside: avoid;
  padding: 3px 0;
}

ul.lista-opciones-modulo a {
  display: block;
  padding: 6px 10px;
  border-left: 3px solid var(--color-app);
  border-radius: 0 6px 6px 0;
  color: var(--texto);
  text-decoration: none;
  background: var(--superficie);
}

ul.lista-opciones-modulo a:hover,
ul.lista-opciones-modulo a:focus-visible {
  background: color-mix(in srgb, var(--color-app) 14%, var(--superficie));
  outline: none;
}

/* Inicio: los módulos en filas de 4 (8 módulos = dos filas parejas, sin uno suelto). */
@media (min-width: 700px) {
  ul.grilla-iconos.grilla-modulos {
    grid-template-columns: repeat(4, minmax(150px, 190px));
  }
}

/* Detalle de transacciones: alto máximo con scroll vertical propio; los títulos quedan fijos arriba. */
.tabla-contenedor.detalle-lineas {
  max-height: clamp(280px, 60vh, 720px);
  overflow: auto;
}

.detalle-lineas table.grilla-lineas thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie-suave);
  box-shadow: inset 0 -1px 0 var(--borde);
}

/* Campos numéricos con máscara (js/numeros.js): alineados a la derecha, cifras parejas. */
input.campo-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Bloque plegable dentro de una ficha (Orden de compra: otros datos). */
details.detalle-plegable {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--superficie);
}

details.detalle-plegable > summary {
  cursor: pointer;
  font-weight: 600;
}

details.detalle-plegable[open] > summary {
  margin-bottom: 10px;
}

dialog .casilla-linea {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 6px 0;
}

/* Compra: pestañas Otros datos y Contabilidad (controles compactos dentro de la tabla). */
#filas-otros select,
#filas-contabilidad select {
  width: 100%;
  min-width: 140px;
  max-width: 300px;
}

#filas-otros input {
  width: 110px;
}

#pagos-notas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: flex-start;
}

#pagos-notas > p {
  flex-basis: 100%;
}

/* Pie de las listas: paginación ⏮ ◀ Página X de Y ▶ ⏭. */
.pie-lista .paginacion {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.pie-lista button.paginador {
  min-width: 40px;
  padding: 4px 10px;
}

/* Logo del sistema (conflocal.logo de VFP): en la barra sobre un recuadro blanco y grande en el ingreso. */
.barra a.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

img.logo-barra {
  height: 34px;
  width: auto;
  padding: 2px 4px;
  background: #fff;
  border-radius: 6px;
}

img.logo-ingreso {
  display: block;
  width: min(240px, 70%);
  height: auto;
  margin: 24px auto 8px;
}

/* Nombre de la empresa en el ingreso (instalación con varias empresas) */
p.empresa-ingreso {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 12px;
}

@media (max-width: 600px) {
  .barra a.marca strong {
    display: none;
  }
}

h1.titulo-ingreso {
  text-align: center;
}

/* Inicio: logo de la empresa (conflocal.logo) con saludo y fecha, como la WebApp. */
.cabecera-inicio {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 4px;
}

img.logo-empresa {
  width: 96px;
  height: 96px;
  object-fit: contain;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  flex: none;
}

.cabecera-inicio .saludo {
  margin: 0;
  font-size: 1.3em;
  font-weight: 600;
}

.cabecera-inicio .nota {
  margin: 2px 0 0;
}

.cabecera-inicio .nota::first-letter {
  text-transform: uppercase;
}

/* Tablero del Inicio (js/inicio.js + servicios/tablero.js): cajas del día con el color de su módulo arriba.
   4 columnas en la PC, 2 en el iPad vertical, 1 en el teléfono; Ventas ocupa 2x2 y Cuentas vencidas 2 columnas. */
.tablero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
  margin: 12px 0 8px;
}

a.caja-tablero {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-top: 4px solid var(--color-modulo, var(--azul));
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
}

a.caja-tablero:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgb(0 0 0 / 0.1);
}

a.caja-tablero:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.caja-ventas {
  grid-column: span 2;
  grid-row: span 2;
}

.caja-cuentasVencidas,
.caja-ventasContado,
.caja-ventasCredito {
  grid-column: span 2;
}

form.filtros-tablero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 12px 0 0;
}

form.filtros-tablero[hidden] {
  display: none;
}

form.filtros-tablero label {
  display: grid;
  gap: 2px;
  color: var(--texto-suave);
  font-size: 13px;
}

.tablero-titulo {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tablero-titulo .punto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-modulo, var(--azul));
}

.tablero-cifra {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.tablero-cifra small {
  color: var(--texto-suave);
  font-size: 15px;
  font-weight: 500;
}

.tablero-detalle {
  margin: 0;
  color: var(--texto-suave);
  font-size: 14px;
}

.chip-tablero {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.chip-tablero.bien { background: color-mix(in srgb, var(--exito) 14%, transparent); color: var(--exito); }
.chip-tablero.mal { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }
.chip-tablero.ojo { background: color-mix(in srgb, var(--resaltado) 22%, transparent); color: var(--texto); }

.tablero-lista {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.tablero-lista li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--borde);
}

.tablero-lista li > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tablero-lista li > span:last-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

svg.tablero-grafico {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
}

svg.tablero-grafico .barra-hora { fill: var(--color-modulo, var(--azul)); opacity: 0.75; }
svg.tablero-grafico .barra-hora.ahora { opacity: 1; }
svg.tablero-grafico .eje { fill: var(--texto-suave); font-size: 10px; }
svg.tablero-grafico .linea-base { stroke: var(--borde); }

h2.titulo-modulos {
  margin: 18px 0 6px;
  color: var(--texto-suave);
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .tablero { grid-template-columns: minmax(0, 1fr); }
  .caja-ventas, .caja-cuentasVencidas, .caja-ventasContado, .caja-ventasCredito { grid-column: auto; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  a.caja-tablero { transition: none; }
  a.caja-tablero:hover { transform: none; }
}

@media (max-width: 600px) {
  img.logo-empresa {
    width: 72px;
    height: 72px;
  }
}

/* Preparación de la orden de transferencia. */
.prep-cuenta {
  font-weight: 600;
  color: var(--azul);
}

.prep-cuenta.completo {
  color: var(--exito);
}

#prep-filas tr.prep-fila-hecha td {
  background: color-mix(in srgb, var(--exito) 10%, var(--superficie));
}

#prep-filas tr.prep-encontrada td {
  outline: 2px solid var(--resaltado);
  outline-offset: -2px;
}

#prep-filas button.prep-hecho {
  background: var(--exito);
}

#prep-filas input {
  width: 110px;
}

td.prep-si {
  color: var(--exito);
  font-weight: 600;
}

#prep-filas button {
  white-space: nowrap;
  padding: 6px 10px;
}

#prep-filas td:nth-child(3) {
  white-space: normal;
  min-width: 160px;
}

/* Preparar transferencia: barra de progreso y cantidad de preparados por orden. */
.progreso-prep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}

.barra-prep {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  background: var(--borde);
  overflow: hidden;
}

.barra-prep span {
  display: block;
  height: 100%;
  background: var(--exito);
  transition: width 0.2s;
}

.chip-prep {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 10px;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  font-weight: 600;
  white-space: nowrap;
}

/* Escáner con la cámara (js/escaner.js, el mismo de la WebApp). */
dialog.escaner {
  width: min(720px, calc(100% - 16px));
  max-height: calc(100% - 16px);
  padding: 12px;
  gap: 10px;
}

dialog.escaner[open] {
  display: flex;
  flex-direction: column;
}

.esc-cab b {
  font-size: 19px;
}

.esc-video {
  position: relative;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-height: 60vh;
}

.esc-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Marco guía: zona donde se analiza el código. */
.esc-marco {
  position: absolute;
  inset: 20% 7.5%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
}

.esc-msg {
  margin: 0;
  min-height: 26px;
  text-align: center;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.esc-msg.ok {
  color: var(--exito);
  font-weight: 600;
}

.esc-msg.mal {
  color: var(--error);
  font-weight: 600;
}

.esc-msg .miniatura-producto {
  vertical-align: middle;
  margin-right: 8px;
}

.esc-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.esc-cont {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

/* Listados con columnas de ancho ajustable (lista.js): con anchos fijos la tabla mide la suma de las columnas
   y el contenedor muestra el scroll horizontal. */
table.lista-redimensionable th {
  position: relative;
}

table.lista-redimensionable.anchos-fijos {
  table-layout: fixed;
  max-width: none;
}

table.lista-redimensionable.anchos-fijos td,
table.lista-redimensionable.anchos-fijos th {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dos paneles lado a lado (Auditar documentos: documentos y faltantes). */
.grilla-dos {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 14px;
}
@media (max-width: 760px) {
  .grilla-dos { grid-template-columns: minmax(0, 1fr); }
}

/* Atrás / Adelante globales de la barra (historial del navegador; sesion.js). Tamaño táctil para iPad. */
.barra .historial-nav {
  display: inline-flex;
  gap: 6px;
  margin-left: 0;
}
.barra .boton-historial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 8px;
  background: rgb(255 255 255 / 16%);
  color: var(--sobre-azul);
  cursor: pointer;
  touch-action: manipulation;
}
.barra .boton-historial:hover:not(:disabled) {
  background: rgb(255 255 255 / 28%);
}
.barra .boton-historial:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (max-width: 600px) {
  .barra .boton-historial { width: 38px; height: 36px; }
}

/* Agenda > Ubicación y fachada: mapa embebido de Google Maps y foto de fachada (datos de la WebApp). */
.ubicacion-agenda fieldset {
  display: grid;
  gap: 10px;
}
iframe.mapa-agenda {
  width: 100%;
  height: min(420px, 60vh);
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
}
img.foto-fachada {
  display: block;
  max-width: 100%;
  max-height: 480px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
}
.fila-coordenadas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}
.fila-coordenadas .campo {
  flex: 1 1 320px;
}
.fila-coordenadas[hidden] {
  display: none;
}

/* Ficha de producto > Contabilidad, como abm_producto: cuentas a la izquierda (una debajo de otra); IVA, costos y banco a la derecha. */
.pagina:has(> .contab-cuentas) {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: auto auto 1fr;
  gap: 0 16px;
  align-items: start;
}
.pagina > .contab-cuentas {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.pagina > .contab-cuentas .grilla {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.pagina > .contab-iva { grid-column: 2; grid-row: 1; }
.pagina > .contab-costos { grid-column: 2; grid-row: 2; }
.pagina > .contab-banco { grid-column: 2; grid-row: 3; }
.pagina > .contab-iva .grilla,
.pagina > .contab-costos .grilla,
.pagina > .contab-banco .grilla {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
@media (max-width: 760px) {
  .pagina:has(> .contab-cuentas) { grid-template-columns: minmax(0, 1fr); }
  .pagina > .contab-cuentas,
  .pagina > .contab-iva,
  .pagina > .contab-costos,
  .pagina > .contab-banco { grid-column: 1; grid-row: auto; }
}

/* ---------- Diseño de las ventanas (selector de tema de la barra > "Diseño"; <html data-diseno>): Actual, Compacta y Estilo Windows ---------- */
/* A: compacta. Etiqueta arriba, campos más bajos y cada uno tan ancho como su dato (--caracteres lo pone ficha.js). */
:root[data-diseno="a"] main { gap: 8px; }
:root[data-diseno="a"] main fieldset { padding: 6px 10px 10px; }
:root[data-diseno="a"] main .pagina { gap: 8px; }
:root[data-diseno="a"] main .grilla {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 12px;
}
:root[data-diseno="a"] main .grilla > .campo {
  flex: 0 1 calc(var(--caracteres, 16) * 0.6em + 24px);
  min-width: 72px;
  max-width: 100%;
  gap: 2px;
}
:root[data-diseno="a"] main .grilla > .campo.completo { flex-basis: 100%; }
:root[data-diseno="a"] main .grilla > .campo.casilla { flex: 0 0 auto; min-width: 0; }
:root[data-diseno="a"] main .campo > span:first-child {
  font-size: 12px;
  color: var(--texto-suave);
}
:root[data-diseno="a"] main .campo input:not([type="checkbox"]),
:root[data-diseno="a"] main .campo select,
:root[data-diseno="a"] main .campo textarea {
  padding: 3px 7px;
  font-size: 14px;
}
:root[data-diseno="a"] main .campo input:not([type="checkbox"]),
:root[data-diseno="a"] main .campo select { height: 30px; }
:root[data-diseno="a"] main .pagina > .contab-cuentas .grilla > .campo { flex-basis: 100%; }

/* B: estilo Windows (como VFP). Etiqueta a la izquierda (alineada a la derecha), controles finos y recuadros grabados. */
:root[data-diseno="b"] main { gap: 8px; }
:root[data-diseno="b"] main fieldset {
  padding: 8px 12px 10px;
  border: 2px groove var(--borde);
  border-radius: 2px;
}
:root[data-diseno="b"] main legend { font-weight: 600; font-size: 13px; }
:root[data-diseno="b"] main .grilla {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 4px 18px;
}
:root[data-diseno="b"] main .grilla > .campo:not(.casilla) {
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
:root[data-diseno="b"] main .grilla > .campo:not(.casilla) > span:first-child {
  text-align: right;
  line-height: 1.15;
}
:root[data-diseno="b"] main .grilla > .campo.casilla { padding-left: 158px; font-size: 13px; }
:root[data-diseno="b"] main .campo input:not([type="checkbox"]),
:root[data-diseno="b"] main .campo select,
:root[data-diseno="b"] main .campo textarea {
  padding: 2px 5px;
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: 13px;
  border-radius: 2px;
}
:root[data-diseno="b"] main .campo input:not([type="checkbox"]),
:root[data-diseno="b"] main .campo select { height: 26px; }
:root[data-diseno="b"] main .pestanas-lista { gap: 0; border-bottom: 1px solid var(--borde-fuerte); }
:root[data-diseno="b"] main .pestanas-lista button {
  padding: 5px 12px;
  font-size: 13px;
  border: 1px solid var(--borde-fuerte);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: var(--borde);
  color: var(--texto);
}
:root[data-diseno="b"] main .pestanas-lista button[aria-selected="true"] {
  background: var(--superficie);
  color: var(--texto);
  font-weight: 600;
}
:root[data-diseno="b"] main .pagina > .contab-cuentas .grilla { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) {
  :root[data-diseno="b"] main .grilla { grid-template-columns: minmax(0, 1fr); }
  :root[data-diseno="b"] main .grilla > .campo:not(.casilla) { grid-template-columns: 110px minmax(0, 1fr); }
  :root[data-diseno="b"] main .grilla > .campo.casilla { padding-left: 118px; }
}

/* Compacta y Estilo Windows en el resto de las ventanas: tarjetas, tablas, botones y renglones más bajos. */
:root[data-diseno="a"] main .tarjeta, :root[data-diseno="b"] main .tarjeta { padding: 10px 12px; margin-bottom: 10px; }
:root[data-diseno="a"] main h1, :root[data-diseno="b"] main h1 { font-size: 1.35em; margin: 6px 0 10px; }
:root[data-diseno="a"] main h2, :root[data-diseno="b"] main h2 { font-size: 1.1em; margin: 4px 0 8px; }
:root[data-diseno="a"] main th, :root[data-diseno="a"] main td { padding: 3px 6px; }
:root[data-diseno="b"] main th, :root[data-diseno="b"] main td { padding: 2px 5px; font-size: 13px; }
:root[data-diseno="b"] main th { font-family: Tahoma, "Segoe UI", sans-serif; }
:root[data-diseno="a"] main .acciones, :root[data-diseno="b"] main .acciones { gap: 6px; margin-top: 8px; }
:root[data-diseno="a"] main button, :root[data-diseno="a"] main .boton { padding: 4px 12px; }
:root[data-diseno="b"] main button, :root[data-diseno="b"] main .boton { padding: 3px 12px; font-size: 13px; border-radius: 2px; }
:root[data-diseno="a"] main .grilla > .campo.doble { flex-basis: calc(var(--caracteres, 32) * 0.6em + 24px); }
:root[data-diseno="b"] main input.mini, :root[data-diseno="b"] main td input { height: 24px; font-size: 13px; }

/* Fila que no se puede elegir (Importar VENTAS: factura ya migrada o con datos inexistentes). */
tr.atenuada td { color: var(--texto-suave); }

/* Datos de un documento en dos columnas (etiqueta: valor). */
dl.datos-documento {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
  font-size: 14px;
}
dl.datos-documento dt { font-weight: 600; color: var(--texto-suave); }
dl.datos-documento dd { margin: 0; overflow-wrap: anywhere; }

/* Punto de venta: detalle a la izquierda y cobro a la derecha; total y vuelto grandes; controles cómodos para tablet. */
.punto-venta {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  .punto-venta { grid-template-columns: minmax(0, 1fr); }
}
.pv-codigo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}
.pv-codigo .campo { flex: 1 1 260px; }
.pv-codigo .pv-cantidad { flex: 0 0 110px; }
.pv-lineas input { width: 100%; min-width: 70px; padding: 6px 8px; }
.pv-total, .pv-vuelto {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
}
.pv-total strong { font-size: 34px; }
.pv-vuelto strong { font-size: 26px; }
.pv-cobro button, .pv-cobro .boton { min-height: 44px; }

/* Contabilidad: previa de asientos (tra_conta_procesos) y asiento manual */
.asientos-previa tr.total-asiento td { background: var(--azul-claro); font-weight: 600; }
.asientos-previa tr.sin-balancear td { color: var(--error); font-weight: 700; }
.asientos-previa tr.sin-cuenta td:nth-child(5) { color: var(--error); }
.asientos-previa input { width: 100%; min-width: 80px; }
.asientos-previa input.invalido { border-color: var(--error); }
.asientos-previa input.entrada-cuenta { min-width: 300px; }
.asientos-previa input.entrada-concepto { min-width: 220px; }
.asientos-previa input.numero { min-width: 130px; }

/* Liquidación de funcionario: renglones de ingresos/egresos con días corregibles. */
.tabla-liquidacion input.mini { width: 7em; }
.tabla-liquidacion tr.total td { font-weight: 600; border-top: 2px solid var(--borde-fuerte); }
.total-liquidacion { text-align: right; font-size: 1.15em; margin: 12px 0; }
.grilla-liquidacion { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }

/* toma de inventario: contar con cámara / lector y lecturas por producto */
.contar-inventario { border: 1px solid var(--borde, #ccd); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.contar-inventario legend { font-weight: 600; padding: 0 6px; }
.contar-inventario .celda-codigo input { flex: 1; min-width: 0; }
.tabla-lineas td.clic { cursor: pointer; text-decoration: underline dotted; }
.tabla-lineas td.recontar { color: var(--peligro, #b3261e); font-weight: 600; }

.miniatura-web { width: 56px; height: 56px; object-fit: contain; border-radius: 6px; background: var(--superficie-suave); vertical-align: middle; }
.control-imagen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.control-imagen .vista-imagen { flex-basis: 100%; max-height: 160px; }

/* Datos de trabajo (al ingresar y desde la barra). */
main.datos-trabajo {
  max-width: 560px;
  margin-top: 4vh;
}

/* 05-11-2026: caja "Venta guardada" (presupuesto.html en modo venta) con formato: facturas en filas con botón, avisos en recuadro. */
.venta-resultado { display: grid; gap: 12px; max-width: 760px; }
.venta-resultado h2 { margin: 0; }
.venta-resultado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vr-facturas li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--borde, #d7dce5); border-radius: 8px; background: var(--fondo-suave, rgba(0, 0, 0, 0.02)); }
.vr-dato { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vr-dato .numero { font-variant-numeric: tabular-nums; font-weight: 600; }
.vr-etiqueta, .vr-fe { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.06); }
.vr-fe.ok { color: var(--exito, #1a7f37); }
.vr-avisos:empty { display: none; }
.vr-avisos li { padding: 8px 12px; border-left: 4px solid var(--exito, #1a7f37); background: rgba(0, 0, 0, 0.03); border-radius: 4px; }

/* 05-11-2026: Configurar facturación electrónica con pestañas: Guardar fijo abajo, descripción de actividad ancha. */
.barra-guardar { position: sticky; bottom: 0; z-index: 5; background: var(--fondo, #f4f5f7); padding: 10px 0; border-top: 1px solid var(--borde, #dde2ea); align-items: center; }
.barra-guardar #sin-guardar { color: var(--error, #b42318); font-weight: 600; margin-right: auto; }
.pestana-sifen { display: grid; gap: 12px; }
.pestana-sifen > .tarjeta { margin: 0; }
input.actividad-descripcion { width: 100%; min-width: 28em; }
td.actividad-nro { width: 2.5em; color: var(--texto-suave, #667085); }
#estado { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 8px; }
#estado dt { font-weight: 600; }
#estado dd { margin: 0; }

/* ---------- Pantallas de carga de transacciones (js/transaccion.js, 05-11-2026) ---------- */
/* Total del documento: grande y debajo de la columna Subtotal del detalle (el padding derecho lo ajusta transaccion.js). */
.pie-total {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 6px 0 2px;
}
.pie-total .total-documento {
  font-size: 1.35rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.pie-total dl.totales-compra dd.total { font-size: 1.35rem; }
:root[data-diseno="a"] main .pie-total .total-documento,
:root[data-diseno="b"] main .pie-total .total-documento { font-size: 1.2rem; }
/* Cotización fija (moneda local): se ve que no se escribe. */
input.solo-lectura { background: var(--superficie-suave); color: var(--texto-suave); }
/* Código del detalle: el campo ocupa todo lo que deja la lupa. */
.tabla-lineas .celda-codigo input { flex: 1; min-width: 0; padding-left: 6px; padding-right: 6px; }
/* Remisión a facturar: que se vea el número completo (o varios separados por coma). */
.campo-remision { --caracteres: 46; }
.campo-remision .celda-codigo input { flex: 1; min-width: 19ch; }

/* Timbrados en árbol (timbrados.html) */
.timb-campos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .timb-campos {
    grid-template-columns: 1fr;
  }
}

.timb-dato {
  flex: none;
  color: var(--texto-suave);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.arbol-fila.timb-timbrado .arbol-nombre {
  font-weight: 700;
}

.arbol-fila.timb-apagado {
  color: var(--texto-suave);
}

.arbol-marca.timb-nivel1 {
  color: #b06c00;
}

.arbol-marca.timb-nivel2 {
  color: #c0392b;
  font-weight: 600;
}

.timb-cambiar .solo-renovar {
  display: none;
}