/* =========================================================================
   Facturador CR — hoja de estilo única.
   -------------------------------------------------------------------------
   Pensada para una CAJA, no para una página bonita:
     · la información importante grande y arriba;
     · nada de animaciones que retrasen la vista del total;
     · foco siempre visible, porque se trabaja con el teclado;
     · claro por defecto; el oscuro se escoge con el boton de la barra.
   ========================================================================= */

:root {
  /*
     Esta línea le avisa al navegador que la página sirve para los dos temas.

     Sin ella pasa algo que despista: abajo cambian las variables —el texto se
     vuelve casi blanco en modo oscuro— pero lo que dibuja el navegador por su
     cuenta (el fondo gris claro de un <button> sin estilar, las barras de
     desplazamiento, el calendario de un <input type=date>) se queda CLARO. El
     resultado es texto casi blanco sobre fondo casi blanco.

     Pasó de verdad con el botón «Entrar»: se veía «blanco blanco».
  */
  color-scheme: light;

  --fondo: #f6f7f9;
  --papel: #ffffff;
  --papel-2: #f2f5f8;
  --borde: #dde2e8;
  --borde-fuerte: #b9c0c9;
  --texto: #1b2431;
  --tenue: #5b6673;
  --acento: #1663c7;
  --acento-suave: #e9f1fc;
  /* El color del texto que va ENCIMA del acento. No es siempre blanco: en el
     tema oscuro el acento se aclara para poder leerlo como texto, y ahí un
     blanco encima queda en 2,6:1 — por debajo del 4,5:1 que se necesita. */
  --sobre-acento: #ffffff;
  /* Y el que va encima del acento SUAVE, que es otro problema. El acento sobre
     el acento suave daba 4,30:1 —por debajo del 4,5:1 que se necesita— y eso
     era justo el color del boton activo del menu, o sea el texto que dice en
     que pantalla esta uno. Se oscurece solo para ese caso: mover el acento
     entero cambiaria el color de marca en botones, enlaces y graficos. */
  --sobre-acento-suave: #1354a3;
  --verde-suave: #e7f4ec;
  --sobre-verde-suave: #14683a;
  --exito: #0f7b3f;
  --exito-suave: #e6f5ec;
  --alerta: #9a6100;
  --alerta-suave: #fdf3e2;
  --error: #b3261e;
  --error-suave: #fdecea;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .06);
  --radio: 10px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

/*
   El tema ya NO sigue al sistema operativo.

   Mario probo el sistema el 12/8 y lo vio oscuro sin haberlo pedido: su
   Windows estaba en oscuro y la hoja seguia al sistema. La regla quedo asi:
   CLARO por defecto para todo el mundo, y el oscuro se ESCOGE con el boton
   de la barra (queda guardado por navegador). El arranque lo aplica en
   <html data-theme="oscuro"> ANTES de pintar, para que no parpadee.
*/
html[data-theme="oscuro"] {
    --fondo: #14181e;
    --papel: #1c2129;
    --papel-2: #222831;
    --borde: #333c48;
    --borde-fuerte: #46525f;
    --texto: #e7ecf2;
    --tenue: #9aa6b4;
    --acento: #63a4f5;
    --acento-suave: #1a2c44;
    --sobre-acento: #0b1725;
    /* En oscuro el acento sobre el suave ya da 5,48:1; se deja el mismo. */
    --sobre-acento-suave: #63a4f5;
    --verde-suave: #17301f;
    --sobre-verde-suave: #6fce96;
    --exito: #5cd18e;
    --exito-suave: #14301f;
    --alerta: #e8b45c;
    --alerta-suave: #33280f;
    --error: #f08b84;
    --error-suave: #3a1a18;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- barra -- */

.barra {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 16px;
  height: 52px;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  flex: none;
}

.marca {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--acento);
}

.relleno-barra { flex: 1; }

/*
 * EL MENÚ LATERAL (14/8, foto de Mario con la ventana a media pantalla).
 *
 * La barra horizontal se envolvía a dos líneas y tapaba el contenido — ni
 * «Inicio» se veía. Una columna a la izquierda no pelea por el ancho: en
 * pantalla angosta se MINIMIZA a una tira de iconos (el botón de abajo, y
 * queda guardado por navegador). Los grupos abren en acordeón, hacia abajo,
 * como la competencia: nada flota, nada tapa.
 */
.lateral {
  width: 232px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border-right: 1px solid var(--borde);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .15s ease;
}
body.menu-encogido .lateral { width: 58px; }
body.menu-encogido .lateral .texto,
body.menu-encogido .lateral .flecha,
body.menu-encogido .lateral .estado-barra { display: none; }
body.menu-encogido .menu button { justify-content: center; padding: 9px 0; }
body.menu-encogido .panel-grupo { padding-left: 0; }

.menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  flex: 1;
}

.menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  color: var(--tenue);
  font: inherit;
  font-weight: 550;
  padding: 8px 10px;
  border-radius: var(--radio);
  cursor: pointer;
  text-align: left;
}
.menu button .icono { font-size: 15px; flex: none; }
.menu button:hover { background: var(--papel-2); color: var(--texto); }
.menu button.activo { background: var(--acento-suave); color: var(--sobre-acento-suave); }
.menu .abre-grupo.activo { background: var(--acento-suave); color: var(--sobre-acento-suave); }
.menu .abre-grupo.activo .flecha { color: var(--sobre-acento-suave); }

