/* Negro e-Factura — frontend de validación.
 *
 * Los colores, las tipografías y las medidas salen de la maqueta hecha en
 * Claude Design. Su marcado no se puede servir —usa etiquetas propias y depende
 * de React—, así que la carpintería se rehace acá. Pero los **valores** no se
 * copian a ojo: se extraen del empaquetado de la maqueta, que es el único modo
 * de que coincidan. Cómo se abre ese empaquetado está en la Parte 5 bis de
 * `docs/plan-arquitectura.md`.
 *
 * Eso importa porque transcribir mirando ya falló una vez: hasta el 14/09/2026
 * cuatro de los trece colores de acá abajo no existían en la maqueta, y
 * `--papel` estaba a un dígito del real siendo el fondo de todas las tarjetas.
 *
 * ## Sobre las fuentes
 *
 * El diseño usa cuatro familias: Archivo, Archivo Narrow, Zilla Slab y JetBrains
 * Mono. Los archivos viven en `fuentes/` y NO se traen de Google Fonts: la
 * política de contenido de esta pantalla sólo permite recursos propios, y
 * aflojarla para una demo es la clase de concesión que después nadie revierte.
 * Además así la pantalla funciona sin conexión, que es lo que hace falta para
 * mostrarla en una reunión.
 *
 * Cada familia deja detrás una alternativa del sistema, elegida para conservar
 * el carácter del diseño si un archivo llegara a faltar. */

/* Las cuatro familias del diseno, extraidas del empaquetado de la maqueta y no
 * bajadas de internet: la politica de contenido solo permite recursos propios.
 * Vienen recortadas por rango de caracteres, que es lo que declara cada
 * `unicode-range`: el navegador baja el archivo `-ext` solo si la pagina usa
 * algun caracter de ese rango. Archivo, Archivo Narrow y JetBrains Mono son de
 * peso variable --un archivo cubre todo su rango de pesos--; Zilla Slab no, y
 * por eso lleva un archivo por peso.
 *
 * Bloques generados desde la maqueta, no escritos a mano. Para rehacerlos, ver
 * la Parte 5 bis de `docs/plan-arquitectura.md`. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fuentes/archivo.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fuentes/archivo-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/archivo-narrow.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/archivo-narrow-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fuentes/zilla-slab-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fuentes/zilla-slab-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fuentes/zilla-slab-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fuentes/zilla-slab-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fuentes/zilla-slab-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fuentes/zilla-slab-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fuentes/zilla-slab-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fuentes/zilla-slab-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fuentes/jetbrains-mono.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fuentes/jetbrains-mono-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Paleta de la maqueta, extraida de sus atributos de estilo y no transcrita
   * mirando. El numero de al lado es cuantas veces la usa la maqueta: sirve
   * para saber cual es un color estructural y cual es un detalle de un solo
   * distintivo. */
  --negro: #0b0b0a; /* 118x */
  --crema: #f0e4d7; /* 59x */
  --azul: #2c3e50; /* 54x */
  --gris-texto: #4a4a4a; /* 47x */
  --celeste: #a5ccde; /* 36x */
  --papel: #fffdf9; /* 30x, el fondo de todas las tarjetas */
  --negro-suave: #1f1e1c; /* 27x */
  --rojo: #b23a2e; /* 20x */
  --negro-menu: #1c1b19; /* 17x */
  --borde-suave: #d8c9b8; /* 16x, el borde de las tarjetas sobre crema */
  --gris: #9a8f82; /* 11x */
  --crema-clara: #fbf6ef; /* 6x */
  --borde-oscuro: #2a2926; /* 4x */
  --verde: #2a5a32; /* 2x */

  /* Los dos celestes del boton principal cuando se le pasa por encima. */
  --celeste-hover: #8cbbd1;
  --celeste-activo: #7fb1c9;

  /* Distintivos de estado: cada uno es un par de fondo y texto, y por eso van
   * juntos. Los usa el estado de cuenta --pagado, pendiente, atrasado-- y
   * cualquier etiqueta que necesite decir como viene algo de un vistazo. */
  --ok-fondo: #cfe3d0;
  --ok-texto: #2a5a32;
  --aviso-fondo: #e8c86a;
  --aviso-texto: #6b4a08;
  --alerta-fondo: #f3d3ce;
  --alerta-texto: #8c2a20;
  --arena: #c9b9a6;

  /* Cuatro familias, con **exactamente los respaldos de la maqueta**.
   * `--sans-angosta` existe porque el diseno la usa suelta en un lugar, no como
   * reemplazo de `--sans`.
   *
   * Los respaldos no son un detalle aunque la letra se cargue siempre: antes
   * habia fuentes de Windows en la lista ("Segoe UI", `system-ui`, "Cascadia
   * Mono"...) y se midio que eso baja 2px el texto de los desplegables, aunque
   * la letra que se ve sea Archivo en los dos casos. El navegador usa la lista
   * entera para calcular la altura de la linea, no solo la primera. */
  --sans: "Archivo", Helvetica, sans-serif;
  --sans-angosta: "Archivo Narrow", sans-serif;
  --serif: "Zilla Slab", Georgia, serif;
  --mono: "JetBrains Mono", monospace;
}

* {
  box-sizing: border-box;
}

/* `hidden` en el HTML tiene que ganarle a cualquier `display` de este archivo.
 *
 * No es una preferencia de estilo: sin esta regla, `hidden` no esconde nada.
 * El `display: none` del atributo sale de la hoja del navegador, que es la de
 * menor prioridad, asi que cualquier regla de clase de aca --`.velo`,
 * `.aplicacion`, `.vista`, `.campo`, `.buscador__campo`, `.tabla`-- le gana y el
 * bloque se dibuja igual. Y esconder y mostrar con `hidden` es como funciona toda esta
 * pantalla: la navegacion, la ventana de cliente y los mensajes de error.
 *
 * El sintoma cuando falta es engañoso: la ventana de cliente tapa la pantalla
 * desde que carga y sus botones de cerrar parecen desconectados, cuando en
 * realidad hacen exactamente lo que deben. Lo comprueba
 * `scripts/revisar-frontend.py`.
 *
 * `!important` porque es para esto: una regla que no se negocia con ninguna
 * otra del archivo. */
[hidden] {
  display: none !important;
}

/* Como en la maqueta: el lugar de la barra de desplazamiento queda reservado
 * siempre, para que la pantalla no salte de ancho al pasar de una vista corta a
 * una larga. */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--negro);
  background: var(--crema);
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 700;
  margin: 0;
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.mono,
.numero {
  font-family: var(--mono);
}

.numero {
  text-align: right;
}

/* ------------------------------------------------------------------ marca */

/* 76px de alto fijos, como la maqueta: es lo que hace que la linea de abajo de
 * la marca siga de corrido a la del encabezado de la derecha.
 *
 * La N, el nombre y la bajada son algo mas grandes que en la maqueta (34px,
 * 18px y 10px): lo pidio el usuario, porque se veian chicos. Crecen dentro de los
 * mismos 76px, asi que la linea sigue alineada, y entran en la barra en su ancho
 * minimo de 178px. */
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 76px;
  padding: 0 18px;
  border-bottom: 1px solid var(--borde-oscuro);
}

.marca__inicial {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--crema);
  color: var(--negro);
  font-family: var(--serif);
  font-size: 31px;
  font-weight: 700;
}

.marca__texto {
  display: flex;
  flex-direction: column;
}

.marca__nombre {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--crema);
}

.marca__bajada {
  font-family: var(--sans-angosta);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gris);
}

/* La marca de la pantalla de ingreso, una vez y media la de la barra: es lo
 * primero que se ve del sistema y tiene que reconocerse de un vistazo. Las
 * proporciones entre la N, el nombre y la bajada son las mismas que en la barra. */
.marca--grande {
  border-bottom: none;
  justify-content: center;
  gap: 18px;
  height: auto;
  padding: 8px 0 4px;
}

.marca--grande .marca__inicial {
  width: 64px;
  height: 64px;
  font-size: 47px;
}

.marca--grande .marca__nombre {
  font-size: 34px;
}

.marca--grande .marca__bajada {
  font-size: 16px;
}

/* La N de la barra lleva un trazo fino alrededor, que la engruesa apenas. */
.barra .marca__inicial {
  -webkit-text-stroke: 0.8px var(--negro);
}

.marca--grande .marca__inicial {
  background: var(--negro);
  color: var(--crema);
}

.marca--grande .marca__nombre {
  color: var(--negro);
}

/* ---------------------------------------------------------------- ingreso */

/* Mientras se muestra el ingreso, la pagina entera va negra. Hace falta ademas
 * del fondo de `.ingreso` porque el lugar reservado para la barra de
 * desplazamiento (`scrollbar-gutter`) toma el color de la pagina, y quedaba una
 * franja crema al borde derecho. */
body:has(> .ingreso:not([hidden])) {
  background: var(--negro);
}

/* Fondo negro y tarjeta crema: el mismo par que la barra del sistema, al reves,
 * para que la tarjeta resalte sola en el centro. */
.ingreso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--negro);
}

.tarjeta-ingreso {
  width: 100%;
  max-width: 380px;
  background: var(--crema);
  border: 1px solid var(--negro);
  padding: 32px 28px;
}

.tarjeta-ingreso form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

/* ------------------------------------------------------------- estructura */

.aplicacion {
  display: grid;
  grid-template-columns: minmax(178px, 206px) minmax(0, 1fr);
  min-height: 100vh;
}

/* La barra queda quieta mientras se desplaza la pantalla: mide lo que mide la
 * ventana y se pega arriba (`sticky`). Si se desplazara con la pagina, en una
 * vista larga el pie con el correo y el rol se iria de la vista, y quien usa el
 * sistema tiene que poder ver siempre con que cuenta esta trabajando. Sólo si la
 * ventana es mas baja que el menu entero, la barra se desplaza por su cuenta. */
.barra {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  background: var(--negro);
  color: var(--crema);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}

.menu__destacado,
.menu__item {
  font: inherit;
  text-align: left;
  border: none;
  cursor: pointer;
}

.menu__destacado {
  margin: 0 12px 14px;
  padding: 9px 12px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background: var(--celeste);
  color: var(--azul);
  transition:
    background 120ms,
    color 120ms,
    transform 80ms;
}

.menu__destacado:hover {
  background: var(--azul);
  color: var(--crema);
}

.menu__destacado:active {
  transform: translateY(1px);
}

.menu__item {
  padding: 12px 18px;
  font-size: 15px;
  color: var(--crema);
  background: transparent;
  border-left: 3px solid transparent;
  transition:
    background 120ms,
    border-color 120ms;
}

.menu__item:hover {
  background: var(--negro-menu);
  border-left-color: var(--celeste);
}

.menu__item[aria-current="page"] {
  background: var(--crema);
  color: var(--negro);
  border-left-color: var(--celeste);
  font-weight: 600;
}

/* Lo que está dibujado y no conectado se ve y reacciona igual que el resto,
 * como en la maqueta; sólo gana un punto de apoyo para su distintivo. */
.menu__item--dibujado {
  position: relative;
}

/* El distintivo de los rubros sin conectar: a la derecha del renglón, centrado
 * en alto y **sin ocupar lugar**. Va en el tamaño chico de 8px para que no
 * llegue a tocar el texto más largo, "Mantenimiento", en una barra de 206px.
 * Va con `.menu__item` delante porque la regla general de `.marca-muestra` está
 * más abajo en el archivo y, con la misma fuerza, le ganaría el tamaño. */
.menu__item .marca-muestra--menu {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  font-size: 8px;
  letter-spacing: 0;
  padding: 2px 4px;
  color: var(--gris);
  pointer-events: none;
}

.barra__pie {
  border-top: 1px solid var(--borde-oscuro);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-wrap: anywhere;
}

/* Correo y no nombre, a diferencia de la maqueta: decidido a proposito. Va en
 * 11px porque un correo es mucho mas largo que un nombre y la barra mide 206px. */
.barra__correo {
  font-size: 11px;
  font-weight: 600;
}

.barra__rol {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gris);
  text-transform: uppercase;
}

.principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.encabezado {
  border-bottom: 1px solid var(--negro);
  /* 40px a la derecha y no 28: es lo que la maqueta deja entre el boton del
   * usuario y el borde de la ventana. */
  padding: 18px 40px 18px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.encabezado__empresa {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 4px 14px;
  align-items: baseline;
}

.encabezado__razon-social {
  font-size: 14px;
  font-weight: 600;
}

/* El menu del usuario, arriba a la derecha. Valores copiados de la maqueta.
 *
 * Ya no hay aviso de cuando vence la sesion: la maqueta no lo tiene, y la
 * sesion vencida se avisa sola en la siguiente peticion. */
.usuario {
  margin-left: auto;
  position: relative;
}

.usuario__boton {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--celeste);
  border: 1px solid var(--azul);
  padding: 11px 16px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--azul);
  transition: background 120ms;
}

.usuario__boton:hover {
  background: var(--celeste-hover);
}

.usuario__boton:active {
  background: var(--celeste-activo);
}

.usuario__nombre {
  font-size: 14px;
  font-weight: 600;
}

.usuario__flecha {
  font-family: var(--mono);
  font-size: 11px;
}

/* Se despliega hacia abajo pegada al borde derecho del boton, y flota: abrirla
 * no mueve nada del resto de la pantalla. */
.usuario__opciones {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 248px;
  background: var(--negro);
  border: 1px solid var(--negro);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.usuario__datos {
  padding: 14px 16px;
  border-bottom: 1px solid var(--borde-oscuro);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.usuario__correo {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--crema);
}

.usuario__rol {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gris);
  text-transform: uppercase;
}

/* En la maqueta son enlaces; aca son botones porque no llevan a ninguna
 * direccion, y se les quita todo lo que un boton trae de fabrica. */
.usuario__opcion {
  font: inherit;
  font-size: 14px;
  text-align: left;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--crema);
  cursor: pointer;
  transition: background 120ms;
}

.usuario__opcion:hover {
  background: var(--negro-menu);
}

.usuario__opcion--salir {
  color: var(--celeste);
  border-top: 1px solid var(--borde-oscuro);
}

.etiqueta-mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--negro-suave);
}

