/* Interfaz nueva (mockup de la reestructura): contabilidad
   Compras, Banco, Tarjetas, Honorarios y BTE, Ventas, Facturación, Cobranza y Cierre contable. Como el mockup pulido
   el 15-10: una columna al centro, las cifras en una franja blanca, una línea chica con lo que SUN ya hizo, grupos con
   su título y su cuenta a la derecha, filas parejas (nombre y detalle a la izquierda; monto arriba y estado abajo a la
   derecha; flecha) y UNA acción fuerte abajo. Solo se ve: rutas, formularios y textos de las reglas no cambian. */

/* ── El marco: una columna al centro (máx. 880 px; las de tablas, 1080 px) ── */
.cx { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cx > * { margin-top: 0; margin-bottom: 0; }
/* .cxc = solo centrar (las pantallas que guardan su propio orden por dentro); .cxa = la versión ancha */
@media (min-width: 900px) {
  main:has(> :is(.cx, .cxc)) > :is(.titulo-pagina, .sub-pagina, .cifras-pc, .secciones-modulo),
  main > :is(.cx, .cxc) { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; }
  main:has(> :is(.cx.cx-ancho, .cxc.cxa)) > :is(.titulo-pagina, .sub-pagina, .cifras-pc, .secciones-modulo),
  main > :is(.cx.cx-ancho, .cxc.cxa) { max-width: 1080px; }
  /* Camila, 22-10: el mes, el corte y «⋯» van en la fila del título, a la derecha, cuando no hay pestañas al lado
     (cf-barra-sola): antes ocupaban una fila sola y se perdía espacio. El título deja sitio para ellos. */
  main > .cx:has(> .cf-barra-sola) { position: relative; }
  main > .cx > .cf-barra-sola { position: absolute; top: -64px; right: 0; z-index: 3; border-bottom: 0; padding: 0; }
  main:has(> .cx > .cf-barra-sola) > :is(.titulo-pagina, .sub-pagina) { padding-right: 340px; box-sizing: border-box; }
  main:has(> .cxc) > .cifras-pc { margin-top: 2px; margin-bottom: 14px; }
  main:has(> .cxc) > .cifras-pc .cifras { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
  main:has(> .cxc) > .cifras-pc .cifras > div + div { border-left-color: var(--linea); }
  main:has(> .cxc) > .cifras-pc .cifras small { color: var(--suave); }
  main:has(> .cxc) > .cifras-pc .cifras b { color: var(--tinta); font-size: 20px; }
  /* Las cifras en una franja blanca, como el resumen del mockup (en el celular siguen en el encabezado oscuro) */
  main:has(> .cx) > .cifras-pc { margin-top: 2px; margin-bottom: 14px; }
  main:has(> .cx) > .cifras-pc .cifras { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
  main:has(> .cx) > .cifras-pc .cifras > div { padding: 10px 14px; }
  main:has(> .cx) > .cifras-pc .cifras > div + div { border-left-color: var(--linea); }
  main:has(> .cx) > .cifras-pc .cifras small { color: var(--suave); }
  main:has(> .cx) > .cifras-pc .cifras b, main:has(> .cx) > .cifras-pc .cifras b.marca { color: var(--tinta); font-size: 20px; }
}

/* ── Lo que SUN ya hizo: una línea chica con un visto ── */
.cx-hecho { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--suave); line-height: 1.4; }
.cx-hecho .ico { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ok); }
.cx-hecho.mal .ico { color: var(--alerta); }
.cx-hecho b { color: var(--tinta); font-weight: 700; }

/* ── El título de cada grupo, con su cuenta a la derecha ── */
.cx-grupo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 2px -4px !important; }
.cx-grupo h2 { margin: 0; font-size: 15.5px; font-family: var(--letra-titulos); font-weight: 600; }
.cx-grupo > span { font-size: 13px; color: var(--suave); text-align: right; }

/* ── Las filas parejas: nombre y detalle a la izquierda; monto arriba y estado abajo a la derecha; flecha ── */
.cx-lista { padding: 0; overflow: hidden; }
.cx-lista > .it:first-child, .cx-lista > :first-child .it:first-child { border-top: 0; }
.cx-lista .it { min-height: 62px; padding: 12px 18px; }
.cx-lista .it .tx { font-weight: 700; }
.cx-lista .it .tx > b, .cx-lista .it .tx > strong { font-family: var(--letra-titulos); font-weight: 600; }
.cx-der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.cx-der > b, .cx-monto { font-family: var(--letra-titulos); font-weight: 600; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-der small { font-size: 12px; color: var(--suave); font-weight: 400; }
.cx-ir { display: flex; color: var(--tenue); flex: none; }
.cx-ir .ico { width: 16px; height: 16px; }
.cx-hueco { width: 16px; flex: none; }
.cx-lista .it .cx-acc { flex: none; display: flex; gap: 6px; align-items: center; }
.cx-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 10px;
          background: var(--alerta-suave); color: var(--alerta); font-weight: 700; font-size: 14px; }
.cx-num.ok { background: var(--ok-suave); color: var(--ok); }
.cx-num.gris { background: var(--gris); color: var(--suave); }
.cx-vacio { padding: 16px 18px; text-align: center; color: var(--suave); font-size: 14px; }
@media (max-width: 520px) {
  .cx-lista .it { padding: 12px 14px; gap: 10px; }
  .cx-lista .it.cx-envuelve { flex-wrap: wrap; }
  .cx-lista .it.cx-envuelve .tx { flex-basis: calc(100% - 30px); }
  .cx-lista .it.cx-envuelve .cx-acc { margin-left: auto; }
}

/* ── Lo de más (otras pantallas del módulo): una lista discreta al final ── */
.cx-mas .it { min-height: 52px; }
.cx-mas .it .tx { font-weight: 600; }

/* ── Una sola acción fuerte, abajo a la derecha (en el celular, ancha) ── */
.cx-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px !important; }
.cx-pie .boton, .cx-pie button.boton { min-height: 50px; padding-left: 22px; padding-right: 22px; font-size: 15.5px; }
.cx-pie form { margin: 0; }
.cx-pie .cx-pie-tx { margin-right: auto; font-size: 13px; color: var(--suave); }
@media (max-width: 599px) { .cx-pie > .boton, .cx-pie > form, .cx-pie > form .boton { width: 100%; } }
/* Acciones secundarias: discretas, arriba a la derecha */
.cx-arriba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.cx-arriba .boton { min-height: 40px; font-size: 14px; }
.cx-arriba .hon-acc, .cx-arriba .cx-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* ── Los avisos: uno solo, más bajo (la banda de 3 líneas pasa a una) ── */
:is(.cx, .cxc) :is(.aviso-cadena, .aviso-fallo).hoy-banda { padding: 12px 16px; gap: 12px; border-radius: var(--radio); }
:is(.cx, .cxc) :is(.aviso-cadena, .aviso-fallo).hoy-banda .icono-circ { width: 30px; height: 30px; }
:is(.cx, .cxc) :is(.aviso-cadena, .aviso-fallo).hoy-banda .hoy-banda-tx { font-size: 14px; line-height: 1.45; }
:is(.cx, .cxc) .hon-apagada { font-size: 12.5px; padding: 8px 12px; border-radius: 10px; color: var(--suave); }
:is(.cx, .cxc) .hon-apagada b { color: var(--tinta); }
:is(.cx, .cxc) .ok-caja { margin: 0; }
/* Los cuadros de cifras viejos (kpis) dentro de una pantalla nueva: más bajos y blancos */
/* Las tablas que quedan: misma tarjeta blanca y filas de la misma altura */
:is(.cx, .cxc) .tabla-envuelta { box-shadow: var(--sombra); }
:is(.cx, .cxc) .tabla td { min-height: 52px; }
/* La línea de la mañana (lo que pasó, en orden): más compacta */
:is(.cx, .cxc) .com-manana .linea-t, :is(.cx, .cxc) .hoy-entregas .linea-t { padding-top: 10px; padding-bottom: 10px; }
:is(.cx, .cxc) .hon-pie { font-size: 12px; }

/* ── Las tarjetas de cuentas y empresas (banco, compras): parejas y sin cifras sueltas ── */
:is(.cx, .cxc) .cuentas-grid { gap: 12px; }

/* ── Compras › una empresa: lo que te toca en filas parejas, dentro de su pestaña ── */
.cx-filas-com { border-top: 1px solid var(--linea); }
.cx-filas-com .it { align-items: center; }
.cx-filas-com .it .com-pdf { display: block; margin-top: 3px; }
.cx-filas-com .cx-der { max-width: 46%; }
.cx-filas-com .cx-der .estado { white-space: normal; text-align: left; }
:is(.cx, .cxc) .hoy-seg label { white-space: nowrap; }
.cx-lista .it .cx-acc { min-width: 120px; justify-content: flex-end; }

/* ── Banco › las cuentas: una fila por cuenta (antes, una tarjeta con tres cuadritos) ── */
.cx-lista.cuentas-grid { display: block; }
.cx-lista .cx-cuenta { display: flex; flex-direction: row; align-items: center; margin: 0; border-radius: 0; box-shadow: none; border: 0;
                       border-top: 1px solid var(--linea); background: transparent; padding: 12px 18px; gap: 12px; }
.cx-lista .cx-cuenta:first-child { border-top: 0; }
.cx-cuenta .tx small { display: block; }
.cx-cuenta .tx .cuenta-ir { color: inherit; text-decoration: none; }
.cx-cuenta .tx .cuenta-ir:hover { text-decoration: underline; }
.cx-cuenta .ban-detalle { margin-top: 4px; font-weight: 400; }
.cx-cuenta .ban-detalle summary { font-size: 12.5px; }
.cx-cuenta .cuenta-acc .boton { align-self: center; }
.grupo-emp.cx-grupo { text-transform: none; letter-spacing: 0; }
.cx-mas .icono-circ { width: 34px; height: 34px; }
.cx .tc-robot li { padding-left: 20px; padding-right: 20px; }

/* ── Los cuadros de cifras (hoy-kpis) pasan a una franja blanca pareja, como el resumen del mockup ── */
:is(.cx, .cxc) .hoy-kpis { gap: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
                           box-shadow: var(--sombra); overflow: hidden; }