/* ------------------------------------------------- grupos en acordeón -- */
.abre-grupo .flecha {
  margin-left: auto;
  font-size: 10px;
  transition: transform .12s ease;
  color: var(--tenue);
}
.abre-grupo[aria-expanded="true"] .flecha { transform: rotate(180deg); }

/* El panel abre HACIA ABAJO, dentro de la columna: nada flota ni tapa. */
.panel-grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 24px;
}
.panel-grupo button { font-weight: 500; padding: 6px 10px; }

/* --------------------------------------------------- el pie del menú -- */
.pie-lateral {
  padding: 8px;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.encoger-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  color: var(--tenue);
  font: inherit;
  padding: 6px 10px;
  border-radius: var(--radio);
  cursor: pointer;
}
.encoger-menu:hover { background: var(--papel-2); color: var(--texto); }
body.menu-encogido .encoger-menu { justify-content: center; padding: 6px 0; }
body.menu-encogido .encoger-menu .icono { transform: rotate(180deg); }

/* ------------------------------------------- sugerencias y comentarios -- */
/* El iconito vive en la esquina DERECHA del estado, en su propia fila: el
   estado se lleva el espacio que sobre y el iconito nunca se mueve de ahí. */
.fila-estado {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fila-estado .estado-barra { flex: 1; min-width: 0; }
/* Con el menú minimizado el estado se esconde y el iconito queda solo: se
   centra en la columna angosta, como el botón de minimizar. */
body.menu-encogido .fila-estado { justify-content: center; }

/*
   Pequeño, pero NO invisible: el pie del menú es blanco y un iconito blanco
   encima se pierde contra el fondo. Va sobre la pastilla del acento suave,
   que es un par de colores ya medido.
*/
.boton-sugerencias {
  flex: none;
  border: 1px solid var(--borde);
  background: var(--acento-suave);
  color: var(--sobre-acento-suave);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.boton-sugerencias:hover { border-color: var(--acento); background: var(--papel-2); }

/*
   SIN `transition` EN LOS COLORES, Y NO ES POR GUSTO (20/8/2026, medido en el
   navegador). Una propiedad que está en la lista de `transition` NO vuelve a
   resolverse cuando lo único que cambió fue la variable de la que sale su
   valor: al pasar a tema oscuro, este iconito se quedaba con el celeste del
   tema claro —#e9f1fc sobre un panel #1c2129— hasta recargar la página. El
   `color`, que no estaba en la lista, sí cambiaba. Quitada la transición,
   toma bien los dos temas.
*/

@media (max-width: 700px) {
  .barra { gap: 12px; padding: 0 10px; }
}

/* ------------------------------------------- la línea de facturar nueva -- */
/* El lapicito al lado de cada dato de la línea (como en la competencia): el
   dato a la vista, el detalle detrás del iconito. */
.celda-editable {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Un número NUNCA se corta (Mario, 14/8): el precio conserva su ancho
   mínimo y, si la pantalla no da, la tabla entera hace scroll. */
.celda-editable input { min-width: 96px; flex: 1; }

.icono-editar {
  border: 1px solid var(--borde);
  background: var(--papel);
  color: var(--tenue);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.icono-editar:hover { background: var(--acento-suave); color: var(--sobre-acento-suave); border-color: var(--acento); }
.icono-editar.peligro:hover { background: var(--error-suave); color: var(--error); border-color: var(--error); }

.tarifa-iva { font-weight: 600; white-space: nowrap; }
.tarifa-iva .exo { color: var(--exito); font-weight: 600; }

/* El renglón del resumen que se puede apretar (el del impuesto). */
.totales .fila.apretable { cursor: pointer; border-radius: 6px; }
.totales .fila.apretable:hover { background: var(--acento-suave); }
.totales .fila.apretable:hover span { color: var(--sobre-acento-suave); }

/* -------------------------------------------- condiciones de venta ------- */
.condiciones-venta { max-width: 560px; }
.condiciones-venta .encasillado {
  padding: 6px 8px;
  border-radius: 6px;
}
.condiciones-venta .encasillado:hover { background: var(--papel-2); }

/* ------------------------------------------------------- otros cargos --- */
.otros-cargos { border-top: 1px solid var(--borde); }
.cargo-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
.cargo-fila > span:first-child { flex: 1; min-width: 0; }

/* ------------------------------------------------------- botón del tema -- */
.boton-tema {
  border: 1px solid var(--borde);
  background: var(--papel);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tenue);
  cursor: pointer;
  /*
   * SIN TRANSICION DE COLOR (20/8/2026). Una propiedad que esta en la lista
   * de `transition` no se vuelve a resolver cuando lo unico que cambio fue
   * la VARIABLE de la que sale su valor. Al pasar a oscuro, este boton y la
   * campana se quedaban con el fondo blanco del tema claro sobre la barra
   * oscura —dos circulos blancos— hasta que uno recargara la pagina.
   * El hover pierde el suavizado; un boton que se ve roto no lo vale.
   */
  flex: none;
}
.boton-tema:hover { background: var(--acento-suave); color: var(--sobre-acento-suave); border-color: var(--acento); }
.boton-tema svg { display: block; flex: none; }

/* ------------------------------------------------------------- campana -- */
.campana { position: relative; flex: none; }
.conteo-campana {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--error);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.panel-campana {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: min(360px, calc(100vw - 24px));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  z-index: 60;
}
.panel-campana .fila-notificacion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--borde);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.panel-campana .fila-notificacion:hover { background: var(--papel-2); }
.panel-campana .fila-notificacion.sin-leer { background: var(--acento-suave); }
.panel-campana .fila-notificacion .cuando { font-size: 11px; opacity: .6; }
.panel-campana .pie-campana {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}

/* ------------------------------------------------ a nombre de quién voy -- */
/* Las iniciales de la EMPRESA activa (14/8, como FP): el nombre completo al
   pasar el ratón, y el ⇄ al lado para el que lleva varias. Emitir por la
   empresa equivocada no se deshace, así que las iniciales van SIEMPRE a la
   vista, pegadas a la marca. */
.empresa-actual {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* La píldora de la empresa activa (Mario, 14/8): el nombre COMPLETO va
   dentro de la figura azul — las iniciales solas no le decían nada. */
.avatar-empresa {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--acento);
  color: var(--sobre-acento);
  font-weight: 650;
  font-size: 14px;
  padding: 6px 14px;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: none;
}
@media (max-width: 560px) { .avatar-empresa { max-width: 46vw; font-size: 13px; } }

.cambiar-empresa {
  border: 1px solid var(--borde);
  background: var(--papel);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  color: var(--tenue);
  flex: none;
}
.cambiar-empresa:hover { border-color: var(--acento); color: var(--acento); }

/* ------------------------------------------------ el IVA del artículo -- */
/* Grande a propósito (Mario, 14/8): «siempre debe saberse bien ese
   porcentaje a cobrar». */
.iva-articulo {
  font-size: 19px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radio);
  background: var(--papel-2);
  color: var(--tenue);
  width: fit-content;
}
.iva-articulo.puesto { background: var(--acento-suave); color: var(--sobre-acento-suave); }
.iva-articulo.exento { background: var(--alerta-suave); color: var(--alerta); }

/* El campo con un dato que NO va (código repetido): rojo donde está el
   problema, no solo un mensaje lejos. */
.entrada-mala,
input.entrada-mala {
  border-color: var(--error) !important;
  background: var(--error-suave);
}

/* El CAByS elegido SE VE en la barra de búsqueda: relleno suave y borde de
   acento. Clic para buscar otro (el texto se selecciona solo). */
/* ------------------------------------------- los iconitos de Ventas -- */
/* La fila de acciones de FP (14/8): iconos chicos con su nombre al pasar el
   ratón. `quieto` es el informativo (el registrante), que no es botón. */
.acciones-doc {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.icono-doc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--papel);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--texto);
  text-decoration: none;
  padding: 0;
}
.icono-doc:hover { border-color: var(--acento); background: var(--acento-suave); }
.icono-doc.quieto { cursor: default; }
.icono-doc.quieto:hover { border-color: var(--borde); background: var(--papel); }

