/* =============================================================
   RENTALGO — Design system
   Identidad de VMA Rental: fondo negro, acento amarillo.

   El acento no está fijo acá: cada empresa configura el suyo y el
   template lo inyecta como --acento. Los valores de este archivo son
   el tema por defecto del producto.
   ============================================================= */

/* ---- Tema oscuro: el predeterminado y el de la marca ---- */
:root {
  --acento:        #FFC400;  /* lo pisa la empresa desde el template */
  --acento-hover:  #E6B310;
  --acento-texto:  #FFC400;  /* acento usado como color de texto */
  --acento-rgb:    255, 196, 0;
  --sobre-acento:  #121110;  /* texto encima de un relleno de acento */

  --fondo:         #030303;
  --panel:         #1A1A1A;
  --elevado:       #2A2A2A;
  --borde:         #333333;
  --borde-suave:   rgba(255, 255, 255, .07);

  --texto:         #C9C9C9;
  --texto-fuerte:  #FFFFFF;
  --texto-tenue:   #6B6B6B;

  --ok:            #4ADE80;
  --alerta:        #FB923C;
  --error:         #F87171;
  --info:          #60A5FA;

  --sombra:        0 4px 16px rgba(0, 0, 0, .45);
  --radio:         6px;
  --sidebar-ancho: 232px;
}

/* ---- Tema claro: alternativa, mismo acento sobre fondos claros ---- */
[data-tema="claro"] {
  --acento-texto:  var(--acento-sobre-blanco, #8F6800);
  --sobre-acento:  #121110;

  --fondo:         #EDECE8;
  --panel:         #FFFFFF;
  --elevado:       #ECEBE7;
  --borde:         #D8D6D0;
  --borde-suave:   rgba(0, 0, 0, .07);

  --texto:         #3A3833;
  --texto-fuerte:  #121110;
  --texto-tenue:   #7A776E;

  --ok:            #1C7A49;
  --alerta:        #A35C07;
  --error:         #B3322C;
  --info:          #1D4ED8;

  --sombra:        0 2px 10px rgba(18, 17, 16, .08);
}

/* ---- Base ---- */
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: 'Saira Condensed', 'Barlow', system-ui, sans-serif;
  font-weight: 600;
  color: var(--texto-fuerte);
  letter-spacing: .01em;
}

a { color: var(--acento-texto); text-decoration: none; }
a:hover { color: var(--acento-hover); }

/* Los números en columna se leen mejor alineados. */
.tabular, table td, table th, .monto { font-variant-numeric: tabular-nums; }

.texto-tenue { color: var(--texto-tenue) !important; }
.texto-acento { color: var(--acento-texto) !important; }
/* Los tres estados de un aviso corto. Las variables ya existían para las
   etiquetas de estado; esto las hace usables sobre texto suelto. */
.texto-ok     { color: var(--ok) !important; }
.texto-alerta { color: var(--alerta) !important; }
.texto-error  { color: var(--error) !important; }

.etiqueta {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* ---- Botones ---- */
.btn { font-weight: 600; border-radius: var(--radio); transition: background .15s, border-color .15s; }

.btn-primary {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--acento-hover);
  border-color: var(--acento-hover);
  color: var(--sobre-acento);
}

.btn-outline-primary {
  border-color: var(--borde);
  color: var(--acento-texto);
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
  background: rgba(var(--acento-rgb), .12);
  border-color: var(--acento);
  color: var(--acento-texto);
}

.btn-secondary {
  background: var(--elevado);
  border-color: var(--borde);
  color: var(--texto);
}
.btn-secondary:hover { background: var(--borde); color: var(--texto-fuerte); }

/* El foco de teclado se ve siempre: hay usuarios que navegan sin mouse. */
.btn:focus-visible, .form-control:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---- Paneles y tarjetas ----
   Los niveles se separan por contraste de fondo, no por bordes marcados. */
.panel {
  background: var(--panel);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
}
.panel-titulo {
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde-suave);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel-cuerpo { padding: 18px; }

.card { background: var(--panel); border: 1px solid var(--borde-suave); border-radius: var(--radio); }

