:root {
  /* Paleta «Azul petróleo». Cambiar aquí cambia todo el sistema. */
  color-scheme: light only;
  --degradado: linear-gradient(120deg, #0b3b5c 0%, #0e6f8a 55%, #14a3a0 100%);
  --fondo: #eef3f8;
  --tarjeta: #ffffff;
  --tarjeta-2: #f3f7fb;
  --texto: #10223a;
  --titulo: #0b1f36;
  --suave: #5d6f86;
  --borde: #e2e9f1;
  --borde-fuerte: #c8d4e1;
  --acento: #0e8a88;
  --acento-oscuro: #0b6f6e;
  --sobre-acento: #ffffff;
  --enlace: #0e6f8a;
  --primario: #0e6f8a;
  --primario-claro: #e3f5f8;
  --info: #0e5f78;
  --info-borde: #a9dde6;
  --exito: #15803d;
  --exito-claro: #dcfce7;
  --exito-borde: #a7e9bf;
  --peligro: #b91c1c;
  --peligro-claro: #fee2e2;
  --peligro-borde: #fbbcbc;
  --aviso: #a15c07;
  --aviso-claro: #fef3c7;
  --aviso-borde: #f59e0b;
  --azul: #0ea5c6;
  --sombra: 0 4px 16px rgba(11, 59, 92, .07);
  --sombra-fuerte: 0 10px 30px rgba(11, 59, 92, .12);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo); color: var(--texto); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--enlace); }