/* Los retoques de Mario (15/8) a los iconitos:
   · el ojo va un ~18 % más grande que los demás: es el que más se busca;
   · el ⟨XML⟩ y el edificio llevan su palabra escrita, chiquita pero legible
     — mismo tamaño que el «PDF» rojito, que ya probó que se lee;
   · los que llevan palabra pueden crecer a lo ancho: la fila hace wrap. */
.icono-doc svg { display: block; }
.icono-ojo { font-size: 16.5px; }
.icono-xml { width: auto; min-width: 28px; padding: 0 2px; }
.xml-mini {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  padding: 0 1px;
  pointer-events: none;
}
/* El «XML» al puro centro de los paréntesis (Mario, 15/8): la línea base
   lo dejaba trepado; el flex lo centra de verdad. */
.icono-doc:has(.xml-mini) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icono-hacienda {
  flex-direction: column;
  gap: 1px;
  width: auto;
  min-width: 28px;
  padding: 0 3px;
}
.hacienda-mini {
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}
.hacienda-edificio { font-size: 13px; line-height: 1; }

.buscador input.cabys-elegido {
  border-color: var(--exito);
  background: var(--exito-suave);
  font-weight: 600;
}

/* El estado del sistema vive al pie del menú lateral: visible —el aviso de
   PRODUCCIÓN es plata— pero fuera de la barra de arriba. */
.estado-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--tenue);
  padding: 0 4px;
}

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pastilla.ok    { background: var(--exito-suave);  color: var(--exito);  border-color: color-mix(in srgb, var(--exito) 25%, transparent); }
.pastilla.aviso { background: var(--alerta-suave); color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 25%, transparent); }
.pastilla.malo  { background: var(--error-suave);  color: var(--error);  border-color: color-mix(in srgb, var(--error) 25%, transparent); }
.pastilla.neutro{ background: var(--papel-2);      color: var(--tenue);  border-color: var(--borde); }