.vista {
  padding: 24px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.titulo {
  font-size: 30px;
}

/* -------------------------------------------------------------- paneles */

.panel {
  background: var(--papel);
  border: 1px solid var(--negro);
}

/* La cabecera de un panel es la de todas las pantallas (`.inicio__cabecera`
 * con `.pendiente__titulo`), no una propia. Tuvo una propia, con 13px de relleno
 * y titulo de 18px contra 14px y 21px del resto, y la linea del titulo cambiaba
 * de alto al pasar del listado de emitidos a Nuevo comprobante. */

/* Un boton que se ve como un enlace.
 *
 * Es un `<button>` y no un `<a>` porque no lleva a otra direccion: cambia de
 * pantalla dentro de la misma pagina. Un enlace con `href="#"` mentiria sobre
 * eso --y ofreceria "abrir en pestaña nueva", que no llevaria a ningun lado--,
 * asi que se usa el elemento correcto y se lo viste de enlace. */
.enlace {
  border: 0;
  background: none;
  padding: 0 0 2px;
  font: inherit;
  font-size: 14px;
  color: var(--celeste);
  /* Subrayado con borde y no con `text-decoration`: asi queda despegado de las
   * letras, que es como se ve en la maqueta. */
  border-bottom: 1px solid var(--celeste);
  cursor: pointer;
}

.enlace:hover {
  color: var(--papel);
  border-bottom-color: var(--papel);
}

.panel__cuerpo {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.panel--exito {
  border-color: var(--verde);
}

/* La cabecera de "comprobante emitido" va verde, no negra como las demas: es el
 * unico panel que anuncia que algo salio bien. El texto sigue siendo crema
 * porque el verde de la paleta es oscuro, y un texto verde sobre la cabecera
 * oscura no se leia. */
.panel--exito .inicio__cabecera {
  border-bottom-color: var(--verde);
  background: var(--verde);
  color: var(--crema);
}

/* Distintivo uniforme de lo que está dibujado y no conectado. Es deliberado
 * que se vea: una demo en la que no se distingue lo que funciona de lo que no
 * genera expectativas que después hay que desmentir. */
.panel--dibujado {
  border-style: dashed;
  opacity: 0.75;
}

.marca-muestra {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 6px;
  border: 1px solid currentColor;
  color: var(--gris-texto);
  white-space: nowrap;
}

/* El distintivo montado sobre el borde de arriba de un panel.
 *
 * Con posicion absoluta no ocupa lugar: ningun elemento del panel se corre para
 * hacerle espacio, que es la condicion para que la pantalla siga siendo igual a
 * la maqueta. Queda centrado sobre la linea del borde --mitad afuera, mitad
 * adentro-- y lleva el fondo crema de la pagina para que la linea no lo cruce. */
.marca-muestra--borde {
  position: absolute;
  top: 0;
  right: 22px;
  transform: translateY(-50%);
  background: var(--crema);
  pointer-events: none;
}

/* ---------------------------------------------------------------- inicio
 *
 * Todo lo de esta seccion es la pantalla de Inicio de la maqueta, con sus
 * valores copiados uno por uno. Tiene clases propias en vez de reusar `.panel`
 * porque la maqueta aca usa otras medidas: fondo `--crema-clara` y no `--papel`,
 * titulos de 21px y no de 18px, y cabeceras alineadas por la base del texto. */

.vista--inicio {
  padding: 18px;
}

/* ----------------------------------------------------------- facturacion
 *
 * La lista de opciones de un rubro y la pantalla de "pendiente", copiadas de la
 * maqueta. Comparten la cabecera de Inicio (`.inicio__cabecera`). */

.opciones {
  border: 1px solid var(--negro);
  background: var(--crema-clara);
}

.opciones__lista {
  display: flex;
  flex-direction: column;
}

/* Cada renglon es un boton entero: se aprieta en cualquier lugar, no solo en el
 * titulo. Se le quita lo que un boton trae de fabrica. */
.opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  font: inherit;
  text-align: left;
  color: var(--negro);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 120ms;
}

.opcion + .opcion {
  border-top: 1px solid var(--borde-suave);
}

.opcion:hover {
  background: var(--crema);
}

.opcion__numero {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gris-texto);
}

.opcion__titulo {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
}

.opcion__texto {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gris-texto);
}

/* El distintivo de una opcion sin conectar: a la derecha del renglon, centrado
 * en alto y sin ocupar lugar. */
.marca-muestra.marca-muestra--opcion {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  pointer-events: none;
}

.pendiente__titulo {
  font-size: 21px;
  color: var(--crema);
}

/* La cabecera del listado centra en alto, no por la base del texto: asi esta en
 * la maqueta, y es la diferencia con la de Inicio. Lleva las dos clases porque
 * la regla general de `.inicio__cabecera` esta mas abajo en el archivo y, con la
 * misma fuerza, le ganaria. */
.inicio__cabecera.inicio__cabecera--medio {
  align-items: center;
}

/* ------------------------------------------------ listado de emitidos
 *
 * Copiado de la maqueta. `ls-` por "listado". */

.ls-barra {
  padding: 18px 22px 0;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.ls-campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.ls-campo--buscar {
  flex: 1 1 180px;
  min-width: 150px;
}

.ls-campo--fecha {
  width: 150px;
}

/* El control de fecha trae un ancho minimo pensado para la emision, con icono.
 * Aca no hay icono y la maqueta le da 150px. */
.ls-campo--fecha .fecha,
.ls-campo--fecha-libre .fecha {
  min-width: 0;
}

.ls-campo .fecha__texto {
  padding: 11px 12px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--negro);
}

.ls-control {
  width: 100%;
  border: 1px solid var(--negro);
  background: var(--papel);
  padding: 11px 12px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--negro);
}

.ls-control:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--azul);
}

.ls-control--importe {
  font-family: var(--mono);
  text-align: right;
}

.ls-boton {
  font-family: var(--sans);
  font-size: 15px;
  background: var(--papel);
  color: var(--negro);
  border: 1px solid var(--negro);
  padding: 11px 20px;
  cursor: pointer;
  transition: background 120ms;
}

.ls-boton:hover {
  background: var(--crema);
}

.ls-boton--celeste {
  font-family: var(--serif);
  font-weight: 600;
  background: var(--celeste);
  color: var(--azul);
  border-color: var(--celeste);
  padding: 11px 22px;
  transition:
    background 120ms,
    color 120ms,
    border-color 120ms;
}

.ls-boton--celeste:hover {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--crema);
}

.ls-descarga {
  position: relative;
}

.ls-desplegable {
  border: 1px solid var(--negro);
  background: var(--papel);
}

/* 152 y no 150: la maqueta mide 150 sin los bordes, y aca se miden adentro.
 * Se noto al comparar capturas del listado de clientes contra la maqueta. */
.ls-desplegable--descarga {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 152px;
  z-index: 25;
}

/* 192 y no 190: la maqueta mide 190 sin los bordes. */
.ls-desplegable--fila {
  position: fixed;
  width: 192px;
  box-shadow: 0 6px 18px rgb(11 11 10 / 18%);
  z-index: 60;
}

.ls-desplegable__opcion {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: var(--papel);
  color: var(--negro);
  font-family: var(--sans);
  font-size: 14px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 120ms;
}

.ls-desplegable__opcion + .ls-desplegable__opcion {
  border-top: 1px solid var(--borde-suave);
}

.ls-desplegable__opcion:hover {
  background: var(--crema);
}

/* Una opción que existe pero no corresponde a esa fila ("Copiar" en una nota de
 * crédito): se ve desteñida, con el beige de la flecha de página sin destino. */
.ls-desplegable__opcion:disabled,
.ls-desplegable__opcion:disabled:hover {
  background: var(--papel);
  color: #c9bcab;
  cursor: not-allowed;
}

.ls-desplegable__opcion--peligro {
  color: var(--rojo);
  transition:
    background 120ms,
    color 120ms;
}

.ls-desplegable__opcion--peligro:hover {
  background: var(--rojo);
  color: var(--crema-clara);
}

/* El distintivo dentro de una opcion del menu de fila: a la derecha, chico, y
 * sin ocupar lugar. Pegado a 4px del borde porque "Mas informacion" deja justo
 * el lugar para que no se toquen. */
.marca-muestra.marca-muestra--fila {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  font-size: 8px;
  letter-spacing: 0;
  padding: 1px 3px;
  pointer-events: none;
}

.ls-desplegable__opcion--peligro:hover .marca-muestra--fila {
  color: var(--crema-clara);
}

.ls-cuerpo {
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

/* Las doce columnas de la maqueta, con sus minimos y proporciones. Se declaran
 * una vez y las usan la cabecera y cada fila, para que no se desalineen.
 *
 * La decima --la del importe-- es mas ancha que las otras dos de importes: su
 * titulo paso de "TOTAL" a "TOTAL A PAGAR" y lleva ademas el signo de pregunta
 * que lo explica. Con el minimo de las otras el titulo se partia en dos
 * renglones y desalineaba la cabecera. */
.ls-fila {
  min-width: 100%;
  display: grid;
  grid-template-columns:
    minmax(80px, 0.7fr) minmax(60px, 0.5fr) minmax(44px, 0.4fr) minmax(66px, 0.6fr)
    minmax(110px, 1.6fr) minmax(80px, 0.8fr) minmax(44px, 0.4fr) minmax(56px, 0.55fr)
    minmax(56px, 0.55fr) minmax(96px, 0.8fr) 34px 34px;
  gap: 6px;
  border: 1px solid var(--negro);
  border-top: none;
  background: var(--papel);
  padding: 11px 10px;
  align-items: center;
}

/* Las nueve columnas de los borradores guardados.
 *
 * Es la misma grilla del listado con otro reparto: no hay número, ni estado, ni
 * círculo de DGI --un borrador no tiene nada de eso-- y en cambio la última
 * columna lleva dos botones con texto en vez del de tres rayas, así que se
 * declara con ancho fijo y suficiente para los dos. El cliente y quien lo
 * guardó son los que se estiran: son los dos textos de largo imprevisible. */
.ls-fila--borradores {
  grid-template-columns:
    minmax(96px, 0.7fr) minmax(70px, 0.6fr) minmax(120px, 1.6fr) minmax(50px, 0.4fr)
    minmax(56px, 0.45fr) minmax(96px, 0.8fr) minmax(110px, 1fr) minmax(80px, 0.6fr)
    minmax(168px, 168px);
}

.ls-fila--cabecera {
  border-top: 1px solid var(--negro);
  background: var(--celeste);
  padding: 10px;
  align-items: stretch;
}

.ls-fila--cabecera > span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--azul);
  text-align: left;
}

.ls-fila--cabecera > .ls-centro {
  text-align: center;
}

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

.ls-celda--fecha,
.ls-celda--numero {
  font-family: var(--mono);
  font-size: 12px;
}

.ls-celda--numero {
  overflow: visible;
}

.ls-celda--tipo {
  font-size: 13px;
}

.ls-celda--cliente {
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: break-word;
  white-space: normal;
}

.ls-celda--dato {
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
}

.ls-celda--total {
  font-weight: 700;
}

/* Una celda que hay que mirar antes de seguir: hoy, el cliente de un borrador
 * que ya no está disponible --lo borraron o lo dieron de baja mientras el
 * borrador esperaba--. Va en el mismo rojo con el que el resto de la pantalla
 * marca lo que impide emitir, para no inventar un segundo código de color. */
.ls-celda--alerta {
  color: var(--rojo);
}

.ls-estado {
  justify-self: center;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 6px;
  color: var(--gris-texto);
}

/* El circulo de DGI: verde si la acepto, rojo si la rechazo, gris mientras no
 * contesto. */
.ls-dgi {
  justify-self: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--crema-clara);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.ls-dgi--pendiente {
  background: var(--gris);
}

.ls-dgi--rechazado {
  background: var(--rojo);
}

.ls-acciones {
  display: flex;
  justify-content: flex-end;
}

/* Los dos botones de una fila de borradores. Van con texto y no con el menú de
 * tres rayas del listado de emitidos, porque son dos acciones y no siete, y
 * esconderlas detrás de un menú agregaría un clic a lo único que se hace en
 * esta pantalla. Se achican respecto del botón normal para no engordar la fila:
 * es el mismo criterio con el que se achican dentro de una tabla. */
.ls-acciones--borradores {
  justify-content: flex-start;
  gap: 8px;
}

.ls-acciones--borradores .boton {
  font-size: 13px;
  padding: 6px 12px;
}

/* Las cuatro columnas de Mantenimiento → Monedas. La misma grilla que los
 * borradores con otro reparto: el nombre es el único texto de largo variable,
 * así que es el que se estira; el botón va con ancho fijo para que "Activar" y
 * "Desactivar" no corran la columna de estado al cambiar uno por otro. */
.ls-fila--monedas {
  grid-template-columns: minmax(70px, 0.4fr) minmax(160px, 2fr) minmax(90px, 0.6fr) 130px;
}

/* El botón de cada fila tiene **alto y ancho fijos**, y no es cosmético.
 * "Activar" es celeste con letra Archivo y "Desactivar" es rojo con Zilla Slab
 * en negrita, como en todo el sistema; las dos letras tienen distinta altura de
 * renglón, así que al apretar uno y aparecer el otro la fila cambiaba un píxel
 * de alto (51 y 52, medido) y la grilla entera saltaba. Con la medida fija cada
 * botón conserva su letra y su color, y la fila no se mueve.
 *
 * La columna también tiene ese alto como mínimo, para que la fila del peso —que
 * lleva un texto en vez de botón— mida lo mismo que las demás. */
/* Los medios de pago de Configuracion general: la misma grilla que Monedas,
 * con el nombre editable en la propia fila y una × al lado del boton. */
.ls-fila--medios {
  grid-template-columns: minmax(200px, 3fr) minmax(90px, 0.6fr) 160px;
}

/* El nombre se sigue renombrando en la propia fila, pero se ve como el texto de
 * las otras dos listas de la pantalla (tasas y edicion de precios), sin caja: con
 * el recuadro y el relleno de un campo comun, la fila era mas alta y la grilla
 * parecia de otra familia (pedido del usuario, 01/10/2026). El borde aparece al
 * pasar el mouse o al escribir, para que se note que se puede cambiar.
 *
 * Los margenes negativos compensan el relleno, asi la letra queda alineada con
 * el titulo NOMBRE como la de las otras listas con el suyo. */
.ls-fila--medios input {
  width: calc(100% + 14px);
  margin: -5px -7px;
  padding: 4px 6px;
  font-size: inherit;
  background: transparent;
  border: 1px solid transparent;
}

.ls-fila--medios input:hover {
  border-color: var(--borde-suave);
}

.ls-fila--medios input:focus {
  background: var(--papel);
  border-color: var(--azul);
}

.ls-acciones--medios {
  gap: 10px;
}

/* Con las dos clases, para ganarle a `.ls-acciones--monedas .boton`, que le da
 * a todo boton de la fila el ancho de "Desactivar". */
.ls-acciones--medios .boton.boton--quitar {
  width: 32px;
  padding: 0;
}

/* Rotulo, texto, fila de alta, grilla y pie, separados como las secciones de
 * un formulario. */
.ls-cuerpo--configuracion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ------------------------------------------------- Configuracion general
 *
 * Tres secciones --medios de pago, tasas de IVA y edicion de precios-- desde el
 * 01/10/2026. Cada una abre con la misma banda gris que "CLIENTE" y "DETALLE" en
 * el comprobante: con un titulo suelto, la pantalla entera se leia como si
 * fuera solo de medios de pago, que fue lo que noto el usuario. */

.config__intro {
  margin: 0;
}

.config__seccion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.config__seccion .ls-ayuda {
  margin: 0;
}

/* La banda de lado a lado: los margenes negativos le devuelven los 22px de
 * relleno de `.ls-cuerpo`, como hace `.seccion__banda` con los de la seccion
 * del comprobante. Es un `h2` --es el titulo de la seccion--, asi que se le
 * quita lo que un titulo trae de fabrica.
 *
 * Con dos clases a proposito: la banda lleva tambien `.campo__etiqueta` (la
 * letra monoespaciada de los rotulos), cuya regla esta mas abajo en el archivo y,
 * con la misma fuerza, le ganaba el color y el tamaño. Los titulos salian en
 * gris oscuro y de 11px en vez de blancos y de 14px, como "CLIENTE" y "DETALLE"
 * (lo noto el usuario, 01/10/2026). */
.config__seccion .config__banda {
  margin: 0 -22px;
  padding: 12px 22px;
  background: var(--gris-texto);
  color: var(--papel);
  font-size: 14px;
}

/* Impuesto, tasa, estado y el boton: la grilla de Monedas con una columna mas. */
.ls-fila--tasas {
  grid-template-columns: minmax(200px, 3fr) minmax(70px, 0.6fr) minmax(90px, 0.6fr) 130px;
}