/* ---- Formularios ---- */
.form-control, .form-select {
  background: var(--elevado);
  border: 1px solid var(--borde);
  color: var(--texto-fuerte);
  border-radius: var(--radio);
}
.form-control:focus, .form-select:focus {
  background: var(--elevado);
  border-color: var(--acento);
  color: var(--texto-fuerte);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), .15);
}
.form-control::placeholder { color: var(--texto-tenue); }
.form-label { font-size: .82rem; font-weight: 600; color: var(--texto); margin-bottom: 5px; }

/* ---- Tablas ---- */
.tabla-datos { width: 100%; border-collapse: collapse; }
.tabla-datos thead th {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
.tabla-datos tbody td { padding: 12px 16px; border-bottom: 1px solid var(--borde-suave); }
.tabla-datos tbody tr:last-child td { border-bottom: none; }
.tabla-datos tbody tr:hover { background: var(--elevado); }

/* ---- Estados ---- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .73rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.estado-ok     { color: var(--ok); }
.estado-alerta { color: var(--alerta); }
.estado-error  { color: var(--error); }
.estado-neutro { color: var(--texto-tenue); }
.estado-acento { color: var(--acento-texto); }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-ancho);
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--borde-suave);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 4px;
}
.sidebar-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 20px;
  text-decoration: none;
}
.sidebar-marca-inicial {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--acento);
  color: var(--sobre-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
.sidebar-marca-nombre {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--texto-fuerte);
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-seccion {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  padding: 14px 10px 6px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radio);
  color: var(--texto);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .13s, color .13s;
}
.sidebar-link:hover { background: var(--elevado); color: var(--texto-fuerte); }
.sidebar-link i { font-size: 1rem; width: 18px; text-align: center; flex-shrink: 0; }

/* El activo se separa por nivel de fondo y una barra de acento, no por un
   relleno amarillo: sobre negro el amarillo translúcido vira a marrón y sobre
   blanco desaparece. */
.sidebar-link.activo {
  background: var(--elevado);
  color: var(--texto-fuerte);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--acento);
}
.sidebar-link.activo i { color: var(--acento-texto); }

/* ---- Barra superior ---- */
.barra-superior {
  height: 58px;
  flex-shrink: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--borde-suave);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
}

.contenido { padding: 26px 22px 60px; }

/* ---- Menú desplegable ---- */
.dropdown-menu {
  background: var(--elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-size: .89rem;
}
.dropdown-item { color: var(--texto); }
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(var(--acento-rgb), .12);
  color: var(--texto-fuerte);
}
.dropdown-divider { border-color: var(--borde); }

/* ---- Mensajes ---- */
.alert { border-radius: var(--radio); border: 1px solid var(--borde); background: var(--panel); color: var(--texto); }
.alert-success { border-left: 3px solid var(--ok); }
.alert-warning { border-left: 3px solid var(--alerta); }
.alert-error, .alert-danger { border-left: 3px solid var(--error); }
.alert-info { border-left: 3px solid var(--info); }

/* ---- Estado vacío ---- */
.vacio {
  text-align: center;
  padding: 52px 24px;
  color: var(--texto-tenue);
}
.vacio i { font-size: 2rem; display: block; margin-bottom: 12px; opacity: .5; }

/* ---- Móvil ----
   Operaciones y los técnicos usan esto en obra, muchas veces con guantes:
   ningún control táctil baja de 44px. */
@media (max-width: 991px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--sombra);
  }
  .sidebar.abierto { transform: translateX(0); }

  .sidebar-fondo {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .6);
  }

  .sidebar-link,
  .btn,
  .form-control,
  .form-select { min-height: 44px; }

  .contenido { padding: 18px 14px 60px; }
  .tabla-datos thead th, .tabla-datos tbody td { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Filas de un formulario con líneas (presupuestos) ---- */
/* La casilla de "quitar" del formset se opera desde el ícono: el tacho es el
   control, y la fila marcada se ve tachada hasta que se guarda. */
.quitar-linea {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radio);
  color: var(--texto-tenue);
  cursor: pointer;
}
.quitar-linea:hover { background: var(--elevado); color: var(--error); }
.quitar-linea input { position: absolute; opacity: 0; pointer-events: none; }
.quitar-linea:has(input:checked) { color: var(--error); background: var(--elevado); }