/* -------------------------------------------------------------- pantalla -- */

/*
 * EL ANCHO MÁXIMO DEL CONTENIDO.
 *
 * En un monitor grande, sin tope, un renglón de tabla se estira de lado a lado
 * y el ojo tiene que recorrer medio metro para llevar el nombre del cliente
 * hasta el total. Mario lo dijo con precisión: a media pantalla se ve mucho
 * mejor, y a pantalla completa uno se pierde.
 *
 * 1400 px es más o menos lo que ocupa esta aplicación a media pantalla en un
 * monitor de escritorio. Con menos que eso no sobra nada y el tope no estorba;
 * con más, el contenido se centra y queda todo a la vista.
 *
 * NO se le pone al <header>: la barra sí tiene que llegar de borde a borde,
 * porque es el marco de la ventana.
 */
/* La fila de abajo del encabezado: menú lateral + contenido. `min-height: 0`
   es lo que deja que el main tenga su propio scroll en vez de estirar todo. */
.cuerpo-app {
  display: flex;
  flex: 1;
  min-height: 0;
}

main {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 16px;
}

main > * {
  max-width: 1400px;
  margin-inline: auto;
}

.pie {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 30px;
  padding: 0 16px;
  background: var(--papel);
  border-top: 1px solid var(--borde);
  font-size: 11.5px;
  color: var(--tenue);
}
.pie .atajos { margin-left: auto; }

kbd {
  font: 600 10.5px/1 var(--mono);
  padding: 3px 5px;
  border: 1px solid var(--borde-fuerte);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--papel-2);
  color: var(--texto);
}

/* --------------------------------------------------------------- tarjeta -- */

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tarjeta > h2 {
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 650;
 
  letter-spacing: .04em;
  color: var(--tenue);
  border-bottom: 1px solid var(--borde);
}

.cuerpo { padding: 14px 16px; }

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

label { display: block; font-size: 12px; font-weight: 600; color: var(--tenue); margin-bottom: 4px; }

input, select, textarea, button {
  font: inherit;
  color: var(--texto);
}

input, select, textarea {
  width: 100%;
  padding: 7px 10px;
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: 6px;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}
input[readonly] { background: var(--fondo); color: var(--tenue); }
input.numero, td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }

.rejilla { display: grid; gap: 12px; }
.c2 { grid-template-columns: repeat(2, 1fr); }
.c3 { grid-template-columns: repeat(3, 1fr); }
.c4 { grid-template-columns: repeat(4, 1fr); }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  background: var(--papel-2);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.boton:hover:not(:disabled) { background: var(--acento-suave); border-color: var(--acento); color: var(--sobre-acento-suave); }
.boton:disabled { opacity: .45; cursor: not-allowed; }

.boton.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
}
/* El fondo va EXPLICITO: sin el, la regla generica del hover (mas
   especifica que .boton.primario a secas) lo pintaba claro y el texto
   blanco desaparecia — el boton se veia vacio (Mario, 14/8). */
.boton.primario:hover:not(:disabled) { background: var(--acento); border-color: var(--acento); filter: brightness(1.08); color: var(--sobre-acento); }

.boton.peligro { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); }
.boton.peligro:hover:not(:disabled) { background: var(--error-suave); border-color: var(--error); color: var(--error); }

.boton.chico { padding: 3px 8px; font-size: 12px; }

/* ---------------------------------------------------------------- tabla -- */

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  /* Sin MAYÚSCULAS (Mario, 14/8: «no quiero nada así»): solo la primera
     letra, un pelín más grande y en negrita para que se acentúe igual. */
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--tenue);
  padding: 8px 10px;
  border-bottom: 2px solid var(--acento-suave);
  background: var(--papel-2);
  position: sticky;
  top: 0;
  z-index: 1;
}

td { padding: 7px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tbody tr:hover { background: var(--papel-2); }
tbody tr.seleccionada { background: var(--acento-suave); }

/* La fila de totales de un reporte: se separa con una línea gruesa arriba, no
   con color, para que se distinga también impresa en blanco y negro. */
tbody tr.total > td {
  font-weight: 600;
  border-top: 2px solid var(--texto);
  border-bottom: none;
}
tbody tr.total:hover { background: transparent; }

.envoltorio-tabla { overflow-x: auto; }

/* La variante acotada: unas 8 filas a la vista y el resto con su barrita.
   Es para las tablas largas que tienen algo importante DEBAJO —el detalle de
   un reporte con sus resúmenes al pie—: sin esto había que bajar cientos de
   líneas para llegar a lo que uno vino a ver. El th ya es pegajoso con fondo
   sólido (arriba), así que el encabezado se queda quieto solo. */
.envoltorio-tabla.acotado {
  max-height: 400px;
  overflow-y: auto;
}
/* Con los bordes colapsados, el borde del th se queda atrás al pegarse la
   celda (los bordes son de la cuadrícula, no de la celda). La rayita se
   dibuja como sombra interior, que sí viaja con el encabezado. */
.envoltorio-tabla.acotado th {
  border-bottom: none;
  box-shadow: inset 0 -2px 0 var(--acento-suave);
}

/* -------------------------------------------------------------- facturar -- */

.facturar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1280px) { .facturar { grid-template-columns: 1fr; } }