/* Rol, permiso y el boton. El boton es mas ancho que el de Monedas porque dice
 * "Quitar permiso", y con el ancho de "Desactivar" se partia en dos renglones. */
.ls-fila--precios {
  grid-template-columns: minmax(200px, 3fr) minmax(110px, 0.6fr) 150px;
}

.ls-acciones--monedas.ls-acciones--precios .boton {
  width: 140px;
}

/* El recuadro "CON PERMISO" es mas largo que "ACTIVO": del ancho de su texto. */
.relacion.relacion--permiso {
  width: auto;
  min-width: 78px;
}

.ls-acciones--monedas {
  justify-content: flex-start;
  min-height: 30px;
  align-items: center;
}

.ls-acciones--monedas .boton {
  font-size: 13px;
  height: 30px;
  width: 100px;
  padding: 0 12px;
  line-height: 1;
}

/* Lo que va en lugar del botón cuando no hay nada que apretar: el peso, que no
 * se puede desactivar. Texto chico y gris, para que no parezca un botón. */
.ls-nota {
  font-size: 12px;
  color: var(--gris-texto);
}

/* El pie de Monedas: los dos botones, contra el borde derecho como el pie de
 * Comprobante rápido. */
/* Mantenimiento → Configuración de comprobantes: dos columnas fijas, con el
 * mismo ancho que un campo de la ventana de usuarios. Fijas porque el plazo
 * aparece y desaparece según la forma de pago; su celda queda reservada y nada se
 * corre de lugar. En pantallas angostas, una sola. */
.configuracion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 18px 24px;
}

/* El plazo con contado: invisible, pero ocupando su lugar y su alto. Con
 * `hidden` salía de la grilla y, como su cuadro es un poco más alto que un
 * desplegable, la fila cambiaba de alto y todo lo de abajo saltaba. */
.configuracion__oculto {
  visibility: hidden;
}

@media (max-width: 640px) {
  .configuracion {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* La adenda genérica: texto de varios renglones, a lo ancho de las dos
 * columnas. */
.configuracion__ancho {
  grid-column: 1 / -1;
}

.configuracion__ancho .ls-ayuda {
  margin: 0;
}

/* ----------------------------------------------- datos de la empresa
 *
 * Mantenimiento → Datos de la empresa (decision 3.16). Los datos se muestran
 * con las piezas de la ficha de un registro, sin el relleno que tiene adentro de
 * su ventana: aca ya lo pone `.ls-cuerpo`. Con borde y fondo de tarjeta, para
 * que se lean como un bloque y no como texto suelto sobre la crema. */
.ficha__datos.ficha__datos--pantalla {
  background: var(--papel);
  border: 1px solid var(--borde-suave);
  /* Mas aire que en la ventana de una ficha, por pedido del usuario
   * (29/09/2026): aca los datos ocupan la pantalla entera y se leen con calma.
   * Columnas mas anchas para que el domicilio y el regimen no se partan en dos
   * renglones apretados. */
  padding: 32px 36px;
  /* Los seis datos cortos en un renglon y el giro en el suyo, por pedido del
   * usuario (29/09/2026). Cada columna con el peso de lo que suele llevar:
   * tipo de documento, numero, razon social, domicilio, forma social, regimen.
   * La primera toma el ancho de su rotulo, que es mas largo que su dato. */
  grid-template-columns: max-content 1fr 1.4fr 1.8fr 0.9fr 1.3fr;
  gap: 34px 32px;
}

/* En una pantalla angosta, seis columnas no entran: se reacomodan solas. */
@media (max-width: 1100px) {
  .ficha__datos.ficha__datos--pantalla {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.ficha__datos--pantalla .ficha__dato {
  gap: 10px;
}

/* Rotulos en un solo renglon: si uno se parte, su dato queda mas abajo que los
 * del resto de la fila. */
.ficha__datos--pantalla .ficha__rotulo {
  white-space: nowrap;
}

/* Un dato que ocupa el renglon entero, al final: el giro, que suele ser largo. */
.ficha__datos--pantalla .ficha__dato--ancho {
  grid-column: 1 / -1;
}

/* La solicitud en revision, o como termino la ultima. Con los colores de los
 * distintivos de estado: amarillo en revision, rojo rechazada, verde aprobada.
 * Lo elige `pantallas/datos-empresa.js` con el modificador. */
.solicitud {
  margin-top: 18px;
  padding: 16px 22px;
  border: 1px solid var(--borde-suave);
  border-left-width: 6px;
  background: var(--papel);
}

.solicitud--pendiente {
  border-left-color: var(--aviso-fondo);
}

.solicitud--rechazada {
  border-left-color: var(--rojo);
}

.solicitud--aprobada {
  border-left-color: var(--verde);
}

.solicitud__titulo {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--negro-suave);
}

.solicitud__texto {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gris-texto);
  white-space: pre-line;
}

/* Lo que pide la solicitud: un renglon por dato, rotulo a la izquierda. */
.solicitud__datos {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 18px;
  font-size: 14px;
}

.solicitud__datos dt {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gris-texto);
  padding-top: 3px;
}

.solicitud__datos dd {
  margin: 0;
  overflow-wrap: break-word;
}

.solicitud__pie {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

/* El campo para adjuntar un PDF: el boton del navegador adentro del recuadro de
 * los demas campos, con la misma letra. */
.ls-control.ls-control--archivo {
  padding: 6px 8px;
  font-family: var(--sans);
  font-size: 13px;
}

.ls-guardado {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

/* La aclaración de arriba de la grilla. Va dentro del cuerpo y no en la cabecera
 * gris porque no es el título de la pantalla sino una explicación, y con el
 * mismo margen inferior que tendría una barra de filtros, para que la grilla
 * empiece a la misma altura que en el listado de emitidos.
 *
 * **No lleva ancho máximo, y es a propósito**: el usuario pidió que el texto
 * entre en un solo renglón (22/09/2026). Un `max-width` cómodo de leer —las 78
 * columnas que se suelen recomendar para un párrafo— lo partía en dos. Acá no es
 * un párrafo de lectura sino un renglón de aclaración arriba de una grilla que
 * ocupa toda la pantalla, así que puede usar todo ese ancho. En una ventana
 * angosta vuelve a repartirse en dos renglones, que es preferible a empujar la
 * pantalla de costado. */
.ls-ayuda {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gris-texto);
}

/* El boton de tres rayas que abre el menu de la fila. */
.ls-menu {
  width: 26px;
  height: 26px;
  border: 1px solid var(--negro);
  background: var(--papel);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  transition: background 120ms;
}

.ls-menu:hover {
  background: var(--celeste);
}

.ls-menu > span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--negro);
}

.ls-vacio {
  margin: 0;
  padding: 18px 10px;
  border: 1px solid var(--negro);
  border-top: none;
  background: var(--papel);
  font-size: 14px;
  color: var(--gris-texto);
}

.ls-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  flex-wrap: wrap;
}

/* El pie de una lista que no se pagina: sólo el conteo, contra el borde derecho,
 * que es donde el listado de emitidos pone el suyo. Sin esto el único hijo se
 * iría a la izquierda, porque el pie reparte con `space-between`. */
.ls-pie--solo-conteo {
  justify-content: flex-end;
}

.ls-por-hoja {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ls-pie__rotulo {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gris-texto);
}

.ls-por-hoja__lista {
  border: 1px solid var(--negro);
  background: var(--papel);
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--negro);
}

.ls-paginas {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ls-pie__conteo {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gris-texto);
}

.ls-paginas__botones {
  display: flex;
  border: 1px solid var(--negro);
}

.ls-pagina {
  border: 0;
  background: var(--papel);
  color: var(--negro);
  font-family: var(--mono);
  font-size: 15px;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  transition: background 120ms;
}

.ls-pagina + .ls-pagina {
  border-left: 1px solid var(--negro);
}

.ls-pagina:hover {
  background: var(--celeste);
}

/* Sin pagina a la que ir, la flecha se destiñe al beige de la maqueta. */
.ls-pagina:disabled {
  color: #c9bcab;
  cursor: not-allowed;
}

/* ------------------------------------ listado de clientes y proveedores
 *
 * Copiado del "padron" de la maqueta, que es el mismo tipo de pantalla que el
 * listado de emitidos: reusa todo `.ls-*` y aca va solo lo que la maqueta hace
 * distinto. Los valores son los de sus atributos `style`, uno por uno. */

/* Los campos de esta barra van 1px mas juntos y con el rotulo mas chico que en
 * el listado de emitidos: 11px con 0.06em de interletra, en gris, contra 0.14em
 * en negro. */
.ls-campo--padron {
  gap: 6px;
}

/* El buscador cedió el lugar del selector "Activo" (09/10/2026): por eso su base
 * es más chica que la de la maqueta. Sigue estirándose con lo que sobre. */
.ls-campo--padron-buscar {
  flex: 1 1 160px;
  min-width: 140px;
}

.ls-rotulo {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gris-texto);
}

.ls-control--padron {
  padding: 10px 12px;
  font-size: 14px;
}

/* Los tres botones van juntos contra el borde derecho y no se parten en dos
 * renglones: si no entran, baja el grupo entero. */
.ls-botones {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  margin-left: auto;
}

/* "Filtrar" y "Descargar": crema con borde negro, y negro al pasar por encima.
 * No son los del listado de emitidos, que son blancos y celestes. */
.ls-boton.ls-boton--padron,
.ls-boton.ls-boton--agregar {
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
  transition:
    background 120ms,
    color 120ms;
}

.ls-boton.ls-boton--padron {
  background: var(--crema);
  color: var(--negro);
  border-color: var(--negro);
}

.ls-boton.ls-boton--padron:hover {
  background: var(--negro);
  color: var(--crema);
}

/* "Agregar": el celeste del sistema, con el borde azul que le pone la maqueta. */
.ls-boton.ls-boton--agregar {
  background: var(--celeste);
  color: var(--azul);
  border-color: var(--azul);
}

.ls-boton.ls-boton--agregar:hover {
  background: var(--azul);
  color: var(--crema);
}

/* Las ocho columnas del padron de la maqueta, más "Activo" antes del menú
 * (09/10/2026): dice "Sí" o "No", así que lleva lo justo para su rótulo. */
.ls-fila.ls-fila--padron {
  grid-template-columns:
    minmax(112px, 1.55fr) minmax(58px, 0.5fr) minmax(84px, 0.8fr) minmax(92px, 0.8fr)
    minmax(100px, 1.25fr) minmax(78px, 0.8fr) minmax(86px, 0.9fr) minmax(60px, 0.45fr) 34px;
}

/* Las cuatro columnas de Usuarios y roles. Es la grilla del padron --de ahi
 * sale la columna del menu fija contra el borde derecho-- con otro reparto:
 * nombre y correo son los textos largos y se estiran; el rol es una palabra. */
.ls-fila.ls-fila--usuarios {
  grid-template-columns: minmax(140px, 1.4fr) minmax(160px, 1.6fr) minmax(100px, 0.7fr) 34px;
}

/* Las seis columnas de Sucursales: el codigo es corto, el domicilio es lo mas
 * largo, y la fecha de alta tiene el ancho justo de dd/mm/aaaa. El estado es mas
 * ancho desde que dice fechas ("Activa, baja el 31/10/2026"). Misma grilla que
 * Usuarios y roles, con el menu fijo a la derecha. */
.ls-fila.ls-fila--sucursales {
  grid-template-columns:
    minmax(70px, 0.4fr) minmax(130px, 1fr) minmax(200px, 2fr) minmax(100px, 0.6fr)
    minmax(160px, 1fr) 34px;
}

/* Las siete columnas de la lista de productos (decision 3.18): el nombre es lo
 * que mas se estira; el grupo lleva tambien el subgrupo; el precio, debajo, si
 * es con o sin IVA. El menu va fijo a la derecha, como en clientes. */
.ls-fila.ls-fila--productos {
  grid-template-columns:
    minmax(80px, 0.6fr) minmax(160px, 2fr) minmax(120px, 1.2fr) minmax(120px, 0.9fr)
    minmax(70px, 0.5fr) minmax(90px, 0.6fr) 34px;
}

.productos__precio {
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  font-size: 12px;
}

.productos__iva {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--gris-texto);
}

/* El bloque de precio del formulario de productos: la tasa, la moneda, el
 * importe y si incluye IVA, de a dos, con el importe al lado de su marca de IVA
 * porque son dos partes del mismo dato. */