tr.linea:has([name$="-DELETE"]:checked) td { opacity: .4; }

/* ---- Casillas ---- */
/* Bootstrap las pinta de azul: acá van con el acento de la empresa. */
.form-check-input {
  background-color: var(--elevado);
  border-color: var(--borde);
}
.form-check-input:checked {
  background-color: var(--acento);
  border-color: var(--acento);
}
.form-check-input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), .15);
}

/* ---- Selector de país del celular (intl-tel-input) ---- */
/* La librería trae su propio estilo, pensado para fondo blanco. Acá se lo
   lleva a los mismos tokens que el resto de los formularios. */

/* Por defecto el contenedor es inline-block y queda pegado a la etiqueta. */
.iti { display: block; width: 100%; }
.iti__tel-input { width: 100%; }

.iti__country-container { border-radius: var(--radio) 0 0 var(--radio); }

.iti__selected-country {
  background: var(--borde);
  border-radius: var(--radio) 0 0 var(--radio);
  color: var(--texto-fuerte);
}
.iti__selected-country:hover,
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])) .iti__selected-country:hover {
  background: var(--elevado);
}
.iti__selected-dial-code { color: var(--texto); }
.iti__arrow { border-top-color: var(--texto-tenue); }
.iti__arrow--up { border-bottom-color: var(--texto-tenue); }

/* Lista desplegable de países */
.iti__dropdown-content {
  background: var(--elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--texto);
}
.iti__search-input {
  background: var(--panel);
  border: none;
  border-bottom: 1px solid var(--borde);
  color: var(--texto-fuerte);
}
.iti__search-input::placeholder { color: var(--texto-tenue); }
.iti__search-input:focus { outline: none; border-bottom-color: var(--acento); }
.iti__country { color: var(--texto); }
.iti__country.iti__highlight { background: rgba(var(--acento-rgb), .14); }
.iti__dial-code { color: var(--texto-tenue); }
.iti__no-results { color: var(--texto-tenue); }

/* ---- Calendario de logística ---- */
.calendario { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 780px; }
.calendario th {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-align: left;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--borde);
}
.calendario td {
  vertical-align: top;
  height: 104px;
  padding: 6px;
  border: 1px solid var(--borde-suave);
}
.calendario td.fuera-del-mes { background: var(--fondo); }
.calendario td.fuera-del-mes .numero-dia { opacity: .35; }
.calendario td.hoy { box-shadow: inset 0 0 0 1px var(--acento); }

.numero-dia { font-size: .78rem; color: var(--texto-tenue); margin-bottom: 4px; }
.calendario td.hoy .numero-dia { color: var(--acento-texto); font-weight: 600; }

/* Cada viaje es una tarjeta chica; la barra izquierda dice si sale o vuelve. */
.viaje {
  display: block;
  font-size: .74rem;
  line-height: 1.3;
  padding: 4px 6px;
  margin-bottom: 4px;
  border-radius: 3px;
  background: var(--elevado);
  color: var(--texto);
  text-decoration: none;
  border-left: 3px solid var(--texto-tenue);
}
.viaje:hover { background: var(--borde); color: var(--texto-fuerte); }
.viaje-entrega { border-left-color: var(--acento); }
.viaje-retiro { border-left-color: var(--info); }
.viaje-hecho { opacity: .5; }
.viaje-tipo { font-weight: 700; margin-right: 2px; }
.viaje-detalle { color: var(--texto-tenue); font-size: .7rem; }

.muestra {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 4px; vertical-align: middle;
}
.muestra-entrega { background: var(--acento); }
.muestra-retiro { background: var(--info); }

@media (max-width: 767px) {
  .calendario td { height: 84px; }
}

/* ---- Checklist de obra ----
   Se completa desde el celular, con guantes y a veces con sol directo:
   opciones grandes, alto contraste y una sola columna. */