.cabecera-doc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: flex-end;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
}
.cabecera-doc > div { min-width: 130px; }

.buscador { position: relative; }

.sugerencias {
  position: absolute;
  z-index: 40;
  left: 0; right: 0;
  top: calc(100% + 3px);
  max-height: 320px;
  overflow-y: auto;
  background: var(--papel);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.sugerencias:empty { display: none; }

.sugerencia {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--borde);
}
.sugerencia:last-child { border-bottom: 0; }
.sugerencia:hover, .sugerencia.marcada { background: var(--acento-suave); }
.sugerencia .principal { font-weight: 550; }
.sugerencia .secundaria { font-size: 11.5px; color: var(--tenue); display: flex; gap: 10px; margin-top: 2px; }
.sugerencia code { font-family: var(--mono); font-size: 11.5px; }

/* La fila de «no hay nada»: se ve, pero no se puede escoger. */
.sugerencia.sin-nada {
  cursor: default;
  color: var(--tenue);
  font-size: 12.5px;
  text-align: center;
  padding: 12px;
}
.sugerencia.sin-nada:hover { background: none; }

/* La flecha que avisa que esto se despliega. */
.buscador .abrir {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--tenue);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.buscador .abrir:hover { background: var(--acento-suave); color: var(--sobre-acento-suave); }
.buscador.desplegado .abrir { transform: translateY(-50%) rotate(180deg); }
/* Espacio para la flecha, para que el texto no se le meta debajo. La clase la
   pone el widget; con un selector de hermanos no se podía, porque el input va
   ANTES del botón y `~` solo mira hacia adelante. */
.buscador.con-flecha input { padding-right: 32px; }

/* El botón redondo de limpiar que Chrome le pone al type=search choca con la
   flecha: se quita, que para eso está Esc y el teclado. */
.buscador input[type="search"]::-webkit-search-cancel-button { display: none; }

/* ================================================================ tablero == */

.tablero { display: flex; flex-direction: column; gap: 14px; }

/*
 * La alarma: el aviso que NO se puede leer igual que los demás.
 *
 * Hoy solo la usa el certificado por vencer, y la razón de que sea aparte —más
 * grande, con su propio color y arriba de todo— es que un aviso con el mismo
 * tamaño que «dos correos esperando salir» se lee con la misma urgencia que
 * «dos correos esperando salir», o sea ninguna. Y aquí lo que está en juego es
 * quedarse sin poder emitir NADA.
 */
.alarma {
  padding: 20px 24px;
  border-radius: var(--radio);
  border: 2px solid;
  margin-bottom: 4px;
}
.alarma h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.alarma p  { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }
.alarma p:last-child { margin-bottom: 0; }

.alarma.mala {
  background: var(--error-suave);
  border-color: var(--error);
  color: var(--error);
}
.alarma.alerta {
  background: var(--alerta-suave);
  border-color: var(--alerta);
  color: var(--alerta);
}
/* El texto de adentro va en el color normal: en rojo sobre rojo suave se lee,
   pero tres párrafos seguidos en rojo cansan y dejan de gritar. El que grita
   es el titular. */
.alarma p { color: var(--texto); }

/* Lo que hay que atender va ARRIBA de los números bonitos. Un tablero que
   enseña ventas y esconde comprobantes sin resolver miente por omisión. */
.pila-avisos { display: flex; flex-direction: column; gap: 8px; }

.aviso-tablero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--borde);
  border-left-width: 4px;
  border-radius: var(--radio);
  background: var(--papel);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.aviso-tablero:hover { background: var(--papel-2); }
.aviso-tablero.alerta { border-left-color: var(--error); }
.aviso-tablero.aviso  { border-left-color: var(--alerta); }
.aviso-tablero .nota  { margin: 0; }

.todo-al-dia { border-left: 4px solid var(--exito); }

/* Las cifras del mes. */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}
.cifra { display: flex; flex-direction: column; gap: 2px; }
.cifra .etiqueta {
  font-size: 11px;
 
  letter-spacing: .04em;
  color: var(--tenue);
}
.cifra .valor {
  font-size: 24px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.cifra.buena .valor { color: var(--exito); }
.cifra.mala  .valor { color: var(--error); }
.cifra .nota { margin: 0; }

.rejilla-tablero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .rejilla-tablero { grid-template-columns: 1fr; }
}

/* El gráfico, dibujado a mano. Los colores salen de las variables para que
   siga leyéndose igual en el tema oscuro. */
.grafico svg { width: 100%; height: auto; display: block; }
.grafico .reja   { stroke: var(--borde); stroke-width: 1; }
.grafico .eje    { fill: var(--tenue); font-size: 10px; }
.grafico .ingreso { fill: var(--acento); }
.grafico .gasto   { fill: var(--alerta); }