.filtros__precio {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Las tres columnas de Grupo y subgrupo (decision 3.17): el nombre se estira,
 * la cuenta de productos tiene el ancho de su titulo, y el menu va fijo a la
 * derecha como en Sucursales. */
.ls-fila.ls-fila--grupos {
  grid-template-columns: minmax(200px, 1fr) minmax(90px, 120px) 34px;
}

/* Familias de clientes/proveedores (decision 3.21) usa la grilla de Grupo y
 * subgrupo, con la cuenta mas ancha: su titulo, "CLIENTES/PROVEEDORES", no entra
 * en los 120px de "PRODUCTOS" y se cortaba. */
.ls-fila.ls-fila--familias {
  grid-template-columns: minmax(200px, 1fr) minmax(170px, 190px) 34px;
}

/* La lista es un arbol, como lo eligio el usuario: el grupo en negrita y cada
 * subgrupo debajo, corrido a la derecha y unido a el por una rama. La rama va
 * dentro de la celda del nombre, asi la sangria no corre la columna de los
 * productos. */
.grupos__nombre {
  display: flex;
  align-items: center;
}

.ls-fila--grupo .grupos__nombre {
  font-weight: 600;
}

/* La rama: un angulo de dos lineas finas que sube hacia el renglon de arriba y
 * dobla hacia el nombre. El margen de arriba negativo la estira hacia arriba
 * para que el doblez quede a la altura de la mitad del texto. */
.grupos__rama {
  flex: none;
  width: 14px;
  height: 14px;
  margin: -12px 10px 0 8px;
  border-left: 1px solid var(--gris);
  border-bottom: 1px solid var(--gris);
}

.grupos__cuenta {
  text-align: center;
}

/* "Ver productos": la grilla de siempre, en una ventana. Se desplaza por dentro
 * para que la ventana no pase del alto de la pantalla con muchos productos. */
.filtros.filtros--productos-grupo {
  width: 640px;
}

.productos-grupo {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.productos-grupo .ls-grilla {
  max-height: 50vh;
  overflow-y: auto;
}

.productos-grupo .ayuda {
  margin: 0;
}

/* Sin productos la grilla se esconde, cabecera incluida, y el aviso queda solo:
 * el borde de arriba que `.ls-vacio` deja a la cabecera lo pone el aviso. */
.productos-grupo .ls-vacio {
  border-top: 1px solid var(--negro);
}

/* La lista de productos de Nuevo comprobante: la misma ventana, un poco mas
 * ancha, con cuatro columnas. Cada renglon se elige apretandolo, asi que se
 * resalta al pasarle por encima como las opciones de los buscadores. */
.filtros.filtros--lista-productos {
  width: 960px;
  max-width: calc(100vw - 32px);
}

/* Seis columnas: el nombre se lleva la mayor parte; grupo y subgrupo, lo
 * mismo entre ellos; codigo, unidad y stock, lo justo. */
.ls-fila.ls-fila--lista-productos {
  grid-template-columns:
    minmax(70px, 0.5fr) minmax(180px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr)
    minmax(90px, 0.7fr) minmax(56px, 0.4fr);
}

.ls-fila--lista-productos.ls-fila--elegible {
  cursor: pointer;
}

.ls-fila--lista-productos .ls-centro {
  text-align: center;
}

.ls-fila--lista-productos.ls-fila--elegible:hover,
.ls-fila--lista-productos.ls-fila--elegible:focus-visible {
  background: var(--celeste);
  outline: none;
}

.ls-fila.ls-fila--productos-grupo {
  grid-template-columns: minmax(90px, 0.6fr) minmax(160px, 2fr) minmax(70px, 0.5fr);
}

/* "Ver clientes/proveedores" de una familia (decision 3.21): la misma ventana,
 * con el nombre como columna que se estira y el resto a lo justo. */
.ls-fila.ls-fila--registros-familia {
  grid-template-columns: minmax(160px, 2fr) minmax(110px, 1fr) minmax(90px, 0.7fr) minmax(60px, 0.4fr);
}

/* La fecha de baja del cartel de Sucursales: debajo del texto, centrada como
 * todo el cartel, con el ancho de un campo de fecha. */
.aviso-fecha {
  display: flex;
  justify-content: center;
  padding: 0 22px 18px;
}

.aviso-fecha .ls-campo {
  width: 200px;
}

.aviso-fecha__error {
  margin: 0 22px 18px;
}

/* La aclaracion de Usuarios y roles va en la barra, a la izquierda de
 * "Agregar", y no encima de la grilla: ocupa el renglon que en el listado de
 * clientes ocupan el buscador y los filtros. */
.ls-ayuda.ls-ayuda--barra {
  margin: 0;
  flex: 1 1 320px;
  align-self: center;
}

/* Nombre, direccion, ciudad y departamento: texto que se parte en renglones en
 * vez de cortarse con puntos suspensivos, como en la maqueta. */
.ls-celda--texto {
  font-size: 13px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
}

.ls-celda--tipo-doc {
  font-family: var(--mono);
  font-size: 11px;
}

.ls-celda--documento {
  font-family: var(--mono);
  font-size: 12px;
  overflow: visible;
}

/* El cuerpo no se desplaza: lo hace la caja de adentro, sin relleno. Ver el
 * comentario de `.ls-desplazable` en index.html. */
.ls-cuerpo.ls-cuerpo--padron {
  overflow-x: visible;
}

.ls-desplazable {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

/* La columna del menu queda pegada al borde derecho cuando la grilla se
 * desplaza de costado. El margen negativo y el relleno la estiran a todo el
 * alto de la fila, y la sombra sin desenfoque tapa lo que pasa por debajo a su
 * izquierda: es la misma cuenta de la maqueta. */
.ls-fila--padron > .ls-fijo {
  position: sticky;
  right: 0;
  z-index: 2;
  align-self: stretch;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: -11px 0;
  padding: 11px 0 11px 6px;
  background: var(--papel);
  box-shadow: -24px 0 0 0 var(--papel);
}

.ls-fila--padron.ls-fila--cabecera > .ls-fijo {
  margin: -10px 0;
  padding: 10px 0 10px 6px;
  background: var(--celeste);
  box-shadow: -24px 0 0 0 var(--celeste);
}

.ls-relaciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* El distintivo de la relacion. Todos miden lo mismo para que CLIENTE y
 * PROVEEDOR queden alineados uno debajo del otro. */
.relacion {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 6px;
  border: 1px solid;
  white-space: nowrap;
  width: 78px;
  text-align: center;
}

.relacion--cliente {
  background: var(--crema);
  color: var(--negro);
  border-color: var(--negro);
}

.relacion--proveedor {
  background: var(--azul);
  color: var(--crema);
  border-color: var(--azul);
}

/* El estado de una moneda (Mantenimiento → Monedas) usa el mismo recuadro, con
 * el pedido del usuario: verde si esta activa y gris si no. Los dos son de
 * relleno entero y letra clara, como PROVEEDOR, para que se lean de lejos. */
.relacion--activa {
  background: var(--verde);
  color: var(--crema-clara);
  border-color: var(--verde);
}

.relacion--inactiva {
  background: var(--gris);
  color: var(--crema-clara);
  border-color: var(--gris);
}

/* En la columna ESTADO el recuadro va centrado, bajo su titulo. */
.ls-relaciones.ls-relaciones--centro {
  align-items: center;
}

/* En la ficha el distintivo va suelto al lado del nombre, un poco mas grande y
 * del ancho de su texto. */
.relacion.relacion--ficha {
  width: auto;
  padding: 4px 8px;
}

.ls-vacio.ls-vacio--centrado {
  padding: 32px 10px;
  text-align: center;
}

/* 212 y no 210: la maqueta mide 210 sin los bordes. */
.ls-desplegable--fila.ls-desplegable--padron {
  width: 212px;
}

/* ------------------------------------------------ ficha del registro */

/* 642 y no 640: la maqueta mide 640 sin los bordes. */
.filtros.filtros--ficha {
  width: 642px;
}

.ficha__encabezado {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--borde-suave);
}

.ficha__nombre {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}

.ficha__relaciones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.ficha__datos {
  margin: 0;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}

.ficha__dato {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* `relative` para montar el distintivo de los datos que el servidor todavia no
 * tiene, a la derecha del rotulo y sin ocupar lugar. */
.ficha__rotulo {
  position: relative;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gris-texto);
}

.ficha__valor {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--negro-suave);
  overflow-wrap: break-word;
}

/* La nota de "Mi perfil", debajo de los datos: con el mismo margen de los
 * costados que ellos, para que se lea como parte de la ficha. */
.ficha__nota {
  padding: 0 22px 22px;
}

/* ------------------------------------------------ ventana "Mas filtros" */

/* Dos clases por el mismo motivo que la cabecera del listado: `.velo` esta mas
 * abajo en el archivo. */
.velo.velo--centrado {
  align-items: center;
  padding: 32px;
  z-index: 55;
}

/* El cartel generico de aviso va por encima de todo, porque se puede abrir desde
 * adentro de otra ventana: el de "ese documento ya se encuentra registrado"
 * sale sobre la ventana de alta, que esta en la capa 60. Con la capa de los
 * demas carteles (55) quedaba tapado por ella. */
.velo.velo--centrado.velo--encima {
  z-index: 70;
}

/* 562 y no 560: la maqueta mide 560 sin los bordes, y aca se miden adentro. */
.filtros {
  width: 562px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  background: var(--crema-clara);
  border: 1px solid var(--negro);
  display: flex;
  flex-direction: column;
}

/* Negro como todas las cabeceras: ver `.inicio__cabecera`. */
.filtros__cabecera {
  background: var(--negro);
  border-bottom: 1px solid var(--negro);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.filtros__cabecera h2 {
  font-size: 20px;
  color: var(--crema);
}

.filtros__cerrar {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--crema);
  padding: 2px 6px;
}

.filtros__cuerpo {
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

/* Un elemento del cuerpo que ocupa todo el ancho: una ayuda o un error debajo de
 * campos que van de a dos. */
.filtros__ancho {
  grid-column: 1 / -1;
}

/* Un campo que empieza renglon nuevo aunque al anterior le sobre lugar a la
 * derecha: en "Cambiar contraseña", la nueva baja al lado de su repeticion en
 * vez de quedar al lado de la actual, para que el par que se compara se lea
 * junto. */
.filtros__primera-columna {
  grid-column-start: 1;
}

/* Un campo de contraseña con el ojo que la destapa, adentro del recuadro y a la
 * derecha (`ponerOjo` en `base/pantalla.js`; lo usan el ingreso y "Cambiar
 * contraseña"). El ojo flota encima del campo en vez de ir al lado, para que el
 * recuadro y el resaltado al tener el foco sigan siendo los que el campo ya
 * tenia en cada pantalla; el relleno de la derecha le hace lugar para que el
 * texto no pase por debajo. Ancho completo y en bloque porque la envoltura ya
 * no es la columna flexible que lo estiraba. */
.clave {
  position: relative;
}

.clave input {
  display: block;
  width: 100%;
  padding-right: 44px;
}

/* Edge le agrega a todo campo de contraseña su propio ojo, que quedaria al lado
 * del nuestro: dos botones para lo mismo. */
.clave input::-ms-reveal {
  display: none;
}

.clave__ojo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--negro);
  cursor: pointer;
}

.clave__ojo[aria-pressed="false"] .clave__tachado {
  display: none;
}

/* Separa, dentro de un mismo formulario, un grupo de campos del anterior: en el
 * alta de usuarios, los datos adicionales de los obligatorios. Con la letra de
 * las etiquetas, para que se lea como el rotulo de un grupo y no como un titulo
 * nuevo. */
.filtros__subtitulo {
  grid-column: 1 / -1;
  margin: 6px 0 -6px;
  padding-top: 14px;
  border-top: 1px solid var(--negro);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--negro-suave);
}

.filtros__subtitulo-nota {
  font-weight: 400;
  color: var(--gris-texto);
  letter-spacing: normal;
}

.filtros__importes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ls-etiqueta--dibujada {
  position: relative;
}

.filtros__pie {
  padding: 0 22px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ls-aplicar {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  background: var(--celeste);
  color: var(--azul);
  border: 1px solid var(--celeste);
  padding: 13px 26px;
  cursor: pointer;
  transition:
    background 120ms,
    color 120ms,
    border-color 120ms;
}

.ls-aplicar:hover:not(:disabled) {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--crema);
}

/* El mismo botón de confirmar, cuando lo que confirma **no se puede deshacer**:
 * descartar un borrador. Toma los colores de `.boton--peligro` para que en todo
 * el sistema el rojo signifique siempre lo mismo, en vez de que la acción
 * destructiva se vea igual que cualquier otra. */
.ls-aplicar--peligro {
  background: var(--alerta-fondo);
  color: var(--alerta-texto);
  border-color: var(--rojo);
}

.ls-aplicar--peligro:hover:not(:disabled) {
  background: var(--rojo);
  border-color: var(--rojo);
  color: var(--crema-clara);
}

/* Apagado con el mismo par de colores que el boton principal apagado: arena con
 * letra gris, sin opacidad. */
.ls-aplicar:disabled {
  background: var(--borde-suave);
  border-color: var(--borde-suave);
  color: var(--gris-texto);
  cursor: not-allowed;
}

/* ==================================== CARTELES DE AVISO Y DE DECISION
 *
 * **Este bloque es el modelo de todo cartel del sistema que avisa algo o pide
 * una decision**, y lo que se escriba de aca en adelante lo copia en vez de
 * inventar su propia forma. Lo fijo el usuario el 22/09/2026, sobre el cartel de
 * descartar un borrador.
 *
 * Un cartel de decision es un `.filtros` --la ventana de "Mas filtros", que es
 * de donde salieron el velo, la cabecera y el pie-- **mas la clase
 * `filtros--aviso`**, que es lo unico que hay que agregar: ella sola centra el
 * titulo y centra los botones. Dentro va un `.aviso-texto` con lo que se avisa.
 *
 * Las tres reglas del modelo:
 *
 * 1. **El titulo va centrado**, con la ✕ pegada al borde derecho y sin ocupar
 *    lugar: si la ✕ contara como un elemento mas de la fila, el titulo quedaria
 *    corrido a la izquierda por el ancho de la cruz.
 * 2. **Los botones van centrados como grupo**, no pegados a la derecha. Con uno
 *    solo queda en el medio del cuadro; con dos, separados entre si pero con la
 *    separacion centrada respecto del cuadro.
 * 3. **El color dice que hace cada boton, y significa siempre lo mismo**: el que
 *    sigue adelante o acepta es **celeste** (`.ls-aplicar`) y el que rechaza,
 *    descarta o no se puede deshacer es **rojo** (`.ls-aplicar--peligro`). No
 *    hay un tercer color ni un boton neutro: en un cuadro de dos opciones, el
 *    blanco no dice de que lado esta.
 *
 * Las ventanas que **si** estan en la maqueta --"Mas filtros", las columnas del
 * Excel y el alta de cliente-- no llevan esta clase y siguen con el titulo y los
 * botones a la izquierda y a la derecha, como las dibujo el diseno. No son
 * carteles de aviso sino formularios, y la maqueta manda sobre ellos. */

/* Un poco mas ancho que la ventana de "Mas filtros", de la que salio el resto.
 *
 * Ese ancho --562px-- lo fija la maqueta para un formulario de dos columnas, y
 * los carteles **no estan en la maqueta**, asi que su medida es nuestra. Se les
 * dan unos pixeles mas por un motivo concreto: el mensaje de un cartel es una
 * frase, y una frase que se parte en dos renglones por veinte pixeles se lee
 * peor y ademas descoloca el cuadro. El ancho se midio con el camino mas largo
 * que mostro alguno --"Facturacion → Nuevo comprobante → Ver borradores"--, con
 * margen de sobra para la tipografia de cualquier maquina. */
.filtros--aviso {
  width: 620px;
}

.filtros--aviso .filtros__cabecera {
  /* `relative` porque la ✕ se saca del flujo: ver la regla 1 de arriba. El
   * relleno a los costados es el ancho que necesita la cruz, puesto de los dos
   * lados para que el centro del titulo siga siendo el centro del cuadro. */
  position: relative;
  justify-content: center;
  padding: 14px 48px;
}

.filtros--aviso .filtros__cabecera h2 {
  text-align: center;
}

.filtros--aviso .filtros__cerrar {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
}

.filtros--aviso .filtros__pie {
  justify-content: center;
  gap: 14px;
}

/* El texto del aviso. El mismo relleno que el cuerpo de "Mas filtros", para que
 * el cuadro respire igual aunque adentro haya una sola linea.
 *
 * **Centrado, como el titulo y los botones** (22/09/2026, decision del usuario
 * sobre el cartel de "Borrador guardado"). Es la cuarta regla del modelo y la
 * que lo cierra: con el titulo y los botones centrados, un texto alineado a la
 * izquierda deja el cuadro visualmente torcido. Son textos de una a tres lineas,
 * asi que no corre el motivo por el que un parrafo largo se lee mejor alineado a
 * la izquierda.
 *
 * **Un renglon por oracion**, que es la quinta regla del modelo: la oracion que
 * dice que paso y la que dice que hay que hacer se distinguen de un vistazo, en
 * vez de cortarse donde caiga el ancho del cuadro. En los carteles escritos a
 * mano el corte se escribe con un `<br />` en el marcado --ver "Borrador
 * guardado"--; en el generico, cuyo texto viene del servidor, lo pone
 * `mostrarAviso` donde el mensaje trae un salto de linea.
 *
 * No se usa `white-space: pre-line` para esto, aunque seria una linea de CSS:
 * respetaria tambien los saltos del codigo HTML, y los carteles escritos a mano
 * tienen su texto partido en varias lineas de marcado para que se lea. Quedarian
 * cortados donde termina el renglon del archivo. */
.aviso-texto {
  margin: 0;
  padding: 22px;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
}

/* La contrasena provisoria de un usuario nuevo. En letra de maquina y grande
 * porque se lee en voz alta o se copia a mano, y ahi importa que cada caracter
 * se distinga; el sistema ya la arma sin 0/o ni 1/l. Un clic la selecciona
 * entera (`pantallas/usuarios.js`). */
.contrasena-provisoria {
  margin: 0 22px;
  padding: 14px;
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.08em;
  text-align: center;
  background: var(--papel);
  border: 1px solid var(--negro);
  user-select: all;
  cursor: text;
}

/* La aclaracion de debajo de la contrasena: mas chica y gris, porque es una
 * nota y no el mensaje. */