a:hover { color: #0b3b5c; }
/* Volver y migas de pan, arriba de cada pantalla */
.navegacion-arriba { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.navegacion-arriba .migas { margin: 0; }
.navegacion-arriba .migas span { color: var(--texto); }
.boton.volver { font-weight: 600; }
.acciones-fila { white-space: nowrap; }
.espacio-izq { margin-left: auto; align-self: center; font-size: 14px; }
.tarjeta.atajo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 28px; line-height: 1.25; margin: 0 0 6px; color: var(--titulo); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 20px; margin: 26px 0 10px; color: var(--titulo); font-weight: 700; }
h3 { color: var(--titulo); }
.subtitulo { color: var(--suave); margin: 0 0 20px; }
.migas { font-size: 15px; color: var(--suave); margin-bottom: 8px; }
.migas a { color: var(--texto); }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: 16px 0 20px; flex-wrap: wrap; }
.pestanas a { padding: 9px 14px; text-decoration: none; color: var(--suave); border-bottom: 3px solid transparent; font-weight: 600; }
.pestanas a:hover { color: var(--titulo); }
.pestanas a.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 700; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; padding: 22px; margin-bottom: 18px; box-shadow: var(--sombra); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.acciones .espacio { flex: 1; }
.boton, button.boton {
  display: inline-block; background: var(--acento); color: var(--sobre-acento); border: 1px solid var(--acento); border-radius: 10px;
  padding: 8px 16px; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; font-family: inherit;
}
.boton:hover, button.boton:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); color: var(--sobre-acento); }
.boton:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #14a3a066; outline-offset: 1px; }
.boton.secundario { background: #fff; color: var(--titulo); border: 1px solid var(--borde-fuerte); }
.boton.secundario:hover { background: var(--primario-claro); color: var(--titulo); border-color: var(--acento); }
.boton.peligro { background: #c62828; border-color: #c62828; color: #fff; }
.boton.peligro:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.boton.chico { padding: 5px 11px; font-size: 14px; }
table { width: 100%; border-collapse: collapse; background: var(--tarjeta); }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
th { font-size: 13.5px; color: var(--suave); font-weight: 700; background: var(--tarjeta-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.grupo td { font-weight: 700; background: #f6f9fc; }
tbody tr:hover > td { background-color: #f4fafb; }
tr.total td { font-weight: 700; border-top: 2px solid var(--texto); }
.tabla-envoltura { border: 1px solid var(--borde); border-radius: 16px; overflow-x: auto; box-shadow: var(--sombra); background: var(--tarjeta); }
.tabla-envoltura table { border: 0; }
.etiqueta { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; }
.etiqueta.borrador { background: var(--aviso-claro); color: var(--aviso); }
.etiqueta.contabilizado { background: var(--exito-claro); color: var(--exito); }
.etiqueta.anulado { background: #edf1f5; color: var(--suave); text-decoration: line-through; }
.etiqueta.cerrado { background: #edf1f5; color: var(--texto); }
.credito-pleno { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; }
.etiqueta.error { background: var(--peligro-claro); color: var(--peligro); }
.mensajes { list-style: none; padding: 0; margin: 0 0 16px; }
.mensajes li { padding: 12px 16px; border-radius: 10px; margin-bottom: 8px; border: 1px solid transparent; border-left-width: 5px; }
.mensajes .success { background: var(--exito-claro); color: var(--exito); border-color: var(--exito-borde); border-left-color: var(--exito); }
.mensajes .error { background: var(--peligro-claro); color: var(--peligro); border-color: var(--peligro-borde); border-left-color: var(--peligro); }
.mensajes .info { background: var(--primario-claro); color: var(--info); border-color: var(--info-borde); border-left-color: var(--acento); }
.mensajes .warning { background: var(--aviso-claro); color: var(--aviso); border-color: #fcd98a; border-left-color: var(--aviso-borde); }
form.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
form.filtros label { font-size: 14px; color: var(--suave); display: flex; flex-direction: column; gap: 2px; }
form.filtros label.casilla { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; }
form.filtros .filtros-extra { flex-basis: 100%; }
form.filtros .filtros-extra > summary { cursor: pointer; font-weight: 600; color: var(--primario); display: inline-block; padding: 4px 0; }
form.filtros .filtros-campos { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-top: 6px; }
tr.grupo-proveedor td { background: var(--primario-claro); border-top: 2px solid var(--info-borde); }
input, select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: #fff; color: var(--texto); max-width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); }
input::placeholder, textarea::placeholder { color: #8a9ab0; }
textarea.comentario-renglones { display: block; width: 100%; resize: vertical; line-height: 1.5; min-height: 6.5em; }
input[type=checkbox], input[type=radio] { accent-color: var(--acento); }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 18px; }
.campo label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; color: var(--titulo); }
.campo input:not([type=checkbox]):not([type=radio]), .campo select { width: 100%; }
.campo .ayuda { font-size: 13px; color: var(--suave); margin-top: 3px; }
.campo ul { list-style: none; padding: 0; margin: 0; max-height: 160px; overflow: auto; }
.errorlist { color: var(--peligro); font-size: 14px; padding-left: 0; list-style: none; margin: 4px 0; }
.lineas td input, .lineas td select { width: 100%; }
form.selector-responsable { margin: 0; }
form.selector-responsable select { padding: 4px 6px; font-size: 13px; max-width: 190px; }
form.asignacion-masiva { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px;
  padding: 10px 12px; background: var(--primario-claro); border-radius: 8px; font-size: 14px; }
form.asignacion-masiva small { color: var(--suave); }
.lineas td.num input { text-align: right; }
.lineas .borrar { text-align: center; }
.cuadre { font-weight: 700; }
.cuadre.ok { color: var(--exito); }
.cuadre.mal { color: var(--peligro); }
.meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mes { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 14px; box-shadow: var(--sombra); }
.mes h3 { margin: 0 0 6px; font-size: 16px; display: flex; justify-content: space-between; align-items: center; }
.mes .datos { font-size: 14px; color: var(--suave); margin-bottom: 8px; }
.mes form { display: inline; }
.mes .enlaces { display: flex; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.vacio { color: var(--suave); padding: 30px; text-align: center; }
.login { max-width: 380px; margin: 80px auto; }
.paginacion { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
.sangria-2 { padding-left: 26px !important; }
.sangria-3 { padding-left: 44px !important; }
.sangria-4 { padding-left: 62px !important; }
.sangria-5 { padding-left: 80px !important; }
@media (max-width: 900px) {
  main { padding: 16px; }
}
.titulo-seccion { font-size: 17px; margin: 22px 0 8px; color: var(--primario); }
.nota-reporte { font-size: 14px; color: var(--suave); margin: 0 0 6px; }
table.reporte { table-layout: fixed; min-width: 640px; }
table.reporte td { overflow-wrap: anywhere; }
/* Tablero del despacho */
.resumen-tablero { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.resumen-tablero .tarjeta { margin: 0; padding: 12px; display: flex; flex-direction: column; }
.resumen-tablero strong { font-size: 28px; color: var(--titulo); font-weight: 800; }
.resumen-tablero span { color: var(--suave); font-size: 14px; }
a.tarjeta { color: inherit; text-decoration: none; }
a.tarjeta:hover { border-color: var(--acento); }
/* Encabezado formal de los estados financieros, como en el PDF. */
.encabezado-estado { text-align: center; margin: 8px 0 18px; }
.encabezado-estado .empresa { font-size: 18px; font-weight: 700; }
.encabezado-estado h2 { margin: 8px 0 2px; color: var(--primario); text-transform: uppercase; font-size: 17px; letter-spacing: .02em; }
.encabezado-estado .periodo { font-weight: 600; }
.encabezado-estado .suave { color: var(--suave); font-size: 14px; }
table.reporte tr.total td.num { border-bottom: 3px double var(--texto); }
table.reporte tr.fila-filtro th { padding: 2px 4px; }
table.reporte input.filtro-columna { width: 100%; box-sizing: border-box; font-size: 12px; padding: 2px 4px; font-weight: normal; }
table.reporte tr[hidden] { display: none; }
table.reporte .cero { color: var(--suave); }
.nota-reporte:first-of-type { margin-top: 14px; }
/* Facturas (paso 3) */
.etiqueta.pendiente { background: var(--aviso-claro); color: var(--aviso); }
.etiqueta.clasificado { background: var(--primario-claro); color: var(--info); }
.etiqueta.descartado { background: #edf1f5; color: var(--suave); }
.etiqueta.rechazado { background: var(--peligro-claro); color: var(--peligro); }
.resumen-facturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.resumen-facturas div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 12px 16px; box-shadow: var(--sombra); }
.resumen-facturas span { display: block; font-size: 13px; color: var(--suave); }
.resumen-facturas strong { font-size: 22px; color: var(--titulo); font-weight: 800; font-variant-numeric: tabular-nums; }
.iva-tarifas { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.iva-tarifas li { display: flex; justify-content: space-between; gap: 8px; }
.resumen-facturas .iva-tarifas span { display: inline; }
.buscador-cuenta { width: 100%; }
.buscador-cuenta.sugerida, span.sugerida { background: var(--primario-claro); border-color: var(--info-borde); }
span.sugerida { padding: 0 4px; border-radius: 4px; }
tr.asignada td { background: #fffbea; }
.ayuda-tabla { font-size: 14px; color: var(--suave); }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.ayuda { font-size: 13px; color: var(--suave); }
pre.detalle { white-space: pre-wrap; font-size: 12px; }
table.bandeja { font-size: 15px; }
table.bandeja th, table.bandeja td { padding: 7px 8px; }

/* Bitácora de cambios */
table.bitacora td { vertical-align: top; }
table.cambios { font-size: 12px; margin: 0; min-width: 260px; }
table.cambios th, table.cambios td { padding: 3px 6px; }
table.cambios td.antes { color: var(--peligro); }
table.cambios td.despues { color: var(--exito); }
.etiqueta.accion-crear, .etiqueta.accion-importar, .etiqueta.accion-restaurar, .etiqueta.accion-reabrir { background: var(--primario-claro); color: var(--info); }
.etiqueta.accion-modificar { background: var(--aviso-claro); color: var(--aviso); }
.etiqueta.accion-contabilizar, .etiqueta.accion-cerrar { background: var(--exito-claro); color: var(--exito); }
.etiqueta.accion-anular, .etiqueta.accion-borrar, .etiqueta.accion-descartar { background: var(--peligro-claro); color: var(--peligro); }
/* Búsqueda global (caja en el menú y página de resultados) */
.buscador { margin: 0; }
.buscador input {
  width: 100%; padding: 9px 14px; border-radius: 12px; border: 1px solid #ffffff38;
  background: #ffffff1f; color: #fff; font: inherit; font-size: 14px;
}
.buscador input::placeholder { color: #d6eef3; }
.buscador input:focus { outline: none; background: #fff; color: var(--texto); }
.resultados-busqueda h2 { font-size: 18px; margin: 22px 0 8px; color: var(--primario); }
.resultados-busqueda h2 .cuantos { color: var(--suave); font-weight: 400; font-size: 14px; }
.busqueda-grande { display: flex; gap: 8px; max-width: 640px; margin: 0 0 6px; }
.busqueda-grande input { flex: 1; padding: 9px 12px; font: inherit; border: 1px solid var(--borde); border-radius: 8px; }

/* Revisión antes de declarar */
.aviso-revision { border-left: 5px solid var(--aviso-borde); background: var(--aviso-claro); border-color: #fcd98a; }
.aviso-revision.corregir { border-left-color: var(--peligro); background: var(--peligro-claro); border-color: var(--peligro-borde); }
.aviso-revision h3 { margin: 0 0 6px; font-size: 17px; }
.aviso-revision p { margin: 0 0 8px; }
.documentos-revision { margin: 0 0 10px; padding-left: 18px; font-size: 14px; }
.revision-ok { border-left: 5px solid var(--exito); background: var(--exito-claro); color: var(--exito); }
.revision-bien { list-style: none; padding: 0; margin: 0; color: var(--exito); }
.revision-bien li { padding: 2px 0; }
button.copiar { margin-left: 6px; padding: 1px 6px; font-size: 11px; border: 1px solid var(--borde); border-radius: 4px; background: var(--tarjeta-2); color: var(--acento); cursor: pointer; }
button.copiar:hover { border-color: var(--primario); }
button.copiar.hecho { background: var(--primario-claro); }
@media print { button.copiar { display: none; } }

/* Pantalla de reportes: semáforo, botones grandes y gráficos */
.semaforo { display: flex; gap: 14px; align-items: flex-start; }
.semaforo p { margin: 4px 0 0; }
.semaforo .luz { flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 2px; }
.semaforo.verde { border-left: 5px solid var(--exito); }
.semaforo.verde .luz { background: #16a34a; box-shadow: 0 0 0 4px #dcfce7; }
.semaforo.amarillo { border-left: 5px solid var(--aviso-borde); background: var(--aviso-claro); }
.semaforo.amarillo .luz { background: #f59e0b; box-shadow: 0 0 0 4px #fef3c7; }
.botones-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.boton-grande { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 18px; background: var(--degradado); color: #fff; text-decoration: none; box-shadow: var(--sombra-fuerte); }
.boton-grande:hover { color: #fff; filter: brightness(1.07); }
.boton-grande:hover { filter: brightness(1.08); }
.boton-grande .titulo { font-size: 18px; font-weight: 700; }
.boton-grande .detalle { font-size: 14px; opacity: .9; }
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.grafico h3 { margin: 0 0 8px; font-size: 16px; }
.grafico .leyenda { display: flex; gap: 16px; font-size: 14px; color: var(--suave); margin-bottom: 8px; }
.grafico .muestra { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.muestra.ingresos, .barra.ingresos { background: #14a3a0; }
.muestra.gastos, .barra.gastos { background: #0b3b5c; }
.columnas { display: flex; align-items: stretch; gap: 4px; }
.columnas .col-mes { flex: 1; display: flex; flex-direction: column; text-decoration: none; color: var(--suave); min-width: 0; border: 0; border-radius: 6px 6px 0 0; }
.columnas .col-mes:hover, .columnas .col-mes.actual { background: var(--tarjeta-2); }
.columnas .barras { height: 160px; border-bottom: 1px solid var(--borde); display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 2px; }
.columnas .barra { display: block; width: 40%; max-width: 14px; border-radius: 4px 4px 0 0; min-height: 0; }
.columnas .col-etiqueta { font-size: 12px; line-height: 1.2; text-align: center; padding: 4px 0 2px; white-space: nowrap; overflow: hidden; }
.columnas .col-etiqueta small { display: block; font-size: 10px; }
.columnas .col-mes.actual .col-etiqueta { color: var(--texto); font-weight: 700; }
.ver-tabla { margin-top: 10px; font-size: 14px; }
.barras-horizontales .fila { display: grid; grid-template-columns: minmax(90px, 32%) 1fr 150px; gap: 10px; align-items: center; padding: 4px 0; font-size: 14px; }
.barras-horizontales .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras-horizontales .pista { height: 12px; }
.barras-horizontales .barra { display: block; height: 100%; background: #14a3a0; border-radius: 0 4px 4px 0; }
.barras-horizontales .valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mas-reportes summary { cursor: pointer; margin: 18px 0 6px; }
.proyeccion h3 { margin: 0 0 10px; font-size: 16px; }
.proyeccion .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.proyeccion .cifras div { display: flex; flex-direction: column; gap: 2px; }
.proyeccion .cifras strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.boton-grande.destacado { background: var(--aviso); }
.barra-deshacer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--primario-claro); border: 1px solid var(--info-borde); border-radius: 8px; padding: 8px 14px; margin: 0 0 12px; }
tr.por-linea > td { background: #f8fafc; padding-top: 4px; }
table.lineas-bandeja { width: auto; margin: 0 0 6px; }
table.lineas-bandeja td { border: 0; padding: 3px 8px; vertical-align: top; }
.cuenta-linea.sugerida { background: var(--primario-claro); border-color: var(--info-borde); }
/* Consultas con Fabián (chat con IA) */
.chat-consultas { max-width: 900px; }
.conversacion { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.burbuja { border-radius: 10px; padding: 10px 14px; max-width: 100%; }
.burbuja .quien { font-size: 13px; font-weight: 700; color: var(--suave); margin-bottom: 4px; }
.burbuja.ia { background: var(--primario-claro); border: 1px solid var(--info-borde); }
.burbuja.persona { background: var(--tarjeta-2); border: 1px solid var(--borde); align-self: flex-end; max-width: 85%; }
.burbuja.pensando { opacity: .7; }
.burbuja.error { background: var(--peligro-claro); color: var(--peligro); border-color: var(--peligro-claro); }
.respuesta-ia p { margin: 0 0 8px; }
.respuesta-ia ol, .respuesta-ia ul { margin: 0 0 8px; padding-left: 22px; }
.respuesta-ia h3 { font-size: 16px; margin: 10px 0 6px; }
.respuesta-ia code { background: #ffffffaa; padding: 0 4px; border-radius: 4px; }
.preguntas-ejemplo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.preguntas-ejemplo .boton { text-align: left; }
.formulario-consulta textarea { width: 100%; font: inherit; padding: 10px; border: 1px solid var(--borde); border-radius: 8px; resize: vertical; }
.acciones-consulta { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.opinion-deducible { margin-top: 6px; padding: 6px 8px; border-radius: 8px; font-size: 12px; max-width: 420px; border: 1px dashed; }
.opinion-deducible.verde { background: var(--exito-claro); color: var(--exito); border-color: var(--exito-borde); }
.opinion-deducible.amarillo { background: var(--aviso-claro); color: var(--aviso); border-color: var(--aviso-borde); }
.opinion-deducible.rojo { background: var(--peligro-claro); color: var(--peligro); border-color: var(--peligro-borde); }
.opinion-deducible .solo-consulta { opacity: .75; font-weight: normal; }
.opinion-deducible summary { cursor: pointer; }
.opinion-deducible[open] summary { margin-bottom: 4px; }
.aviso-iva { font-size: 13px; color: var(--aviso); margin-top: 4px; max-width: 420px; }
.aviso-parecido { background: var(--aviso-claro); border: 1px solid #fcd98a; border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; max-width: 260px; }
details.comparacion { padding: 10px 18px; margin-bottom: 12px; }
details.comparacion summary { cursor: pointer; }
table.comparacion-tabla { width: auto; margin-top: 8px; }
table.comparacion-tabla td { border: 0; padding: 4px 8px; vertical-align: top; }
/* Bandeja: lo no deducible para renta resalta en rojo suave. */
select.no-deducible { background: #fdecea; border-color: #c0392b; color: #8e1b10; font-weight: bold; }

/* Cuadro «¿Para qué sirve esta pantalla?» */
.ayuda-pantalla { background: var(--primario-claro); border: 1px solid var(--info-borde); border-left: 5px solid var(--acento); border-radius: 14px; padding: 12px 18px; margin-bottom: 18px; color: var(--texto); }
.ayuda-pantalla summary { cursor: pointer; font-weight: 700; color: var(--info); font-size: 17px; }
.ayuda-pantalla p { margin: 6px 0 0; }

/* Declaraciones en TRIBU-CR */
.presentar-tribu { border: 2px solid var(--aviso-borde); background: var(--aviso-claro); margin-top: 16px; }
.presentar-tribu.presentada { border-color: var(--exito); background: var(--exito-claro); }
.presentar-tribu h3 { margin-top: 0; }
.barra-avance { height: 14px; background: var(--tarjeta-2); border-radius: 99px; overflow: hidden; margin: 4px 0 16px; }
.barra-avance > div { height: 100%; background: var(--acento); }
.pestanas-tipo { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* Avance del equipo (inicio): mes cerrado e IVA presentado por persona */
.avance-equipo h2 { margin: 0 0 2px; }
.avance-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.leyenda-avance { display: flex; gap: 16px; font-size: 14px; color: var(--suave); }
.leyenda-avance i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.muestra-cerradas, .relleno.cerradas { background: var(--acento); }
.muestra-presentadas, .relleno.presentadas { background: #0b3b5c; }
.muestra-faltan { background: var(--tarjeta-2); border: 1px solid var(--borde-fuerte); }
.avance-filas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 28px; }
.avance-persona { padding: 10px 0; border-bottom: 1px solid var(--borde); }
.avance-nombre { font-weight: 700; color: var(--titulo); margin-bottom: 6px; }
.avance-nombre small { color: var(--suave); font-weight: 400; margin-left: 6px; }
.avance-linea { display: grid; grid-template-columns: 92px 1fr 70px; gap: 10px; align-items: center; font-size: 14px; color: var(--suave); margin: 3px 0; }
.avance-faltan { display: inline-block; margin: 4px 0 0 102px; font-size: 13px; font-weight: 600; }
@media (max-width: 600px) { .avance-faltan { margin-left: 0; } }
.avance-linea b { text-align: right; color: var(--texto); font-variant-numeric: tabular-nums; }
.avance-linea .pista { height: 8px; background: var(--tarjeta-2); border-radius: 99px; overflow: hidden; }
.avance-linea .relleno { height: 100%; border-radius: 99px; }
.recordatorio-vence { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--primario-claro); border-left: 4px solid var(--acento); }
.recordatorio-vence.cerca { background: var(--aviso-claro); border-left-color: var(--aviso); }
.recordatorio-vence a { margin-left: 8px; }

/* Barra de arriba con degradado y menús desplegables */
.menu-principal { background: var(--degradado); background-attachment: fixed; color: #fff; display: flex; align-items: center; gap: 6px; padding: 0 32px; height: 68px; position: sticky; top: 0; z-index: 40; }
.menu-principal a { color: #d9f0f4; text-decoration: none; }
.menu-principal .marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: #fff; margin-right: 18px; white-space: nowrap; }
.menu-principal .logo { width: 34px; height: 34px; border-radius: 10px; background: #ffffff26; border: 1px solid #ffffff4d; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.menu-principal .enlaces { display: flex; align-items: center; gap: 2px; }
.menu-principal .enlaces > a, .desplegable > summary { padding: 8px 13px; border-radius: 10px; font-weight: 600; font-size: 15px; color: #d9f0f4; cursor: pointer; white-space: nowrap; list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after { content: " ▾"; font-size: 11px; opacity: .8; }
.menu-principal .enlaces > a:hover, .desplegable > summary:hover, .desplegable[open] > summary { background: #ffffff1f; color: #fff; }
.menu-principal .enlaces > a.activa { background: #ffffff2e; color: #fff; }
.desplegable { position: relative; }
.desplegable .caja { position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; background: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(11, 59, 92, .22); padding: 8px; display: flex; flex-direction: column; z-index: 50; }
/* Que ningún menú se salga por abajo de la pantalla: si es más largo, se desliza por dentro. */
.desplegable .caja { max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; }
.desplegable .caja.derecha { left: auto; right: 0; min-width: 220px; }
.desplegable .caja a { color: var(--texto); padding: 9px 12px; border-radius: 10px; font-size: 15px; }
.desplegable .caja a:hover { background: var(--primario-claro); color: var(--titulo); }
.desplegable .caja a.activa { background: var(--primario-claro); color: var(--acento); font-weight: 700; }
.desplegable .titulo-menu { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); padding: 6px 12px; }
.desplegable .nombre-empresa { font-weight: 800; color: var(--titulo) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.desplegable .secciones-empresa > summary { cursor: pointer; list-style: none; padding: 9px 12px; border-radius: 10px; color: var(--suave); font-size: 15px; }
.desplegable .secciones-empresa > summary::-webkit-details-marker { display: none; }
.desplegable .secciones-empresa > summary::before { content: "▸ "; }
.desplegable .secciones-empresa[open] > summary::before { content: "▾ "; }
.desplegable .secciones-empresa > summary:hover { background: var(--tarjeta-2); }
.desplegable .secciones-empresa > a { display: block; }  /* misma sangría que «Documentos rechazados» y «Cambiar de empresa» */
.desplegable .secciones-empresa + a { border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 12px; border-radius: 0 0 10px 10px; }
.desplegable .caja form { padding: 6px 12px; margin: 0; }
.menu-principal .contador { background: #fee2e2; color: #b91c1c; border-radius: 99px; padding: 0 7px; font-size: 12px; font-weight: 800; margin-left: 4px; }
.menu-principal .buscador { margin-left: auto; flex: 0 1 280px; min-width: 150px; }
.desplegable.usuario > summary { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: #fff; color: #0b3b5c; display: grid; place-items: center; font-weight: 800; margin-left: 10px; }
.desplegable.usuario > summary::after { content: none; }
.desplegable.usuario > summary:hover, .desplegable.usuario[open] > summary { background: #e3f5f8; color: #0b3b5c; }
.abrir-menu { display: none; background: #ffffff1f; border: 1px solid #ffffff4d; color: #fff; padding: 6px 12px; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
/* Franja de color debajo de la barra: el contenido flota encima en una hoja blanca. */
.franja { background: var(--degradado); background-attachment: fixed; height: 110px; }
body.con-menu main { margin-top: -84px; background: var(--fondo); border-radius: 22px; padding: 26px 30px 60px; position: relative; }
/* Inicio: la franja crece con el saludo y las tarjetas de resumen. */
body.con-portada .franja { height: auto; padding: 0 32px; }
body.con-portada main { margin-top: 0; background: none; padding-top: 8px; }
.portada { max-width: 1200px; margin: 0 auto; color: #fff; padding: 26px 20px 0; }
.portada .saludo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.portada h1 { color: #fff; font-size: 32px; margin: 0; }
.portada p { margin: 6px 0 0; color: #cdeaf0; }
.acciones-portada { display: flex; gap: 10px; flex-wrap: wrap; }
.boton.blanco { background: #fff; border-color: #fff; color: #0b3b5c; }
.boton.blanco:hover { background: #e3f5f8; border-color: #e3f5f8; color: #0b3b5c; }
.boton.vidrio { background: #ffffff26; border-color: #ffffff4d; color: #fff; }
.boton.vidrio:hover { background: #ffffff3a; border-color: #ffffff80; color: #fff; }
.panel-resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; position: relative; top: 46px; margin-top: -46px; }
body.con-portada .franja { padding-bottom: 46px; }
.panel-resumen a { background: #fff; border-radius: 18px; padding: 20px 22px; text-decoration: none; color: var(--texto); box-shadow: var(--sombra-fuerte); display: block; }
.panel-resumen a:hover { transform: translateY(-2px); transition: transform .15s; }
.panel-resumen span { color: var(--suave); font-size: 14px; font-weight: 600; }
.panel-resumen strong { display: block; font-size: 32px; font-weight: 800; color: var(--titulo); margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.panel-resumen strong em { font-style: normal; font-size: 18px; color: var(--suave); font-weight: 700; }
.chip { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.chip.verde { background: #dcfce7; color: #15803d; } .chip.ambar { background: #fef3c7; color: #a16207; }
.chip.celeste { background: #cffafe; color: #0e7490; } .chip.rojo { background: #fee2e2; color: #b91c1c; }
body.con-portada main { padding-top: 58px; }
.inicio-columnas { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 8px; }
.inicio-columnas .tarjeta { border: 0; box-shadow: var(--sombra); }
.avance-mes h2 { margin: 0 0 12px; }
.anillo { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.anillo svg { transform: rotate(0deg); }
.anillo text { font: 800 8px Manrope, sans-serif; fill: var(--titulo); }
.leyenda-avance.vertical { flex-direction: column; gap: 8px; }
@media (max-width: 1250px) {
  .menu-principal { padding: 0 18px; }
  .menu-principal .enlaces > a, .desplegable > summary { padding: 8px 9px; font-size: 14px; }
  .menu-principal .marca { font-size: 0; margin-right: 8px; gap: 0; }
}
@media (max-width: 480px) {
  .menu-principal .marca .texto-marca { display: none; }
}
@media (max-width: 900px) {
  .menu-principal { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
  .menu-principal .marca { font-size: 17px; gap: 10px; }
  .menu-principal .marca { margin-right: auto; }
  .desplegable.usuario > summary { margin-left: 0; }
  .abrir-menu { display: inline-block; }
  .menu-principal .enlaces { display: none; order: 5; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 8px; }
  body.menu-abierto .menu-principal .enlaces { display: flex; }
  /* Menú abierto en celular: si es más largo que la pantalla, se desliza con el dedo
     (antes «Más herramientas» quedaba cortado abajo y no se llegaba a las últimas opciones). */
  body.menu-abierto .menu-principal { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .menu-principal .mas-herramientas .caja { max-height: none; overflow: visible; }
  .desplegable .caja { position: static; box-shadow: none; margin: 4px 0 8px; max-height: none; overflow: visible; }
  .menu-principal .buscador { order: 4; flex: 1 1 100%; }
  body.con-menu main { margin-top: -84px; border-radius: 18px 18px 0 0; padding: 18px 14px 40px; }
  .inicio-columnas { grid-template-columns: 1fr; }
  .portada { padding: 18px 0 0; }
  .portada h1 { font-size: 26px; }
  body.con-portada .franja { padding: 0 16px 46px; }
}

/* Al imprimir, todo vuelve a blanco y negro para no gastar tinta. */
@media print {
  :root { --fondo: #fff; --tarjeta: #fff; --tarjeta-2: #f2f4f6; --texto: #111; --titulo: #000; --suave: #555; --borde: #ccc; --borde-fuerte: #999; --enlace: #000; --acento: #1f6f5c; --exito: #1f6f5c; --peligro: #b42318; --aviso: #8a5a00; --info: #1d4f91; --sombra: none; }
  .menu-principal, .franja, .navegacion-arriba, .ayuda-pantalla { display: none !important; }
  body.con-menu main { margin-top: 0; }
}

/* Planilla de empleados */
table.planilla input.num-corto { width: 56px; text-align: right; padding: 5px 6px; }
table.planilla input.num-medio { width: 92px; text-align: right; padding: 5px 6px; }
table.planilla th, table.planilla td { padding-left: 6px; padding-right: 6px; }
table.planilla th { white-space: normal; font-size: .85em; }
table.planilla td { vertical-align: top; }
.aviso-planilla { padding: 8px 12px; border-radius: 10px; margin-bottom: 6px; border-left: 5px solid transparent; }
.aviso-planilla.bloquea { background: var(--peligro-claro); color: var(--peligro); border-left-color: var(--peligro); }
.aviso-planilla.confirmar { background: var(--aviso-claro); color: var(--aviso); border-left-color: var(--aviso-borde); }
.aviso-planilla.bien { background: var(--exito-claro); color: var(--exito); border-left-color: var(--exito); }
.boton[disabled], .boton:disabled { opacity: .45; cursor: not-allowed; }

/* Usuario del cliente (módulo especial): sin enlaces a asientos, reportes ni declaraciones (usuario_cliente.py). */
body.usuario-cliente a[href*="/asientos/"],
body.usuario-cliente a[href*="/declaraciones/"],
body.usuario-cliente a[href*="/balance/"] { display: none !important; }

h2[id] { scroll-margin-top: 90px; } /* que el menú de arriba no tape el título al saltar a #faltan */

/* ---- Ruta del mes (ruta_mes.py) ---- */
.ruta-mes h2 { margin: 0 0 4px; }
.ruta-cabeza { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.ruta-cabeza > div:first-child { flex: 1 1 260px; }
.ruta-elegir select { min-width: 240px; }
.ruta-avance { display: flex; flex-direction: column; gap: 6px; min-width: 150px; font-size: 14px; }
.ruta-avance .pista { height: 10px; background: var(--tarjeta-2); border-radius: 99px; overflow: hidden; }
.ruta-avance .relleno { height: 100%; background: var(--exito); border-radius: 99px; }
.ruta-lista { background: var(--exito-claro); color: var(--exito); border: 1px solid var(--exito-borde); border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.ruta-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ruta-paso { display: flex; gap: 10px; border: 1px solid var(--borde); border-radius: 14px; padding: 12px; background: var(--tarjeta-2); }
.ruta-paso.ahora { border: 2px solid var(--acento); background: var(--primario-claro); }
.ruta-paso.hecho { background: var(--exito-claro); border-color: var(--exito-borde); }
.ruta-paso.hecho.aviso, .ruta-paso.aviso:not(.hecho) { background: var(--aviso-claro); border-color: var(--aviso-borde); }
.ruta-numero { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #fff; border: 2px solid var(--borde-fuerte); color: var(--suave); }
.ruta-paso.ahora .ruta-numero { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.ruta-paso.hecho .ruta-numero { background: var(--exito); border-color: var(--exito); color: #fff; }
.ruta-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ruta-texto strong { color: var(--titulo); line-height: 1.25; }
.ruta-texto small { color: var(--suave); line-height: 1.35; }
.ruta-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.ruta-botones form { margin: 0; }
.ruta-extra { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
@media (max-width: 1250px) { .ruta-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ruta-pasos { grid-template-columns: 1fr; } }

/* ---- Menú corto: «Más herramientas» y «Más ▾» en las pestañas ---- */
@media (min-width: 901px) { .mas-herramientas .caja { max-height: 75vh; overflow-y: auto; } }
.desplegable .caja a.elegir-menu, .pestanas-mas a.elegir-menu { border-top: 1px solid var(--borde); margin-top: 6px; color: var(--enlace); font-weight: 600; }
.pestanas-cortas { align-items: flex-end; }
.pestanas-mas { position: relative; }
.pestanas-mas summary { list-style: none; cursor: pointer; padding: 9px 14px; color: var(--suave); font-weight: 600; border-bottom: 3px solid transparent; }
.pestanas-mas summary::-webkit-details-marker { display: none; }
.pestanas-mas[open] summary, .pestanas-mas summary:hover { color: var(--titulo); }
.pestanas-mas .caja { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 240px; background: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(11, 59, 92, .22); padding: 8px; display: flex; flex-direction: column; }
.pestanas .pestanas-mas .caja a { border-bottom: 0; padding: 9px 12px; border-radius: 10px; color: var(--texto); font-weight: 500; }
.pestanas .pestanas-mas .caja a:hover { background: var(--primario-claro); }
.menu-modo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.menu-modo p, .menu-modo form { margin: 0; }
.menu-elegir-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.menu-elegir h3 { margin: 14px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.opcion-menu { display: flex; flex-direction: row; align-items: baseline; gap: 8px; padding: 5px 0; flex-wrap: wrap; }
.opcion-menu small { color: var(--suave); flex-basis: 100%; padding-left: 24px; }
@media (max-width: 900px) { .menu-elegir-columnas { grid-template-columns: 1fr; } }
.desplegable > summary.activa { background: #ffffff2e; color: #fff; }
.mas-herramientas .caja { left: auto; right: 0; }
.pestanas-mas summary::after { content: ""; }

/* ---- Vista de celular (700 px o menos). En computadora nada de esto se ve. ----
   celular.js le pone a cada celda el nombre de su columna (data-et) y marca las vacías. */
.plegable-celular > summary, button.boton.mas-opciones-celular, .barra-celular { display: none; }
@media (max-width: 700px) {
  /* Nada más ancho que la pantalla: el sistema no se desliza de lado. */
  html, body { overflow-x: hidden; }
  main { max-width: 100vw; }
  select, input:not([type=checkbox]):not([type=radio]), textarea { max-width: 100%; }
  input[style*="min-width"], select[style*="min-width"] { min-width: 0 !important; width: 100%; }
  .ruta-elegir, .ruta-elegir select { width: 100%; min-width: 0; }
  .ruta-cabeza > div:first-child { flex-basis: 100%; }
  .ruta-avance { width: 100%; }

  /* Inicio: las tarjetas de arriba de 2 en 2 y más bajitas, así la Ruta del mes se ve de entrada. */
  .panel-resumen { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .panel-resumen a { padding: 12px 14px !important; }
  .panel-resumen span { font-size: 12.5px; line-height: 1.25; display: block; }
  .panel-resumen strong { font-size: 24px; margin: 2px 0 4px; }
  .panel-resumen .chip { font-size: 11.5px; padding: 2px 8px; }
  .acciones-portada { display: none; }  /* los mismos botones están más abajo, junto a la lista de empresas */
  .saludo p { font-size: 14px; }
  body.con-portada.con-menu main { margin-top: 0; padding-top: 58px; }  /* que la hoja no tape las tarjetas de arriba */

  /* Pestañas de la empresa en una sola fila que se desliza con el dedo. */
  nav.pestanas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 10px -14px 16px; padding: 0 14px; }
  nav.pestanas::-webkit-scrollbar { display: none; }
  nav.pestanas > a, .pestanas-mas summary { white-space: nowrap; flex: none; padding: 8px 11px; font-size: 15px; }
  .pestanas-mas { position: static; flex: none; }
  .pestanas-mas .caja { position: fixed; left: 14px; right: 14px; top: auto; min-width: 0; max-height: 60vh; overflow-y: auto; }

  /* Botones de arriba de la bandeja: los secundarios quedan dentro de «Más opciones». */
  button.boton.mas-opciones-celular { display: inline-block; }
  .acciones:has(> .mas-opciones-celular):not(.opciones-abiertas) > a.boton.secundario { display: none; }
  .acciones .espacio { display: none; }
  form.filtros > label, form.filtros .filtros-campos > label { flex: 1 1 45%; }
  form.filtros .filtros-campos > label:first-child { flex-basis: 100%; }

  /* Lo que se abre al tocarlo (herramientas para varias facturas). */
  .plegable-celular { margin-bottom: 12px; }
  .plegable-celular > summary { display: block; list-style: none; cursor: pointer; padding: 12px 16px; background: var(--tarjeta); border: 1px solid var(--borde-fuerte); border-radius: 14px; font-weight: 700; color: var(--titulo); }
  .plegable-celular > summary::-webkit-details-marker { display: none; }
  .plegable-celular[open] > summary { margin-bottom: 8px; }
  .cuenta-masiva label { display: block; }
  .ayuda-tabla { font-size: 14px; }

  /* Tablas como tarjetas: una fila = una tarjeta, cada dato con su nombre. */
  .tabla-envoltura:has(> table.en-tarjetas) { border: 0; box-shadow: none; background: transparent; overflow: visible; border-radius: 0; }
  table.en-tarjetas, table.en-tarjetas tbody { display: block; width: 100%; min-width: 0 !important; table-layout: auto; background: transparent; }
  table.en-tarjetas thead { display: none; }
  table.en-tarjetas > tbody > tr { display: flex; flex-direction: column; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); margin-bottom: 10px; padding: 8px 0; }
  table.en-tarjetas > tbody > tr > td { display: block; border: 0; padding: 4px 14px; text-align: left; white-space: normal; min-width: 0 !important; width: auto !important; }
  table.en-tarjetas > tbody > tr > td[data-et]::before { content: attr(data-et); display: block; font-size: 12px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
  table.en-tarjetas > tbody > tr > td.num { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; }
  table.en-tarjetas > tbody > tr > td.num[data-et]::before { display: inline; text-align: left; text-transform: none; font-size: 14px; font-weight: 600; letter-spacing: 0; }
  table.bandeja.en-tarjetas > tbody > tr > td.vacia-celular, table.tabla-empresas.en-tarjetas > tbody > tr > td.vacia-celular { display: none; }
  table.en-tarjetas > tbody > tr[hidden] { display: none; }

  /* Bandeja de facturas: arriba quién y cuánto, después la cuenta; la casilla en la esquina. */
  table.bandeja.en-tarjetas > tbody > tr { position: relative; padding-top: 10px; }
  table.bandeja.en-tarjetas > tbody > tr > td:first-child { position: absolute; top: 10px; right: 6px; padding: 0 8px; }
  table.bandeja.en-tarjetas > tbody > tr > td:first-child input[type=checkbox] { width: 26px; height: 26px; }
  table.bandeja.en-tarjetas > tbody > tr > td:first-child::before { display: none; }
  table.bandeja.en-tarjetas td[data-et="Fecha"] { order: 1; padding-right: 54px; }
  table.bandeja.en-tarjetas td[data-et="Fecha"]::before, table.bandeja.en-tarjetas td[data-et="Proveedor"]::before, table.bandeja.en-tarjetas td[data-et="Cliente"]::before { display: none; }
  table.bandeja.en-tarjetas td[data-et="Fecha"] { color: var(--suave); font-size: 14px; }
  table.bandeja.en-tarjetas td[data-et="Proveedor"], table.bandeja.en-tarjetas td[data-et="Cliente"] { order: 2; padding-right: 54px; font-size: 16px; }
  table.bandeja.en-tarjetas td[data-et="Total"] { order: 3; font-size: 18px; }
  table.bandeja.en-tarjetas td[data-et="Cuenta"] { order: 4; background: var(--primario-claro); margin: 6px 10px; border-radius: 10px; padding: 8px 10px; }
  table.bandeja.en-tarjetas td[data-et="Cuenta"] input { width: 100%; }
  table.bandeja.en-tarjetas td[data-et="Pago"] { order: 5; }
  table.bandeja.en-tarjetas td[data-et="Pago"] select { margin: 2px 4px 2px 0; }
  table.bandeja.en-tarjetas td.detalle-factura { order: 6; }
  table.bandeja.en-tarjetas td { order: 7; }
  table.bandeja.en-tarjetas td[data-et="Estado"] { order: 8; }
  table.bandeja.en-tarjetas tr.grupo > td { order: 0; }
  table.bandeja.en-tarjetas tr.por-linea { margin-top: -6px; }
  table.lineas-bandeja, table.lineas-bandeja tbody, table.lineas-bandeja tr, table.lineas-bandeja td { display: block; width: 100%; }
  table.lineas-bandeja tr { border-top: 1px solid var(--borde); padding: 6px 0; }
  .todas-lineas strong { margin-left: 0 !important; display: block; }

  /* Botón fijo abajo para guardar y contabilizar sin bajar hasta el final. */
  .barra-celular { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #ffffffee; border-top: 1px solid var(--borde); box-shadow: 0 -6px 20px rgba(11, 59, 92, .12); }
  .barra-celular .boton { width: 100%; font-size: 17px; padding: 12px; }
  body.con-barra-celular main { padding-bottom: 96px; }

  /* Reportes y Formulario 150: el monto al lado del renglón, sin deslizar de lado. */
  table.reporte.en-tarjetas > tbody > tr { flex-direction: row; flex-wrap: wrap; border-radius: 0; box-shadow: none; border: 0; border-bottom: 1px solid var(--borde); margin: 0; padding: 8px 0; background: var(--tarjeta); }
  table.reporte.en-tarjetas > tbody > tr:first-child { border-radius: 14px 14px 0 0; }
  table.reporte.en-tarjetas > tbody > tr:last-child { border-radius: 0 0 14px 14px; border-bottom: 0; }
  table.reporte.en-tarjetas > tbody > tr > td { padding: 2px 12px 2px 0; }
  table.reporte.en-tarjetas > tbody > tr > td:first-child { padding-left: 14px; }
  table.reporte.en-tarjetas > tbody > tr > td:not(.num)::before { display: none; }
  table.reporte.en-tarjetas > tbody > tr > td:not(.num) { flex: 0 0 auto; }
  table.reporte.en-tarjetas > tbody > tr > td:not(.num) + td:not(.num) { flex: 1 1 55%; }
  table.reporte.en-tarjetas > tbody > tr > td.num { flex: 1 0 40%; flex-direction: column; align-items: flex-end; gap: 0; padding: 4px 14px 0; }
  table.reporte.en-tarjetas > tbody > tr > td.num[data-et]::before { color: var(--suave); font-size: 12px; font-weight: 600; }
  table.reporte.en-tarjetas tr.total, table.reporte.en-tarjetas tr.titulo { font-weight: 700; background: var(--tarjeta-2); }
  table.reporte.en-tarjetas tr.total td.num { border-bottom: 0; }
  table.reporte.en-tarjetas .copiar { display: none; }

  /* Lista de empresas del Inicio en tarjetas. */
  table.tabla-empresas.en-tarjetas > tbody > tr { position: relative; }
  table.tabla-empresas.en-tarjetas > tbody > tr > td:first-child { position: absolute; top: 12px; right: 4px; }
  table.tabla-empresas.en-tarjetas > tbody > tr > td:first-child::before, table.tabla-empresas.en-tarjetas td[data-et="Empresa"]::before { display: none; }
  table.tabla-empresas.en-tarjetas td[data-et="Empresa"] { padding-right: 48px; font-size: 16px; }
  table.tabla-empresas.en-tarjetas td[data-et="Cédula"], table.tabla-empresas.en-tarjetas td[data-et="Responsable"] { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  table.tabla-empresas.en-tarjetas td[data-et="Cédula"]::before, table.tabla-empresas.en-tarjetas td[data-et="Responsable"]::before { display: inline; text-transform: none; font-size: 14px; font-weight: 600; letter-spacing: 0; }
  table.tabla-empresas.en-tarjetas td.acciones-fila { justify-content: flex-start; flex-wrap: wrap; padding-top: 8px; }
  table.tabla-empresas.en-tarjetas td.acciones-fila::before { display: none; }
}
/* Semáforo de facturas del mes */
.sem-filtros { align-items: flex-end; }
.sem-pastilla { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); color: var(--texto); text-decoration: none; font-weight: 600; font-size: 14px; }
.sem-pastilla.activa { background: var(--primario); border-color: var(--primario); color: #fff; }
.sem-luces { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 10px; }
.sem-luz { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; background: var(--tarjeta); border: 1px solid var(--borde); box-shadow: var(--sombra); color: inherit; text-decoration: none; }
.sem-luz strong { font-size: 40px; line-height: 1; font-weight: 800; color: var(--titulo); }
.sem-luz span:last-child { color: var(--suave); font-size: 15px; }
.foco { flex: none; display: inline-block; width: 22px; height: 22px; border-radius: 50%; }
.sem-grupo summary .foco { width: 14px; height: 14px; vertical-align: -1px; margin-right: 4px; }
.rojo .foco { background: #dc2626; box-shadow: 0 0 0 5px #fee2e2; }
.amarillo .foco { background: #f59e0b; box-shadow: 0 0 0 5px #fef3c7; }
.verde .foco { background: #16a34a; box-shadow: 0 0 0 5px #dcfce7; }
.sem-luz.rojo { border-left: 6px solid #dc2626; }
.sem-luz.amarillo { border-left: 6px solid #f59e0b; }
.sem-luz.verde { border-left: 6px solid #16a34a; }
.sem-barra { display: flex; height: 26px; border-radius: 999px; overflow: hidden; background: var(--borde); }
.sem-barra span { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; white-space: nowrap; }
.sem-barra .rojo { background: #dc2626; }
.sem-barra .amarillo { background: #f59e0b; }
.sem-barra .verde { background: #16a34a; }
.sem-barra.chica { height: 12px; min-width: 120px; }
.sem-nota { color: var(--suave); font-size: 14px; margin: 6px 0 14px; }
.sem-personas summary { cursor: pointer; }
.sem-personas table { width: 100%; margin-top: 8px; }
.sem-personas td.sem-mini { width: 45%; }
.sem-buscar { width: 100%; max-width: 420px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--borde-fuerte); margin: 4px 0 14px; font-size: 15px; }
.sem-grupo { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; padding: 14px 18px; margin-bottom: 14px; box-shadow: var(--sombra); }
.sem-grupo summary { cursor: pointer; font-weight: 700; font-size: 17px; color: var(--titulo); }
.sem-grupo.rojo { border-left: 6px solid #dc2626; }
.sem-grupo.amarillo { border-left: 6px solid #f59e0b; }
.sem-grupo.verde { border-left: 6px solid #16a34a; }
.sem-tabla td.centro, .sem-tabla th.centro { text-align: center; }
.sem-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; text-decoration: none; }
.sem-chip.si { background: var(--exito-claro); color: var(--exito); }
.sem-chip.no { background: var(--peligro-claro); color: var(--peligro); }
.sem-luz.alerta { border-left: 6px solid #b91c1c; background: #fff5f5; }
.sem-luz.alerta .foco { background: none; box-shadow: none; font-size: 30px; line-height: 22px; width: auto; height: auto; color: #b91c1c; }
.sem-chip.revisar { background: #b91c1c; color: #fff; }
@media (max-width: 640px) { .sem-tabla th:nth-child(2), .sem-tabla td:nth-child(2) { display: none; } .sem-tabla th, .sem-tabla td { padding: 8px 5px; } .sem-chip { white-space: nowrap; font-size: 12px; padding: 3px 7px; } .sem-chip .largo { display: none; } .sem-grupo { padding: 12px 8px; } }

/* Facturar (emitir facturas electrónicas) */
.form-factura.campos > label, .form-factura .campos > label { display:flex; flex-direction:column; gap:5px; }
.form-factura .campos > label input, .form-factura .campos > label select, .form-factura.campos > label input, .form-factura.campos > label select { width:100%; box-sizing:border-box; }
.form-factura .cedula-caja { display:flex; gap:6px; }
.form-factura .cedula-caja input { flex:1; min-width:0; }
.form-factura [hidden] { display:none !important; }

/* Asistente «Activar facturación» (emitir_activar.html): un paso por tarjeta, con su chequeo. */
.boton-activar-fx { background: var(--exito); border-color: var(--exito); font-size: 17px; padding: 12px 20px; font-weight: 800; }
.boton-activar-fx:hover { background: #116c33; border-color: #116c33; }
.boton-activar-fx small { font-weight: 600; opacity: .9; margin-left: 6px; }
.activar-avance { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 18px; }
.activar-barra { flex: 1 1 220px; height: 14px; background: var(--tarjeta-2); border: 1px solid var(--borde); border-radius: 99px; overflow: hidden; }
.activar-barra span { display: block; height: 100%; background: var(--exito); border-radius: 99px; }
.activar-avance strong { font-size: 18px; }
.paso-fx { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; border-left: 6px solid var(--borde-fuerte); scroll-margin-top: 80px; }
.paso-fx.listo { border-left-color: var(--exito); }
.paso-fx.error { border-left-color: var(--peligro); background: var(--peligro-claro); }
.paso-fx.espera { border-left-color: var(--aviso-borde); }
.paso-fx .circulo { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; background: var(--tarjeta-2); color: var(--suave); border: 2px solid var(--borde-fuerte); }
.paso-fx.listo .circulo { background: var(--exito); border-color: var(--exito); color: #fff; }
.paso-fx.error .circulo { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.paso-fx.espera .circulo { background: var(--aviso-claro); border-color: var(--aviso-borde); color: var(--aviso); }
.paso-fx h3 { margin: 4px 0 4px; font-size: 19px; }
.paso-fx .estado-paso { margin: 0 0 10px; }
.paso-fx.listo .estado-paso { color: var(--exito); font-weight: 700; }
.paso-fx.error .estado-paso { color: var(--peligro); font-weight: 800; font-size: 17px; }
.paso-fx .boton { font-size: 16px; padding: 10px 18px; }
.paso-fx .codigo-chico { font-size: 12px; color: var(--suave); }
.paso-fx details summary { cursor: pointer; color: var(--enlace); font-weight: 600; margin: 4px 0; }
.ambientes-fx { display: flex; gap: 10px; flex-wrap: wrap; }
.ambientes-fx button { min-width: 210px; text-align: left; }
.ambientes-fx button small { display: block; font-weight: 500; font-size: 13px; }
.activar-listo { background: var(--exito-claro); border: 2px solid var(--exito-borde); }
@media (max-width: 600px) {
  .paso-fx { grid-template-columns: 1fr; gap: 6px; }
  .paso-fx .circulo { width: 38px; height: 38px; font-size: 18px; }
  .ambientes-fx button { min-width: 0; width: 100%; }
  .boton-activar-fx { width: 100%; text-align: center; }
}
/* Arreglar el IVA que no cuadra (rehacer_iva.html) */
.tarjetas-cuadre { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 12px 0; }
.tabla-cuadre-iva { width: 100%; }
.tabla-cuadre-iva tr.mal th { color: var(--peligro); }
.tabla-cuadre-iva tr.bien th { color: var(--exito); }
.arreglar-iva { border-left: 5px solid var(--exito); }
.arreglar-iva .boton.grande, .boton.grande { font-size: 17px; padding: 12px 22px; background: var(--exito); border-color: var(--exito); }
@media (max-width: 640px) {
  .tabla-arreglar { overflow: visible; }
  .tabla-arreglar thead { display: none; }
  .tabla-arreglar table, .tabla-arreglar tbody, .tabla-arreglar tr, .tabla-arreglar td { display: block; width: 100%; }
  .tabla-arreglar tr { border-bottom: 2px solid var(--borde, #e2e8f0); padding: 8px 0; }
  .tabla-arreglar td { border: 0; padding: 4px 0; text-align: left; }
  .tabla-arreglar td[data-titulo]::before { content: attr(data-titulo) ": "; font-weight: 600; display: block; font-size: 13px; }
}

/* Nombre en el correo (Facturación › «Nombre en el correo») */
.remitente-form { max-width: 760px; }
.remitente-nombre { display: flex; flex-direction: column; gap: 6px; }
.remitente-nombre input { font-size: 18px; padding: 10px 12px; }
.remitente-opciones { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.remitente-opcion { display: flex; flex-direction: column; gap: 8px; cursor: pointer; margin: 0; }
.remitente-opcion input { width: 22px; height: 22px; }
.remitente-opcion:has(input:checked) { outline: 3px solid var(--exito); }
.remitente-de { font-size: 14px; background: var(--tarjeta-2); padding: 6px 8px; border-radius: 6px; overflow-wrap: anywhere; }
.remitente-gmail { display: flex; gap: 12px; align-items: center; margin: 18px 0; padding: 12px; border: 1px solid var(--borde-fuerte); border-radius: 10px; }
.remitente-avatar { flex: 0 0 44px; height: 44px; border-radius: 50%; background: #8d6e63; color: #fff; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ===== Apariencia de aplicación: Facturación del cliente que solo factura (_app_fx.html) =====
   Computadora: barra a la izquierda con las opciones. Celular: barra arriba con el nombre y
   barra de botones abajo, con el botón redondo «+ Facturar» en el centro. */
.ico { width: 22px; height: 22px; flex: 0 0 22px; }
.titulo-app, .barra-app { display: none; }
body.app-fx { background: #f2f5f9; }
body.app-fx .tarjeta, body.app-fx table { border-radius: 20px; }
@media (min-width: 901px) {
  body.app-fx { padding-left: 264px; }
  body.app-fx .menu-principal {
    position: fixed; left: 0; top: 0; bottom: 0; width: 264px; height: auto; overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 6px; padding: 24px 16px 18px;
    background: linear-gradient(180deg, #0b3b5c 0%, #0c5470 60%, #0e6f8a 100%);
  }
  body.app-fx .menu-principal .marca { font-size: 18px; gap: 12px; margin: 0 4px 26px; white-space: normal; }
  body.app-fx .menu-principal .marca .texto-marca { display: block; line-height: 1.2; }
  body.app-fx .menu-principal .marca small { display: block; font-size: 13px; font-weight: 600; color: #b9e1ea; margin-top: 3px; }
  body.app-fx .menu-principal .logo { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: #fff; color: #0b3b5c; font-size: 17px; }
  body.app-fx .menu-principal .enlaces { flex-direction: column; align-items: stretch; gap: 4px; }
  body.app-fx .menu-principal .enlaces > a { display: flex; align-items: center; gap: 13px; padding: 13px 15px; font-size: 16px; border-radius: 14px; }
  body.app-fx .menu-principal .enlaces > a.activa { background: #fff; color: #0b3b5c; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
  body.app-fx .menu-principal .enlaces > a.destacado:not(.activa) { background: #14a3a0; color: #fff; margin: 6px 0; }
  body.app-fx .desplegable.usuario { margin-top: auto; }
  body.app-fx .desplegable.usuario > summary { margin: 0 4px; }
  body.app-fx .desplegable.usuario .caja { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
  body.app-fx .franja { display: none; }
  body.app-fx.con-menu main { margin: 0 auto; padding: 34px 40px 60px; border-radius: 0; background: none; max-width: 1180px; }
}
@media (max-width: 900px) {
  body.app-fx { padding-bottom: 92px; }
  body.app-fx .menu-principal { background: #0b3b5c; padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  body.app-fx .menu-principal .marca { margin-right: 0; font-size: 0; gap: 0; }
  body.app-fx .menu-principal .marca .texto-marca { display: none; }
  body.app-fx .titulo-app { display: block; flex: 1; min-width: 0; color: #fff; font-weight: 800; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.app-fx .menu-principal .enlaces > a { display: flex; align-items: center; gap: 14px; padding: 15px 12px; font-size: 17px; color: #fff; }
  body.app-fx .franja { height: 34px; background: #0b3b5c; }
  body.app-fx.con-menu main { margin-top: -22px; border-radius: 24px 24px 0 0; padding-top: 22px; }
  body.app-fx .boton { padding: 13px 18px; font-size: 16px; border-radius: 14px; }
  body.app-fx .barra-app {
    display: flex; align-items: flex-end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid #e2e9f1; box-shadow: 0 -6px 20px rgba(11,59,92,.10);
    padding: 6px 4px; padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  body.app-fx .barra-app a, body.app-fx .barra-app button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; cursor: pointer;
    color: #5d6f86; text-decoration: none; font: 700 12px Manrope, sans-serif; background: none; border: 0;
  }
  body.app-fx .barra-app .ico { width: 25px; height: 25px; }
  body.app-fx .barra-app a.activa:not(.central) { color: #0e8a88; }
  body.app-fx .barra-app a.activa:not(.central) .ico { background: #e3f5f8; border-radius: 99px; padding: 3px 14px; width: 54px; height: 31px; box-sizing: border-box; }
  body.app-fx .barra-app .central { color: #0b3b5c; }
  body.app-fx .barra-app .burbuja { width: 60px; height: 60px; margin-top: -30px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, #0e6f8a, #14a3a0); color: #fff; box-shadow: 0 8px 20px rgba(14,111,138,.45); border: 4px solid #fff; }
  body.app-fx .barra-app .burbuja .ico { width: 28px; height: 28px; stroke-width: 2.6; }
}
@media print { body.app-fx { padding: 0; } .barra-app { display: none !important; } }

/* Equipo y contabilidades: tarjetas sencillas por persona */
.agregar-persona > summary { list-style: none; display: inline-block; cursor: pointer; font-size: 17px; padding: 12px 20px; }
.agregar-persona > summary::-webkit-details-marker { display: none; }
.titulo-personas { margin: 26px 0 10px; display: flex; align-items: center; gap: 8px; }
.titulo-personas .cuantos { font-size: 14px; background: var(--primario-claro); color: var(--primario); border-radius: 999px; padding: 2px 10px; }
.tarjetas-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tarjeta-persona { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tarjeta-persona.apagada { opacity: .55; }
.persona-cabeza { display: flex; align-items: center; gap: 12px; }
.persona-letra { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--primario); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; }
.persona-nombre { font-weight: 700; font-size: 17px; color: var(--titulo); }
.persona-usuario { font-size: 13px; color: var(--suave); word-break: break-all; }
.persona-etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.persona-clave > summary { list-style: none; cursor: pointer; display: inline-block; }
.persona-clave > summary::-webkit-details-marker { display: none; }
.persona-clave-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.persona-clave-form input { flex: 1 1 160px; }
.persona-abrir { font-size: 14px; margin-top: auto; }
.mas-opciones > summary { cursor: pointer; }

/* «¿Por qué Hacienda no la aceptó?» (factura rechazada) y «Arreglando la factura rechazada» */
.por-que-rechazo { border: 3px solid var(--peligro); border-radius: 12px; padding: 16px 18px; margin: 12px 0 16px; background: var(--peligro-claro); color: var(--texto); font-size: 16px; line-height: 1.45; }
.por-que-rechazo h3 { margin: 0 0 8px; font-size: 20px; color: var(--peligro); }
.por-que-rechazo .dijo { background: var(--tarjeta); border: 1px solid var(--peligro-borde); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: inherit; opacity: .9; word-break: break-word; }
.por-que-rechazo .motivo + .motivo { border-top: 1px dashed var(--peligro-borde); margin-top: 10px; padding-top: 6px; }
.por-que-rechazo ol { margin: 4px 0 8px 22px; padding: 0; }
.por-que-rechazo .ejemplo { font-size: 13px; opacity: .8; margin: 4px 0 0; }
.por-que-rechazo .boton-grande, .arreglando .boton-grande { font-size: 18px; padding: 12px 22px; margin-top: 8px; }
.amarillo { background: #fff3a0; color: #3a3000; padding: 0 4px; border-radius: 4px; }
.arreglando { border: 3px solid var(--aviso-borde); border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; background: var(--aviso-claro); color: var(--texto); font-size: 16px; }
.arreglando h3 { margin: 0 0 4px; font-size: 18px; }
.arreglando ul { margin: 4px 0 6px 20px; padding: 0; }
.arreglando label { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; font-size: 15px; }
input.a-corregir, select.a-corregir { background: #fff3a0 !important; color: #3a3000 !important; outline: 3px solid #f1c40f; outline-offset: 1px; }

/* «¿Tiene una duda?»: ayuda de Facturación sin salir de la pantalla (_ayuda_fx.html). */
.ayuda-fx-abrir { display: none; }
body.app-fx .ayuda-fx-abrir { display: flex; align-items: center; gap: 12px; cursor: pointer; font: inherit; text-align: left; color: #fff; }
.ayuda-fx-icono { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  background: linear-gradient(135deg, #14a3a0, #34c3b5); color: #fff; box-shadow: 0 6px 16px rgba(20,163,160,.40); }
.ayuda-fx-icono .ico { width: 22px; height: 22px; }
.ayuda-fx-texto strong { display: block; font-size: 15px; font-weight: 800; }
.ayuda-fx-texto small { display: block; font-size: 13px; font-weight: 600; color: #b9e1ea; margin-top: 2px; }
.ayuda-fx[hidden] { display: none !important; }
.ayuda-fx { position: fixed; z-index: 80; display: flex; flex-direction: column; background: #fff; overflow: hidden;
  box-shadow: 0 18px 50px rgba(11,59,92,.30); border: 1px solid #e2e9f1; font-size: 15px; }
.ayuda-fx-cabeza { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; color: #fff;
  background: linear-gradient(135deg, #0b3b5c, #0e6f8a); }
.ayuda-fx-cabeza > div { flex: 1; min-width: 0; line-height: 1.25; }
.ayuda-fx-cabeza strong { display: block; font-size: 16px; font-weight: 800; }
.ayuda-fx-cabeza small { display: block; font-size: 13px; color: #b9e1ea; font-weight: 600; }
.ayuda-fx-cabeza .ayuda-fx-icono { width: 38px; height: 38px; flex-basis: 38px; box-shadow: none; }
.ayuda-fx-cerrar { background: #ffffff1f; border: 0; color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.ayuda-fx-cerrar .ico { width: 20px; height: 20px; }
.ayuda-fx-cuerpo { flex: 1; overflow-y: auto; padding: 14px; margin: 0; background: #f6f9fc; }
.ayuda-fx-cuerpo .burbuja.ia { background: #fff; border-color: #e2e9f1; }
.ayuda-fx-cuerpo .burbuja.persona { background: #e3f5f8; border-color: #c4e8ee; }
.ayuda-fx-pie { border-top: 1px solid #e2e9f1; padding: 10px 12px 12px; background: #fff; }
.ayuda-fx-escribir { display: flex; gap: 8px; align-items: flex-end; }
.ayuda-fx-escribir textarea { flex: 1; resize: none; min-height: 46px; max-height: 120px; border-radius: 14px; padding: 12px 14px; font: inherit; }
.ayuda-fx-enviar { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(135deg, #0e6f8a, #14a3a0); color: #fff; }
.ayuda-fx-enviar:disabled { opacity: .5; }
.ayuda-fx-enviar .ico { width: 20px; height: 20px; }
.ayuda-fx-enlaces { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; }
.ayuda-fx-enlaces a, .ayuda-fx-enlaces button { color: #0e6f8a; font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; }
@media (min-width: 901px) {
  body.app-fx .menu-principal .ayuda-fx-abrir { margin: auto 0 14px; padding: 14px; border-radius: 16px;
    background: #ffffff14; border: 1px solid #ffffff2e; }
  body.app-fx .menu-principal .ayuda-fx-abrir:hover, body.app-fx.ayuda-fx-abierta .menu-principal .ayuda-fx-abrir { background: #ffffff26; }
  body.app-fx .menu-principal .ayuda-fx-abrir ~ .desplegable.usuario { margin-top: 0; }
  .ayuda-fx { left: 280px; bottom: 18px; width: 400px; height: min(620px, calc(100vh - 36px)); border-radius: 22px; }
}
@media (max-width: 900px) {
  body.app-fx .menu-principal .ayuda-fx-abrir { padding: 0; background: none; border: 0; }
  body.app-fx .menu-principal .ayuda-fx-texto { display: none; }
  body.app-fx .menu-principal .ayuda-fx-icono { width: 38px; height: 38px; flex-basis: 38px; }
  .ayuda-fx { inset: 0; border-radius: 0; border: 0; }
  .ayuda-fx-cabeza { padding-top: max(14px, env(safe-area-inset-top)); }
  .ayuda-fx-pie { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body.ayuda-fx-abierta { overflow: hidden; }
}
@media print { .ayuda-fx, .ayuda-fx-abrir { display: none !important; } }
.ayuda-fx-soporte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid #e2e9f1; }
.ayuda-fx-soporte > div { flex: 1 1 100%; min-width: 0; line-height: 1.25; }
.ayuda-fx-soporte strong { display: block; font-size: 13.5px; color: #0b3b5c; }
.ayuda-fx-soporte small { display: block; font-size: 12px; color: #5d6f86; }
.ayuda-fx-soporte a { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 99px; font-size: 13.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.ayuda-fx-soporte .ico { width: 17px; height: 17px; }
.ayuda-fx-tel { background: #e3f5f8; color: #0b3b5c; }
.ayuda-fx-wa { background: #25d366; color: #fff; }

/* Usuario de prueba de la facturación (prueba_facturacion.py) */
.franja-prueba-fx { background: var(--aviso-claro); border-bottom: 2px solid var(--aviso-borde); color: #5b3704;
  padding: 9px 16px; text-align: center; font-size: 15px; line-height: 1.4; }
body.app-fx .franja-prueba-fx { position: relative; z-index: 5; }
.prueba-fx-form { max-width: 620px; }
.prueba-fx-form input, .prueba-fx-form select { font-size: 18px; padding: 12px 14px; width: 100%; }
.boton.grande.ancho { width: 100%; font-size: 18px; padding: 15px 20px; }
.lista-pruebas-fx .prueba-fx { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--borde); }
.lista-pruebas-fx .prueba-fx:first-child { border-top: 0; padding-top: 0; }
.prueba-fx-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.etiqueta.prueba-verde { background: var(--exito-claro); color: var(--exito); }
.etiqueta.prueba-amarillo { background: var(--aviso-claro); color: var(--aviso); }
.etiqueta.prueba-gris { background: #eef2f6; color: var(--suave); }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--enlace); text-decoration: underline; cursor: pointer; font: inherit; }
.boton-prueba-fx { font-size: 18px; padding: 14px 22px; }