.revision .punto { padding: 12px 0; border-bottom: 1px solid var(--borde-suave); }
.revision .punto:last-child { border-bottom: none; }
.punto-texto { font-size: .92rem; color: var(--texto-fuerte); margin-bottom: 8px; }
.punto-opciones { display: flex; gap: 6px; flex-wrap: wrap; }

.opcion {
  flex: 1 1 auto;
  min-width: 104px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--elevado);
  color: var(--texto);
  font-size: .86rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion:hover { border-color: var(--texto-tenue); }

/* El estado elegido se lee por color de fondo, no por un punto chico. */
.opcion:has(input:checked) { color: var(--sobre-acento); font-weight: 600; }
.opcion-ok:has(input:checked) { background: var(--ok); border-color: var(--ok); }
.opcion-observado:has(input:checked) { background: var(--alerta); border-color: var(--alerta); }
.opcion-falta:has(input:checked) { background: var(--error); border-color: var(--error); }

.fotos-cargadas { display: flex; gap: 8px; flex-wrap: wrap; }
.fotos-cargadas img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: var(--radio); border: 1px solid var(--borde);
}


/* El precio tipeado a mano no se pisa, pero se muestra el del catálogo al
   lado para que la diferencia sea una decisión y no un descuido. */
.aviso-tarifa {
  font-size: .72rem;
  color: var(--alerta);
  margin-top: 3px;
  white-space: nowrap;
}


/* ---- Modo soporte ----
   Cuando el administrador de plataforma entra al backoffice de una empresa,
   la banda deja claro de quién son los datos que está mirando. */
.banda-soporte {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 18px;
  border-radius: 30px;
  background: var(--elevado);
  border: 1px solid var(--acento);
  color: var(--texto-fuerte);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--sombra);
}
.banda-soporte a {
  background: var(--acento);
  color: var(--sobre-acento);
  border-radius: 20px;
  padding: 2px 12px;
  font-size: .75rem;
  text-decoration: none;
}

/* ---- La tabla de líneas del presupuesto ----
   Es una grilla de carga, no un listado de lectura: entran diez columnas y
   casi todas llevan un control adentro. Con el padding del listado común, un
   desplegable de Bootstrap gasta más espacio en su propia flecha que el que
   le queda al valor elegido, y columnas como la del IVA se ven vacías aunque
   tengan algo seleccionado. */
.tabla-lineas thead th,
.tabla-lineas tbody td { padding: 8px 9px; }

.tabla-lineas .form-select {
  padding-left: 8px;
  padding-right: 22px;
  background-position: right 6px center;
  background-size: 11px 8px;
}
.tabla-lineas .form-control { padding-left: 8px; padding-right: 8px; }

/* La pastilla de color de las referencias de los gráficos. */
.referencia {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: -1px;
}

/* El globo con los montos de un tramo del gráfico. */
.grafico {
  position: relative;
}

.grafico-globo {
  position: absolute;
  z-index: 5;
  min-width: 170px;
  padding: 8px 10px;
  border: 1px solid var(--borde-suave);
  border-radius: 6px;
  background: var(--elevado);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  font-size: .82rem;
  line-height: 1.5;
  /* Deja pasar el mouse: si el globo lo capturara, taparía la zona que lo
     abrió y se apagaría solo. */
  pointer-events: none;
  white-space: nowrap;
}

.grafico-globo-titulo {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--borde-suave);
  color: var(--texto-fuerte);
  font-weight: 600;
}

.grafico-globo-fila {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* Los renglones del presupuesto se alinean arriba.
   La celda del equipo lleva debajo el aviso de disponibilidad, así que es
   más alta que las otras; centradas, sus campos quedaban más abajo que el
   selector y el renglón se veía torcido. */
.tabla-lineas tbody td { vertical-align: top; }

/* El hueco de los avisos de cada renglón del presupuesto.
   Ocupa su línea esté vacío o lleno: si apareciera y desapareciera, el alto
   del renglón cambiaría al perder el foco un campo —o sea, justo al apretar
   «Guardar»— y el botón se correría entre el mousedown y el mouseup. */
.aviso-fila {
  min-height: 1.05rem;
  margin-top: 3px;
  font-size: .76rem;
  line-height: 1.05rem;
}

/* El editor de las cláusulas del contrato: una barra y una hoja. */
.editor-texto {
  border: 1px solid var(--borde);
  border-radius: 6px;
  overflow: hidden;
}

.editor-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: var(--elevado);
  border-bottom: 1px solid var(--borde-suave);
}