.aviso-texto.aviso-texto--nota {
  font-size: 13px;
  color: var(--gris-texto);
}

/* ------------------------------------------- ventana de columnas del Excel
 *
 * No esta en la maqueta. Usa la cabecera, el pie y los botones de "Mas filtros";
 * lo unico propio es la lista de casillas. */

.columnas {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.columnas__atajos {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.columnas__grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.columnas__grupo {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* El rotulo del grupo usa el mismo estilo que los rotulos de campo. */
.columnas__grupo legend {
  padding: 0 0 2px;
}

.columna {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* La casilla nativa, con el azul de la paleta al marcarla. Se le devuelve el
 * tamano natural porque la regla general de `input` le pone relleno y borde. */
.columna input {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--azul);
  cursor: pointer;
}

.pendiente {
  padding: 40px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.pendiente__rotulo {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gris-texto);
}

.pendiente__texto {
  font-size: 14px;
  color: var(--gris-texto);
  max-width: 460px;
  line-height: 1.55;
}

.inicio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.inicio__columna {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.inicio__panel {
  position: relative;
  border: 1px solid var(--negro);
  background: var(--crema-clara);
  display: flex;
  flex-direction: column;
}

/* Vencimientos se estira hasta el pie de la columna, para que las dos columnas
 * terminen a la misma altura. */
.inicio__panel--estirado {
  flex: 1;
}

/* Negro y no el gris de la maqueta, por decision del usuario (01/10/2026): lo
 * probo en Nuevo comprobante y lo extendio a todas las cabeceras del sistema
 * --las de cada pantalla, los paneles de Inicio, las ventanas y el calendario--.
 * El gris quedo para las bandas que dividen un formulario (`.seccion__banda`),
 * que asi se leen como un nivel por debajo del titulo. */
.inicio__cabecera {
  background: var(--negro);
  border-bottom: 1px solid var(--negro);
  padding: 14px 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.inicio__cabecera h2 {
  font-size: 21px;
  color: var(--crema);
}

.inicio__cabecera--centrada {
  padding: 12px 22px;
  align-items: center;
  flex-wrap: wrap;
}

/* Los enlaces celestes de las cabeceras. Son botones porque no llevan a
 * ninguna direccion; se les quita lo que un boton trae de fabrica. */
.inicio__enlace {
  font: inherit;
  font-size: 14px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--celeste);
  padding: 0 0 2px;
  color: var(--celeste);
  cursor: pointer;
  transition:
    color 120ms,
    border-color 120ms;
}

.inicio__enlace:hover {
  color: var(--crema);
  border-bottom-color: var(--crema);
}

/* "Ver todas" de Novedades engorda el subrayado al pasarle por encima, y le
 * saca al relleno el pixel que gana el borde para que el texto no salte. */
.inicio__enlace--grueso:hover {
  border-bottom-width: 2px;
  padding-bottom: 1px;
}

.inicio__enlace-oscuro {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--azul);
  padding: 0 0 2px;
  color: var(--azul);
  align-self: flex-start;
  text-align: left;
  cursor: pointer;
  transition:
    color 120ms,
    border-color 120ms;
}

.inicio__enlace-oscuro:hover {
  color: var(--negro);
  border-bottom-width: 2px;
  border-bottom-color: var(--negro);
  padding-bottom: 1px;
}

.inicio__etiqueta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--negro-suave);
}

.inicio__texto {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gris-texto);
}

.novedades {
  display: flex;
  flex-direction: column;
  padding: 4px 22px 22px;
}