.leyenda { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tenue); }
.leyenda .marca { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.leyenda .marca.ingreso { background: var(--acento); }
.leyenda .marca.gasto   { background: var(--alerta); margin-left: 8px; }

/* Quién facturó: la barrita da la proporción sin hacer la división mental. */
.quien { margin-bottom: 14px; }
.quien:last-child { margin-bottom: 0; }
.quien .entre { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.quien .entre strong { font-variant-numeric: tabular-nums; }
.quien .barra {
  height: 6px;
  border-radius: 3px;
  background: var(--borde);
  margin: 5px 0 2px;
  overflow: hidden;
}
.quien .barra .relleno { height: 100%; background: var(--acento); border-radius: 3px; }
.quien .nota { margin: 0; font-size: 11.5px; }

/* La unidad de la línea: se ve, no se toca. Se define en el artículo. */
.unidad-fija {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--papel-2);
  border: 1px solid var(--borde);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tenue);
  cursor: default;
}

/* El descuento con su tipo, apilados para que quepan en la columna. */
.descuento { display: flex; flex-direction: column; gap: 4px; }
.descuento select, .descuento input { font-size: 12px; padding: 3px 6px; }

/* --------------------------------------------------- descargar mis datos -- */
/* Va destacado a propósito: es la promesa que sostiene la política de datos.
   Un botón que el cliente no encuentra es una promesa que no existe. */
.exportar-todo {
  background: var(--acento-suave);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin: 4px 0 12px;
}
.exportar-todo .nota { margin: 8px 0 0; }

/* ------------------------------------------------------- ver la contraseña -- */

.campo-clave { position: relative; display: block; }
.campo-clave input { width: 100%; padding-right: 38px; }

.campo-clave .ver-clave {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--tenue);
  cursor: pointer;
}
.campo-clave .ver-clave:hover { background: var(--acento-suave); color: var(--sobre-acento-suave); }
.campo-clave .ver-clave[aria-pressed="true"] { color: var(--acento); }

/* Edge dibuja su PROPIO ojo en los campos de contraseña. Con el nuestro al lado
   salen dos, y cada uno con su idea de si el campo está destapado. */
.campo-clave input::-ms-reveal,
.campo-clave input::-ms-clear { display: none; }

.totales { position: sticky; top: 0; }
.totales .fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-variant-numeric: tabular-nums;
}
.totales .fila span:last-child { font-family: var(--mono); }
.totales .fila.grande {
  border-top: 2px solid var(--borde-fuerte);
  margin-top: 8px;
  padding-top: 10px;
  font-size: 22px;
  font-weight: 700;
}
.totales .fila.tenue { color: var(--tenue); font-size: 12.5px; }

/* --------------------------------------------------------------- modal --- */

/*
  El atributo `hidden` NO alcanza para esconder algo a lo que el CSS le da un
  `display`. El navegador aplica `[hidden] { display: none }` en su hoja de
  estilos propia, y CUALQUIER regla del autor le gana por precedencia. Sin esta
  línea, `.capa { display: flex }` deja la capa oscura encima de toda la
  pantalla: no se ve nada raro más que un oscurecimiento, pero se traga todos
  los clics y la aplicación parece congelada.

  Va con `!important` a propósito: `hidden` significa oculto y ninguna regla
  posterior —ni una que alguien agregue después sin acordarse de esto— debería
  poder contradecirlo.
*/
[hidden] { display: none !important; }

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

/*
  La pantalla de ingreso tapa TODO. Mientras no haya sesión no hay nada que
  mirar, y dejar la aplicación dibujada detrás daría a entender que algo se
  puede hacer sin entrar.
*/
.capa-ingreso {
  position: fixed;
  inset: 0;
  background: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
}

.tarjeta-ingreso {
  width: 100%;
  max-width: 360px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 28px 26px 26px;
}
.tarjeta-ingreso .marca-ingreso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.tarjeta-ingreso .marca-ingreso h1 {
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}
.tarjeta-ingreso label {
  display: block;
  font-size: 12px;
  color: var(--tenue);
  margin: 14px 0 5px;
}
.tarjeta-ingreso input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--papel-2);
  color: var(--texto);
  font-size: 14px;
}
.tarjeta-ingreso input:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
}
/*
 * SOLO el botón de enviar. La versión anterior decía `.tarjeta-ingreso
 * button` a secas — y el ojo de «ver la contraseña» también es un botón
 * dentro de la tarjeta: el margin-top de 20px lo empujaba a la esquina
 * inferior derecha del campo. Lo vio Mario el 12/8, con la foto.
 */