.editor-separador {
  width: 1px;
  margin: 2px 4px;
  background: var(--borde);
}

/* La hoja no lleva borde propio: el del marco alcanza, y dos bordes
   encimados se ven como un error. */
.editor-hoja {
  border: none;
  border-radius: 0;
  padding: 12px 14px;
  overflow-y: auto;
  max-height: 60vh;
}

.editor-hoja:focus {
  outline: none;
  box-shadow: none;
}

.editor-hoja p { margin: 0 0 .6em; }
.editor-hoja p:last-child { margin-bottom: 0; }
.editor-hoja ul, .editor-hoja ol { margin: 0 0 .6em 1.2em; padding: 0; }

/* Los marcadores al redactar una plantilla de contrato: quedan al costado y
   fijos, porque se usan mientras se escribe y el texto es largo. */
.marcadores {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}

/* `min-height:0` no es opcional: sin eso un hijo de flex no achica por
   debajo de su contenido y la lista desborda el panel en vez de scrollear. */
.marcadores-lista {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px 14px;
}

.marcadores-grupo + .marcadores-grupo { margin-top: 14px; }
.marcadores-grupo .etiqueta { display: block; margin-bottom: 6px; padding-left: 8px; }

/* Cada marcador es un botón: un clic lo mete donde está el cursor. */
.marcador {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--texto);
  padding: 4px 8px;
  font-size: .82rem;
  line-height: 1.2;
  cursor: pointer;
}

.marcador:hover, .marcador:focus-visible {
  background: var(--elevado);
  border-color: var(--borde);
  color: var(--texto-fuerte);
}

.marcador code {
  display: block;
  font-size: .72rem;
  color: var(--texto-tenue);
}

.marcador:hover code { color: var(--acento-texto); }

/* Cuando el filtro no deja nada, el grupo entero se va. */
.marcador[hidden], .marcadores-grupo[hidden] { display: none !important; }

/* ---- Buscador encima de un desplegable largo (js/buscar_en_lista.js) ---- */
.buscable { position: relative; }
.buscable-lista {
  position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 2px);
  max-height: 300px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.buscable-lista li { padding: 6px 12px; cursor: pointer; color: var(--texto-fuerte); font-size: .9rem; }
.buscable-lista li small { display: block; color: var(--texto-tenue); font-size: .76rem; }
.buscable-lista li.marcada, .buscable-lista li[role="option"]:hover { background: var(--elevado); }
.buscable-lista li.buscable-vacio { color: var(--texto-tenue); cursor: default; }
/* Pegado a un botón, como el cliente del presupuesto con su «Nuevo». */
.input-group > .buscable { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .buscable .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ---- Solapas de una cuenta corriente: movimientos / adeudadas ---- */
.solapas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); padding: 0 16px; flex-wrap: wrap; }
.solapas a {
  padding: 10px 12px; margin-bottom: -1px; color: var(--texto-tenue); text-decoration: none;
  border-bottom: 2px solid transparent; font-size: .9rem;
}
.solapas a:hover { color: var(--texto-fuerte); }
.solapas a.activa { color: var(--texto-fuerte); border-bottom-color: var(--acento); font-weight: 600; }
.solapas .cuenta-solapa {
  display: inline-block; min-width: 1.4em; padding: 0 6px; margin-left: 4px; border-radius: 999px;
  background: var(--elevado); font-size: .75rem; text-align: center;
}
.filtro-cuenta { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 12px 16px;
                 border-bottom: 1px solid var(--borde-suave); }
.filtro-cuenta label { display: block; font-size: .75rem; color: var(--texto-tenue); margin-bottom: 2px; }
.filtro-cuenta .form-control, .filtro-cuenta .form-select { min-width: 0; }
tr.fila-vencida td { color: var(--error); }