.novedad {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.novedad--entre-lineas {
  border-top: 1px solid var(--borde-suave);
  border-bottom: 1px solid var(--borde-suave);
}

.novedad__titulo {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
}

.vencimientos {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vencimiento {
  border: 1px solid var(--negro);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vencimiento--cae {
  gap: 12px;
}

.vencimiento__cifra {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.vencimiento__numero {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.vencimiento__unidad {
  font-size: 15px;
  color: var(--gris-texto);
}

.vencimiento__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.vencimiento__texto {
  font-size: 14px;
  line-height: 1.55;
}

/* ------------------------------------- los colores del recuadro de la firma
 *
 * Los cuatro estados que pidio el usuario el 23/09/2026, y el motivo por el que
 * existen: la firma digital se renueva con un tramite presencial que lleva dias,
 * asi que el aviso tiene que verse **antes** de que la facturacion se detenga. Un
 * numero chico en el recuadro de siempre se lee igual que uno grande; el color se
 * ve sin leer.
 *
 * Que estado corresponde a cuantos dias lo decide el servidor
 * (`domain/vencimientos.py`), no este archivo: aca solo se pinta lo que llega.
 *
 * Los colores salen de la paleta y no son nuevos, a proposito. Cada uno ya
 * significa algo en el resto del sistema, y usar el mismo hace que el recuadro se
 * lea sin aprender nada:
 *
 * - **Mas de 60 dias**: sin modificador. Queda el fondo claro del panel, que es
 *   el que trae el sistema por omision.
 * - **Entre 60 y 30**: `--aviso-fondo`, el amarillo del distintivo "pendiente"
 *   del estado de cuenta.
 * - **Menos de 30**: `--alerta-fondo`, exactamente el rosa de fondo que tienen
 *   los botones rojos **antes** de apretarlos (`.ls-aplicar--peligro`).
 * - **Vencida, o sin certificado cargado**: `--rojo` pleno, que es el color al
 *   que pasa ese mismo boton cuando se lo apreta. Es el unico estado en el que la
 *   empresa ya no puede emitir, y el unico que invierte el recuadro. */
.vencimiento--atencion {
  background: var(--aviso-fondo);
}

.vencimiento--alerta {
  background: var(--alerta-fondo);
}

.vencimiento--vencido {
  background: var(--rojo);
  color: var(--crema-clara);
}

/* Sobre el rojo pleno, los tres textos que traen color propio quedan ilegibles
 * si no se los invierte: la etiqueta ("FIRMA DIGITAL") es casi negra, la unidad
 * es gris y el enlace es azul con subrayado azul. Se igualan al color del
 * recuadro en vez de sacarles el color, para que sigan diferenciandose del texto
 * comun por peso y tamano, que es como se distinguen en los otros estados. */
.vencimiento--vencido .inicio__etiqueta,
.vencimiento--vencido .vencimiento__unidad {
  color: var(--crema-clara);
}

.vencimiento--vencido .inicio__enlace-oscuro {
  color: var(--crema-clara);
  border-bottom-color: var(--crema-clara);
}

.vencimiento--vencido .inicio__enlace-oscuro:hover {
  color: var(--papel);
  border-bottom-color: var(--papel);
}

/* El aviso que dice que hay que hacer, debajo de la cifra.
 *
 * La maqueta no lo tiene porque en la maqueta la firma siempre esta al dia. Sale
 * solo en los estados que piden una accion, y por eso va en negrita y no como un
 * renglon mas: la cifra dice cuanto falta, esto dice que hacer con ese dato.
 */
.vencimiento__aviso {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.vencimiento--alerta .vencimiento__aviso {
  color: var(--alerta-texto);
}

.cae {
  display: flex;
  flex-direction: column;
}

/* Las tres columnas de la maqueta, con la del medio 24px mas ancha.
 *
 * La maqueta le da 76px porque dibuja "vence 12/10", sin ano. Con datos reales el
 * ano hace falta: un CAE se muestra tambien por haber consumido la mitad de su
 * numeracion, y ese puede vencer en dos anos (ver `vencimientoDeCae` en
 * `pantallas/inicio.js`). En 76px, "vence 23/08/28" se desborda de la columna. Los
 * 24px los cede la primera, que lleva nombres cortos --"e-Ticket", "e-Factura"--
 * y le sobra lugar. */
.cae__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 64px;
  gap: 8px;
  padding: 8px 0;
  align-items: baseline;
}

.cae__fila + .cae__fila {
  border-top: 1px solid var(--borde-suave);
}

.cae__tipo {
  font-size: 15px;
  white-space: nowrap;
}

.cae__vence {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gris-texto);
  white-space: nowrap;
}

.cae__disponibles {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* El renglon de un CAE que ya no puede emitir: agotado, o pasado de fecha.
 *
 * Se pinta de rojo el dato que lo explica --"agotado" o "vencido"-- y no el
 * renglon entero, para que se vea cual de las dos cosas pasa. Aparece solo
 * cuando ese tipo de comprobante **no tiene otro CAE que sirva**: con reemplazo
 * cargado la facturacion sigue saliendo del nuevo y el viejo no se muestra. */
.cae__fila--detenido .cae__vence,
.cae__fila--detenido .cae__disponibles {
  color: var(--rojo);
  font-weight: 700;
}

/* Los dos recuadros negros: Tutoriales y Soporte. */
.inicio__llamado {
  position: relative;
  border: 1px solid var(--negro);
  background: var(--negro);
  color: var(--crema);
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  padding: 26px 24px;
  flex-wrap: wrap;
}

.inicio__llamado-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 62px;
}

.inicio__llamado-texto h2 {
  font-size: 23px;
  line-height: 1.2;
}

.inicio__llamado-texto p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--arena);
}

.inicio__boton-llamado {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  background: var(--celeste);
  color: var(--azul);
  border: 0;
  padding: 14px 26px;
  cursor: pointer;
  transition:
    background 120ms,
    color 120ms,
    transform 80ms;
}

.inicio__boton-llamado:hover {
  background: var(--azul);
  color: var(--crema);
}

.inicio__boton-llamado:active {
  transform: translateY(1px);
}

.plan {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.plan__fila--dato {
  flex-wrap: wrap;
}

.plan__porcentaje {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.plan__barra {
  height: 14px;
  border: 1px solid var(--negro);
  background: var(--crema);
  display: flex;
}

/* El 62% de la maqueta va aca y no en un `style` del HTML: la politica de
 * contenido de la pagina no admite estilos escritos dentro del marcado. */
.plan__uso {
  width: 62%;
  background: var(--azul);
  border-right: 1px solid var(--negro);
}

.plan__dato {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gris-texto);
}

.plan__pie {
  border-top: 1px solid var(--borde-suave);
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.plan__restantes {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-texto);
}

.cuenta {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cuenta__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.cuenta__columna {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cuenta__centrado {
  text-align: center;
}

.cuenta__plan {
  font-size: 16px;
  font-weight: 600;
}

.cuenta__distintivo {
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 9px;
  letter-spacing: 0.06em;
  align-self: flex-start;
  margin-top: 2px;
}

.cuenta__fecha {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.cuenta__accion {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.cuenta__pagar {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  background: var(--celeste);
  color: var(--azul);
  border: 1px solid var(--celeste);
  width: 184px;
  padding: 13px 0;
  cursor: pointer;
  transition:
    background 120ms,
    color 120ms,
    border-color 120ms,
    transform 80ms;
}

.cuenta__pagar:hover {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--crema);
}

.cuenta__pagar:active {
  transform: translateY(1px);
}

/* --------------------------------------------------------------- campos */

.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* El rotulo de campo es el elemento mas repetido del diseno: la maqueta lo usa
 * veintinueve veces, mas que ningun otro. Sus tres numeros salen de ahi. */
.campo__etiqueta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--negro-suave);
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
  font-size: 15px;
  padding: 11px 12px;
  background: var(--papel);
  border: 1px solid var(--negro);
  border-radius: 0;
  min-width: 0;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--azul);
  outline-offset: -2px;
}

/* Un campo que se ve y no se toca, igual que los items del menu que estan
 * dibujados. Se le baja el contraste y se le cambia el puntero en vez de dejarlo
 * como lo pinta cada navegador, que es distinto en cada uno y en varios parece
 * un campo roto y no uno deshabilitado a proposito. */
input:disabled,
select:disabled,
textarea:disabled {
  color: var(--gris-texto);
  background: var(--crema-clara);
  cursor: not-allowed;
}

/* El precio de un producto del catalogo que el rol de quien factura no puede
 * cambiar (01/10/2026). Se ve como un campo deshabilitado, pero es `readOnly`:
 * el numero se sigue leyendo en negro --es el precio que se va a cobrar-- y se
 * puede seleccionar y copiar. */
input.campo--bloqueado {
  background: var(--crema-clara);
  cursor: not-allowed;
}

/* El distintivo de "sin conectar" cuando acompaña al rotulo de un campo, y no a
 * la cabecera de un panel entero. */
.campo__etiqueta .marca-muestra {
  margin-left: 6px;
  font-size: 8px;
  letter-spacing: 0.04em;
}

/* Los numeros van monoespaciados; las palabras, no.
 *
 * Esa es la distincion de la maqueta, y no la que este archivo hacia antes --"lo
 * que se escribe va mono, lo que se elige no"--. La diferencia se veia sobre
 * todo en las aclaraciones grises de adentro de los campos: "Producto o
 * servicio" y "Buscar por nombre, N° de documento o RUT" salian monoespaciadas,
 * que es una tipografia pensada para alinear cifras en columna y no para leer
 * una frase.
 *
 * El criterio, entonces: importes, cantidades, fechas, plazos, documentos y
 * telefonos en `--mono`; descripciones, nombres, direcciones y correos en la
 * tipografia del cuerpo. Un digito de mas o de menos se ve en monoespaciada
 * porque las cifras quedan una debajo de la otra; una frase se lee mejor en
 * Archivo.
 *
 * Los numericos se reconocen por `inputmode`, que ya estaba puesto porque
 * ademas le dice al telefono que teclado abrir. Los que no lo son --un documento
 * puede ser un pasaporte con letras-- llevan la clase `.mono` en el marcado. */
input[inputmode="decimal"],
input[inputmode="numeric"],
input[type="date"] {
  font-family: var(--mono);
}

.fila-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.campo--ancho {
  flex: 1 1 260px;
}

.campo--angosto {
  width: 120px;
}

/* La unidad de medida de la linea, en Nuevo comprobante. Del ancho de su nombre
 * mas largo, "Metro cuadrado"; la descripcion, que es el unico campo elastico
 * de la fila, cede el espacio. */
.campo--unidad {
  width: 170px;
}

/* El campo del precio unitario, mas ancho que el de cantidad por una razon que
 * es del rotulo y no del dato: "PRECIO UNITARIO" son quince caracteres, y en la
 * monoespaciada de los rotulos --11px, con 0,14em de separacion entre letras--
 * eso da unos 122px. En los 120px del campo angosto el rotulo se partia en dos
 * renglones y dejaba esa columna mas alta que las de al lado.
 *
 * El espacio sale de la descripcion sin tocarla: es el unico campo elastico de
 * la fila (`flex: 1 1 260px`), asi que cede lo que los demas necesiten. */
.campo--precio {
  width: 136px;
}

.campo--precio .campo__etiqueta {
  /* Si algun dia el rotulo cambia y no entra, que se note: partido en dos
   * renglones el desajuste pasa desapercibido, desbordado no. */
  white-space: nowrap;
}

/* Los campos de la fila de carga que van centrados.
 *
 * El rotulo se centra sobre su campo en los tres --cantidad, precio e IVA-- y el
 * dato se centra dentro del recuadro solo en los dos que llevan numeros: es lo
 * que hace la maqueta, y tiene sentido porque una cifra corta pegada al borde
 * izquierdo de un campo ancho se lee como si estuviera a medio escribir.
 *
 * La regla del dato alcanza a `input` y no a `select`: el desplegable del IVA
 * conserva su texto alineado a la izquierda, como todos los desplegables de la
 * pantalla. */
.campo--centrado .campo__etiqueta,
.campo--centrado input {
  text-align: center;
}

/* Una seccion del formulario: un rotulo y sus campos.
 *
 * ## Por que no es un `<fieldset>`
 *
 * Seria lo natural para agrupar campos, y empezo siendolo. El problema es el
 * `<legend>`: el navegador lo dibuja **encima** del borde superior de su
 * fieldset, corriendolo hacia arriba media altura de linea para que parezca
 * colgado del marco. Y ese borde superior es justo la linea que separa esta
 * seccion de la anterior, asi que la linea salia cortando "CLIENTE" y "DETALLE"
 * por la mitad. No es cuestion de espaciado: es como se dibuja un legend.
 *
 * `role="group"` con `aria-labelledby` deja la misma semantica --un grupo de
 * campos con nombre-- y es lo mismo que un lector de pantalla anuncia ante un
 * fieldset con su legend, sin el dibujo especial.
 *
 * ## Por que aca no se escribe `border`, ni para apagarlo
 *
 * Porque la linea divisoria vive en el `border-top` de este mismo elemento.
 * Apagar el borde desde aca se la lleva puesta, y como esta regla tiene mas
 * fuerza que la que la dibuja, gana. Paso dos veces --una se comio el relleno,
 * otra la linea-- y las dos veces el problema parecia estar en la linea cuando
 * estaba en quien la borraba. */
.seccion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}


/* Un cuerpo partido en secciones por una linea que cruza todo el ancho, en vez
 * de un recuadro por seccion.
 *
 * El relleno se le saca al cuerpo y se le da a cada seccion: asi la linea llega
 * hasta los bordes del panel, que es lo que la hace leerse como una division de
 * la tabla y no como un subrayado suelto.
 *
 * Los 22px de relleno y la linea en `--borde-suave` salen de la maqueta, medidos
 * de sus atributos de estilo y no elegidos a ojo.
 *
 * Donde si nos apartamos de la maqueta es en de que lado va la linea: ahi va
 * **abajo** de cada seccion menos la ultima, y aca va **arriba** de cada una
 * menos la primera. Se ve igual, pero aguanta algo que la maqueta no tiene: el
 * ultimo hijo de este formulario es el mensaje de error, que vive oculto. Con la
 * linea abajo, "la ultima" seria ese parrafo invisible y la seccion anterior
 * --la que de verdad se ve ultima-- quedaria con una raya suelta contra el borde
 * del panel. Con la linea arriba, un elemento que no se dibuja no dibuja su
 * linea, y el problema no existe. */
.panel__cuerpo--dividido {
  padding: 0;
  gap: 0;
  background: var(--crema-clara);
}

.panel__cuerpo--dividido > * {
  margin: 0;
  padding: 22px;
}

.panel__cuerpo--dividido > * + * {
  border-top: 1px solid var(--borde-suave);
}

/* La fila de campos de arriba es una **grilla**, no una fila flexible.
 *
 * Es la diferencia que hacia que no se pareciera a la maqueta. En una fila
 * flexible cada campo se queda con el ancho que le pide su contenido, asi que
 * las columnas salen de anchos distintos y desparejos entre una fila y la
 * siguiente. Con `auto-fit` y `minmax`, el navegador mete tantas columnas
 * iguales como entren sin bajar de 160px, y reparte el sobrante entre todas:
 * quedan parejas, y al angostar la ventana se reacomodan solas sin que haya que
 * escribir un solo punto de corte. */
.panel__cuerpo--dividido .fila-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  /* Los campos se alinean por **arriba** y no por abajo.
   *
   * Es lo que permite que una columna crezca hacia abajo --fecha con su
   * vencimiento, moneda con su tipo de cambio-- sin empujar a las demas. Con la
   * alineacion por abajo, que era lo que habia, el campo suelto de al lado
   * bajaba hasta el borde inferior de la columna mas alta y la fila entera
   * quedaba escalonada. */
  align-items: start;
}

/* Dos campos que comparten una columna de la fila.
 *
 * El segundo aparece y desaparece --el vencimiento con la venta a credito, el
 * tipo de cambio con la moneda extranjera-- y esta es la forma de que eso no le
 * cambie el ancho a nadie: la grilla reparte el espacio entre las columnas que
 * tiene, asi que un campo suelto que aparece agrega una columna y **reacomoda la
 * fila entera**. Apilado, la fila siempre tiene cinco columnas y lo unico que
 * cambia es el alto de una.
 *
 * Los 16px son los mismos que separan las columnas entre si, para que la
 * distancia se lea igual en los dos sentidos. Un hijo con `hidden` no ocupa
 * lugar ni deja hueco: `gap` solo separa lo que se dibuja. */
.campo-apilado {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* La fila de campos y las aclaraciones que la acompañan, juntas.
 *
 * ## Por que las aclaraciones estan **fuera** de la grilla
 *
 * Porque adentro le rompian el ancho a todas las columnas, y el motivo es una
 * trampa fina de CSS que conviene dejar escrita.
 *
 * La fila usa `repeat(auto-fit, minmax(160px, 1fr))`: el navegador crea tantas
 * columnas de 160px como entren en el ancho disponible --en una pantalla ancha,
 * mas de las cinco que hacen falta-- y `auto-fit` **colapsa las que quedan
 * vacias**, de modo que las cinco con contenido se reparten todo el ancho.
 *
 * Una aclaracion puesta adentro de la grilla tenia que ocupar el ancho entero,
 * asi que llevaba `grid-column: 1 / -1`. Y ahi esta el problema: un elemento que
 * se extiende por todas las columnas **las ocupa todas**, asi que ninguna queda
 * vacia y ninguna colapsa. El resultado es que, en el instante en que aparecia
 * la aclaracion del tipo de cambio, las columnas sobrantes volvian a existir y
 * los cinco campos se angostaban de golpe. Con el vencimiento no pasaba, porque
 * no trae aclaracion: por eso fallaba solo al elegir moneda extranjera.
 *
 * Sacarlas de la grilla lo resuelve de raiz y sin depender de cuantas columnas
 * haya: la grilla tiene **siempre los mismos cinco hijos**, y las aclaraciones
 * son parrafos de un bloque que las apila debajo. */
.bloque-campos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.fila-linea {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* --------------------------------------------------------------- botones */

/* Los cinco botones de la maqueta, con sus colores y sus resaltados.
 *
 * No son cinco estilos elegidos acá: son los cinco que la maqueta usa, extraidos
 * de sus atributos de estilo. Vale la pena saber cual es cual porque el color
 * dice que hace cada uno, y equivocarlo es peor que feo:
 *
 *   `.boton`            neutro      papel con borde negro; se resalta en crema
 *   `.boton--principal` la accion   celeste con letra azul; se resalta en azul
 *   `.boton--celeste`   accion chica  el celeste, en tamaño de campo
 *   `.boton--oscuro`    secundario  gris oscuro con letra crema
 *   `.boton--peligro`   descarta    rosa con letra y borde rojos
 *
 * Tres cosas que se repiten en todos y que antes no estaban: el resaltado
 * **tarda 120ms** en vez de aparecer de golpe, el boton se **hunde un pixel** al
 * apretarlo, y el deshabilitado no se logra bajandole la opacidad sino con su
 * propio par de colores --arena con letra gris--, que es como se ve en la
 * maqueta. La opacidad destiñe tambien el borde y deja el boton "sucio". */
.boton {
  font: inherit;
  font-size: 15px;
  padding: 11px 16px;
  cursor: pointer;
  background: var(--papel);
  color: var(--negro);
  border: 1px solid var(--negro);
  transition:
    background 120ms,
    color 120ms,
    border-color 120ms,
    transform 80ms;
}

.boton:hover:not(:disabled) {
  background: var(--crema);
}

.boton:active:not(:disabled) {
  transform: translateY(1px);
}

/* Va **antes** que las variantes, y no al final del bloque como estaba: entre
 * dos reglas de la misma fuerza gana la ultima escrita, asi que un
 * `.boton:disabled` al final le pisaba a `.boton--principal:disabled` los
 * colores de apagado y le dejaba la opacidad encima. */
.boton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* El boton de la accion principal es **celeste**, no negro.
 *
 * Es el cambio que mas se nota de todo este bloque, y estaba al reves: "Emitir
 * comprobante", "Descargar PDF" y "Guardar cliente" eran negros con letra crema.
 * En la maqueta el negro es el fondo de la barra de totales, no un boton; lo que
 * llama a apretar es el celeste. */
.boton--principal {
  font-family: var(--serif);
  font-weight: 600;
  background: var(--celeste);
  color: var(--azul);
  border-color: var(--celeste);
}

.boton--principal:hover:not(:disabled) {
  background: var(--azul);
  color: var(--crema);
  border-color: var(--azul);
}

.boton--principal:disabled {
  background: var(--borde-suave);
  color: var(--gris-texto);
  border-color: var(--borde-suave);
  opacity: 1;
}

/* El mismo celeste, en el tamaño de un campo: "Crear cliente" al lado del
 * buscador. Lleva borde azul y no celeste porque vive contra `--papel`, donde un
 * borde celeste sobre fondo celeste no separa nada. */
.boton--celeste {
  font-size: 14px;
  background: var(--celeste);
  color: var(--azul);
  border-color: var(--azul);
  white-space: nowrap;
}

.boton--celeste:hover:not(:disabled) {
  background: var(--azul);
  color: var(--crema);
}

/* Un boton suelto dentro de una columna, como "Agregar adenda" al pie del
 * detalle. Sin esto la columna lo estira a todo el ancho y deja de parecerse a
 * "Crear cliente", que es el mismo boton; asi queda del tamaño de su texto y
 * pegado a la izquierda. */
.boton--suelto {
  align-self: flex-start;
}

.boton--oscuro {
  background: var(--gris-texto);
  color: var(--crema);
  border-color: var(--gris-texto);
}

.boton--oscuro:hover:not(:disabled) {
  background: var(--negro);
  border-color: var(--negro);
}

/* Lo que descarta algo. Se resalta llenandose de rojo, que es lo unico que
 * distingue "cancelar" de "seguir" cuando los dos botones estan pegados. */
.boton--peligro {
  font-family: var(--serif);
  font-weight: 600;
  background: var(--alerta-fondo);
  color: var(--alerta-texto);
  border-color: var(--rojo);
}

.boton--peligro:hover:not(:disabled) {
  background: var(--rojo);
  color: var(--crema-clara);
  border-color: var(--rojo);
}

.boton--liviano {
  border-color: var(--gris);
  color: var(--gris-texto);
  font-size: 14px;
}

/* El tick que agrega la linea al detalle.
 *
 * Es un cuadrado celeste con un ✓, no un boton que dice "Agregar": al lado de
 * cuatro campos altos, una palabra desalinea la fila y ademas repite lo que el
 * formulario ya dice. Los 44px de alto son los de los campos de su fila, para
 * que el borde de arriba y el de abajo coincidan con los de al lado. */
.boton--tick {
  width: 46px;
  height: 44px;
  padding: 0;
  font-family: var(--mono);
  font-size: 17px;
  background: var(--celeste);
  color: var(--azul);
  border-color: var(--azul);
}

.boton--tick:hover:not(:disabled) {
  background: var(--azul);
  color: var(--crema);
}

/* Los botones del pie del formulario: mas grandes que los de un campo, porque
 * cierran la pantalla en vez de completarla. */
.boton--grande {
  font-size: 16px;
  padding: 15px 26px;
}

/* La × que saca una linea del detalle.
 *
 * Empieza siendo casi invisible --sin fondo y con el borde mas claro de la
 * paleta-- y **se llena de rojo al pasarle por encima**. Los dos estados son a
 * proposito: una fila de una venta se mira mucho mas de lo que se borra, asi que
 * el boton no tiene que competir con el importe de al lado; pero cuando el
 * puntero ya esta encima, quien apreta tiene que ver que eso borra. */
.boton--quitar {
  width: 32px;
  padding: 7px 0;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  background: transparent;
  color: var(--gris-texto);
  border-color: var(--borde-suave);
}

.boton--quitar:hover:not(:disabled) {
  background: var(--rojo);
  color: var(--crema);
  border-color: var(--rojo);
}

/* Un boton dentro de una tabla no puede tener el tamaño de uno de formulario:
 * con el relleno normal, cada fila crece y el listado deja de leerse de un
 * vistazo, que es para lo unico que sirve un listado. */
.tabla .boton {
  padding: 6px 10px;
  font-size: 13px;
}

/* La × es la excepcion: no se achica con las demas. Tiene que seguir siendo un
 * blanco al que se le pueda apuntar, y un simbolo de 13px ya no lo es. */
.tabla .boton--quitar {
  padding: 5px 0;
  font-size: 15px;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

/* --------------------------------------------------------------- tablas */

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  display: block;
  overflow-x: auto;
}

.tabla thead th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--negro);
  white-space: nowrap;
}

.tabla thead th.numero,
.tabla td.numero {
  text-align: right;
}


.tabla td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--crema);
  vertical-align: top;
}

/* --------------------------------------------------- el detalle cargado */

/* Las lineas ya agregadas viven en su propio recuadro, con su cabecera y su
 * cuenta. No es adorno: mientras se carga una venta, lo que ya entro y lo que se
 * esta escribiendo son dos cosas distintas, y sin una separacion clara se
 * confunden --sobre todo cuando la fila de carga vuelve a quedar vacia y parece
 * una linea mas--. La cuenta a la derecha contesta de un vistazo "cuantas van",
 * que es lo que se mira antes de emitir. */
.lineas {
  border: 1px solid var(--negro);
  background: var(--crema);
  overflow-x: auto;
}

/* Vuelve a ser una tabla de verdad, en vez del bloque con barra de desplazamiento
 * que `.tabla` declara por omision. El desplazamiento se lo lleva el recuadro de
 * arriba, que es lo que hace falta para que la cabecera celeste llegue hasta el
 * borde: un bloque se encoge hasta su contenido y dejaba una franja sin pintar a
 * la derecha. */
.tabla--detalle {
  display: table;
  width: 100%;
}

.lineas__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--gris-texto);
  border-bottom: 1px solid var(--negro);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--crema);
}

/* ## El reparto del ancho: 60% el detalle, 40% los numeros, la × aparte
 *
 * Tres reglas, y ningun ancho en pixeles:
 *
 * - **El detalle se lleva el 60%.** Es la columna de texto libre y la unica que
 *   necesita crecer: una descripcion larga partida en cuatro renglones al lado
 *   de columnas medio vacias es lo que se ve cuando esto esta mal repartido.
 * - **Las cinco de numeros se reparten el 40% en partes iguales**, 8% cada una.
 *   Al ser todas del mismo ancho y estar centradas, quedan a distancias iguales
 *   entre si, que es lo que las hace leerse como una grilla de cifras y no como
 *   cinco columnas apretadas contra el borde derecho.
 * - **La × no entra en ese reparto.** Lleva `width: 1%` --en una tabla, "lo
 *   minimo que entre"-- asi que mide lo que mide el boton y se queda pegada al
 *   borde, que es donde tiene que estar.
 *
 * Los porcentajes son un piso y no una camisa de fuerza: la tabla se dibuja con
 * el reparto automatico del navegador, asi que una columna cuyo contenido no
 * entre en su 8% se ensancha en vez de desbordar. Un ancho fijo mal calculado no
 * avisa, **desborda en silencio** sobre la columna de al lado; este no puede. */
.tabla--detalle th:first-child {
  width: 60%;
}