:is(.cx, .cxc) .hoy-kpi { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 10px 14px; gap: 2px; }
:is(.cx, .cxc) .hoy-kpi + .hoy-kpi { border-left: 1px solid var(--linea); }
:is(.cx, .cxc) .hoy-kpi .rot { font-size: 11.5px; }
:is(.cx, .cxc) .hoy-kpi .rot .ico { display: none; }
:is(.cx, .cxc) .hoy-kpi .cifra { font-size: 20px; }
:is(.cx, .cxc) .hoy-kpi .chico { font-size: 11.5px; }
@media (max-width: 899px) {
  :is(.cx, .cxc) .hoy-kpi:nth-child(odd) { border-left: 0; }
  :is(.cx, .cxc) .hoy-kpi:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

/* ── Acciones de fila discretas: en las listas y tablas, los botones de cada fila van claros (una sola acción fuerte
      por pantalla, la del pie o la de arriba) ── */
:is(.cx, .cxc) :is(.hon-tabla, .tabla, .cx-lista) .boton:not(.claro) { background: var(--papel); color: var(--tinta); border: 1px solid var(--linea-fuerte); }
:is(.cx, .cxc) :is(.hon-tabla, .tabla, .cx-lista) .boton:not(.claro):hover { background: var(--fondo); }
/* «Traer … ahora» es secundario (los robots traen todo solos): claro, arriba. La acción fuerte es la del aviso. */
:is(.cx, .cxc) .hon-traer .boton:not(.claro) { background: var(--papel); color: var(--tinta); border: 1px solid var(--linea-fuerte); }
:is(.cx, .cxc) .hon-traer .boton:not(.claro):hover { background: var(--fondo); }

/* ── Cobranza: las cifras en una franja blanca pareja (sin el cuadro negro) y las cifras más chicas ── */
.cxc.cb .x-kpis { gap: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.cxc.cb .x-kpis > .x-kpi { border: 0; border-radius: 0; box-shadow: none; padding: 12px 16px; }
.cxc.cb .x-kpis > .x-kpi + .x-kpi { border-left: 1px solid var(--linea); }
.cxc.cb .x-kpi.oscura { background: transparent; color: var(--tinta); }
.cxc.cb .x-kpi.oscura .rot, .cxc.cb .x-kpi.oscura .pie { color: var(--suave); }
.cxc.cb .x-kpi .rot { text-transform: none; letter-spacing: 0; font-size: 12px; }
.cxc.cb .x-kpi .grande { font-size: 24px; }
.cxc.cb .x-kpi .medio { font-size: 22px; }
@media (max-width: 760px) {
  .cxc.cb .x-kpis > .x-kpi:nth-child(odd) { border-left: 0; }
  .cxc.cb .x-kpis > .x-kpi:nth-child(n+3) { border-top: 1px solid var(--linea); }
}
.cxc.cb table.clientes td { height: 48px; }

/* ── Cierre contable: las tareas en filas blancas parejas; el estado lo dice la marca y su frase, sin fondo rosado ── */
.cxc.cm .cm-tarea.mal { background: var(--papel); }

/* ── Facturación: las cifras de arriba en una franja blanca pareja ── */
.cxc.fa .fa-cifras { gap: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.cxc.fa .fa-cifra { border: 0; border-radius: 0; box-shadow: none; padding: 10px 14px; }
.cxc.fa .fa-cifra + .fa-cifra { border-left: 1px solid var(--linea); }
.cxc.fa .fa-cifra b { font-size: 20px; }
@media (max-width: 760px) {
  .cxc.fa .fa-cifra:nth-child(odd) { border-left: 0; }
  .cxc.fa .fa-cifra:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

/* ── Ventas (documentos de venta): sus estilos propios pasan a la paleta de SUN ── */
.cx-ven .ven-nav { gap: 6px; margin-bottom: 14px; }
.cx-ven .ven-nav a { border-color: var(--linea-fuerte); background: var(--papel); font-size: 14px; font-weight: 600; color: var(--suave); padding: 7px 13px; }
.cx-ven .ven-nav a.activa { background: var(--g800); border-color: var(--g800); color: #fff; }
.cx-ven .ven-card { border-color: var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.cx-ven .ven-card h2 { font-size: 16px; }
.cx-ven .ven-alert { background: var(--alerta-suave); color: var(--alerta); border-radius: 12px; font-size: 13.5px; padding: 10px 14px; }
.cx-ven .vinculo { color: color-mix(in srgb, var(--marca-fuerte) 80%, #000); }
.cx-ven .error { color: var(--error); }
.cx-ven small { color: var(--suave); }
.cx-ven .ven-row .boton:not(.claro) { background: var(--papel); color: var(--tinta); border: 1px solid var(--linea-fuerte); }
.cx-ven .ven-row input { border-color: var(--linea-fuerte); border-radius: 10px; font: inherit; }
.cx-ven .ven-scroll { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.cx-ven table { background: transparent; }
.cx-ven th { font-size: 11.5px; color: var(--tenue); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--gris-cab); }
.cx-ven td, .cx-ven th { border-bottom-color: var(--linea); }
.cx-ven .ven-dia { margin-top: 6px; }
.cx-ven .ven-dia .it small { display: block; }
.cx-ven > p.suave { font-size: 13px; color: var(--suave); }
@media (max-width: 520px) {
  .cx-lista .it.cx-envuelve .cx-der { flex: 1 1 0; min-width: 0; max-width: none; align-items: flex-start; text-align: left; }
  .cx-lista .it.cx-envuelve .cx-acc { min-width: 0; }
}

/* Compras › Resumen (Camila, 19-10, opción D): cuatro cifras y una tarjeta por empresa. */
.cr { display: flex; flex-direction: column; gap: 16px; }
.cr-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cr-cifra { display: block; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 18px;
            color: var(--tinta); text-decoration: none; }
.cr-cifra:hover { border-color: var(--linea-fuerte); }
.cr-cifra small { font-size: 13px; color: var(--suave); }
.cr-cifra b { display: block; font-size: 30px; line-height: 1.15; margin: 4px 0 2px; font-family: var(--letra-titulos); }
.cr-cifra em { font-style: normal; font-size: 12.5px; color: var(--suave); }
.cr-cifra.al { background: #fffaf0; border-color: var(--alerta-borde); }
.cr-cifra.al b { color: var(--alerta); }
label.cf-buscar.cf-buscar-lista { margin: 0 0 12px; }
.cf-sinxml { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--fondo, #f1f2f4);
  border: 1px solid var(--linea); font-size: 11px; color: var(--suave); white-space: nowrap; }
.cf-suma { border-top: 1px solid var(--linea); background: var(--fondo, #f7f8f9); }
.cf-suma > span { grid-column: 1 / -3; }
.cf-fila-f[hidden] { display: none; }
.cm-total { margin-bottom: 14px; }
.cf-pago-facturas { display: grid; gap: 6px; margin-bottom: 8px; }
.cf-esperan .cf-tr { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 110px minmax(0, 1.6fr) 80px; }
.cf-pago .campo-f { display: grid; gap: 4px; margin: 10px 0; font-size: 13px; }
.cm-total b { font-size: 18px; }
.cr-barra-tx { display: block; margin-top: 4px; font-size: 12px; color: var(--suave); }
.cr-cifra b.cr-sin { color: var(--tenue); }
.cr-empresas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cr-emp { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 20px; display: flex;
          flex-direction: column; }
.cr-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cr-cab h3 { margin: 0; font-size: 18px; font-family: var(--letra-titulos); }
.cr-sub { color: var(--suave); font-size: 13px; margin-top: 4px; }
.cr-barra { height: 8px; border-radius: 9px; background: var(--gris); overflow: hidden; margin: 8px 0 12px; }
.cr-barra i { display: block; height: 100%; background: var(--marca); }
.cr-emp dl { margin: 0; flex: 1; }
.cr-emp dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea);
                   font-size: 14px; }
.cr-emp dl > div:first-child { border-top: 0; }
.cr-emp dt { color: var(--suave); }
.cr-emp dd { margin: 0; font-weight: 700; text-align: right; }
.cr-pie { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cr-robot { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--suave); flex-wrap: wrap; }
.cr-robot > span:nth-child(2) { flex: 1; min-width: 220px; }
.cr-robot a { color: var(--suave); }
.cr-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
@media (max-width: 1100px) { .cr-cifras { grid-template-columns: repeat(2, 1fr); } .cr-empresas { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cr-cifra b { font-size: 24px; } }
@media (min-width: 900px) {
  .cr-pie .boton { width: auto; flex: none; min-height: 0; padding: 8px 16px; font-size: 13.5px; }
  .cr-pie .boton:not(.claro) { background: var(--marca); border-color: var(--marca); }
}
.cr-tira { display: flex; align-items: center; gap: 12px; background: var(--papel); border: 1px solid var(--linea);
           border-radius: 14px; padding: 12px 16px; flex-wrap: wrap; }
.cr-tira-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--ok-suave); color: var(--ok); display: grid;
               place-items: center; flex: none; }
.cr-tira-ico.al { background: var(--alerta-suave); color: var(--alerta); }
.cr-tira-tx { flex: 1; min-width: 200px; }
.cr-tira-tx small { display: block; color: var(--suave); font-size: 12.5px; }
.cr-tira .hon-traer .boton { width: auto; min-height: 0; padding: 8px 14px; font-size: 13.5px; }

/* Compras › Facturas (Camila, 19-10, opción G2): filtros en una línea, la tabla, y la factura en un panel encima. */
.cf { display: flex; flex-direction: column; gap: 14px; }
.cf-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cf-barra { border-bottom: 1px solid var(--linea); }
.cf-filtros { display: flex; gap: 20px; flex-wrap: wrap; flex: 1; }
.cf-filtros a { border-bottom: 2px solid transparent; padding: 10px 2px; margin-bottom: -1px; font-size: 14px; font-weight: 500;
                color: var(--suave); text-decoration: none; }
.cf-filtros a b { font-weight: 500; }
.cf-filtros a.activa { color: var(--tinta); font-weight: 700; border-bottom-color: var(--marca); }
.cf-filtros a.activa b { font-weight: 700; }
.cf-barra > .cf-menu { margin-bottom: 6px; }
.cf-etq { display: inline-block; background: var(--ok-suave); color: var(--ok); border-radius: 999px; padding: 1px 10px; font-size: 12.5px;
          font-weight: 600; cursor: help; }
.cf-barra-lote { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 900; display: flex; align-items: center;
                 gap: 12px; background: var(--tinta); color: #fff; border-radius: 14px; padding: 10px 12px 10px 18px;
                 box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 14px; max-width: calc(100% - 32px); flex-wrap: wrap; }
.cf-barra-lote[hidden] { display: none; }
.cf-lote-tx { opacity: .7; font-size: 13px; }
.cf-barra-lote .boton { width: auto; min-height: 0; padding: 8px 14px; font-size: 13.5px; border: 0; }
.cf-barra-lote .boton.claro { background: #3a4248; color: #fff; }
.cf-barra-lote .boton:not(.claro) { background: var(--marca); color: #fff; }
@media (max-width: 760px) { .cf-barra-lote { bottom: 96px; } .cf-lote-tx { display: none; } .cf-filtros { gap: 14px; overflow-x: auto; flex-wrap: nowrap; } .cf-filtros a { white-space: nowrap; } }
.cf-menu { position: relative; }
.cf-menu > summary { list-style: none; cursor: pointer; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
                     padding: 6px 12px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cf-menu > summary::-webkit-details-marker { display: none; }
.cf-menu > summary .ico { width: 13px; height: 13px; }
.cf-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--papel); border: 1px solid var(--linea);
          border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 6px; min-width: 220px; display: flex; flex-direction: column; }
.cf-pop a, .cf-pop button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 8px;
                            font: inherit; font-size: 13.5px; color: var(--tinta); text-decoration: none; cursor: pointer; min-height: 0; }
.cf-pop a:hover, .cf-pop button:hover { background: var(--gris); }
.cf-pop form { margin: 0; }
.cf-pop .boton .ico { display: none; }
.cf-tabla-lista { padding: 0 !important; overflow: hidden; }
.cf-tr { display: grid; grid-template-columns: var(--cf-cols, minmax(0, 1.6fr) minmax(0, .8fr) 80px 120px minmax(0, 1.5fr)); gap: 14px;
         align-items: center; padding: 13px 18px; border-top: 1px solid var(--linea); font-size: 14px; position: relative; }
.cf-con-marca .cf-tr { --cf-cols: 22px minmax(0, 1.6fr) minmax(0, .8fr) 80px 120px minmax(0, 1.5fr); }
.cf-th { border-top: 0; font-size: 12px; color: var(--suave); padding-top: 11px; padding-bottom: 11px; }
.cf-tr .num { text-align: right; white-space: nowrap; }
.cf-tr:not(.cf-th):hover { background: var(--gris-cab); }
.cf-tr.activa { background: var(--marca-suave); }
.cf-prov { color: var(--tinta); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-prov::after { content: ""; position: absolute; inset: 0; }
.cf-tr input[type=checkbox] { position: relative; z-index: 1; }
.cf-est { font-size: 13px; color: var(--suave); }
.pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); margin-right: 7px; vertical-align: 1px; }
.pt.am { background: #d99a2b; } .pt.r { background: #c2452f; } .pt.ok { background: var(--ok); }
.cf-vacio { padding: 18px; margin: 0; }
.cf-nota { font-size: 13px; color: var(--suave); margin: 0; }
.cf-velo { position: fixed; inset: 0; background: rgba(20, 24, 28, .28); z-index: 1000; }
.cf-cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(600px, 100%); background: var(--papel); z-index: 1001;
            box-shadow: -10px 0 30px rgba(0,0,0,.14); overflow-y: auto; padding: 24px 26px 40px; }
.cf-det { display: flex; flex-direction: column; gap: 18px; }
.cf-sec { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cf-sec + .cf-sec { border-top: 1px solid var(--linea); padding-top: 18px; }
.cf-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cf-cab .hon-h { margin: 0; font-size: 20px; }
.cf-cab .pdf-l { display: inline; }
.cf-cab .pdf-l small { display: none; }
.cf-cab-acc { display: flex; gap: 8px; align-items: center; flex: none; }
.cf-sig { font-weight: 700; font-size: 13px; color: var(--marca); text-decoration: none; border: 1px solid var(--linea);
          border-radius: 9px; padding: 6px 10px; }
.cf-cerrar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--linea); border-radius: 9px; color: var(--tinta); }
.cf-h { margin: 0; font-size: 15px; }
.cf-sug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cf-chip { border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.cf-tabla { display: flex; flex-direction: column; }
.cf-fila { display: grid; grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 9px 0;
           border-top: 1px solid var(--linea); font-size: 14px; margin: 0; }
.cf-fila.cf-tit { border-top: 0; font-size: 12px; color: var(--suave); padding-top: 0; }
.cf-fila .num { text-align: right; font-weight: 700; }
.cf-fila input, .cf-fila select { width: 100%; min-height: 0; padding: 8px 10px; font-size: 13.5px; border-radius: 9px; }
.cf-fila input:placeholder-shown { border-color: var(--alerta-borde); background: #fffaf0; }
.cf-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--linea); }
.cf-pie > span { flex: 1; min-width: 200px; }
.cf-pie .boton { width: auto; min-height: 0; padding: 9px 16px; font-size: 13.5px; }
.cf-pie .boton:not(.claro) { background: var(--marca); border-color: var(--marca); }
@media (max-width: 760px) {
  .cf-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .cf-tr > span.suave { grid-column: 1; font-size: 12.5px; }
  .cf-tr .cf-est { grid-column: 1 / -1; }
  .cf-th { display: none; }
  .cf-cajon { padding: 18px 16px 90px; }
  .cf-fila { grid-template-columns: minmax(0, 1fr) 90px; }
  .cf-fila > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cf-tr .cf-prov { grid-column: 1; grid-row: 1; } .cf-tr > .num { grid-column: 2; grid-row: 1; }
  .cf-tr > span.suave { grid-row: 2; } .cf-tr .cf-est { grid-row: 3; }
}
.cf-sub { margin: -4px 0 0; }
@media (max-width: 760px) { .cf-fila.cf-tit { display: none; } }
@media (max-width: 760px) {
  .cf-con-marca .cf-tr { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .cf-con-marca .cf-tr > span:first-child { grid-column: 1; grid-row: 1 / span 3; }
  .cf-con-marca .cf-tr .cf-prov { grid-column: 2; } .cf-con-marca .cf-tr > .num { grid-column: 3; }
  .cf-con-marca .cf-tr > span.suave, .cf-con-marca .cf-tr .cf-est { grid-column: 2 / -1; }
}
.cf-barra-lote { width: max-content; flex-wrap: nowrap; }
@media (max-width: 760px) {
  .cf-barra-lote { left: 16px; right: 16px; width: auto; transform: none; flex-wrap: wrap; }
  .cf-barra-lote .boton { flex: 1; }
  .cf-filtros { flex-basis: 100%; }
  .cf-barra { border-bottom: 0; } .cf-filtros { border-bottom: 1px solid var(--linea); }
}
@media (max-width: 760px) {
  .cf-tr { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cf-tr .cf-prov { grid-column: 1 / 3; grid-row: 1; } .cf-tr > .num { grid-column: 3; grid-row: 1; }
  .cf-tr > span.cf-folio { grid-column: 1; grid-row: 2; } .cf-tr > span.cf-fecha { grid-column: 2; grid-row: 2; }
  .cf-tr .cf-est { grid-column: 1 / -1; grid-row: 3; }
  .cf-con-marca .cf-tr { grid-template-columns: 22px auto minmax(0, 1fr) auto; }
  .cf-con-marca .cf-tr .cf-prov { grid-column: 2 / 4; } .cf-con-marca .cf-tr > .num { grid-column: 4; }
  .cf-con-marca .cf-tr > span.cf-folio { grid-column: 2; } .cf-con-marca .cf-tr > span.cf-fecha { grid-column: 3; }
  .cf-con-marca .cf-tr .cf-est { grid-column: 2 / -1; }
}
.cf-ord { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--suave); text-align: left; cursor: pointer;
          display: inline-flex; align-items: center; gap: 4px; min-height: 0; }
.cf-ord.num { justify-content: flex-end; }
.cf-ord:hover { color: var(--tinta); }
.cf-ord::after { content: "↕"; opacity: .35; font-size: 11px; }
.cf-ord[aria-sort=ascending] { color: var(--tinta); font-weight: 700; } .cf-ord[aria-sort=ascending]::after { content: "↑"; opacity: 1; }
.cf-ord[aria-sort=descending] { color: var(--tinta); font-weight: 700; } .cf-ord[aria-sort=descending]::after { content: "↓"; opacity: 1; }

/* El panel de la factura (Camila, 19-10: mezcla de las opciones 2 y 3): camino, datos en cuadritos y botones fijos. */
.cf-cajon { padding: 0; display: flex; flex-direction: column; }
.cf-det { padding: 26px 28px 0; gap: 20px; flex: 1; display: flex; flex-direction: column; }
.cf-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cf-cab h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; font-family: var(--letra-titulos); }
.cf-pildora { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 700; }
.cf-pildora::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cf-pildora.ok { background: var(--ok-suave); color: var(--ok); }
.cf-pildora.tarde { background: var(--alerta-suave); color: var(--alerta); }
.cf-pildora.fallo { background: #fbe9e7; color: #b3261e; }
.cf-pildora.gris { background: var(--gris); color: var(--suave); }
.cf-camino { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--pasos, 4), 1fr); }
.cf-camino li { position: relative; padding-top: 22px; font-size: 13px; }
.cf-camino li::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--linea); }
.cf-camino li:last-child::before { right: auto; width: 0; }
.cf-camino li.ok::before { background: var(--ok); }
.cf-camino li i { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--papel);
                  border: 2px solid var(--linea-fuerte); box-sizing: border-box; }
.cf-camino li.ok i { background: var(--ok); border-color: var(--ok); }
.cf-camino li.ahora i { border-color: #d99a2b; box-shadow: 0 0 0 4px #fdf0dc; }
.cf-camino b { display: block; font-size: 13px; }
.cf-camino small { color: var(--suave); font-size: 12px; }
.cf-camino li:not(.ok):not(.ahora) b { color: var(--tenue); }
.cf-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea);
            border-radius: 12px; overflow: hidden; margin: 0; }
.cf-datos > div { background: var(--papel); padding: 10px 14px; min-width: 0; }
/* Sin «Quién» (Camila, 21-10) quedan 3 casilleros: el último ocupa la fila, sin hueco gris. */
.bn-det .cf-datos > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cf-datos dt { font-size: 12px; color: var(--suave); }
.cf-datos dd { margin: 2px 0 0; font-weight: 700; font-size: 14.5px; }
.cf-datos dd small { font-weight: 400; color: var(--suave); font-size: 12px; }
.cf-datos dd .pdf-l { font-size: 13.5px; } .cf-datos dd .pdf-l small { display: block; }
.cf-datos dd.cf-tarde { color: var(--alerta); }
.cf-h { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.cf-items { list-style: none; margin: 0; padding: 0; }
.cf-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.cf-items li:first-child { border-top: 0; }
.cf-items small { grid-column: 1 / -1; color: var(--suave); font-size: 12.5px; }
.cf-nota-c { margin: 0; background: var(--gris-cab); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--suave); }
.cf-nota-c b { color: var(--tinta); }
.cf-nota-c.cf-bien { background: var(--ok-suave); border-color: transparent; color: var(--ok); } .cf-nota-c.cf-bien b { color: var(--ok); }
.cf-nota-c.cf-mal { background: #fbe9e7; border-color: transparent; color: #b3261e; } .cf-nota-c.cf-mal b { color: #b3261e; }
.cf-nota-fila { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.cf-nota-fila a { color: var(--marca); font-weight: 700; text-decoration: none; white-space: nowrap; }
.cf-sec + .cf-sec { border-top: 0; padding-top: 0; }
.cf-datos-2 { margin: 6px 0; }
.cf-check { display: flex; gap: 10px; align-items: flex-start; background: var(--gris-cab); border: 1px solid var(--linea); border-radius: 10px; padding: 11px 12px; font-size: 13.5px; }
.cf-check input { margin-top: 3px; }
.cf-check small { display: block; color: var(--suave); font-size: 12.5px; }
.com-reclamo summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
/* «Reclamar en el SII» una sola vez (Camila, 20-10): el enlace de abajo, junto a Aceptar, abre esta sección; cerrada no se ve. */
.cf-cajon .com-reclamo:not([open]) { display: none; }
.cf-pie-fijo { position: sticky; bottom: 0; margin: auto -28px 0; padding: 14px 28px; background: var(--papel); border-top: 1px solid var(--linea);
               display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-pie-fijo:empty { display: none; }
.cf-pie-fijo .crece { flex: 1; min-width: 0; }
.cf-pie-fijo .boton { width: auto; min-height: 0; padding: 9px 16px; font-size: 13.5px; }
.cf-pie-fijo .boton:not(.claro) { background: var(--marca); border-color: var(--marca); color: #fff; }
.cf-enlace { color: var(--suave); font-size: 13px; }
@media (max-width: 760px) {
  .cf-det { padding: 18px 16px 0; }
  .cf-pie-fijo { margin: auto -16px 0; padding: 12px 16px 90px; }
  .cf-pie-fijo .boton { flex: 1; }
}
.cf-det .campo-f { font-size: 13px; gap: 4px; }
.cf-det .campo-f input, .cf-det .campo-f select { min-height: 0; padding: 8px 10px; font-size: 14px; border-radius: 9px; }
.cf-det .campo-f small { font-size: 12px; }
.cf-det .hon-apagada { font-size: 12.5px; }
/* Los menús de arriba (Camila, 19-10): todos los meses juntos, y «⋯» con íconos y para qué sirve cada cosa. */
.cf-meses { min-width: 190px; max-height: 340px; overflow-y: auto; }
.cf-meses a { display: flex; justify-content: space-between; }
.cf-meses a small { color: var(--tenue); font-size: 12px; }
.cf-meses a.activo { background: var(--marca-suave); font-weight: 700; color: var(--marca); }
.cf-mas { min-width: 290px; padding: 6px; }
.cf-pop-tit { font-size: 11px; font-weight: 700; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; padding: 8px 12px 4px; }
.cf-pop-tit:not(:first-child) { border-top: 1px solid var(--linea); margin-top: 4px; padding-top: 10px; }
.cf-mas a, .cf-mas button { display: flex !important; align-items: flex-start; gap: 10px; }
.cf-mas .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--marca); flex: none; }
.cf-mas span small { display: block; font-size: 12px; color: var(--suave); font-weight: 400; }
.cf-mas button[disabled] { opacity: .55; cursor: default; }

/* Proveedores (plazos y recurrentes) y El mes (Camila, 19-10): tablas parejas, sin las fichas de empresa. */
.cf-plazos .cf-tr { grid-template-columns: minmax(0, 2fr) 80px 130px minmax(270px, 1.4fr); }
.cf-plazos.cf-todos .cf-tr { grid-template-columns: minmax(0, 2fr) 100px 140px 100px minmax(210px, 1fr); }
.cf-plazos.cf-todos .cf-suma > span { grid-column: 1 / -1; }
.cf-pv small { display: block; color: var(--suave); font-size: 12.5px; margin-top: 2px; }
.cf-plazo { display: flex; align-items: center; gap: 8px; margin: 0; }
.cf-dias { display: inline-flex; align-items: center; border: 1px solid var(--linea-fuerte); border-radius: 9px; overflow: hidden; background: var(--papel); }
.cf-dias input { width: 52px; border: 0; padding: 7px 8px; text-align: right; font: inherit; font-size: 14px; min-height: 0; background: transparent; }
.cf-dias span { padding: 0 10px 0 2px; color: var(--suave); font-size: 13px; }
.cf-plazo .boton { width: auto; min-height: 0; padding: 7px 14px; font-size: 13px; }
.cf-plazo .boton:not(.claro) { background: var(--marca); border-color: var(--marca); color: #fff; }
.cf-enlace-b { background: none; border: 0; padding: 4px 6px; font: inherit; font-size: 13px; color: var(--suave); text-decoration: underline; cursor: pointer; min-height: 0; }
.cf-enlace-b:hover { color: var(--tinta); }
.cf-rec { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.cf-rec-lista { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cf-recs .cf-tr { grid-template-columns: minmax(0, 1fr) 170px 70px; }
.cf-recs .cf-tr form { margin: 0; text-align: right; }
.cf-buscar { display: flex; align-items: center; gap: 8px; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 0 14px; margin: 0; }
.cf-buscar .ico { color: var(--suave); }
.cf-buscar input { flex: 1; border: 0; background: transparent; padding: 11px 0; font: inherit; font-size: 14px; min-height: 0; outline: none; }
.cf-rec-lado { display: flex; flex-direction: column; gap: 14px; }
.cf-caja { padding: 18px !important; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.cf-caja-f { display: flex; align-items: center; gap: 10px; justify-content: space-between; border-top: 1px solid var(--linea); padding-top: 10px; }
.cf-caja-f small { display: block; color: var(--suave); font-size: 12.5px; }
.cf-caja .boton { width: auto; min-height: 0; padding: 8px 14px; font-size: 13.5px; }
.cf-caja .campo-f input { min-height: 0; padding: 9px 11px; font-size: 14px; }
.cf-barra-sola { border-bottom: 0; }
.cf-mesnav { display: inline-flex; align-items: center; gap: 4px; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 3px; }
.cf-mesnav a, .cf-mesnav > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: 16px; }
.cf-mesnav > span { color: var(--linea-fuerte); }
.cf-mesnav a:hover { background: var(--gris); }
.cf-mesnav b { padding: 0 8px; font-size: 14px; }
.cm-monto { font-size: 26px; font-weight: 700; font-family: var(--letra-titulos); margin-top: 10px; }
.cm-monto small { display: block; font-size: 12.5px; font-weight: 400; color: var(--suave); font-family: inherit; }
.cr-emp dd a { color: var(--marca); }
.cr-pie .boton .ico { width: 15px; height: 15px; }
@media (max-width: 900px) { .cf-rec { grid-template-columns: 1fr; } .cf-plazos .cf-tr { grid-template-columns: 1fr auto; } .cf-plazos .cf-plazo { grid-column: 1 / -1; } }
/* Historial (Camila, 19-10): Facturas con buscador y «Pagar», y Cambios. */
.cf-hist .cf-tr { grid-template-columns: minmax(0, 1.6fr) 90px 70px 115px minmax(230px, 1.4fr) 76px; }
.cf-hist .cf-suma > span { grid-column: 1 / -4; }
.cf-acc-f { text-align: right; }
.cf-pagar { width: auto !important; min-height: 0 !important; padding: 6px 14px !important; font-size: 13px !important; background: var(--marca) !important; border-color: var(--marca) !important; color: #fff !important; position: relative; z-index: 1; }
.cf-cambios .cf-tr { grid-template-columns: 116px 150px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.6fr); align-items: start; }   /* la hora «lun 26-10 · 07:01» en una línea (tablas, 28-10) */
.cf-bl { display: block; }
.cf-opcion { border: 1px solid var(--linea); border-radius: 12px; padding: 0; overflow: hidden; }
.cf-opcion > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.cf-opcion > summary::-webkit-details-marker { display: none; }
.cf-opcion > summary .ico { width: 18px; height: 18px; color: var(--marca); flex: none; }
.cf-opcion > summary small { display: block; color: var(--suave); font-size: 12.5px; }
.cf-opcion[open] > summary { background: var(--marca-suave); }
.cf-opcion > :not(summary) { margin: 12px 14px; }
.cf-pago .cf-det { padding-bottom: 28px; }
@media (max-width: 760px) {
  .cf-hist .cf-tr, .cf-cambios .cf-tr { grid-template-columns: minmax(0, 1fr) auto; }
  .cf-hist .cf-tr > *, .cf-cambios .cf-tr > * { grid-column: auto; grid-row: auto; }
  .cf-hist .cf-est { grid-column: 1 / -1; }
}

/* Banco (Camila, 20-10): como Compras. Resumen con cifras y una tarjeta por empresa; la cuenta con ‹ Mes ›, pestañas,
   tablas parejas y el movimiento o el pago en el panel de la derecha; las demás pantallas con el estilo del panel. */
.bn [hidden] { display: none !important; }
.bn-ctas { display: flex; flex-direction: column; flex: 1; }
.bn-ver-sin { cursor: pointer; font: inherit; font-size: 12.5px; color: var(--suave); background: transparent;
  border: 1px dashed var(--linea); border-radius: 10px; padding: 0 12px; min-width: 0; }
.bn-falta-linea { margin: 6px 0 0; }
.bn-mes-linea b { font-size: 15px; }
/* En el celular, la línea del mes va sola arriba y el selector debajo (Camila, 21-10: se partía en 3 líneas). */
@media (max-width: 760px) { .bn .cf-barra-sola { flex-wrap: wrap; } .bn .cf-barra.cf-barra-sola > .bn-mes-linea.crece { flex: 1 1 100%; } }
.bn-dias-pie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--linea); }
.bn-navdia { display: inline-flex; align-items: center; gap: 10px; margin: 0; white-space: nowrap; }
.bn-navdia a { font-size: 13px; }
.bn-dias-pie .bn-subir-mes { margin-left: auto; }
.bn-dia-linea { margin: 0 0 6px; }
/* El Resumen de Banco en tabla (Camila, 20-10): una fila por cuenta, con las columnas de .bn-tabla */
.bn-t-resumen { --bn-cols: minmax(0, 2fr) 130px 70px 100px 80px 90px 190px; }
.bn-t-resumen .bn-cta.cf-tr { display: grid; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--linea); }
.bn-t-resumen .cf-enlace-b { white-space: nowrap; }
.bn-t-resumen .bn-f-cta { min-width: 0; }
.bn-t-resumen .cuenta-ir { color: var(--tinta); text-decoration: none; }
.bn-t-resumen .bn-f-cta details { margin-top: 2px; font-size: 12.5px; }
.bn-t-resumen .bn-f-cta summary { color: var(--suave); cursor: pointer; font-weight: 400; }
.bn-t-resumen .bn-f-nota { display: block; font-size: 12px; }
.bn-t-resumen .bn-cta-acc { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-direction: row; }
.bn-t-resumen .bn-cta-acc .boton { width: auto; min-height: 0; padding: 7px 14px; font-size: 13px; }
.bn-t-resumen .bn-al { color: var(--alerta); }
@media (max-width: 900px) { .bn-t-resumen { --bn-cols: minmax(0, 1fr) auto; }
  .bn-t-resumen .cf-tr > .num, .bn-t-resumen .cf-th { display: none; } }
.bn-cta { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--linea); min-width: 0; }
.bn-cta:first-child { border-top: 0; padding-top: 4px; }
.bn-cta-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bn-cta-cab b { font-size: 15px; }
.bn-cta-cab a { color: var(--tinta); text-decoration: none; }
.bn-cta-cab .estado { flex: none; }
.bn-cta-sub { color: var(--suave); font-size: 12.5px; }
.bn-cta-nota { color: var(--suave); font-size: 12.5px; }
.bn-cta-det summary { font-size: 12.5px; }
.bn-cta-acc { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.bn-cta-acc .boton { width: auto; min-height: 0; padding: 6px 14px; font-size: 13px; }
.bn-cta-acc .boton:not(.claro) { background: var(--marca); border-color: var(--marca); color: #fff; }
.bn .cr-tira .cf-menu { margin-left: 2px; }
.bn .cr-tira .hon-traer .boton { width: auto; min-height: 0; padding: 8px 14px; font-size: 13.5px; }
.bn .cr-tira .ban-falta { display: inline; }
.bn-subir, .bn-subir-mes { width: auto !important; min-height: 0 !important; padding: 8px 14px !important; font-size: 13.5px !important;
                           background: var(--marca) !important; border-color: var(--marca) !important; color: #fff !important; margin-bottom: 6px; }
.bn-subir .ico, .bn-subir-mes .ico { width: 15px; height: 15px; }
.bn-dias-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bn-dias-cab .bn-subir-mes { margin: 0; }
.bn .ban-dias { border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px; }
.bn-mesmenu > summary { border: 0; padding: 4px 8px; font-size: 14px; }
.bn-meses { left: 50%; right: auto; transform: translateX(-50%); min-width: 260px; }
.bn-meses a { align-items: center; }
.bn-meses a b { display: block; font-size: 13.5px; }
.bn-meses a small { display: block; color: var(--suave); font-size: 12px; }
.bn-tabla .cf-tr { grid-template-columns: var(--bn-cols); align-items: start; }
.bn-t-toca { --bn-cols: minmax(0, 2fr) 130px minmax(0, 1.2fr) 110px; }
.bn-t-toca .cf-suma > span, .bn-t-pagos .cf-suma > span, .bn-t-subir .cf-suma > span, .bn-t-listos .cf-suma > span { grid-column: 1 / 2; }
.bn-t-subir { --bn-cols: minmax(0, 1.3fr) 130px minmax(0, 1.5fr); border: 1px solid var(--linea); border-radius: 12px;
  overflow: hidden; margin: 6px 0 14px; }
.bn-t-subir .bn-va-a { font-size: 13px; color: var(--suave); }
.bn-subir-cuenta { margin: 0 0 6px; font-size: 14px; }
.bn-t-subir-mes { --bn-cols: minmax(0, 1.2fr) 110px 110px 150px; }
.bn-t-subir-mes .cf-suma > span { grid-column: 1 / 2; }
.bn-va { display: block; margin-top: 6px; }
/* Los conceptos del panel Resolver (Camila, 21-10): familias arriba, buscador y lista abajo. */
.bn-con-tit { display: block; font-weight: 700; margin-bottom: 6px; }
.bn-fams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.bn-fams button { text-align: left; padding: 10px 12px; border: 1px solid var(--linea-fuerte); border-radius: 12px; background: var(--papel);
  cursor: pointer; font: inherit; color: inherit; min-height: 0; width: auto; }
.bn-fams button b { display: block; font-size: 14px; }
.bn-fams button small { display: block; color: var(--suave); font-size: 12px; margin-top: 2px; line-height: 1.3; font-weight: 400; }
.bn-fams button[aria-pressed="true"] { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); background: var(--marca-suave); }
.bn-con-caja { border: 1px solid var(--linea-fuerte); border-radius: 12px; overflow: hidden; background: var(--papel); }
.bn-con-busca { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--linea); color: var(--suave); }
.bn-con-busca input { border: 0; outline: 0; flex: 1; font-size: 14px; background: transparent; padding: 0; min-height: 0; box-shadow: none; color: var(--tinta, inherit); }
.bn-con-lista { max-height: 330px; overflow: auto; }
.bn-con-grupo { padding: 8px 14px 4px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--suave);
  background: var(--fondo, #f7f8f9); }
.bn-con { display: flex; align-items: baseline; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--linea); cursor: pointer; font-weight: 400; margin: 0; }
.bn-con input { margin: 0; width: auto; min-height: 0; }
.bn-con .crece { flex: 1; font-size: 14px; }
.bn-con small { color: var(--suave); font-size: 12px; text-align: right; }
.bn-con:hover { background: var(--marca-suave); }
.bn-con:has(input:checked) { background: var(--marca-suave); font-weight: 700; }
/* Al marcar, solo el nombre en negrita: «vence …» y la cuenta no cambian de tamaño (Camila, 21-10). */
.bn-con:has(input:checked) small { font-weight: 400; }
.bn-con[hidden], .bn-con-grupo[hidden], .bn-con-nada[hidden] { display: none; }
.bn-con-nada { margin: 0; padding: 12px 14px; }
/* Conceptos (Camila, 21-10): buscador en la barra, sin la columna «Deja pendiente», botones de huecos de la glosa. */
.bn-conc-busca { border: 1px solid var(--linea-fuerte); border-radius: 10px; padding: 7px 12px; min-width: 240px; background: var(--papel); }
.bn-conc[hidden] { display: none; }
.bn-huecos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 6px; font-size: 13px; }
.bn-huecos [hidden] { display: none; }
/* Las facturas del panel del pago (Camila, 21-10): la misma lista que los conceptos, con casilla y saldo. */
.bn-fac-caja .bn-con-busca .cf-enlace-b { white-space: nowrap; font-size: 13px; }
.bn-fac { align-items: center; }
.bn-fac .crece small { color: var(--suave); font-size: 12px; margin-left: 6px; }
.bn-fac .nb { font-size: 14px; }
.bn-fac.sel, .bn-fac:has(input:checked) { background: var(--marca-suave); }
.bn-fac[hidden] { display: none; }
.bn-reparto { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.bn-anticipo > summary { cursor: pointer; font-size: 13.5px; color: var(--marca); font-weight: 600; }
.bn-anticipo[open] > summary { margin-bottom: 8px; }
@media (max-width: 520px) { .bn-fams button { padding: 9px 10px; text-align: center; } .bn-fams button small { display: none; }
  .bn-con { flex-wrap: wrap; } .bn-con small { flex-basis: 100%; text-align: left; padding-left: 24px; } }
.bn-va[hidden] { display: none; }
.bn-t-toca .cf-est > span { min-width: 0; }
.bn-t-pagos { --bn-cols: minmax(0, 1.5fr) 120px minmax(0, 1.5fr) minmax(0, 1fr) 120px; }
.bn-t-listos { --bn-cols: minmax(0, 1.6fr) 120px minmax(0, 1.1fr) minmax(0, 1.1fr) 80px; }
.bn-t-subidos { --bn-cols: minmax(0, 1.8fr) 120px minmax(0, 1.2fr) 160px; }
.bn-t-conceptos { --bn-cols: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.6fr) 80px; }
.bn-t-cambios { --bn-cols: 110px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); }
.bn-tabla .cf-th { align-items: center; }
.bn-tabla .ban-glosa { min-width: 0; }
.bn-tabla .ban-glosa .cf-prov { display: block; }
.bn-tabla .cf-est small { display: block; }
.bn-ir { text-align: right; font-size: 13px; font-weight: 700; color: var(--marca); white-space: nowrap; }
.bn-ir .ico { width: 14px; height: 14px; vertical-align: -2px; }
.bn-cuenta, .bn-fac { font-size: 13px; }
.bn-avance .cr-barra { display: block; margin: 6px 0 4px; }
.bn-t-subidos > summary { padding: 13px 18px; cursor: pointer; font-weight: 700; font-size: 13.5px; list-style: none; }
.bn-t-subidos > summary::-webkit-details-marker { display: none; }
.bn-t-subidos > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.bn-t-subidos[open] > summary::before { transform: rotate(90deg); }
.bn-panel { display: flex; flex-direction: column; gap: 10px; }
.bn-lado { margin-top: 6px; }
.bn-lado .cuentas-dia li { padding: 9px 0; }
.bn-lado .cr-cab { margin-bottom: 6px; }
.bn-hoja { max-width: 640px; padding: 0 !important; overflow: hidden; }
.bn-hoja .cf-pie-fijo { position: static; margin-top: 4px; }
.bn-det .ban-facturas { max-height: none; }
.bn-det .cf-buscar input { min-width: 0; }
.bn-det .hon-desde { margin: 0; }
.bn .cf-barra .bn-subir { margin-left: auto; }
.bn .cf-barra > .crece { flex: 1; min-width: 0; }
.bn-va { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .bn-tabla .cf-tr, .bn-tabla .cf-tr > * { grid-column: auto !important; grid-row: auto !important; }
  .bn-tabla .cf-tr { grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 4px; }
  .bn-tabla .cf-tr > :nth-child(n+3) { grid-column: 1 / -1 !important; }
  .bn-tabla .bn-ir { text-align: left; }
  .bn .cf-barra .bn-subir { margin-left: 0; }
  .bn-dias-cab .bn-subir-mes { width: 100% !important; justify-content: center; }
  .bn .cr-tira { flex-wrap: wrap; }
  .bn-meses { left: auto; right: -40px; transform: none; }
  .bn-hoja { max-width: none; }
  .bn-hoja .cf-pie-fijo { padding-bottom: 14px; }
}
/* Tarjetas (Camila, 20-10): el diseño de Compras. Resumen con cifras y una tarjeta por empresa, el estado de cuenta en
   pestañas con tablas parejas, la compra en un panel a la derecha y el selector de tarjetas arriba. */
.tj-menu { max-height: min(70vh, 560px); overflow-y: auto; }
.tj-op { padding-left: 22px; }
.tj-op .tc-plastico i { width: 20px; height: 14px; }
.tj-op b { font-size: 13.5px; }
.tj .cf-barra-sola { border-bottom: 0; }
.tj .cf-barra > .crece, .hv .cf-barra > .crece { flex: 1; }
.tj .cr-empresas, .hv .cr-empresas { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.tj-boton { width: auto !important; min-height: 0 !important; padding: 8px 14px !important; font-size: 13.5px !important; flex: none; }
.tj-boton:not(.claro) { background: var(--marca); border-color: var(--marca); color: #fff; }
.tj-lista { list-style: none; margin: 0 0 4px; padding: 0; flex: 1; }
.tj-lista li { border-top: 1px solid var(--linea); }
.tj-lista li:first-child { border-top: 0; }
.tj-lista a { display: flex; align-items: center; gap: 10px; padding: 10px 2px; color: var(--tinta); text-decoration: none; font-size: 14px; }
.tj-lista a:hover { background: var(--gris-cab); }
.tj-lista .crece { flex: 1; min-width: 0; }
.tj-lista b { display: block; }
.tj-lista small { display: block; color: var(--suave); font-size: 12.5px; }
.tj-lista .estado { flex: none; }
.tj-robot { --cf-cols: 150px minmax(0, 1fr) minmax(0, 1.4fr); }
.tj-datos { grid-template-columns: repeat(4, 1fr); }
.tj-datos dd small { font-weight: 400; }
.tj-toca { --cf-cols: minmax(0, 1.8fr) 90px 120px minmax(0, 1.5fr); }
.tj-fact { --cf-cols: minmax(0, 1.5fr) 90px 120px minmax(0, 1.4fr) minmax(0, 1.2fr); }
.tj-cta { --cf-cols: minmax(0, 1.5fr) 90px 120px minmax(0, 1.8fr); }
.tj-pagos { --cf-cols: minmax(0, 1.2fr) 120px minmax(0, 1.6fr) minmax(0, 1fr); }
.tj-hist { --cf-cols: 120px 120px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr); }
.tj-hist .cf-tr { align-items: start; }
/* Honorarios (Camila, 21-10): el Resumen en una tabla por empresa, y el total al pie de cada tabla del mes. */
.hv-res { --cf-cols: minmax(0, 1.6fr) 120px 70px 70px 64px 70px 120px 120px; }
.hv-res .hv-ir2 { text-align: right; white-space: nowrap; }
.hv-res .hv-res-mal { grid-column: 1 / -1; }
.hv .hv-pie { background: var(--gris-cab); border-top: 2px solid var(--linea-fuerte); }
/* El estado de cuenta (Camila, 21-10, la opción 2): la tarjeta y cómo va a la izquierda; el mes en una lista, con filtros. */
.tj-barra { align-items: center; }
.tj-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.tj-chip { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--linea-fuerte); background: var(--papel); font-size: 13.5px; color: var(--tinta); text-decoration: none; }
.tj-chip b { margin-left: 3px; }
.tj-chip.activa { background: var(--marca-fuerte); border-color: var(--marca-fuerte); color: #fff; }
.tj-dos { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.tj-izq { position: sticky; top: 76px; display: grid; gap: 14px; }
.tj-plastico { background: var(--marca-fuerte); color: #fff; border-radius: 18px; padding: 20px 22px; display: grid; gap: 18px; }
.tj-plastico small { display: block; opacity: .72; font-size: 12.5px; }
.tj-titular { font-size: 17px; }
.tj-total { display: block; font-size: 30px; letter-spacing: -.02em; }
.tj-plastico-pie { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; opacity: .85; }
.tj-avance { display: grid; gap: 12px; padding: 18px !important; }
.tj-avance h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.tj-avance p { margin: 0; font-size: 13.5px; color: var(--suave); }
.tj-barra-av { height: 8px; border-radius: 99px; background: var(--gris); overflow: hidden; }
.tj-barra-av i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.tj-subir { width: 100% !important; justify-content: center; min-height: 0 !important; padding: 11px 16px !important; background: var(--marca-fuerte); border-color: var(--marca-fuerte); color: #fff; }
.tj-subir[aria-disabled] { opacity: .4; cursor: not-allowed; }
.tj-apagada { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px !important; }
.tj-prox { margin: 0 4px; }
.tj-ojo { display: grid; gap: 2px; padding: 14px 16px !important; border-color: var(--error-suave) !important; background: var(--error-suave) !important; color: var(--error); text-decoration: none; font-size: 13.5px; }
.tj-ojo small { color: var(--tinta); font-size: 12.5px; }
.tj-lista2 { padding: 0 !important; overflow: hidden; }
.tj-mov { display: grid; grid-template-columns: 4px minmax(0, 1.2fr) minmax(0, 1.4fr) 120px; gap: 14px; align-items: center; padding-right: 20px; min-height: 60px; border-top: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.tj-mov:first-child { border-top: 0; }
a.tj-mov:hover, .tj-mov.activa { background: var(--gris-cab); }
.tj-mov > i { align-self: stretch; }
.tj-mov.toca > i, .tj-mov.revisar > i { background: #d99a1e; }
.tj-mov.lista > i { background: var(--ok); }
.tj-mov.cargo > i { background: #b8c0c8; }
.tj-mov.mal > i { background: var(--error); }
.tj-mov-co { padding: 11px 0; min-width: 0; }
.tj-mov-co b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-mov small { display: block; color: var(--suave); font-size: 12.5px; margin-top: 2px; font-weight: 400; }
.tj-mov-va { font-size: 13.5px; color: var(--suave); min-width: 0; }
.tj-mov.toca .tj-mov-va, .tj-mov.revisar .tj-mov-va small, .tj-mov.mal .tj-mov-va { color: var(--alerta); font-weight: 600; }
.tj-mov .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .tj-barra { flex-wrap: wrap; }
  .tj-chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .tj-chip { white-space: nowrap; flex: none; }
  .tj-dos { grid-template-columns: minmax(0, 1fr); }
  .tj-izq { position: static; }
  .tj-mov { grid-template-columns: 4px minmax(0, 1fr) auto; row-gap: 0; }
  .tj-mov > .tj-mov-va { grid-column: 2 / -1; grid-row: 2; padding-bottom: 11px; margin-top: -6px; }
  .tj-mov > .num { grid-column: 3; grid-row: 1; }
  .tj-mov > i { grid-row: 1 / span 2; }
}
/* Resumen (Camila, 21-10): una tabla de tarjetas por empresa, con su total; Comercios: lo que SUN sabe. */
.tj-res { --cf-cols: minmax(0, 1.8fr) 140px 80px 130px minmax(0, 1.2fr) 90px; }
.tj-res .tj-grupo { background: var(--gris-cab); font-size: 13.5px; }
.tj-res .tj-pie { border-top: 2px solid var(--linea-fuerte); }
.tj-tc { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; min-width: 0; }
.tj-tc b { display: block; font-size: 14px; }
.tj-tc small { display: block; color: var(--suave); font-size: 12.5px; }
.tj-ir { text-align: right; white-space: nowrap; }
.tj-com { --cf-cols: minmax(0, 1.3fr) minmax(0, 1.2fr) 110px minmax(0, .9fr) 80px; }
.tj-sin { --cf-cols: minmax(0, 1.4fr) minmax(0, 1.2fr) 120px 100px; }
.tj .cf-barra .tj-busca { flex: 0 1 300px; }
.tj-grupo-acc { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tj-agregar { position: relative; }
.tj-agregar > summary, .tj-acc > summary { list-style: none; cursor: pointer; }
.tj-agregar > summary::-webkit-details-marker, .tj-acc > summary::-webkit-details-marker { display: none; }
.tj-form-com { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 14px 16px !important; margin-top: 10px; }
.tj-agregar[open] { flex-basis: 100%; }
.tj-acc { position: relative; text-align: right; }
.tj-acc-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 320px; text-align: left; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tj-acc-pop form { display: flex; flex-direction: column; gap: 8px; }
.tj-acc-pop .boton { width: auto; align-self: flex-end; min-height: 0; padding: 8px 16px; font-size: 13.5px; }
.tj-olvidar { background: none; border: 0; padding: 0; color: var(--rojo, #b42318); cursor: pointer; font: inherit; font-size: 13px; }
.tj-form-com .campo-f input, .tj-acc-pop .campo-f input { min-height: 0; padding: 8px 10px; border: 1px solid var(--linea-fuerte); border-radius: 9px; font-size: 14px; }
.tj-form-com .boton { width: auto; min-height: 0; padding: 9px 16px; }
.tj-fac { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.tj .cf-est a { position: relative; z-index: 1; }
.tj-vacio { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; padding: 18px !important; }
.tj-vacio p { margin: 0; flex: 1; min-width: 240px; font-size: 14px; }
.tj-vacio .boton { width: auto; min-height: 0; padding: 9px 16px; font-size: 13.5px; }
.tj-hoja { max-width: 640px; width: 100%; margin: 0 auto; background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.tj .cf-det .tc-ops legend.cf-h { margin-bottom: 6px; }
.tj .cf-det .banda.hon-op { padding: 10px 12px; }
@media (max-width: 760px) {
  .tj-datos { grid-template-columns: 1fr 1fr; }
  .tj-robot .cf-tr, .tj-hist .cf-tr { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .tj-robot .cf-tr > *, .tj-hist .cf-tr > * { grid-column: 1; grid-row: auto; }
  .tj-pagos .cf-tr > .cf-folio { grid-column: 1 / -1; }
  .tj-hoja { border-radius: 0; border-left: 0; border-right: 0; }
}

/* Honorarios y BTE (Camila, 20-10): el diseño de Compras. Resumen con cifras y una tarjeta por empresa, las boletas en
   pestañas con tablas parejas, la ficha de la persona en un panel a la derecha y las hojas de cargar, editar y emitir. */
.hv .cf-barra-sola { border-bottom: 0; }
.hv-sub { font-weight: 400; font-size: 12px; }
.hv-empresas .cr-emp dd { text-align: right; }
.hv-esperan { --cf-cols: minmax(0, 2fr) 90px 80px 120px minmax(0, 1.2fr); }
.hv-odoo { --cf-cols: minmax(0, 1.4fr) 90px 80px minmax(0, 1.3fr) 110px 110px minmax(0, 1.6fr); }
.hv-fuera { --cf-cols: minmax(0, 1.6fr) 90px 80px 120px minmax(0, 1.6fr); }
.hv-personas { --cf-cols: minmax(0, 1.4fr) minmax(0, 1.6fr) 130px; }
.hv-bte { --cf-cols: minmax(0, 1.8fr) 90px 70px 110px 110px minmax(0, 1.8fr); }
.hv-bte .cf-tr, .hv-odoo .cf-tr { align-items: start; }
.hv-hist { --cf-cols: 60px 110px minmax(0, 1fr); }
.hv-hist .cf-tr { align-items: start; }
.hv-dia { padding: 10px 18px 6px; border-top: 1px solid var(--linea); background: var(--gris-cab); font-size: 12px; font-weight: 700;
          color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.hv-pers, .cf-pv { min-width: 0; }
.hv-pers b, .hv-pers small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-pers small { color: var(--suave); font-size: 12.5px; font-weight: 400; }
.hv-bte .cf-pv small { display: block; color: var(--suave); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-cta { font-size: 13px; min-width: 0; }
.hv-cta b { display: block; color: var(--tinta); font-weight: 600; }
.hv-cta small { display: block; font-size: 12px; overflow-wrap: anywhere; }
/* Honorarios (Camila, 22-10): la alerta de una anulada, en una línea baja y roja. */
.cr-tira.hv-alerta { border-color: var(--error); text-decoration: none; color: inherit; }
.cr-tira.hv-alerta .cr-tira-ico { background: var(--error-suave); color: var(--error); }
.cr-tira.hv-alerta .cr-tira-tx b { color: var(--error); }
.cr-tira.hv-sii .hon-traer .boton { padding: 6px 12px; font-size: 13px; }
.hv-vacias { margin-top: 8px; }
.hv-codigo { color: var(--tinta); }
.hv-ir { color: var(--marca); font-weight: 600; }
.hv-pdf, .hv-acc { position: relative; z-index: 1; }
.hv-pdf { display: inline-flex; vertical-align: -3px; }
.hv-pdf .ico { width: 15px; height: 15px; }
.hv-acc { color: var(--marca); font-weight: 600; text-decoration: none; }
.hv-acc:hover { text-decoration: underline; }
.hv-cargar .estado { flex: none; }
.hv .cf-nota a { color: var(--marca); }
.hv-pc { margin-top: -4px; }
.hv-vacio p { font-size: 14px; }
.hv-ancha { max-width: 860px; }
.hv-asiento { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; gap: 2px; }
.hv-asiento .hon-elige-b { margin-bottom: 6px; }
.hv .cf-pie-fijo .boton.peligro { background: #b3261e; border-color: #b3261e; color: #fff; }
.hv .cf-items a { color: var(--tinta); }
.hv .cf-items li.hv-esta { background: var(--marca-suave); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.hv .cf-det .campo-f select { min-height: 0; padding: 8px 10px; font-size: 14px; border-radius: 9px; }
.hv .cf-det .hon-desde { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hv-por-cuenta .cf-caja-f { font-size: 13.5px; }
.tj .cf-pie-fijo .boton[disabled], .hv .cf-pie-fijo .boton[disabled] { opacity: .45; cursor: not-allowed; }
.tj-form .tc-buscar input { min-height: 0; padding: 8px 10px; border: 1px solid var(--linea-fuerte); border-radius: 9px; font-size: 14px; }
/* En el celular (Tarjetas y Honorarios): el nombre y el monto arriba, folio y fecha abajo, y el estado al final. */
@media (max-width: 760px) {
  .tj .cf-tabla-lista .cf-tr, .hv .cf-tabla-lista .cf-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  .tj .cf-tabla-lista .cf-tr > *, .hv .cf-tabla-lista .cf-tr > * { grid-column: 1 / -1; grid-row: auto; text-align: left; }
  .tj .cf-tabla-lista .cf-tr > .cf-prov, .hv .cf-tabla-lista .cf-tr > .cf-prov,
  .hv .cf-tabla-lista .cf-tr > .cf-pv { grid-column: 1; grid-row: 1; }
  .tj .cf-tabla-lista .cf-tr > .num, .hv .cf-tabla-lista .cf-tr > .num { grid-column: 2; grid-row: 1; text-align: right; }
  .tj .cf-tabla-lista .cf-tr > .cf-folio, .hv .cf-tabla-lista .cf-tr > .cf-folio { grid-column: 1; grid-row: 2; font-size: 12.5px; }
  .tj .cf-tabla-lista .cf-tr > .cf-fecha, .hv .cf-tabla-lista .cf-tr > .cf-fecha { grid-column: 2; grid-row: 2; text-align: right; font-size: 12.5px; }
  .tj .tj-pagos.cf-tabla-lista .cf-tr > .cf-folio { grid-column: 1 / -1; }
  .tj .tj-res.cf-tabla-lista .cf-th, .tj .tj-res .tj-ir, .tj .tj-res .cf-tr > span.num { display: none; }
  .hv .hv-res.cf-tabla-lista .cf-th, .hv .hv-res .cf-tr > span.num { display: none; }
  .hv .cf-tabla-lista .hv-pie > :first-child { grid-column: 1; grid-row: 1; align-self: center; }
  .hv .cf-tabla-lista .hv-pie > span:empty { display: none; }
  .tj .tj-res.cf-tabla-lista .tj-grupo > *, .tj .tj-res.cf-tabla-lista .tj-pie > * { grid-row: 1; }
  .tj .tj-res.cf-tabla-lista .tj-grupo > :first-child, .tj .tj-res.cf-tabla-lista .tj-pie > :first-child { grid-column: 1; }
  .tj .tj-res.cf-tabla-lista .tj-grupo > .suave, .tj .tj-res.cf-tabla-lista .tj-grupo > span:empty, .tj .tj-res.cf-tabla-lista .tj-pie > span { display: none; }
  .tj-form-com { grid-template-columns: 1fr; }
  .tj-acc-pop { width: min(320px, calc(100vw - 48px)); }
  .hv .hv-hist.cf-tabla-lista .cf-tr { grid-template-columns: 50px minmax(0, 1fr); }
  .hv .hv-hist.cf-tabla-lista .cf-tr > :first-child { grid-column: 1; grid-row: 1; }
  .hv .hv-hist.cf-tabla-lista .cf-tr > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .hv .hv-hist.cf-tabla-lista .cf-tr > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .hv .hv-personas.cf-tabla-lista .cf-tr > .cf-fecha { grid-row: 1; }
  .hv-odoo .cf-tr > .hv-cta, .hv-odoo .cf-tr > .num:not(.hv-liq), .hv-bte .cf-tr > span.num { display: none; }
}
/* Ventas (Camila, 20-10): el diseño de Compras en Documentos de venta. Resumen con cifras y tarjetas, Documentos con
   pestañas y el panel encima, EspressHood, El mes e Historial en tablas parejas. Clases propias: vn-*. */
.vn .cr-emp .com-nota-mal { margin-top: 10px; font-size: 12.5px; }
.vn-docs .cf-tr { grid-template-columns: minmax(0, 1.6fr) 90px 92px 120px minmax(0, 1.4fr); }
.vn-docs.vn-con-emp .cf-tr { grid-template-columns: minmax(0, 1.5fr) 100px 90px 92px 120px minmax(0, 1.4fr); }
.vn-pos .cf-tr { grid-template-columns: 100px 170px 170px minmax(0, 1.4fr) minmax(0, 1fr); }
.vn-hist .cf-tr { grid-template-columns: 90px 100px 170px minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; }
.vn-hist .cf-pildora { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-lineas .cf-fila { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); }
.vn-ref dd input, .vn-ref dd select { width: 100%; min-height: 0; padding: 6px 8px; font-size: 13.5px; border-radius: 8px; border: 1px solid var(--linea-fuerte); font: inherit; }
.cf-det .campo-f + .campo-f { margin-top: -4px; }
.vn .cf-barra-sola { justify-content: flex-end; }
/* Ventas (Camila, 26-10): buscador, la diferencia explicada, la cuenta con su nombre y el documento del historial. */
.vn-buscar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.vn-buscar input { flex: 1; min-width: 0; }
.vn-buscar small { white-space: nowrap; }
.vn .cr-emp .vn-explica { display: block; margin-top: 10px; font-size: 12.5px; color: var(--suave); }
.vn-lineas .vn-cta { display: block; margin-top: 3px; font-size: 12px; }
.vn-hist .vn-hdoc { display: block; font-size: 12px; margin-top: 2px; }
.vn-et { display: none; color: var(--suave); font-weight: 400; }
@media (max-width: 760px) {
  .vn-docs .cf-tr, .vn-docs.vn-con-emp .cf-tr { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; }
  .vn-docs.vn-con-emp .cf-tr > .cf-emp { grid-column: 3; grid-row: 2; font-size: 12.5px; text-align: right; }
  .vn-docs .cf-tr > span.cf-fecha { grid-column: 2; }
  .vn-pos .cf-tr, .vn-hist .cf-tr { grid-template-columns: minmax(0, 1fr) auto; }
  .vn-pos .cf-tr > :nth-child(1), .vn-hist .cf-tr > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .vn-pos .cf-tr > :nth-child(2), .vn-hist .cf-tr > :nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .vn-pos .cf-tr > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .vn-pos .cf-tr > :nth-child(4) { grid-column: 1; grid-row: 2; }
  .vn-hist .cf-tr > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .vn-hist .cf-tr > :nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .vn-pos .cf-tr > :nth-child(5), .vn-hist .cf-tr > :nth-child(5) { grid-column: 1 / -1; grid-row: auto; }
  .vn-et { display: inline; }
  .vn-lineas .cf-fila { grid-template-columns: minmax(0, 1fr) 90px; }
}

/* Facturación (Camila, 20-10): el diseño de Compras. Cifras, la emisión en una tira, pestañas y tabla pareja con lo que
   toca a la derecha, una tarjeta por empresa; el documento y la revisión con la cabecera y los cuadritos del panel, y
   los botones abajo, fijos. Clases propias: fac-*. */
.fac-b { width: auto !important; min-height: 0 !important; padding: 6px 14px !important; font-size: 13px !important; position: relative; z-index: 1; }
.fac-b:not(.claro) { background: var(--marca) !important; border-color: var(--marca) !important; color: #fff !important; }
.fac .cf-barra > .fac-nueva { width: auto; min-height: 0; padding: 7px 14px; font-size: 13.5px; margin-bottom: 6px; background: var(--marca); border-color: var(--marca); color: #fff; }
.fac .cf-barra > .fac-nueva .ico { width: 15px; height: 15px; }
.fac-docs .cf-tr { grid-template-columns: minmax(0, 1.5fr) 110px 100px 120px minmax(0, 1.6fr) 90px; }
.fac-docs.fac-hist .cf-tr { grid-template-columns: minmax(0, 1.3fr) 90px 72px 125px 115px minmax(0, 1.9fr) 80px; }
.fac-docs.fac-hist.fac-con-emp .cf-tr { grid-template-columns: minmax(0, 1.3fr) 90px 85px 72px 125px 115px minmax(0, 1.9fr) 80px; }
.fac-docs.fac-hist .cf-est small { white-space: normal; }   /* «SUN todavía no tiene el servidor…» completo (tablas, 28-10) */
.fac-docs .cf-est small { display: block; font-size: 12px; color: var(--suave); margin: 1px 0 0 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-docs .cf-est small.fac-rojo, .fac-rojo { color: #b3261e; }
/* Camila, 22-10: el cliente completo en el historial (antes se cortaba) y las empresas en una tabla corta. */
.fac-docs.fac-hist .cf-prov, .fac-docs.fac-hist .cf-prov b { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.fac-emps .cf-tr { grid-template-columns: minmax(0, 1.6fr) 90px 100px 70px 90px minmax(0, 1.3fr); }
.fac-emps .cf-enlace-b { text-align: right; }
.fac-dos-folios { margin: 0 0 12px; }
/* Ventas de tienda desde Shopify (22-10). */
.fac-tienda-int { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 13px; }
.fac-tienda-como { margin-top: 14px; padding: 18px 22px; }
.fac-tienda-como h2 { margin: 0 0 8px; font-size: 15.5px; }
.fac-tienda-como ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.fac-tienda-lista .cf-tr { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) 130px 110px minmax(0, 2fr); }
.fac-tienda-lista .cf-est small { display: block; font-size: 12px; color: var(--suave); }
@media (max-width: 760px) { .fac-tienda-lista .cf-tr { grid-template-columns: minmax(0, 1fr) auto; } .fac-tienda-lista .cf-th { display: none; } .fac-tienda-lista .cf-est { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .fac-emps .cf-tr { grid-template-columns: minmax(0, 1fr) auto; }
  .fac-emps .cf-th { display: none; }
  .fac-emps .cf-tr > :nth-child(2), .fac-emps .cf-tr > :nth-child(4), .fac-emps .cf-tr > :nth-child(5) { display: none; }
  .fac-emps .cf-tr > .cf-enlace-b { grid-column: 1 / -1; text-align: left; }
}
.fac-docs .cf-tr.fac-mal { background: #fdf6f5; }
.fac-docs .num.fac-nc { color: #b3261e; }
.fac-cond { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-pie-lista { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--linea); font-size: 13px; }
.fac-pie-lista a { color: var(--marca); font-weight: 700; text-decoration: none; margin-left: auto; }
.fac .cr-emp .fa-fact { color: var(--alerta); } .fac .cr-emp .fa-fact.ok { color: var(--ok); }
.fac-tot { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--suave); padding: 0 2px; }
.fac-tot b { color: var(--tinta); font-size: 15px; }
.fac-tot .crece { flex: 1; min-width: 200px; }
.fac-tot .cf-enlace-b { display: inline-flex; align-items: center; gap: 4px; }
.fac-tot .cf-enlace-b .ico { width: 14px; height: 14px; }
/* El documento y la revisión: la cabecera y los cuadritos del panel, en la página */
.fac-pag { display: flex; flex-direction: column; gap: 16px; }
.fac-pag > * { margin-top: 0; margin-bottom: 0; }
.fac-cab { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 18px 20px; }
.fac-datos { grid-template-columns: repeat(4, 1fr); }
.fac-ok { font-size: 13.5px; }
.fac-pie { position: static; margin: 12px 0 0; z-index: 5; border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.fac-pie form { margin: 0; }
.fac-pag .fa-sale-l b { color: var(--tinta); }
@media (max-width: 760px) {
  .fac-docs .cf-tr, .fac-docs.fac-hist .cf-tr, .fac-docs.fac-hist.fac-con-emp .cf-tr { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; }
  .fac-docs .cf-tr > span.cf-fecha { grid-column: 2; }
  .fac-docs .cf-tr > .cf-emp, .fac-docs .cf-tr > .fac-cond { grid-column: 1 / -1; grid-row: auto; font-size: 12.5px; }
  .fac-docs .cf-tr > .cf-acc-f { grid-column: 1 / -1; grid-row: auto; text-align: left; }
  .fac-docs .cf-tr > .cf-acc-f:empty { display: none; }
  .fac-datos { grid-template-columns: 1fr 1fr; }
  .fac-pie { bottom: 84px; padding: 12px; margin: 0; }
  .fac .cf-barra > .fac-nueva { order: 3; }
}
/* Cobranza (Camila, 20-10): el diseño de Compras — pestañas arriba, el corte y «⋯», las fuentes en una tira, cuatro
   cifras, tablas parejas que se ordenan tocando la cabecera y la entrada del historial en el panel de la derecha. */
.cbn { gap: 14px; }
.cbn .cf-barra-sola { border-bottom: 0; }
.cbn .cf-barra > .cf-menu { margin-bottom: 6px; }
.cbn .cf-barra-sola > .cf-menu { margin-bottom: 0; }
.cb-corte { display: inline-flex; align-items: center; gap: 6px; background: var(--papel); border: 1px solid var(--linea);
            border-radius: 10px; padding: 3px 10px; font-size: 13px; font-weight: 600; margin: 0; }
.cb-corte .ico { width: 14px; height: 14px; color: var(--suave); }
.cb-corte label { color: var(--suave); font-weight: 500; }
.cb-corte input { font: inherit; font-weight: 700; border: 0; background: transparent; color: var(--tinta); padding: 2px 0;
                  min-height: 0; min-width: 0; }
/* La tira de las fuentes: una línea que se abre para ver el detalle */
.cb-tira { display: block; padding: 0; overflow: hidden; }
.cb-tira > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; list-style: none; cursor: pointer; flex-wrap: wrap; }
/* Camila, 22-10: «es buena la alerta, la haría más pequeña»: una sola línea baja, con el detalle al lado del título. */
.cb-tira > summary { padding: 7px 14px; gap: 10px; }
.cb-tira > summary .cr-tira-ico { width: 24px; height: 24px; border-radius: 7px; }
.cb-tira > summary .cr-tira-ico svg { width: 14px; height: 14px; }
.cb-tira > summary .cr-tira-tx { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.cb-tira > summary .cr-tira-tx small { display: inline; }
/* «Te toca decidir» en una línea baja, como la alerta de fuentes (Camila, 22-10). */
.cr-tira.cb-toca { padding: 7px 14px; gap: 10px; }
.cr-tira.cb-toca .cr-tira-ico { width: 24px; height: 24px; border-radius: 7px; }
.cr-tira.cb-toca .cr-tira-ico svg { width: 14px; height: 14px; }
.cr-tira.cb-toca .cr-tira-tx { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.cr-tira.cb-toca .cr-tira-tx small { display: inline; }
.cb-toca-ir { font-size: 13px; font-weight: 600; text-decoration: underline; white-space: nowrap; }
/* La barra del total: vencido y por vencer. */
.cb-barra-t { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--gris); margin: 4px 0 2px; }
.cb-barra-t .v { background: var(--error); } .cb-barra-t .p { background: #9fd4b1; }
/* Los dos grupos de clientes (con vencido y al día), cada uno con su título separado de las fichas. */
#fichas { display: grid; gap: 14px; }
/* Las pestañas de los dos tipos de cliente (Camila, 22-10), con cuántos hay en cada una. */
#fichas > .cb-grupos { margin: 10px 0 0; justify-self: start; max-width: 100%; }
.cb-grupos a { display: inline-flex; align-items: center; gap: 8px; }
/* El saldo de apertura: el cliente que es más de la mitad del saldo, destacado (Camila, 22-10). */
.cb-ficha.cb-ficha-grande { grid-column: span 2; }
@media (max-width: 760px) { .cb-ficha.cb-ficha-grande { grid-column: auto; } }
.cb-ap-nota { margin: -6px 2px 0; }
.cb-grupos-n { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--gris); }
.cb-grupos a.activa .cb-grupos-n { background: var(--marca-suave, #eceef1); }
#fichas > .cx-grupo { margin: 8px 2px -2px !important; }
#fichas > .cx-grupo + * + .cx-grupo { margin-top: 18px !important; }
.cb-cifras b.g.chico { display: inline; font-size: inherit; font-weight: 600; color: inherit; }
.cb-tira > summary::-webkit-details-marker { display: none; }
.cb-tira .cr-tira-tx u { text-underline-offset: 2px; }
.cb-tira[open] .cr-tira-tx u { display: none; }
.cb-tira > summary .boton { width: auto; min-height: 0; padding: 8px 16px; font-size: 13.5px; flex: none; }
.cb-tira > summary .boton:not(.claro) { background: var(--marca); border-color: var(--marca); color: #fff; }
.cb-tira.al { border-color: var(--alerta-borde); }
.cb-tira .x-fuentes { border-top: 1px solid var(--linea); }
/* Las cifras: los montos en pesos completos caben en el cuadro */
.cb-cifras .cr-cifra b { font-size: 26px; white-space: nowrap; }
.cb-cifras .cr-cifra b.venc { color: var(--error); }
.cb-partes { display: block; }
.cb-partes .viejo { display: block; color: #8f5200; font-size: 11.5px; }
/* Las tablas parejas de Cobranza: las columnas de cada una */
.cb-clientes .cf-tr { grid-template-columns: minmax(0, 2fr) 80px 120px 120px 130px 110px; }
.cb-ap .cf-tr { grid-template-columns: minmax(0, 2fr) 80px minmax(0, 1.2fr) 130px; }
.cb-facturas .cf-tr { grid-template-columns: minmax(0, 1.2fr) 100px minmax(0, 1.1fr) minmax(0, 1.4fr) 120px 40px; }
/* Saldo de apertura: la 2.ª columna es el asiento («MISCE/2026/01/0136»), más largo que una fecha (tablas, 28-10) */
.cb-facturas[data-apertura-cliente] .cf-tr { grid-template-columns: minmax(0, 0.8fr) 170px minmax(0, 1.1fr) minmax(0, 1.3fr) 120px 40px; }
.cb-facturas[data-apertura-cliente] .cf-tr > :nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-pag-cli .cf-tr { grid-template-columns: minmax(0, .9fr) 100px minmax(0, 1.8fr) minmax(0, 1fr) 120px 40px; }
.cb-pagadas .cf-tr { grid-template-columns: minmax(0, 1.5fr) 90px 100px minmax(0, 1fr) minmax(0, 1.7fr) 110px 40px; }
.cb-hist .cf-tr { grid-template-columns: minmax(0, 1.5fr) 80px 100px 90px minmax(0, 1fr) minmax(0, 1.1fr) 70px 110px; }
.cb-cambios .cf-tr { grid-template-columns: minmax(0, 2.4fr) 140px minmax(0, .9fr) 140px; }
.cb-cambios .cf-prov b { font-weight: 600; }
/* Camila, 22-10: el texto completo (baja a otra línea), el antes → después debajo y la etiqueta «contado». */
.cb .cb-cambios .cf-prov { white-space: normal; overflow: visible; }
.cb .cb-cambios .cf-prov b, .cb .cb-cambios .x-item b { white-space: normal !important; overflow-wrap: anywhere; }
.cb .cb-cambios .cf-prov { min-width: 0; }
.cb-cambio { display: block; margin-top: 2px; font-size: 12.5px; color: var(--suave); font-weight: 400; }
.cb-contado { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
  background: var(--gris); color: var(--suave); vertical-align: 1px; }
/* El historial de facturas (Camila, 22-10: como Compras): la factura y si está pagada y cómo. */
.cb .cb-vista { justify-self: start; width: max-content; max-width: 100%; margin: 0 0 14px; }
.cb .cb-dos-seg { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.cb .cb-hf-barra { align-items: center; flex-wrap: wrap; gap: 10px; }
.cb .cb-hf-barra > .cb-vista { margin: 0; }
.cb .cb-hf-menus { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.cb .cb-dos-seg > .seg-links { margin: 0; }
.cb-hfac .cf-tr { grid-template-columns: minmax(0, 1.9fr) 90px 100px 110px minmax(0, 1.5fr); }
.cb-hfac .cf-est small { display: block; margin-top: 2px; font-size: 12px; color: var(--suave); }
.cb-hfac .cb-buscar { margin: 0 0 10px; }
@media (max-width: 760px) {
  .cb .cb-hfac .cf-tr { grid-template-columns: minmax(0, 1fr) auto !important; }
  .cb .cb-hfac .cf-fila-f > :first-child { grid-column: 1; grid-row: 1; }
  .cb .cb-hfac .cf-fila-f > b.num { grid-column: 2; grid-row: 1; }
  .cb .cb-hfac .cf-fila-f > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .cb .cb-hfac .cf-fila-f > :nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }
  .cb .cb-hfac .cf-fila-f > .cf-est { grid-column: 1 / -1; grid-row: 3; }
  .cb .cb-hfac .cf-th { display: none; }
}
/* Crédito o contado en Pagadas (22-10). */
.cb .cb-tipo { justify-self: start; width: max-content; max-width: 100%; margin: 0 0 14px; }
.cb .cb-como > .cb-sin-caja em { min-width: 0; margin-left: auto; }
.cb span.cf-prov::after { display: none; }
.cb .cb-cambios .x-item { display: block; padding: 0; border: 0; background: none; box-shadow: none; }
.cb .cb-tabla .cf-prov b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Historial y Pagadas: el cliente en dos líneas antes que cortado (tablas, 28-10; va después de la regla de arriba) */
.cb .cb-hfac .cf-prov, .cb .cb-hfac .cf-prov b, .cb .cb-pagadas .cf-prov, .cb .cb-pagadas .cf-prov b { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.cb .cb-tabla .cf-tr .venc { color: var(--error); }
.cb .cb-tabla .cf-tr small { color: var(--suave); font-size: 12px; }
.cb .cb-suma { background: var(--gris-cab); font-weight: 700; }
.cb .cb-suma:hover { background: var(--gris-cab) !important; }
.cb-acc { text-align: right; position: relative; z-index: 1; }
.cb .cb-tabla .cf-tr.x-excl { color: var(--tenue); }
.cb .cb-tabla .cf-tr.x-excl > b { text-decoration: line-through; color: var(--tenue); }
.cb .cb-tabla .x-como { font-size: 13.5px; min-width: 0; }
.cb .cb-fte small { display: block; margin-top: 2px; }
.cb-nota-fila { grid-column: 1 / -1; margin: 2px 0 0; }
.cb .cb-tabla .x-or { white-space: nowrap; }
.cb-datos { grid-template-columns: repeat(4, 1fr); }
.cb-datos dd b.g { font-size: 20px; font-family: var(--letra-titulos); display: block; }
.cb-datos dd b.venc { color: var(--error); }
.cb-datos dd small { display: block; }
.cb-excl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cb .cf-vacio b { color: var(--tinta); }
.cb-apertura { display: flex; flex-direction: column; gap: 10px; margin-top: 10px !important; padding-top: 18px;
               border-top: 1px dashed var(--linea-fuerte); }
.cb-apertura .cx-grupo { margin-top: 0 !important; }
.cb-sec-ap { margin-top: 10px !important; padding-top: 18px; border-top: 1px dashed var(--linea-fuerte); }
/* Te toca: cada caso en una fila pareja, con sus botones a la derecha */
.cb-casos { padding: 0 !important; overflow: hidden; }
.cb .cb-casos .x-caso, .cb .cb-casos .x-calza { padding: 14px 18px; border-top: 1px solid var(--linea); border-bottom: 0; }
.cb .cb-casos > :first-child { border-top: 0; }
.cb .cb-casos .x-b { font-size: 13px; padding: 7px 13px; }
.cb .cb-casos .x-b.p { background: var(--marca); border-color: var(--marca); }
.cb .cb-casos .x-tipo { font-size: 11.5px; }
/* Pagadas › historial: lo pagado del mes y sus medios, lado a lado */
.cb-mes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 14px; }
.cb-mes .cr-cifra b { font-size: 26px; }
.cb-mes .x-medios { padding: 16px 18px !important; margin: 0; }
.cb-rot { font-size: 13px; color: var(--suave); }
.cb-clientes-pop { max-height: 340px; min-width: 240px; }
.cb-despues { color: var(--ok); }
.x-modal .x-pregunta { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
@media (max-width: 1100px) { .cb-datos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .cb-mes { grid-template-columns: 1fr; }
  .cb-cifras .cr-cifra b { font-size: 21px; }
  .cb-tira > summary .boton { flex: 1 1 100%; }
  /* En el celular cada fila en dos o tres líneas: lo principal arriba, el monto a la derecha */
  .cb .cb-tabla .cf-tr { grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 3px; column-gap: 10px; }
  .cb .cb-tabla .cf-tr > * { grid-column: auto; grid-row: auto; }
  .cb .cb-tabla .cf-th { display: none; }
  .cb .cb-clientes .cb-n, .cb .cb-clientes .cb-barra-c, .cb .cb-clientes .cb-pv { display: none; }
  .cb .cb-clientes .cf-tr > .cf-prov, .cb .cb-clientes .cf-tr > b:first-child { grid-column: 1; grid-row: 1; }
  .cb .cb-clientes .cf-tr > b.num { grid-column: 2; grid-row: 1; }
  .cb .cb-clientes .cf-fila-f > .cb-v { grid-column: 1 / -1; grid-row: 2; text-align: left; font-size: 12.5px; }
  .cb .cb-clientes .cf-fila-f > .cb-v::before { content: "Vencido "; color: var(--suave); }
  .cb .cb-clientes .cb-suma > .cb-v, .cb .cb-clientes .cb-suma > span:last-child { display: none; }
  .cb .cb-ap .cf-tr > :nth-child(2), .cb .cb-ap .cb-suma > :nth-child(3) { display: none; }
  .cb .cb-ap .cf-tr > :first-child { grid-column: 1; grid-row: 1; } .cb .cb-ap .cf-tr > b.num { grid-column: 2; grid-row: 1; }
  .cb .cb-ap .cf-fila-f > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; }
  .cb .cb-facturas .cf-tr, .cb .cb-pag-cli .cf-tr { grid-template-columns: minmax(0, 1fr) auto 34px !important; }
  .cb .cb-facturas .cf-tr > :first-child { grid-column: 1; grid-row: 1; }
  .cb .cb-facturas .cf-tr > b.num { grid-column: 2; grid-row: 1; }
  .cb .cb-facturas .cf-fila-f > .cb-acc { grid-column: 3; grid-row: 1 / span 2; }
  .cb .cb-facturas .cf-fila-f > .cf-est { grid-column: 1 / 3; grid-row: 2; }
  .cb .cb-facturas .cf-fila-f > :nth-child(2), .cb .cb-facturas .cf-fila-f > :nth-child(3) { display: none; }
  .cb .cb-facturas .cb-suma > span { display: none; }
  .cb .cb-pag-cli .cf-fila-f > :first-child { grid-column: 1; grid-row: 1; }
  .cb .cb-pag-cli .cf-fila-f > b.num { grid-column: 2; grid-row: 1; }
  .cb .cb-pag-cli .cf-fila-f > .cb-acc { grid-column: 3; grid-row: 1; }
  .cb .cb-pag-cli .cf-fila-f > :nth-child(2) { display: none; }
  .cb .cb-pag-cli .cf-fila-f > .x-como, .cb .cb-pag-cli .cf-fila-f > :nth-child(4), .cb .cb-pag-cli .cb-nota-fila { grid-column: 1 / -1; }
  .cb .cb-pagadas .cf-tr, .cb .cb-hist .cf-tr { grid-template-columns: minmax(0, 1fr) auto auto !important; }
  .cb .cb-pagadas .cf-tr > :first-child, .cb .cb-hist .cf-tr > :first-child { grid-column: 1 / 3; grid-row: 1; }
  .cb .cb-pagadas .cf-tr > b.num, .cb .cb-hist .cf-tr > b.num { grid-column: 3; grid-row: 1; }
  .cb .cb-pagadas .cf-fila-f > :nth-child(2), .cb .cb-hist .cf-fila-f > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .cb .cb-pagadas .cf-fila-f > :nth-child(3), .cb .cb-hist .cf-fila-f > :nth-child(4) { grid-column: 2 / -1; grid-row: 2; text-align: right; }
  .cb .cb-pagadas .cf-fila-f > :nth-child(4), .cb .cb-hist .cf-fila-f > :nth-child(5) { grid-column: 1; grid-row: 3; }
  .cb .cb-hist .cf-fila-f > .cb-fte { grid-column: 2 / -1; grid-row: 3; text-align: right; }
  /* Pagadas (21-10): «Cómo se supo» en su propia fila; antes se montaba sobre el medio («Tra Cartola ia»). */
  .cb .cb-pagadas .cf-fila-f > .cb-fte { grid-column: 1 / 3; grid-row: 4; text-align: left; }
  .cb .cb-pagadas .cf-fila-f > .cb-acc { grid-column: 3; grid-row: 4; }
  .cb .cb-hist .cf-fila-f > :nth-child(3), .cb .cb-hist .cf-tr > .cb-dem, .cb .cb-hist .cf-th > [data-col="demoro"] { display: none; }
  .cb .cb-pagadas .cb-suma > span, .cb .cb-hist .cb-suma > span { display: none; }
  .cb .cb-cambios .cf-fila-f > .cf-prov { grid-column: 1 / -1; grid-row: 1; }
  .cb .cb-cambios .cf-fila-f > .cf-prov b { white-space: normal; }
  .cb .cb-cambios .cf-fila-f > :nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12.5px; }
  .cb .cb-cambios .cf-fila-f > :nth-child(3) { grid-column: 1; grid-row: 3; font-size: 12.5px; }
  .cb .cb-cambios .cf-fila-f > .cf-est { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .cb-datos { grid-template-columns: 1fr 1fr; }
}

/* Cierre contable (Camila, 20-10): el diseño de Compras — el mes ‹ › y «⋯» arriba, cuatro cifras, una tira con cuándo
   revisó SUN, una tarjeta por empresa, las 9 tareas en filas parejas y «Cerrar» en el panel de la derecha. */
.cmn { gap: 14px; }
.cmn .cf-barra-sola { border-bottom: 0; }
.cmn .cf-barra .crece { flex: 1; }
.cmn .cf-barra-sola .cf-pildora .ico { width: 13px; height: 13px; }
.cmn .cf-pildora:has(.ico)::before { display: none; }
.cf-mesnav small { font-weight: 400; font-size: 12px; }
.cm-cifras .cr-cifra.cm-lista { border-color: color-mix(in srgb, var(--ok) 40%, var(--linea)); background: var(--ok-suave); }
.cm-cifras .cr-cifra.cm-lista b { color: var(--ok); }
.cmn .cr-tira form { margin: 0; }
.cmn .cr-tira .boton { width: auto; min-height: 0; padding: 8px 14px; font-size: 13.5px; }
.cm-empresas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmn .cm-emp { gap: 0; padding: 20px; }
.cmn .cm-emp .cr-sub { display: flex; align-items: center; gap: 6px; }
.cmn .cm-emp .cr-sub .ico { width: 14px; height: 14px; }
.cm-barra-emp { margin: 10px 0 12px; }
.cmn .cm-emp .cm-falta { flex: 1; font-size: 13.5px; }
.cmn .cr-pie { align-items: center; }
.cmn .cr-pie form { margin: 0; }
.cmn .cr-pie .boton .ico { width: 15px; height: 15px; }
.cm-meses .cf-tr { grid-template-columns: minmax(0, 1.2fr) 110px 110px minmax(0, 1.4fr); }
.cm-hist .cf-tr { grid-template-columns: minmax(0, 1fr) auto; }
.cm-hist small { font-size: 12.5px; }
.cm-tira { align-items: center; }
.cm-tira-n { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px;
             border-radius: 14px; background: var(--gris-cab); border: 1px solid var(--linea); line-height: 1; }
.cm-tira-n b { font-family: var(--letra-titulos); font-size: 26px; }
.cm-tira-n small { font-size: 11.5px; color: var(--suave); margin-top: 2px; }
.cm-tira .cm-barra { margin: 8px 0 6px; max-width: 560px; }
.cm-tira small.cm-leyenda { display: flex; }
.cm-tira-cerrado .cr-tira-ico { background: var(--tinta); color: #fff; }
.cm-tareas { padding: 0 !important; overflow: hidden; }
.cm-tareas > .cm-tarea:first-child { border-top: 0; }
.cmn .cm-tarea { padding: 16px 20px; }
.cmn .cm-tarea.mal { background: var(--papel); }
.cmn .cm-form .botones .boton:not(.claro) { background: var(--marca); border-color: var(--marca); color: #fff; }
.cmn .cm-cerrar { padding: 16px 20px; }
.cmn .cm-cerrar .boton { min-width: 0; min-height: 0; padding: 10px 18px; font-size: 14px; }
.cmn .cm-cerrar .boton:not([disabled]) { background: var(--marca); border-color: var(--marca); color: #fff; }
.cmn .cm-hizo .it { padding: 14px 20px; }
.cmn .cx-grupo .cm-sello { margin-right: 6px; }
/* El panel de «Cerrar el mes» y la página de «Reabrir», con el estilo del panel de la factura */
.cf-cajon .cm-confirmar { border: 0; border-radius: 0; box-shadow: none; gap: 18px; }
.cf-cajon .cm-confirmar h2 { font-size: 22px; }
.cm-confirmar .cm-archivos { grid-template-columns: 1fr; }
.cm-confirmar .cf-check span small { margin-top: 2px; }
.cmn.cm-una { max-width: 760px; }
.cm-panel { padding: 26px 28px 0 !important; gap: 18px; }
.cm-panel .cf-pie-fijo { border-radius: 0 0 var(--radio) var(--radio); }
.cm-panel .cf-pildora .ico { width: 13px; height: 13px; }
@media (max-width: 1100px) { .cm-empresas { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .cm-meses .cf-tr { grid-template-columns: minmax(0, 1fr) auto !important; }
  .cm-meses .cf-tr > * { grid-column: auto !important; grid-row: auto !important; }
  .cm-meses .cf-tr > :nth-child(3) { display: none; }
  .cm-meses .cf-tr > .cf-est { grid-column: 1 / -1 !important; }
  .cm-hist .cf-tr { grid-template-columns: minmax(0, 1fr) auto !important; }
  .cm-hist .cf-tr > * { grid-column: auto !important; grid-row: auto !important; }
  .cmn .cm-tarea { padding: 14px 16px; }
  .cm-panel { padding: 18px 16px 0 !important; }
}

/* Compras en celular: metadatos separados y acciones debajo del estado. */
@media (max-width: 760px) {
  .cf-pp .cf-fila-f > span:last-child { grid-column: 1 / -1; grid-row: 4; justify-self: end; }
  .cf-pp .cf-fila-f > span.suave:not(.cf-folio):not(.cf-fecha):not(.num) { grid-column: 1 / -1; grid-row: 5; }
  .cf-pp-proveedores .cf-fila-f { grid-template-columns: minmax(0, 1fr) auto; }
  .cf-pp-proveedores .cf-fila-f > * { grid-column: 1 / -1; grid-row: auto; }
  .cf-pp-proveedores .cf-fila-f > .cf-prov { grid-column: 1 / -1; grid-row: 1; }
  .cf-pp-proveedores .cf-fila-f > .num { text-align: left; white-space: normal; }
  .cf-pp-proveedores .cf-fila-f > span:last-child { grid-row: auto; }
  .cf-pp-proveedores [data-etiqueta]::before { content: attr(data-etiqueta) ": "; font-weight: 400; color: var(--suave); }
  .cf-pp .cf-suma { display: flex; flex-wrap: wrap; justify-content: space-between; }
}
@media (max-width: 599px) {
  body:has(.cf-pp) header .cifras { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  body:has(.cf-pp) header .cifras > div { min-width: 0; gap: 4px; }
  body:has(.cf-pp) header .cifras > div + div { border-left: 0; border-top: 1px solid var(--g600); }
}
.bn-det .bn-rut { display: block; font-weight: 400; }
.bn-hoja:has(.bn-t-subir) { max-width: 880px; }

/* ── Rendiciones (fondos por rendir, 21-10; dibujos rend-R1, rend-R3, cont-C1/C2/C3) ─────────────────────────────── */
.rd { display: grid; gap: 16px; }
.rd .boton.rd-prim { background: var(--marca); color: #fff; border: 0; }
.rd .boton.rd-prim:hover { filter: brightness(1.12); }
.rd .boton.ch { width: auto; min-height: 0; padding: 9px 16px; font-size: 14px; }
.rd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px;
  font-weight: 700; white-space: nowrap; background: var(--gris); color: var(--suave); }
.rd-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rd-chip.ok { background: var(--ok-suave); color: var(--ok); }
.rd-chip.tarde, .rd-chip.medio { background: var(--alerta-suave); color: var(--alerta); }
.rd-chip.fallo { background: var(--error-suave); color: var(--error); }
.rd-chip.pendiente { background: var(--marca); color: #fff; }
.rd-mini { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(160deg, #eceff2, #d9dde2);
  display: block; overflow: hidden; flex: none; object-fit: cover; }
.rd-mini.g { width: 42px; height: 50px; }
.rd-nota { background: var(--gris-cab); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; font-size: 13.5px;
  color: var(--suave); margin: 0; }
.rd-nota b { color: var(--tinta); }

/* Las listas de Contabilidad (C1) */
.rd-lista .cf-tr { --cf-cols: minmax(0, 1.5fr) 110px 110px 110px minmax(200px, 1.2fr); align-items: center; }
.rd-lista .rd-chip { white-space: normal; }
.rd-lista a.cf-fila-f { color: inherit; text-decoration: none; }
.rd-lista .cf-suma > span { grid-column: auto; }
/* Rendiciones (Camila, 26-10): gastó de más, en palabras y en color. */
.rd .rd-queda.rd-demas, .rd b.tarde { color: var(--alerta); }
.rd .rd-demas-tx { display: block; margin-top: 4px; }
.rd-cuadros > div > small.suave { display: block; margin-top: 2px; font-size: 12px; }
.rd-form label.cf-buscar { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.rd-form label.cf-buscar input { border: 0; padding: 4px 0; }
.rd-mov { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: end; }
.rd-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-cab .crece { flex: 1; }

/* La rendición (C2) */
.rd-cuadros { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--papel); border: 1px solid var(--linea);
  border-radius: 14px; overflow: hidden; }
.rd-cuadros > div { padding: 12px 16px; border-left: 1px solid var(--linea); min-width: 0; }
.rd-cuadros > div:first-child { border-left: 0; }
.rd-cuadros small { display: block; font-size: 12.5px; color: var(--suave); }
.rd-cuadros b { font-size: 17px; }
.rd-cuadros b.tarde { color: var(--alerta); } .rd-cuadros b.ok { color: var(--ok); }
.rd-gastos .cf-tr { --cf-cols: 40px minmax(0, 2fr) 70px 110px minmax(130px, 1fr) minmax(170px, 1.2fr); align-items: center; }
.rd-gastos .rd-g { color: inherit; text-decoration: none; display: block; min-width: 0; }
.rd-gastos .rd-g b { display: block; }
.rd-gastos .rd-g small { color: var(--suave); }
.rd-gastos select { font: inherit; font-size: 13.5px; border: 1px solid var(--linea); border-radius: 8px; padding: 5px 8px;
  background: var(--papel); max-width: 100%; }
.rd-gastos .cf-tr.rd-fuera { opacity: .6; }
.rd-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--linea); }
.rd-pie .rd-nota { flex: 1; min-width: 260px; }
.rd-pie form { margin: 0; }
.rd-dev { position: relative; }
.rd-dev summary { list-style: none; cursor: pointer; }
.rd-dev summary::-webkit-details-marker { display: none; }
.rd-dev[open] .rd-dev-caja { position: absolute; right: 0; bottom: calc(100% + 8px); width: min(360px, 86vw); z-index: 5; }
.rd-dev-caja { background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: 14px; padding: 14px;
  box-shadow: var(--sombra2); display: grid; gap: 10px; }
.rd-dev-caja textarea, .rd-form input, .rd-form select, .rd-form textarea { font: inherit; width: 100%;
  border: 1px solid var(--linea-fuerte); border-radius: 10px; padding: 10px 12px; background: var(--papel); }
.rd-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rd-lado .tarjeta h2 { margin-top: 0; font-size: 15.5px; }
.rd-hist { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.rd-hist li { padding: 7px 0; border-top: 1px solid var(--linea); display: flex; gap: 10px; }
.rd-hist li:first-child { border-top: 0; }
.rd-hist .suave { white-space: nowrap; }

/* Un gasto (C3) */
.rd-c3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.rd-foto { background: linear-gradient(160deg, #e4e7eb, #d3d8de); border-radius: 16px; min-height: 520px; display: flex;
  align-items: center; justify-content: center; overflow: hidden; }
.rd-foto img { max-width: 100%; max-height: 640px; display: block; }
.rd-foto iframe { width: 100%; height: 640px; border: 0; background: #fff; }
.rd-foto .rd-sin { color: var(--suave); font-size: 14px; }
.rd-datos { display: flex; flex-direction: column; gap: 14px; }
.rd-grilla { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.rd-grilla > div { padding: 10px 14px; border-top: 1px solid var(--linea); min-width: 0; }
.rd-grilla > div:nth-child(-n+2) { border-top: 0; }
.rd-grilla > div:nth-child(even) { border-left: 1px solid var(--linea); }
.rd-grilla small { display: block; font-size: 12.5px; color: var(--suave); }
.rd-grilla b { font-size: 15.5px; overflow-wrap: anywhere; }
.rd-datos .rd-pie { margin-top: auto; justify-content: space-between; }
.rd-pasos { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }

/* La persona: Mi fondo por rendir (R1) y Agregar un gasto (R3), celular primero */
.rd-yo { max-width: 560px; margin: 0 auto; width: 100%; padding-bottom: 96px; }
.rd-saldo { background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; padding: 16px 18px; box-shadow: var(--sombra); }
.rd-saldo small { color: var(--suave); font-size: 13px; }
.rd-saldo .rd-queda { display: block; font-size: 30px; font-weight: 700; font-family: var(--letra-titulos); margin: 2px 0 12px; }
.rd-barra { height: 8px; border-radius: 99px; background: var(--gris); overflow: hidden; }
.rd-barra i { display: block; height: 100%; background: var(--marca); border-radius: 99px; }
.rd-saldo .rd-bajo { display: flex; justify-content: space-between; font-size: 13px; color: var(--suave); margin-top: 6px; }
.rd .boton.rd-agregar { min-height: 52px; font-size: 16px; border-radius: 14px; }
.rd-mis { background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.rd-mi { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px;
  border-top: 1px solid var(--linea); }
.rd-mi:first-child { border-top: 0; }
.rd-mi b { display: block; font-size: 15px; }
.rd-mi small { display: block; color: var(--suave); font-size: 13px; }
.rd-mi .rd-chip { margin-top: 4px; }
.rd-mi .rd-monto { font-weight: 700; white-space: nowrap; text-align: right; }
.rd-mi form { margin: 4px 0 0; text-align: right; }
.rd-mi .rd-motivo { grid-column: 2 / -1; font-size: 13px; color: var(--error); margin: 0; }
.rd-quitar { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--suave);
  text-decoration: underline; cursor: pointer; }
.rd-enviar { position: sticky; bottom: 0; z-index: 30; background: var(--papel); border: 1px solid var(--linea);
  border-radius: 16px; padding: 12px 14px; box-shadow: var(--sombra2); }
.rd-enviar > div { display: flex; gap: 10px; align-items: center; }
.rd-enviar .suave { flex: 1; font-size: 13px; }
.rd-enviar .boton { width: auto; flex: none; padding: 12px 22px; }
.rd-elegir { display: flex; gap: 8px; overflow-x: auto; }
.rd-elegir a { white-space: nowrap; }
.rd-form { display: grid; gap: 14px; }
.rd-form label { display: grid; gap: 4px; font-size: 13.5px; color: var(--suave); }
.rd-form .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rd-camara { position: relative; display: grid; place-items: center; gap: 6px; min-height: 150px; border: 2px dashed var(--linea-fuerte);
  border-radius: 16px; background: var(--gris-cab); color: var(--suave); cursor: pointer; text-align: center; padding: 14px; }
.rd-camara.lista { border-style: solid; border-color: #8fd1b0; background: #1d2126; }
.rd-camara img { max-height: 260px; max-width: 100%; border-radius: 10px; }
.rd-camara input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rd-tipo { display: grid; grid-template-columns: 1fr 1fr; background: var(--gris); border-radius: 12px; padding: 4px; }
.rd-tipo a { text-align: center; padding: 9px; border-radius: 9px; text-decoration: none; color: var(--suave); font-weight: 700; font-size: 14px; }
.rd-tipo a.activa { background: var(--papel); color: var(--tinta); box-shadow: var(--sombra); }
.rd-sii { display: grid; max-height: 360px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 14px; background: var(--papel); }
.rd-form .rd-sii label { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-top: 1px solid var(--linea); color: var(--tinta); cursor: pointer; font-size: 14px; }
.rd-sii label:first-child { border-top: 0; }
.rd-sii label:has(input:checked) { background: var(--marca-suave); }
.rd-form .rd-sii input { width: auto; }
.rd-sii small { display: block; color: var(--suave); }
.rd-propuesta { background: var(--ok-suave); border: 1px solid #c4e2cf; border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.rd-a-mano summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 6px 0; }

@media (max-width: 900px) {
  .rd-c3, .rd-lado { grid-template-columns: 1fr; }
  .rd-foto { min-height: 280px; }
}
@media (max-width: 760px) {
  .rd-cuadros { grid-template-columns: 1fr 1fr; }
  .rd-cuadros > div:nth-child(3) { border-left: 0; }
  .rd-cuadros > div:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .rd-gastos .cf-tr { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 4px; }
  .rd-gastos .cf-tr > * { grid-column: auto; grid-row: auto; }
  .rd-gastos .cf-tr > .rd-mini { grid-column: 1; grid-row: 1 / span 3; }
  .rd-gastos .cf-tr > .rd-g { grid-column: 2; grid-row: 1; }
  .rd-gastos .cf-tr > .num { grid-column: 3; grid-row: 1; }
  .rd-gastos .cf-tr > .rd-fecha { display: none; }
  .rd-gastos .cf-tr > .rd-sii-c, .rd-gastos .cf-tr > .rd-va { grid-column: 2 / -1; }
  .rd-gastos .cf-th { display: none; }
  .rd-lista .cf-tr { grid-template-columns: minmax(0, 1fr) auto; }
  .rd-lista .cf-tr > * { grid-column: auto; grid-row: auto; }
  .rd-lista .cf-tr > .rd-oculta { display: none; }
  .rd-lista .cf-tr > .cf-est { grid-column: 1 / -1; }
  .rd-pie { flex-direction: column; align-items: stretch; }
  .rd-pie .boton, .rd-pie form, .rd-pie details { width: 100%; }
  .rd-dev[open] .rd-dev-caja { position: static; width: auto; margin-top: 8px; }
}
#lleva-numero-caja[hidden] { display: none; }

/* Rendiciones: la factura del proveedor que dice el motivo del fondo (Camila, 21-10). */
.pill-motivo { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
               background: var(--ok-suave); color: var(--ok); vertical-align: 1px; }

/* Ventas, el Resumen (Camila, 27-10: mockup «C + D»): el libro de ventas del mes y lo que te toca al lado. */
/* El libro a todo lo ancho y «Te toca» debajo (Camila, 27-10: al lado, la tabla no cabía pareja). */
.vn .vr-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 18px; }
.vn .vr-libro, .vn .vr-lado { padding: 18px 20px; }
.vn .vr-libro h2, .vn .vr-lado h2 { margin: 0 0 10px; font-size: 16px; font-family: var(--letra-titulos); font-weight: 600; }
.vn .vr-rueda { overflow-x: auto; margin: 0 -6px; }
.vn .vr-libro table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.vn .vr-libro th { font-size: 12.5px; font-weight: 500; color: var(--suave); text-align: right; padding: 8px 8px;
                   border-bottom: 1px solid var(--linea); white-space: nowrap; }
.vn .vr-libro td { padding: 10px 8px; text-align: right; border-bottom: 1px solid var(--linea); white-space: nowrap; }
/* Parejo (Camila, 27-10): el nombre del documento en una línea y el estado a la izquierda, en su columna. */
.vn .vr-libro th:first-child, .vn .vr-libro td:first-child { text-align: left; }
.vn .vr-libro th:last-child, .vn .vr-libro td:last-child { text-align: left; padding-left: 18px; white-space: normal; min-width: 150px; }
.vn .vr-libro .vr-grupo td { background: var(--fondo); font-weight: 700; font-size: 13.5px; }
.vn .vr-libro .vr-cero td { color: var(--tenue); }
.vn .vr-libro .vr-tot { font-weight: 600; }
.vn .vr-libro .vr-local td { font-size: 12.5px; color: var(--suave); padding-top: 6px; padding-bottom: 6px; }
.vn .vr-libro .vr-local td:first-child { padding-left: 24px; }
.vn .vr-libro tfoot td { font-weight: 700; border-top: 2px solid var(--linea-fuerte); border-bottom: 0; }
.vn .vr-libro td.vr-falta { text-align: left; color: var(--alerta); white-space: normal; }
.vn .vr-ok { color: var(--ok); }
.vn .vr-mal { color: var(--alerta); }
.vn .vr-nota { margin: 12px 0 0; font-size: 12.5px; color: var(--suave); }
.vn .vr-it { display: block; padding: 10px 0; border-bottom: 1px solid var(--linea); color: inherit; text-decoration: none; }
.vn .vr-it:hover b { text-decoration: underline; }
.vn .vr-it b { display: block; font-size: 14px; }
.vn .vr-it small { display: block; color: var(--suave); font-size: 12.5px; margin-top: 2px; }
.vn .vr-resolver { display: block; text-align: center; margin: 14px 0 4px; }
.vn .vr-h2b { margin-top: 20px !important; padding-top: 16px; border-top: 1px solid var(--linea); }
.vn .vr-robot b { display: block; }
.vn .vr-robot small { display: block; color: var(--suave); font-size: 12.5px; margin-top: 2px; }
.vn .vr-traer { width: 100%; justify-content: center; margin-top: 12px; }
.vn .vr-vacio { margin: 6px 0; }
@media (max-width: 700px) { .vn .vr-libro, .vn .vr-lado { padding: 14px 12px; } .vn .vr-libro table { font-size: 13px; } }

/* Ventas › Documentos (Camila, 27-10, opción A): pestañas por tipo, filtros, más columnas, Boletas y «Cobrar». */
.vd-tabs a.vd-al b { color: var(--alerta); }
.vd-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.vd-f { padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; font-size: 13px; background: var(--papel);
        color: var(--tinta); text-decoration: none; white-space: nowrap; }
.vd-f.on { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
/* Las 7 columnas de Documentos, igual en Compras (Camila, 28-10). */
.vd-docs .cf-tr { grid-template-columns: minmax(0, 2fr) 84px 92px 92px 110px 110px minmax(0, 1.2fr); column-gap: 10px; }
.vd-docs.vn-con-emp .cf-tr { grid-template-columns: minmax(0, 2fr) 90px 84px 92px 92px 110px 110px minmax(0, 1.2fr); }
.vd-docs .vd-venc { display: block; font-size: 11.5px; }
.vd-docs .vd-saldo { font-size: 13px; }
.vd-docs .vd-cta { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-docs .vd-pie { border-top: 2px solid var(--linea-fuerte); }
.vn-ok { color: var(--ok); }
.vn-mal { color: var(--alerta); }
.vd-nota { margin: 10px 2px 0; font-size: 12.5px; color: var(--suave); }
.vd-tabla { padding: 4px 8px; }
.vd-rueda { overflow-x: auto; }
.vd-tabla table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.vd-tabla th { font-size: 12px; font-weight: 500; color: var(--suave); text-align: right; padding: 10px 8px;
               border-bottom: 1px solid var(--linea); white-space: nowrap; }
.vd-tabla td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.vd-tabla .l { text-align: left; }
.vd-tabla tfoot td { font-weight: 700; border-top: 2px solid var(--linea-fuerte); border-bottom: 0; }
.vd-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--fondo); color: var(--suave); }
.vd-chip.ok { background: var(--ok-suave); color: var(--ok); }
.vd-cobrar .cf-opcion { margin-top: 10px; }
.vd-hist .vd-h { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 0;
                 border-bottom: 1px solid var(--linea); font-size: 13px; }
.vd-hist .vd-h small { color: var(--suave); }
@media (max-width: 1180px) { .vd-docs .cf-tr > .vd-c { display: none; }
  .vd-docs .cf-tr { grid-template-columns: minmax(0, 2fr) 84px 92px 110px 110px minmax(0, 1fr); }
  .vd-docs.vn-con-emp .cf-tr { grid-template-columns: minmax(0, 2fr) 90px 84px 92px 110px 110px minmax(0, 1fr); } }
@media (max-width: 760px) {
  .vd-docs .cf-tr, .vd-docs.vn-con-emp .cf-tr { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .vd-docs .cf-tr > * { grid-column: auto; grid-row: auto; }
  .vd-docs .cf-tr > .cf-prov { grid-column: 1; } .vd-docs .cf-tr > b.num { grid-column: 2; grid-row: 1; }
  .vd-docs .cf-tr > .cf-folio, .vd-docs .cf-tr > .cf-emp, .vd-docs .cf-tr > .cf-fecha { font-size: 12.5px; }
  .vd-docs .cf-th { display: none; }
}
/* Ventas espejo de Compras (Camila, 27-10): Por cobrar (por factura y por cliente) y Clientes. */
.cr-cifras.vd-cifras3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx .vn-docs.vd-pc .cf-prov, .cx .vn-docs.vd-pc .cf-prov b { white-space: normal; overflow: visible; overflow-wrap: anywhere; }   /* tablas, 28-10 */
.vn-docs.vd-pc .cf-tr { grid-template-columns: minmax(0, 2fr) 84px 92px 92px 104px 110px minmax(0, 1.2fr) 84px; column-gap: 10px; }
.vn-docs.vd-pc.vn-con-emp .cf-tr { grid-template-columns: minmax(0, 2fr) 80px 84px 92px 92px 104px 110px minmax(0, 1.2fr) 84px; }
.vn-docs.vd-pcc .cf-tr { grid-template-columns: minmax(0, 2.2fr) 74px 116px 116px 116px 84px; column-gap: 10px; }
.vn-docs.vd-pcc.vn-con-emp .cf-tr { grid-template-columns: minmax(0, 2.2fr) 80px 74px 116px 116px 116px 84px; }
.vn-docs.vd-cli .cf-tr { grid-template-columns: minmax(0, 2.2fr) 74px 130px 84px 116px 116px 100px; column-gap: 10px; }
.vn-docs.vd-cli.vn-con-emp .cf-tr { grid-template-columns: minmax(0, 2.2fr) 80px 74px 130px 84px 116px 116px 100px; }
:is(.vd-pc, .vd-pcc, .vd-cli) .cf-prov small { display: block; font-size: 12px; }
:is(.vd-pc, .vd-pcc, .vd-cli) .vd-pie { border-top: 2px solid var(--linea-fuerte); }
.vd-solo-cel { display: none; }
@media (max-width: 760px) {
  .cr-cifras.vd-cifras3 { grid-template-columns: minmax(0, 1fr); }
  .cx .vn-docs:is(.vd-pc, .vd-pcc, .vd-cli) .cf-tr { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; }
  .cx .vn-docs:is(.vd-pc, .vd-pcc, .vd-cli) .cf-th,
  .cx .vn-docs:is(.vd-pc, .vd-pcc, .vd-cli) .cf-tr > :is(.vd-c, .cf-fecha) { display: none; }
  .cx .vn-docs:is(.vd-pc, .vd-pcc, .vd-cli) .cf-tr > .cf-prov { grid-column: 1; grid-row: 1; }
  .cx .vn-docs:is(.vd-pc, .vd-pcc, .vd-cli) .cf-tr > .vd-tot { grid-column: 2; grid-row: 1; }
  .cx .vn-docs:is(.vd-pc, .vd-pcc, .vd-cli) .cf-tr > :is(.cf-folio, .cf-emp) { grid-column: 1; grid-row: auto; text-align: left; font-size: 12.5px; }
  .cx .vn-docs:is(.vd-pc, .vd-pcc, .vd-cli) .cf-tr > .vd-sub { grid-column: 2; grid-row: 2; font-size: 12.5px; }
  .cx .vn-docs:is(.vd-pc, .vd-pcc, .vd-cli) .cf-tr > .cf-est { grid-column: 1; grid-row: auto; font-size: 12.5px; }
  .cx .vn-docs:is(.vd-pc, .vd-pcc, .vd-cli) .cf-tr > .vd-bot { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
  .cx .vn-docs:is(.vd-pc, .vd-pcc, .vd-cli) .vd-pie > :not(.vd-tot):not(:first-child) { display: none; }
  .vd-solo-cel { display: inline; font-size: inherit; }
  .cx .vn-docs.vd-pcc .cf-tr > .vd-bot { grid-row: 3; }
}

/* Los avisos en un cuadrito (Camila, 28-10): el ícono y cuántos son; rojo si alguno es un fallo; al apretarlo se abren. */
.av-cubo > summary { gap: 6px; min-height: 36px; padding: 6px 11px; color: var(--suave); }
.av-cubo > summary b { font-size: 13px; }
.av-cubo.av-mal > summary { background: var(--error-suave); border-color: var(--error); color: var(--error); }
.av-cubo .av-pop { width: min(440px, calc(100vw - 32px)); }
.av-pop .av-it { padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--suave); }
.av-pop .av-it + .av-it { border-top: 1px solid var(--linea); }
.av-pop .av-it b { color: var(--tinta); }
.av-pop .av-it-mal b { color: var(--error); }
.av-pop .av-it a { display: inline; width: auto; padding: 0; color: var(--marca-texto); font-weight: 600; }
.av-pop .av-it a:hover { background: none; text-decoration: underline; }
.cf-barra .av-cubo + .cf-menu, .cf-barra .av-cubo + .cf-mesnav { margin-left: 8px; }

/* Compras › Documentos con las 7 columnas de Ventas (Camila, 28-10): Proveedor · Folio · Emisión · Vence · Total ·
   Por pagar · Estado. */
.cf-docs7 { --cf-cols: minmax(0, 1.7fr) minmax(0, .8fr) 84px 84px 110px 110px minmax(0, 1.4fr); }
.cf-docs7.cf-con-marca .cf-tr { --cf-cols: 22px minmax(0, 1.7fr) minmax(0, .8fr) 84px 84px 110px 110px minmax(0, 1.4fr); }
.cf-docs7 .cf-suma > span { grid-column: 1 / -4; }

/* La ficha de un proveedor o un cliente (Camila, 28-10): cifras arriba, el historial a la izquierda y a la derecha el
   crédito, los datos y lo demás. Igual en Compras y Ventas. */
.fc-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.fc-chips .crece { flex: 1; }
.fc .cr-cifras { margin-bottom: 16px; }
.fc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.fc-bloque { padding: 18px 20px !important; margin-bottom: 16px; }
.fc-bloque h2 { margin: 0 0 12px; font-size: 15px; }
.fc-hist .fc-tabs { margin: 0 0 6px; }
.fc-fila { --cf-cols: minmax(64px, 0.8fr) 78px 78px minmax(76px, 1fr) minmax(64px, 0.8fr) minmax(120px, 1.3fr);   /* cabe en la tarjeta (tablas, 28-10) */ padding-left: 4px; padding-right: 4px; }
.fc-fila > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-chips .boton { flex: none; width: auto; }
.fc-est { white-space: normal; max-width: 100%; line-height: 1.35; }   /* «Saldo sin confirmar» en dos líneas antes que salirse de la tarjeta (tablas, 28-10) */
.fc-mas-b { margin: 12px 0 0; }
.fc-fila[hidden] { display: none; }
.fc-est { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--fondo); color: var(--suave); }
.fc-est.fc-ok { background: var(--ok-suave); color: var(--ok); }
.fc-est.fc-al { background: var(--alerta-suave); color: var(--alerta); }
.fc-est.fc-mal { background: var(--error-suave); color: var(--error); }
.fc-plazo { font-size: 28px; font-weight: 700; font-family: var(--letra-titulos); }
.fc-nota { color: var(--suave); font-size: 12.5px; line-height: 1.5; margin: 6px 0 10px; }
.fc-form-plazo { display: flex; gap: 8px; align-items: center; }
.fc-kv { margin: 0 0 12px; font-size: 13.5px; }
.fc-kv > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--linea); align-items: center; }
.fc-kv > div:first-child { border-top: 0; }
.fc-kv dt { color: var(--suave); } .fc-kv dd { margin: 0; font-weight: 500; }
.fc-kv input { width: 100%; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 8px; background: var(--papel); color: var(--tinta); font: inherit; }
.fc-kv input:placeholder-shown { border-style: dashed; }
.fc-cobro { padding: 8px 0; border-top: 1px solid var(--linea); font-size: 13px; }
.fc-cobro:first-of-type { border-top: 0; }
.fc-cobro small { display: block; color: var(--suave); }
@media (max-width: 1100px) { .fc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .fc-fila { --cf-cols: minmax(0, 1fr) auto; }
  .fc-fila > :nth-child(2), .fc-fila > :nth-child(3), .fc-fila > :nth-child(4) { display: none; }
  .fc-kv > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.fc-falta { color: var(--alerta); font-weight: 600; }