.tarjeta-ingreso button[type="submit"] {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  font-size: 14px;
}
.tarjeta-ingreso .sin-usuarios pre {
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px;
  font-family: var(--mono);
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.error-ingreso {
  margin: 12px 0 0;
  padding: 9px 11px;
  background: var(--error-suave);
  border: 1px solid var(--error);
  border-radius: var(--radio);
  color: var(--error);
  font-size: 13px;
}
.aviso-ingreso {
  margin: 0 0 16px;
  padding: 9px 11px;
  background: var(--alerta-suave);
  border: 1px solid var(--alerta);
  border-radius: var(--radio);
  color: var(--alerta);
  font-size: 13px;
}

/* Botón redondo con las iniciales, en la barra de arriba. */
.usuario {
  /* A la misma altura que la campana y el tema (34px), centrado con flex y
     con el azul de la casa: era el tercero desalineado de la fila. */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: var(--acento-suave);
  color: var(--sobre-acento-suave);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  letter-spacing: .03em;
  transition: border-color .15s, box-shadow .15s;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
.usuario:hover { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.ficha-usuario p { margin: 6px 0; font-size: 14px; }
.ficha-usuario select { width: 100%; margin-top: 4px; }

.capa {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  z-index: 100;
  overflow-y: auto;
}

.modal {
  width: 100%;
  max-width: 620px;
  background: var(--papel);
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.modal.ancho { max-width: 900px; }
.modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde);
  font-weight: 650;
}
.modal > .cuerpo { padding: 18px; }
.modal > footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 18px;
  border-top: 1px solid var(--borde);
  background: var(--papel-2);
  border-radius: 0 0 12px 12px;
}

.cerrar {
  border: 0; background: none; color: var(--tenue);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.cerrar:hover { background: var(--papel-2); color: var(--texto); }

/* --------------------------------------------------------------- avisos -- */

.avisos {
  position: fixed;
  right: 16px;
  bottom: 42px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 460px;
}

.aviso {
  padding: 11px 14px;
  border-radius: var(--radio);
  border: 1px solid var(--borde-fuerte);
  background: var(--papel);
  box-shadow: var(--sombra);
  font-size: 13px;
}
.aviso.ok    { border-left: 4px solid var(--exito); }
.aviso.error { border-left: 4px solid var(--error); }
.aviso.avisa { border-left: 4px solid var(--alerta); }
.aviso strong { display: block; margin-bottom: 2px; }
.aviso ul { margin: 6px 0 0; padding-left: 18px; color: var(--tenue); font-size: 12px; }

/* ---------------------------------------------------------------- varios -- */

.nota { font-size: 12px; color: var(--tenue); margin: 6px 0 0; }
.nota.alerta { color: var(--alerta); }
.nota.mala { color: var(--error); }
.nota.buena { color: var(--exito); }

.vacio { padding: 40px 16px; text-align: center; color: var(--tenue); }
.vacio p { margin: 6px 0; }

.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pila { display: flex; flex-direction: column; gap: 12px; }

/* Los botones de una tarjeta, abajo y separados del contenido. */
.pie-tarjeta {
  padding: 12px 16px;
  border-top: 1px solid var(--borde);
  background: var(--papel-2);
}

/*
 * Un aviso que se queda. No es el de la esquina que se va solo: es el que
 * explica algo que el usuario tiene que leer ANTES de decidir, y por eso vive
 * dentro del formulario y no encima de él.
 */
.aviso-fijo {
  padding: 11px 13px;
  border: 1px solid var(--borde);
  border-left-width: 4px;
  border-radius: var(--radio);
  background: var(--papel-2);
  font-size: 13px;
  line-height: 1.5;
}
.aviso-fijo.alerta { border-left-color: var(--alerta); }
.aviso-fijo.mala   { border-left-color: var(--error); }
.aviso-fijo .nota  { margin: 6px 0 0; }

/*
 * TODO check del sistema es un INTERRUPTOR, no el cuadrito nativo.
 *
 * Lo pidió Mario el 12/8: «todos los checks están feos, no son claros en qué
 * activan». El cuadrito nativo mide 13px, cambia con el sistema operativo y
 * no dice nada; el interruptor se ve encendido o apagado desde el otro lado
 * de la caja. Verde = encendido, gris = apagado, y el foco del teclado se
 * dibuja alrededor.
 */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
  background: var(--papel-2);
  position: relative;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  flex: none;
  margin: 0;
  vertical-align: middle;
}
input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tenue);
  transition: left .15s ease, background .15s ease;
}
input[type="checkbox"]:checked {
  background: var(--exito);
  border-color: var(--exito);
}
input[type="checkbox"]:checked::after {
  left: 18px;
  background: #ffffff;
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* Casilla y su texto, en la misma línea y con el clic en las dos partes. */
.encasillado {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
}
.encasillado input[type="checkbox"] { margin-top: 2px; flex: none; }
/* La misma trampa del menú: sin `min-width: 0` el texto no baja de renglón y se
   sale por la derecha en un teléfono. */
.encasillado span { min-width: 0; }

/*
 * El texto de los términos.
 *
 * Va en un <pre> a propósito: es markdown y se enseña TAL CUAL se guardó. Si se
 * interpretara como HTML, lo que el cliente vería no sería exactamente lo que
 * dice el registro que aceptó, y ese registro existe justamente para eso.
 *
 * `pre-wrap` para que los párrafos largos bajen de renglón sin perder los
 * saltos que el autor puso.
 */
.terminos {
  max-height: 55vh;
  overflow-y: auto;
  overflow-x: auto;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--papel-2);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.mono { font-family: var(--mono); font-size: 12px; }
.recorte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 1px; }

.cargando { color: var(--tenue); font-size: 12px; }

.interruptor { display: flex; align-items: center; gap: 8px; }
.interruptor input { width: auto; }
.interruptor label { margin: 0; }

/* La marca en el pie. Va del mismo tamaño que los atajos y en color tenue: es
   atribución, no un anuncio — quien trabaja aquí todo el día no necesita que le
   grite el nombre del despacho. */