/* Las cinco del medio: ni la primera ni la ultima. */
.tabla--detalle th:nth-child(n + 2):nth-last-child(n + 2) {
  width: 8%;
}

.tabla--detalle th:last-child {
  width: 1%;
}

/* La fila de rotulos va sobre celeste, que es lo que la separa de las filas de
 * datos sin necesitar otra linea. */
.tabla--detalle thead th {
  padding: 9px 6px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--gris-texto);
  background: var(--celeste);
  border-bottom: 1px solid var(--negro);
  text-align: center;
  white-space: nowrap;
}

.tabla--detalle thead th:first-child {
  text-align: left;
}

/* Los importes van centrados y no alineados a la derecha, que seria lo habitual
 * en una tabla de numeros. Es lo que hace la maqueta y en esta tabla funciona:
 * son columnas angostas, del ancho de su contenido, donde alinear a la derecha
 * deja el numero pegado al de la columna siguiente. */
.tabla--detalle td {
  padding: 12px 6px;
  border-bottom: 1px solid var(--borde-suave);
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}

.tabla--detalle td:first-child {
  text-align: left;
  white-space: normal;
}

/* El relleno de los bordes va en la primera y la ultima columna, no en todas.
 *
 * Entre columnas alcanza con 6px de cada lado --los 12 de separacion de la
 * maqueta-- pero contra el marco del recuadro hacen falta 14, que es lo que
 * separa del borde a la barra de arriba ("LINEAS AGREGADAS"). Con 14 en todas, las columnas
 * quedaban separadas por 28 y la fila se leia como seis islas. */
.tabla--detalle th:first-child,
.tabla--detalle td:first-child {
  padding-left: 14px;
}

/* La × queda contra el borde derecho, a la misma distancia que el numero de la
 * cabecera: es el ultimo elemento de su fila y tiene que leerse como parte del
 * marco, no flotando en el medio de una columna ancha. */
.tabla--detalle th:last-child,
.tabla--detalle td:last-child {
  padding-right: 14px;
  text-align: right;
}

.tabla--detalle tbody tr:last-child td {
  border-bottom: none;
}

.tabla--detalle tbody tr:hover {
  background: var(--crema-clara);
}

/* La columna "IVA" de cada linea se lee como dato de apoyo --dice que tasa se le
 * aplico-- y no como importe, asi que va en el gris del cuerpo y no en negro. */
.tabla--detalle .impuesto {
  color: var(--gris-texto);
}

.tabla--detalle .total {
  font-weight: 700;
}

.tabla tbody tr:hover {
  background: var(--crema-clara);
}

/* ------------------------------------------- lo que suma Nuevo comprobante */

/* Los rotulos "CLIENTE", "DETALLE" y "OTROS DATOS" como una banda gris de lado
 * a lado del formulario, con la letra en blanco y mas grande, para que dirijan
 * la atencion a cada parte de la venta. Nacio como experimento en Nuevo
 * comprobante (30/09/2026) y el usuario lo paso tambien a Comprobante rapido
 * (01/10/2026), asi que va fija en `index.html`.
 *
 * Los margenes negativos le devuelven el relleno de 22px que tiene la seccion,
 * asi la banda toca los dos bordes del panel y la linea divisoria de arriba.
 * Por eso tiene que ser lo primero de una seccion de primer nivel del
 * formulario. */
.seccion__banda {
  margin: -22px -22px 0;
  padding: 12px 22px;
  background: var(--gris-texto);
  color: var(--papel);
  font-size: 14px;
}

/* La barra "LINEAS AGREGADAS" va en el azul oscuro del sistema, en los dos
 * modos desde el 01/10/2026, y "DESCUENTOS Y RECARGOS" lleva el mismo azul: son
 * las dos tablas de lo que ya se agrego, y tienen que verse de la misma
 * familia. ("CLIENTE" se probo en azul y el usuario la paso al gris de las
 * bandas.) */
.lineas__cabecera--azul {
  background: var(--azul);
}

/* El campo de descripcion, cuando ademas busca en el catalogo.
 *
 * Reusa el envoltorio del buscador de clientes para que la lista cuelgue de el
 * con su mismo ancho. Lo unico que cambia es el crecimiento: alla el envoltorio
 * es hijo de una fila y crece a lo ancho; aca es hijo de un `.campo`, que apila
 * hacia abajo, y el mismo `flex: 1 1 240px` lo estiraria **240px de alto**.
 *
 * Lleva `.campo >` adelante para ganarle a `.buscador__campo`, que esta escrita
 * mas abajo en este archivo: con la misma fuerza gana la ultima. */
.campo > .buscador__campo--en-campo {
  flex: none;
}

/* "Abrir lista de productos", adentro del campo de descripcion y pegado a su
 * borde derecho: se lee como parte del campo --es otra forma de llenarlo-- y no
 * como un boton mas de la fila. El campo se corre para que lo escrito no quede
 * debajo del boton. */
.buscador__lista {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  /* En el azul del sistema, para que resalte dentro del campo (pedido del
   * usuario, 30/09/2026). Al pasarle por encima toma el celeste de los botones,
   * que es el par inverso del mismo juego de colores. */
  background: var(--azul);
  color: var(--crema-clara);
  border: 1px solid var(--azul);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 120ms,
    color 120ms;
}

.buscador__lista:hover {
  background: var(--celeste);
  color: var(--azul);
}

.fila-linea--completa #linea-nombre {
  padding-right: 180px;
}

/* Un producto en la lista de resultados: el nombre a la izquierda y, a la
 * derecha, el precio como esta en el catalogo. */
.resultados li button.resultados__producto {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.resultados__producto .mono {
  color: var(--gris-texto);
  white-space: nowrap;
}

/* La fila de carga en Nuevo comprobante: una grilla de siete columnas
 * --descripcion, unidad, cantidad, precio, IVA, el boton gris y el ✓-- para que
 * el descuento y el recargo de la linea caigan **debajo** de la cantidad y del
 * precio. Las columnas fijas son las mismas medidas que la fila flexible de
 * Comprobante rapido, asi que la fila de arriba se ve igual en los dos modos. */
.fila-linea--completa {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 170px 120px 136px auto 46px 46px;
  align-items: end;
}

/* Cada renglon de ajuste ocupa su propia fila de la grilla: el valor bajo
 * CANTIDAD (columna 3) y "% o Importe" bajo PRECIO UNITARIO (columna 4). */
.fila-linea--completa .ajuste-valor {
  grid-column: 3;
}

.fila-linea--completa .ajuste-unidad {
  grid-column: 4;
}

/* La × que quita el renglon, al lado del "% o Importe" (columna 5). Se pega al
 * borde izquierdo de su columna, que es la del IVA y es mas ancha. */
.fila-linea--completa .boton--quitar-ajuste {
  grid-column: 5;
  justify-self: start;
}

/* Un cuadro con la cruz roja, del alto de los campos: a la vista y con el color
 * de lo que descarta, porque borra lo que se escribio en ese renglon. Se llena
 * de rojo al pasarle por encima, como la × de las lineas agregadas. */
.boton--quitar-ajuste {
  width: 44px;
  height: 44px;
  padding: 0;
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1;
  background: var(--alerta-fondo);
  color: var(--rojo);
  border-color: var(--rojo);
}

.boton--quitar-ajuste:hover:not(:disabled) {
  background: var(--rojo);
  color: var(--crema-clara);
}

/* El boton cuadrado del descuento o recargo: la medida del ✓, en gris claro.
 * Gris y no celeste porque no es la accion principal de la fila. */
.boton--ajustes {
  width: 46px;
  height: 44px;
  padding: 0;
  font-family: var(--mono);
  font-size: 17px;
  background: var(--borde-suave);
  color: var(--gris-texto);
  border-color: var(--gris);
}

/* Se oscurece al gris del texto y no al gris medio: con el gris medio el ±
 * crema casi no se leia. */
.boton--ajustes:hover:not(:disabled),
.boton--ajustes[aria-expanded="true"] {
  background: var(--gris-texto);
  border-color: var(--gris-texto);
  color: var(--crema-clara);
}

/* El menu que despliega: cuelga del boton, alineado a su borde derecho --a la
 * derecha no hay lugar--, con el aspecto de la lista de resultados de los
 * buscadores. */
.menu-ajustes {
  position: relative;
}

.menu-ajustes__opciones {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 190px;
  border: 1px solid var(--negro);
  background: var(--papel);
  box-shadow: 0 6px 18px rgb(11 11 10 / 18%);
}

.menu-ajustes__opciones button {
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--crema);
  cursor: pointer;
  white-space: nowrap;
}

.menu-ajustes__opciones li:last-child button {
  border-bottom: none;
}

.menu-ajustes__opciones button:hover {
  background: var(--crema-clara);
}

/* El lapiz que abre una linea para corregirla: el mismo boton que la ×, pero se
 * resalta en azul y no en rojo, porque no borra nada. */
.boton--editar {
  margin-right: 6px;
}

.boton--editar:hover:not(:disabled) {
  background: var(--azul);
  border-color: var(--azul);
}

/* Con dos botones, la ultima columna no puede partirse en dos renglones. */
.tabla--detalle td:last-child {
  white-space: nowrap;
}

/* La lista de descuentos y recargos globales usa la tabla del detalle, con otro
 * reparto: la descripcion se lleva la mitad y las tres columnas de datos, el
 * resto en partes iguales. */
.tabla--globales th:first-child {
  width: 49%;
}

.tabla--globales th:nth-child(n + 2):nth-last-child(n + 2) {
  width: 16%;
}

/* -------------------------------------------------------------- resumen */

.resumen {
  margin: 0;
  display: grid;
  grid-template-columns: max-content auto;
  gap: 6px 18px;
}

.resumen dt {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--negro-suave);
  align-self: center;
}

.resumen dd {
  margin: 0;
  font-family: var(--mono);
}

/* Los totales van sobre negro y ocupan el ancho entero del panel.
 *
 * Es la unica seccion del formulario que no comparte el fondo claro de las
 * demas, y eso es lo que hace: separa de un golpe de vista "lo que estoy
 * cargando" de "lo que va a salir". El negro de la maqueta es este, no el de un
 * boton --por eso el boton principal es celeste--.
 *
 * El relleno y la ausencia de linea divisoria se le ganan a `panel__cuerpo
 * --dividido > *` por especificidad: esta regla tiene dos clases y aquella una,
 * asi que no hace falta `!important` ni reordenar el archivo. */
.panel__cuerpo--dividido .totales {
  padding: 18px 22px;
  border-top: none;
  background: var(--negro);
  color: var(--crema);
}

.totales {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
}

/* Las tres cifras: rotulo arriba, numero abajo, y el total mas grande que los
 * otros dos. Los 34px de separacion entre columnas son los de la maqueta: con
 * menos, "SUBTOTAL" y su numero se leen como una sola columna con el IVA. */
.totales__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin: 0;
}

.totales__cifras > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.totales__cifras dt {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gris);
}

.totales__cifras dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 18px;
}

.totales__cifras .total dd {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

/* Un aviso que cruza todo el ancho de la fila de totales, debajo de las dos
 * columnas. `1 0 100%` lo obliga a empezar renglon propio, y el color se pisa
 * porque el gris de `.ayuda` no se lee sobre el negro de la barra. */
.totales__aviso {
  flex: 1 0 100%;
  color: var(--crema);
}

/* El distintivo trae su propio gris, que sobre el negro de la barra no se lee.
 * El borde lo sigue solo, porque esta declarado como `currentColor`. */
.totales__aviso .marca-muestra {
  color: var(--crema);
}

/* La fila de botones del pie: descartar, guardar y emitir, en ese orden.
 *
 * El orden no es casual y es el de la maqueta: lo que descarta queda lejos del
 * borde derecho, que es donde cae el puntero, y `Emitir` --lo unico que no se
 * deshace-- queda ultimo y separado del resto por el ancho de los otros dos. */
.totales__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* El aviso que explica por que `Emitir` esta apagado.
 *
 * Un boton deshabilitado no recibe eventos del mouse --el navegador no se los
 * manda-- asi que el resaltado lo escucha este envoltorio, que si los recibe.
 * Sin esto, el boton apagado no tendria como decir que le falta. */
.con-aviso {
  position: relative;
  display: flex;
}

.aviso-flotante {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  right: 0;
  z-index: 5;
  padding: 8px 10px;
  text-align: center;
  background: var(--rojo);
  color: var(--crema-clara);
  border: 1px solid var(--rojo);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Un dato que se muestra y no se puede cambiar: el tipo de cambio.
 *
 * Se ve distinto de un campo a proposito --borde claro, fondo crema y sin el
 * negro de los bordes que rodean lo que si se escribe-- porque no es un campo
 * apagado: es un numero que pone el sistema y que quien emite no elige. */
.dato-fijo {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--borde-suave);
  background: var(--crema);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}

/* `.resumen--totales` vivia aca y se fue con la barra negra: los totales dejaron
 * de ser una lista de pares para pasar a ser tres cifras sobre negro
 * (`.totales__cifras`). Se borran sus reglas en vez de dejarlas "por si acaso":
 * una clase que ya no usa nadie es una que el proximo lector busca en el marcado
 * y no encuentra. */

/* -------------------------------------------------------------- buscador */

.buscador {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* El envoltorio del campo de busqueda: es lo que le da a la lista de resultados
 * de que colgar. Se lleva el crecimiento que antes tenia el `input`, y el input
 * pasa a ocuparlo entero: asi la lista, que se mide contra este envoltorio,
 * termina con **exactamente** el ancho del campo. */
.buscador__campo {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
}

.buscador__campo input {
  width: 100%;
}

/* La lista de clientes se despliega colgando del campo, como cualquier
 * buscador, y no empujando hacia abajo lo que sigue.
 *
 * Que flote importa mas de lo que parece: empujando, cada tecla que se escribe
 * mueve de lugar el resto del formulario --el detalle, los totales, el boton de
 * emitir-- y el salto se lleva puesto el clic de quien ya estaba apuntando a
 * otra cosa. `left: 0; right: 0` la ata a los dos bordes del campo en vez de
 * darle un ancho, que es lo que la mantiene igual de ancha aunque el campo
 * cambie de tamaño. */
.resultados {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--negro);
  max-height: 260px;
  overflow-y: auto;
  background: var(--papel);
  /* Despegada del fondo: al flotar sobre el formulario, sin sombra se lee como
   * si fuera parte de lo que tapa. */
  box-shadow: 0 6px 18px rgb(11 11 10 / 18%);
}

.resultados li button {
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--crema);
  cursor: pointer;
}

.resultados li button:hover {
  background: var(--crema-clara);
}

/* La opcion que aparece cuando la busqueda no encontro a nadie. Mismo tamaño y
 * relleno que un cliente --es una opcion mas de la lista--, pero con el par de
 * rojos de `.error`: fondo apenas rosado y letra roja, para que no se lea como un
 * cliente. Al pasarle por encima toma el rosa de `.boton--peligro`. */
.resultados li button.resultados__no-encontrado {
  background: #f6e7e7;
  color: var(--rojo);
}

.resultados li button.resultados__no-encontrado:hover {
  background: var(--alerta-fondo);
}

/* `.elegido` vivia aca: era la ficha que mostraba, debajo del buscador, al
 * cliente que se habia elegido, con su boton de quitar. Se fue cuando el elegido
 * paso a escribirse dentro del propio campo de busqueda, que es donde uno lo
 * busca. Se borran sus reglas en vez de dejarlas "por si acaso": una clase que
 * ya no usa nadie es una que el proximo lector busca en el marcado y no
 * encuentra. */