/* ---- Ayuda: índice, pasos, flujos, notas y maquetas de pantalla ---- */
.ayuda { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 991px) { .ayuda { grid-template-columns: minmax(0, 1fr); } }
.ayuda-indice { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.ayuda-indice a { padding: 6px 10px; border-radius: var(--radio); color: var(--texto); text-decoration: none; }
.ayuda-indice a:hover { background: var(--elevado); color: var(--texto-fuerte); }
.ayuda-indice a.activa { background: var(--elevado); color: var(--texto-fuerte); font-weight: 600; }
.ayuda-indice .contable { color: var(--acento-texto); }
.ayuda-texto { max-width: 76ch; }
.ayuda-texto h2 { font-size: 1.15rem; margin: 28px 0 10px; color: var(--texto-fuerte); text-wrap: balance; }
.ayuda-texto h2:first-child { margin-top: 0; }
.ayuda-texto h3 { font-size: .98rem; margin: 20px 0 8px; color: var(--texto-fuerte); }
.ayuda-texto p, .ayuda-texto li { line-height: 1.6; }
.ayuda-texto code { color: var(--acento-texto); }

.ayuda-pasos { list-style: none; counter-reset: paso; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.ayuda-pasos li { counter-increment: paso; position: relative; padding-left: 38px; }
.ayuda-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento); font-weight: 700; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
}

.ayuda-flujo { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 14px 0; }
.ayuda-flujo .etapa {
  flex: 1 1 120px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--panel); font-size: .84rem;
}
.ayuda-flujo .etapa strong { display: block; color: var(--texto-fuerte); margin-bottom: 2px; }
.ayuda-flujo .flecha { align-self: center; color: var(--texto-tenue); }

.ayuda-nota { border-left: 3px solid var(--info); background: var(--elevado); padding: 10px 14px; border-radius: 0 var(--radio) var(--radio) 0; margin: 14px 0; font-size: .9rem; }
.ayuda-nota.ojo { border-left-color: var(--alerta); }
.ayuda-nota.clave { border-left-color: var(--acento); }
.ayuda-nota strong:first-child { color: var(--texto-fuerte); }

/* Una pantalla en miniatura, con datos de ejemplo: muestra dónde está cada cosa. */
.maqueta { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); margin: 14px 0; overflow: hidden; font-size: .8rem; }
.maqueta-barra { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--borde); }
.maqueta-barra .titulo { font-weight: 700; color: var(--texto-fuerte); margin-right: auto; }
.maqueta-boton { padding: 3px 9px; border-radius: 5px; background: var(--elevado); border: 1px solid var(--borde); color: var(--texto-fuerte); white-space: nowrap; }
.maqueta-boton.primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.maqueta-cuerpo { padding: 12px; display: grid; gap: 10px; }
.maqueta-panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 5px; overflow-x: auto; }
.maqueta-panel table { width: 100%; border-collapse: collapse; }
.maqueta-panel th { text-align: left; padding: 6px 10px; color: var(--texto-tenue); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--borde); }
.maqueta-panel td { padding: 6px 10px; border-bottom: 1px solid var(--borde-suave); white-space: nowrap; }
.maqueta-panel .num { text-align: right; font-variant-numeric: tabular-nums; }
.maqueta-solapas { display: flex; gap: 14px; padding: 0 10px; border-bottom: 1px solid var(--borde); }
.maqueta-solapas span { padding: 7px 0; color: var(--texto-tenue); }
.maqueta-solapas span.activa { color: var(--texto-fuerte); border-bottom: 2px solid var(--acento); font-weight: 600; }
.maqueta-marca { outline: 2px dashed var(--acento); outline-offset: 2px; border-radius: 4px; }
.maqueta-pie { padding: 6px 12px; color: var(--texto-tenue); font-size: .74rem; border-top: 1px solid var(--borde); background: var(--panel); }

.ayuda-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ayuda-tarjeta { display: block; padding: 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel); text-decoration: none; color: var(--texto); }
.ayuda-tarjeta:hover { border-color: var(--acento); }
.ayuda-tarjeta strong { display: flex; align-items: center; gap: 8px; color: var(--texto-fuerte); margin-bottom: 4px; }
.ayuda-tarjeta.destacada { border-color: var(--acento); }