.pie .marca-pie { color: var(--tenue); display: inline-flex; align-items: center; gap: 6px; }
/* El ícono de EleMa en el pie. Va chiquito y con las esquinas redondeadas,
   igual que en las apps del teléfono, para que la marca se vea igual en todo. */
.pie .marca-pie-icono { border-radius: 4px; vertical-align: middle; }

/* El código de Microsoft: grande y espaciado, que se pueda copiar a mano. */
.codigo-microsoft {
  text-align: center;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  user-select: all;
  margin: 4px 0;
}

/* ------------------------------------------------- acentos de color (14/8) --
   Lo pidió Mario: «un poquito más de acentos de color». Poquito es la regla:
   la barrita en los títulos, la banda bajo los th y el total en azul marcan
   el ritmo de la página sin volverla un árbol de Navidad. */

.cabecera-doc h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 0.95em;
  background: var(--acento);
  border-radius: 2px;
  margin-right: 9px;
  vertical-align: -2px;
}

.totales .fila.grande { color: var(--acento); }
.totales .fila.grande span:first-child { color: var(--texto); }

/* La nota que delata un descuento en la línea (el monto vive en el engranaje). */
.desc-linea { color: var(--acento); }

/* La vista previa del membrete (Ajustes): como encabeza la hoja. */
.membrete-previa { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.membrete-previa img { max-width: 260px; max-height: 130px; object-fit: contain; margin: 0 auto 6px; }
.membrete-previa h3 { margin: 0; }

/* -------------------------------------------------- medios de pago (14/8) */
.medio-pago {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
}
.medio-pago img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.medio-pago > div { flex: 1; min-width: 0; }
.medio-pago .nota { overflow: hidden; text-overflow: ellipsis; }
.medio-sin-icono { width: 22px; text-align: center; color: var(--tenue); flex: none; }

.tarjeta-suave {
  border: 1px dashed var(--borde);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
}
.tarjeta-suave h4 { margin: 0 0 8px; }

/* El buscador de ubicación, con presencia: es la puerta de entrada. */
.busqueda-ubicacion {
  font-size: 14.5px;
  padding: 9px 12px;
  border: 1.5px solid var(--acento);
  border-radius: 8px;
  background: var(--papel);
}
.busqueda-ubicacion::placeholder { color: var(--tenue); }

/* La actividad elegida (14/8): código corto, descripción ancha con
   puntitos — el nombre completo sale en la burbujita (title). */
.fila-actividad { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.codigo-actividad { font-family: var(--mono); }
.entrada-recortada { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input[readonly].codigo-actividad, input[readonly].entrada-recortada {
  background: var(--papel-2);
  color: var(--texto);
}

/* La tabla de facturar no se comprime hasta romper los datos: el CAByS y
   los montos completos siempre; con poco ancho, scroll horizontal. */
.envoltorio-tabla table { min-width: 760px; }
.envoltorio-tabla .nota.mono { white-space: nowrap; }

/* Los atajos de fecha, definidos (Mario, 14/8): borde firme, no fantasma. */
.boton.atajo-fecha {
  border: 1.5px solid var(--borde-fuerte);
  font-weight: 600;
}
.boton.atajo-fecha:hover:not(:disabled) { border-color: var(--acento); }

/* Medios de pago en su cuadro VERDE (Mario, 14/8): el color de los dólares
   separa la sección de un vistazo. */
.seccion-pago {
  background: var(--verde-suave);
  border: 1px solid var(--sobre-verde-suave);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 18px;
}
.seccion-pago > h3 { margin: 0 0 4px; color: var(--sobre-verde-suave); }
.encasillado.chico { font-size: 12px; white-space: nowrap; }

/* Mi cuenta por SECCIONES que se distinguen (Mario, 14/8): cada h3 abre
   bloque con su barrita y una línea que lo separa del anterior — lo de una
   cosa no se revuelve con lo de la otra. */
.tarjeta .cuerpo h3 {
  margin: 26px -4px 10px;
  padding: 14px 4px 0;
  border-top: 2px solid var(--acento-suave);
  font-size: 15.5px;
}
.tarjeta .cuerpo h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 0.9em;
  background: var(--acento);
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: -1px;
}

/* El membrete de la vista previa y el cuadro verde llevan su propio estilo. */
.membrete-previa h3, .seccion-pago h3 { border-top: none; margin-top: 0; padding-top: 0; font-size: inherit; }
.membrete-previa h3::before, .seccion-pago h3::before { content: none; }
.seccion-pago > h3 { margin: 0 0 4px; color: var(--sobre-verde-suave); }

/* El «PDF» rojito del iconito (14/8): chiquito, esquina inferior derecha. */
.icono-pdf { position: relative; }
.pdf-mini {
  position: absolute;
  bottom: 1px;
  right: 1px;
  font-size: 7px;
  font-weight: 800;
  color: #c62828;
  line-height: 1;
  pointer-events: none;
}

/* Opciones adicionales tras Totales en angosto (el orden del DOM manda);
   en pantalla ancha vuelve a la columna izquierda, bajo las líneas. */
.facturar > .opciones-doc { grid-column: 1; }