/* --------------------------------------------------------------- ventana */

/* La ventana de cliente, copiada de la maqueta valor por valor.
 *
 * Sus campos tienen clases propias (`nc-*`, por "nuevo cliente", el nombre que
 * les da la maqueta) en vez de usar `.campo` e `input` a secas, porque aca la
 * maqueta usa otras medidas que en el formulario de emision: rotulos de 10px y
 * no de 11, letra de 14px y no de 15, y el foco marcado con una linea interior
 * de 1px en vez del contorno de 2px. */

.velo {
  position: fixed;
  inset: 0;
  background: rgb(11 11 10 / 45%);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
  overflow-y: auto;
  z-index: 60;
}

/* 862 y no 860: la maqueta declara 860 sin contar el borde de 1px de cada lado,
 * y este archivo mide los bordes adentro (`box-sizing: border-box`). */
.ventana {
  width: 100%;
  max-width: 862px;
  background: var(--crema);
  border: 1px solid var(--negro);
  display: flex;
  flex-direction: column;
}

/* Negro como todas las cabeceras: ver `.inicio__cabecera`. */
.ventana__cabecera {
  background: var(--negro);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ventana__titulo {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--crema);
}

.ventana__cerrar {
  border: 1px solid var(--gris);
  background: transparent;
  color: var(--crema);
  font-family: var(--mono);
  font-size: 16px;
  width: 34px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  transition:
    background 120ms,
    border-color 120ms;
}

.ventana__cerrar:hover {
  background: var(--rojo);
  border-color: var(--rojo);
}

.ventana__cuerpo {
  padding: 24px 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.ventana__columna {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ventana__error {
  grid-column: 1 / -1;
}

/* "Datos adicionales" del alta de clientes (02/10/2026): a todo el ancho, debajo
 * de las dos columnas, con el boton pegado a la izquierda como en Nuevo
 * comprobante. */
.nc-adicionales {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ventana__pie {
  border-top: 1px solid var(--negro);
  background: var(--papel);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ventana__botones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nc-campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.nc-etiqueta,
.nc-error,
.nc-leyenda {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.nc-etiqueta {
  color: var(--gris-texto);
}

.nc-obligatorio,
.nc-error,
.nc-leyenda {
  color: var(--rojo);
}

/* El rotulo de un campo sin conectar: el distintivo flota a su derecha, sin
 * ocupar lugar, para que el campo quede a la misma altura que en la maqueta. */
.nc-etiqueta--dibujada {
  position: relative;
}

.marca-muestra.marca-muestra--rotulo {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  letter-spacing: 0;
  padding: 1px 4px;
  pointer-events: none;
}

.nc-control {
  width: 100%;
  border: 1px solid var(--negro);
  background: var(--papel);
  padding: 11px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--negro);
}

.nc-control.mono {
  font-family: var(--mono);
}

.nc-control:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--azul);
}

.nc-notas,
.adenda {
  resize: vertical;
  line-height: 1.4;
}

.nc-documento {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.nc-documento .nc-control {
  flex: 1 1 auto;
  width: auto;
}

.nc-dgi {
  border: 1px solid var(--azul);
  background: var(--celeste);
  color: var(--azul);
  font-family: var(--sans);
  font-size: 13px;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 120ms,
    color 120ms;
}

.nc-dgi:hover {
  background: var(--azul);
  color: var(--crema);
}

/* Mientras se espera a la DGI: el botón no cambia de aspecto, sólo el cursor,
 * y deja de aceptar clics para no mandar dos consultas iguales. */
.nc-dgi:disabled {
  cursor: progress;
}

/* El primer paso del alta: sólo el documento. Mismo relleno que el cuerpo de la
 * ventana y el ancho de una de sus columnas, para que el campo no se estire a
 * 800px para doce dígitos. */
.nc-paso-documento {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
}

.nc-paso-documento__texto {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--negro);
}

/* La marca de datos traídos de la DGI. Existe sólo mientras nadie corrigió
 * ninguno: no tiene variante para "corregido", desaparece y nada más. */
.nc-marca-dgi {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--ok-texto);
  background: var(--ok-fondo);
  color: var(--ok-texto);
  font-family: var(--sans);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.nc-marca-dgi strong {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  align-self: center;
}

.nc-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.nc-par--arriba {
  align-items: start;
}

.nc-plazo {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--negro);
  background: var(--papel);
}

.nc-plazo__valor {
  width: 100%;
  min-width: 0;
  border: none;
  background: none;
  padding: 11px 12px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--negro);
}

.nc-plazo__valor:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--azul);
}

.nc-plazo__unidad {
  flex: none;
  border-left: 1px solid var(--borde-suave);
  background: var(--crema);
  padding: 11px 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gris-texto);
}

.nc-cancelar {
  font-family: var(--sans);
  font-size: 15px;
  background: var(--papel);
  color: var(--negro);
  border: 1px solid var(--negro);
  padding: 13px 20px;
  cursor: pointer;
  transition: background 120ms;
}

.nc-cancelar:hover {
  background: var(--crema);
}

/* Al pasarle por encima se llena de azul pero el borde sigue celeste: asi esta
 * en la maqueta, que no le cambia el color del borde. */
.nc-guardar {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  background: var(--celeste);
  color: var(--azul);
  border: 1px solid var(--celeste);
  padding: 13px 24px;
  cursor: pointer;
  transition:
    background 120ms,
    color 120ms,
    transform 80ms;
}

.nc-guardar:hover {
  background: var(--azul);
  color: var(--crema);
}

.nc-guardar:active {
  transform: translateY(1px);
}

/* -------------------------------------------------------- textos de apoyo */

.ayuda {
  margin: 0;
  font-size: 12px;
  color: var(--gris-texto);
  max-width: 78ch;
}

/* Una nota de una sola oración que va en un renglón, sin el tope de ancho que
 * hace legibles los párrafos largos: la de arriba de Comprobante rápido, que el
 * usuario pidió en una sola línea. Sólo se parte si la ventana es tan angosta
 * que no entra. */
.ayuda--renglon {
  max-width: none;
}

/* Una ayuda que avisa de algo que va a frenar la emision --no hay cotizacion,
 * la moneda esta apagada-- y por eso no puede leerse como el resto del texto de
 * apoyo. No llega a ser un `.error`, que es el recuadro de lo que ya fallo: esto
 * todavia se puede arreglar antes de emitir. */
.ayuda--alerta {
  color: var(--rojo);
  font-weight: 600;
}

.error {
  margin: 0;
  padding: 10px 12px;
  background: #f6e7e7;
  border-left: 3px solid var(--rojo);
  color: var(--rojo);
  font-size: 13px;
}

.estado {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------------- calendario */

/* El control de fecha del diseno, que reemplaza al `<input type="date">` del
 * navegador. El porque esta en el encabezado de `base/calendario.js`; todas las
 * medidas de aca salen de la maqueta. */

/* El ancho hay que declararlo, no sale solo.
 *
 * Este control es un `div`, y un `div` no trae ancho propio como si lo traian el
 * `<select>` de al lado o el `<input type="date">` que habia antes. Dentro de
 * `.fila-campos`, que es una fila flexible donde cada `.campo` se encoge hasta su
 * contenido, eso lo deja en cero: se ve el rotulo y debajo no hay nada. Paso
 * exactamente asi la primera vez que se conecto.
 *
 * 170px es lo que ocupa "dd/mm/aaaa" en monoespaciada de 15px --unos 90px-- mas
 * los rellenos del campo, el icono y los bordes, con algo de holgura. */
.fecha {
  position: relative;
  min-width: 170px;
}

.fecha__control {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--negro);
  background: var(--papel);
}

.fecha__control:focus-within {
  box-shadow: inset 0 0 0 1px var(--azul);
}

.fecha__texto {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
}

.fecha__texto:focus {
  outline: none;
}

.fecha__icono {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--negro);
  cursor: pointer;
}

/* El icono no se resalta al pasarle el mouse por encima.
 *
 * Fue un agregado propio y la maqueta no lo tiene: ahi el icono es parte del
 * campo, no un boton aparte, y encenderlo lo despegaba visualmente del recuadro
 * que integra. El puntero de mano se queda, que es lo que avisa que se puede
 * apretar sin pintar nada. */

/* 280px es el ancho de la maqueta, y no es arbitrario: es lo que necesitan
 * siete columnas de dia para que un numero de dos cifras no quede apretado. */
.calendario {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 280px;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--negro);
  background: var(--papel);
}

.calendario--derecha {
  left: auto;
  right: 0;
}

.calendario--arriba {
  top: auto;
  bottom: calc(100% + 6px);
}

.calendario__cabecera {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: stretch;
  border-bottom: 1px solid var(--negro);
  /* Negro como todas las cabeceras: ver `.inicio__cabecera`. */
  background: var(--negro);
}

.calendario__paso,
.calendario__titulo {
  border: 0;
  background: transparent;
  color: var(--crema);
  cursor: pointer;
  transition: background 120ms;
}

.calendario__paso {
  font-family: var(--mono);
  font-size: 15px;
}

/* Las rayas que separan las flechas del mes van en `--borde-oscuro`, el de las
 * divisiones del menu de usuario: desde que la cabecera es negra, una raya
 * negra no se veria. */
.calendario__paso:first-child {
  border-right: 1px solid var(--borde-oscuro);
}

.calendario__paso:last-child {
  border-left: 1px solid var(--borde-oscuro);
}

.calendario__titulo {
  padding: 11px 8px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  /* Cifras de ancho fijo: sin esto el ano cambia de ancho al pasar de mes y el
   * encabezado entero se corre. */
  font-variant-numeric: lining-nums tabular-nums;
}

.calendario__paso:hover,
.calendario__titulo:hover {
  background: var(--negro-menu);
}

.calendario__semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  padding: 10px 12px 4px;
}

.calendario__semana span {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gris-texto);
}

.calendario__dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  padding: 4px 12px 12px;
}

.calendario__bloques {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 12px;
}

.calendario__celda {
  border: 0;
  background: transparent;
  padding: 7px 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--negro);
  cursor: pointer;
  transition: background 120ms;
}

.calendario__celda:hover {
  background: var(--celeste);
  color: var(--negro);
}

/* Hoy se marca con un recuadro y la elegida con relleno: asi las dos se pueden
 * ver a la vez, que es el caso normal al abrir el calendario. */
.calendario__celda--hoy {
  box-shadow: inset 0 0 0 1px var(--gris);
}

.calendario__celda--elegida {
  background: var(--negro);
  color: var(--crema);
  font-weight: 700;
}

.calendario__celda--elegida:hover {
  background: var(--azul);
  color: var(--crema);
}

.calendario__pie {
  border-top: 1px solid var(--borde-suave);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.calendario__hoy {
  border: 1px solid var(--negro);
  background: var(--crema);
  color: var(--negro);
  font-family: var(--sans);
  font-size: 13px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 120ms;
}

.calendario__hoy:hover {
  background: var(--celeste);
}

.calendario__cerrar {
  border: 0;
  background: transparent;
  color: var(--azul);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
}

.calendario__cerrar:hover {
  color: var(--negro);
}

/* El pie del vencimiento lleva dos filas: el rotulo y la fila del plazo. */
.calendario__pie:has(.calendario__plazo) {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.calendario__rotulo-plazo {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--negro-suave);
}

.calendario__fila-plazo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendario__plazo {
  width: 64px;
  padding: 8px 10px;
  font-size: 14px;
  text-align: right;
}

/* ------------------------------------------------------------ pantallitas */

@media (max-width: 720px) {
  .aplicacion {
    grid-template-columns: 1fr;
  }

  /* En un telefono la barra va arriba de la pantalla y no al costado: ahi no
   * se pega ni ocupa el alto de la ventana, porque taparia el contenido. */
  .barra {
    position: static;
    height: auto;
    overflow-y: visible;
    flex-direction: column;
  }

  /* Sin el lugar reservado para la barra de desplazamiento: en un telefono la
   * barra flota sobre la pagina y no salta de ancho, y reservarla dejaba una
   * franja crema a la derecha de la barra negra. */
  html {
    scrollbar-gutter: auto;
  }

  /* El menu en dos columnas parejas y no en una fila que se parte donde caiga:
   * con anchos desiguales, el distintivo "SIN CONECTAR" (que flota a la derecha
   * del renglon sin ocupar lugar) quedaba encima del texto de cada rubro. Con
   * una columna de media pantalla, "Compras", "Reportes" y "Varios" entran con
   * el distintivo al lado. El destacado va a lo ancho, como encabeza la barra. */
  .menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }

  .menu__destacado {
    grid-column: 1 / -1;
    margin: 0 0 6px;
  }

  .menu__item,
  .menu__destacado {
    padding: 10px 12px;
  }

  .menu__item {
    font-size: 14px;
  }

  /* En un telefono las dos columnas de Inicio no entran: van una debajo de la
   * otra. La maqueta no dibuja este ancho, asi que en pantalla de computadora
   * no cambia nada. */
  .inicio {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
 * El signo de pregunta que explica un dato
 * --------------------------------------------------------------------------
 *
 * Un círculo gris claro con un "?" que, al pasar el mouse o al llegar con el
 * teclado, muestra un globo con la explicación.
 *
 * Existe porque hay datos que se muestran solos y podrían leerse como otra
 * cosa: el caso que lo motivó es la columna "TOTAL A PAGAR" del listado, que
 * muestra lo que se le cobra al cliente y no el total del comprobante. En vez de
 * agregar una columna para explicar la diferencia, se explica donde está.
 *
 * Es un `button` y no un `span` a propósito: así entra en el orden de tabulación
 * y el globo aparece también con el teclado. Un icono de ayuda que sólo responde
 * al mouse deja afuera a quien no lo usa. */
.ayuda-dato {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* Gris oscuro con el signo blanco: es el contraste que pidio el usuario y el
   * unico gris oscuro de la paleta. `--gris` (#9a8f82) no sirve, es claro y
   * calido. El blanco es `--papel`, el mismo de las tarjetas: el blanco puro no
   * aparece en ningun lado del sistema. */
  background: var(--gris-texto);
  color: var(--papel);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}

/* El resaltado oscurece en vez de aclarar, que es como se comporta el resto de
 * los controles del sistema. Aclararlo lo haria parecer deshabilitado justo al
 * apuntarlo. */
.ayuda-dato:hover,
.ayuda-dato:focus-visible {
  background: var(--negro-suave);
  color: var(--papel);
}

/* El globo. Se dibuja siempre y se oculta con `visibility` en vez de con
 * `display`, para que el navegador pueda animar la aparición si algún día se
 * quiere, y para que su ancho no dependa de cuándo se calcula. */
.ayuda-dato__globo {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  /* Mas ancho de lo que pedia el texto a 11px: al subir la letra a 13px el
   * mismo texto pasaba de tres renglones a cuatro, y el globo crecia hacia
   * abajo tapando dos filas del listado. Ensanchandolo se recupera el alto. */
  width: 268px;
  padding: 9px 11px;
  border: 1px solid var(--negro);
  background: var(--negro-suave);
  color: var(--crema);
  font-family: var(--sans);
  /* 13px y no 12: es un cuerpo que el sistema ya usa en otros doce lugares,
   * mientras que 12px no aparece en ninguno y agregaria un escalon nuevo a la
   * escala tipografica. */
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.ayuda-dato:hover .ayuda-dato__globo,
.ayuda-dato:focus-visible .ayuda-dato__globo {
  visibility: visible;
  opacity: 1;
}