/* Estilo C (referencia visual en claude.ai). El color principal se cambia solo aquí. */
:root {
  --color-principal: #0A7F6F;
  --color-principal-oscuro: #08665A;
  --color-texto: #18202C;
  --color-texto-suave: #566176;
  --color-fondo: #F3F5F8;
  --color-superficie: #FFFFFF;
  --color-superficie-suave: #F6F8FA;
  --color-borde: #DDE2EA;
  --color-borde-fuerte: #C7CEDA;

  --menu-fondo: #16233B;
  --menu-texto: #C9D3E5;
  --menu-titulo: #9FB0CC;
  --menu-activo: #2A4166;
  --menu-caja: #1D2D4A;
  --menu-borde: #2B3C5C;

  --color-aviso: #7A4B00;
  --color-aviso-fondo: #FFF1D1;
  --color-aviso-punto: #E59A00;
  --color-bien: #176B45;
  --color-bien-fondo: #E2F4EC;
  --color-error: #9B1C1C;
  --color-error-fondo: #FDECEC;

  --radio: 8px;
  --radio-grande: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Public Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-texto);
  background: var(--color-fondo);
}

button, input, select { font-family: inherit; font-size: inherit; }
a { color: var(--color-principal); }
:focus-visible { outline: 2px solid var(--color-principal); outline-offset: 2px; }

/* --- Marco: menú lateral y área de trabajo --- */

.marco { display: flex; flex-wrap: wrap; min-height: 100vh; }

.menu {
  flex: 0 0 248px;
  background: var(--menu-fondo);
  color: var(--menu-texto);
  padding: 18px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu :focus-visible { outline-color: #FFFFFF; }

.menu-empresa {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--menu-borde);
  border-radius: 10px;
  background: var(--menu-caja);
}
.menu-empresa label { font-size: 11.5px; color: var(--menu-titulo); font-weight: 500; }
.menu-empresa select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--menu-borde);
  border-radius: 6px;
  background: var(--menu-fondo);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
}
.menu-empresa .nombre { color: #FFFFFF; font-weight: 600; font-size: 14px; }
.menu-empresa button {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid var(--menu-borde);
  border-radius: 6px;
  background: transparent;
  color: var(--menu-texto);
  font-size: 13px;
  cursor: pointer;
}

/* Grupos del menú: se abren y cierran con su título; una línea separa cada uno. */
.menu-grupo {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--menu-borde);
}
.menu-enlaces {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 6px 12px;
  padding-left: 8px;
  border-left: 1px solid var(--menu-borde);
}
.menu-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radio);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #FFFFFF;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.menu-titulo::-webkit-details-marker { display: none; }
.menu-titulo::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--menu-titulo);
  border-bottom: 2px solid var(--menu-titulo);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.menu-grupo[open] > .menu-titulo::after { transform: rotate(45deg); }
.menu-titulo:hover { background: var(--menu-caja); }
/* Los enlaces de cada grupo van con sangría y una guía a la izquierda, para distinguirlos del título. */
.menu-enlaces a { padding: 7px 10px; font-size: 14px; line-height: 1.3; }
.menu a {
  padding: 8px 12px;
  border-radius: var(--radio);
  color: var(--menu-texto);
  text-decoration: none;
  font-size: 14.5px;
}
.menu a:hover { background: var(--menu-caja); }
.menu a[aria-current="page"] {
  background: var(--menu-activo);
  color: #FFFFFF;
  font-weight: 600;
  border-left: 3px solid var(--color-principal);
  margin-left: -3px;
  padding-left: 15px;
}
.menu-enlaces a[aria-current="page"] { margin-left: -3px; padding-left: 10px; }

/* En computadora, el menú y el área de trabajo se desplazan cada uno por su cuenta. */
@media (min-width: 761px) {
  .marco { flex-wrap: nowrap; height: 100vh; height: 100dvh; overflow: hidden; }
  .menu, .trabajo { overflow-y: auto; overscroll-behavior: contain; }
  .menu { scrollbar-width: thin; scrollbar-color: var(--menu-borde) transparent; }
  .marco.menu-oculto .menu { display: none; }
}
/* En el celular el menú vive detrás del botón «Menú» y se despliega encima del contenido. */
@media (max-width: 760px) {
  .marco:not(.menu-abierto) .menu { display: none; }
  .marco.menu-abierto .menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 86vw);
    z-index: 100;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  }
  .marco.menu-abierto::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(22, 35, 59, 0.45);
  }
  .boton-menu { margin-right: auto; }
}
@media print {
  .marco { display: block; height: auto; overflow: visible; }
  .menu, .barra { display: none; }
  .trabajo { overflow: visible; padding: 0; }
}

.trabajo {
  flex: 999 1 560px;
  min-width: 0;
  padding: 20px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.barra form { display: flex; align-items: center; gap: 10px; }
.barra .usuario { color: var(--color-texto-suave); font-size: 14px; }

.titulo-pagina .ruta { font-size: 13px; color: var(--color-texto-suave); }
.titulo-pagina h1 { margin: 2px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }

/* --- Etiquetas de estado --- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado-validacion { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.estado-validacion::before { background: var(--color-aviso-punto); }
.estado-oficial { background: var(--color-bien-fondo); color: var(--color-bien); }
.estado-pruebas { background: #E4ECF7; color: #24406B; }
.estado-real { background: var(--color-error-fondo); color: var(--color-error); }

/* --- Tarjetas, botones y formularios --- */

.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  padding: 20px;
}
.tarjeta h2 { margin: 0 0 4px; font-size: 17px; }
.tarjeta .ayuda { margin: 0 0 14px; color: var(--color-texto-suave); font-size: 14px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radio);
  background: var(--color-principal);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--color-principal-oscuro); }
.boton-secundario {
  background: var(--color-superficie);
  color: var(--color-texto);
  border: 1px solid var(--color-borde-fuerte);
}
.boton-secundario:hover { background: var(--color-superficie-suave); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }

.campos { display: flex; flex-wrap: wrap; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; min-width: 0; }
.campo-corto { flex: 0 1 160px; }
.campo > label, .campo > .etiqueta-campo { font-size: 12.5px; font-weight: 600; color: var(--color-texto-suave); }
.campo input, .campo select {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio);
  background: var(--color-superficie);
  color: var(--color-texto);
  width: 100%;
  max-width: 100%;
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--color-error); }
.campo .error { color: var(--color-error); font-size: 13px; }
.campo .nota { color: var(--color-texto-suave); font-size: 13px; }

.opciones { display: flex; flex-direction: column; gap: 8px; }
.opcion {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  cursor: pointer;
}
.opcion:has(input:checked) { border-color: var(--color-principal); background: #EEF8F6; }
.opcion input { margin-top: 3px; accent-color: var(--color-principal); }
.opcion strong { display: block; }
.opcion span { color: var(--color-texto-suave); font-size: 14px; }

.pasos { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.numero-paso {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 8px;
  border-radius: 50%; background: var(--color-principal); color: #FFFFFF;
  font-size: 13px; font-weight: 700;
}

.resumen { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px 16px; margin: 0; }
.resumen dt { color: var(--color-texto-suave); font-weight: 600; font-size: 14px; }
.resumen dd { margin: 0; }

.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--color-texto-suave);
  padding: 10px 12px; background: var(--color-superficie-suave); border-bottom: 1px solid var(--color-borde);
}
.tabla td { padding: 10px 12px; border-bottom: 1px solid #ECEFF4; }

.mensaje { margin: 0; padding: 10px 14px; border-radius: var(--radio); }
.mensaje-error { background: var(--color-error-fondo); color: var(--color-error); }
.mensaje-aviso { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.mensaje-bien { background: var(--color-bien-fondo); color: var(--color-bien); }

/* --- Pantalla de entrada --- */

.entrada { max-width: 380px; margin: 64px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 14px; }
.entrada h1 { color: var(--color-principal); margin: 0; }
.entrada .campo { flex: none; }

/* --- Celular --- */

@media (max-width: 760px) {
  .menu { flex: 1 1 100%; padding: 12px 16px; }
  .trabajo { padding: 16px; }
  .resumen { grid-template-columns: 1fr; gap: 2px 0; }
  .resumen dd { margin-bottom: 10px; }
}

/* --- Catálogo y listas de problemas --- */

.numero { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cuenta-mayor td { font-weight: 600; }
.tabla tbody tr:hover td { background: var(--color-superficie-suave); }

.lista-problemas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lista-problemas li { padding: 8px 12px; border-radius: var(--radio); font-size: 14px; }
.lista-errores li { background: var(--color-error-fondo); color: var(--color-error); }
.lista-avisos li { background: var(--color-aviso-fondo); color: var(--color-aviso); }

.campo input[type="file"] { height: auto; padding: 8px; }

.pregunta { margin: 4px 0 0; font-size: 19px; }
.caminos { display: flex; flex-wrap: wrap; gap: 16px; }
.camino { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.camino h2 { margin: 0; }
.camino .ayuda { margin: 0; }
.pasos .campo { flex: none; }

.detalle-cuentas summary { cursor: pointer; color: var(--color-principal); font-weight: 600; margin-top: 12px; }
.detalle-cuentas .tabla-contenedor { max-height: 420px; overflow: auto; margin-top: 10px; border: 1px solid var(--color-borde); border-radius: var(--radio); }

/* --- Periodos --- */

.selector-periodo { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.selector-periodo label { font-size: 12.5px; font-weight: 600; color: var(--color-texto-suave); }
.selector-periodo select {
  height: 36px; padding: 0 10px; border: 1px solid var(--color-borde); border-radius: 10px;
  background: var(--color-superficie); font-weight: 600;
}
.boton-chico { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
a.estado { text-decoration: none; margin-right: auto; }

.periodos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.periodo {
  border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 12px;
  display: flex; flex-direction: column; gap: 8px; background: var(--color-superficie);
}
.periodo-actual { border-color: var(--color-principal); box-shadow: 0 0 0 1px var(--color-principal); }
.periodo strong { font-size: 15px; }
.periodo .detalle { color: var(--color-texto-suave); font-size: 12.5px; }
.estado-abierto { background: var(--color-bien-fondo); color: var(--color-bien); }
.estado-cerrado { background: #E9ECF1; color: #3B4556; }
.reapertura { border: 1px solid var(--color-aviso-punto); background: var(--color-aviso-fondo); }

/* --- Pólizas --- */

.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.derecha { text-align: right; }
.suave { color: var(--color-texto-suave); }
.nota-liga { display: inline-block; margin-left: 8px; font-size: 12.5px; color: var(--color-texto-suave); }
.estado-poliza-borrador { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.estado-poliza-contabilizada { background: var(--color-bien-fondo); color: var(--color-bien); }
.estado-poliza-cancelada { background: #E9ECF1; color: #3B4556; }
.titulo-pagina h1 .estado { vertical-align: middle; margin-left: 8px; }
.titulo-pagina .ruta a { color: inherit; }
.totales {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 26px;
  padding: 14px 20px; border-top: 1px solid var(--color-borde); background: var(--color-superficie-suave);
}
.totales div { display: flex; flex-direction: column; align-items: flex-end; }
.totales span { font-size: 12px; color: var(--color-texto-suave); font-weight: 600; }
.totales strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }
.boton-peligro { background: var(--color-error); }
.boton-peligro:hover { background: #7F1515; }
.historial { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tabla th.derecha { text-align: right; }

/* --- Captura de póliza --- */

.captura { padding: 0; overflow: hidden; }
.encabezado-poliza { padding: 18px 20px; border-bottom: 1px solid var(--color-borde); }
.cuadricula td { padding: 4px 6px; }
.cuadricula td.linea { padding-left: 12px; color: var(--color-texto-suave); }
.cuadricula .celda {
  width: 100%; height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--color-texto);
}
.cuadricula .celda:hover { border-color: var(--color-borde); }
.cuadricula .celda:focus { border: 2px solid var(--color-principal); outline: none; background: var(--color-superficie); }
.cuadricula .importe { text-align: right; font-variant-numeric: tabular-nums; }
.cuadricula .celda-error { border-color: var(--color-error); background: var(--color-error-fondo); }
.nombre-cuenta { color: var(--color-texto-suave); font-size: 14px; }
.texto-error { color: var(--color-error); }
.quitar {
  width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent;
  color: var(--color-texto-suave); font-size: 20px; cursor: pointer;
}
.quitar:hover { background: var(--color-error-fondo); color: var(--color-error); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* En el celular, cada renglón es una tarjeta. */
@media (max-width: 760px) {
  .cuadricula thead { display: none; }
  .cuadricula, .cuadricula tbody { display: block; }
  .cuadricula tr.renglon {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 12px;
    border-bottom: 1px solid var(--color-borde);
  }
  .cuadricula tr.renglon td { display: block; padding: 0; border: 0; }
  .cuadricula tr.renglon td[data-titulo]::before {
    content: attr(data-titulo); display: block; font-size: 11.5px; font-weight: 600; color: var(--color-texto-suave);
  }
  .cuadricula td.linea { grid-column: 1; grid-row: 1; align-self: center; padding: 0; font-weight: 600; }
  .cuadricula td.linea::before { content: "Renglón "; display: inline; font-size: inherit; color: inherit; }
  .cuadricula tr.renglon td:last-child { grid-column: 2; grid-row: 1; justify-self: end; }
  .cuadricula td.nombre-cuenta, .cuadricula td[data-titulo="Concepto"] { grid-column: 1 / -1; }
  .cuadricula .celda { border-color: var(--color-borde); }
}

/* --- Balanza --- */

.centro { text-align: center !important; }
.balanza thead tr:first-child th { border-bottom: 0; padding-bottom: 2px; }
.tabla tfoot td { padding: 12px; background: var(--color-superficie-suave); border-top: 1px solid var(--color-borde); }
.casilla { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 40px; }
.casilla input { accent-color: var(--color-principal); width: 16px; height: 16px; }
/* Dentro de un formulario por pasos, los campos en renglón sí se reparten el ancho. */
.pasos .campos .campo { flex: 1 1 220px; }
.pasos .campos .campo-corto { flex: 0 1 160px; }
.pasos .campos .campo-ancho { flex: 2 1 320px; }

/* --- CFDI --- */

.aviso-empresa { margin: 0; padding: 10px 14px; border-radius: var(--radio); background: #E4ECF7; color: #24406B; }
.zona-carga {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 28px 16px; border: 1.5px dashed #8FA0BD; border-radius: 10px; background: var(--color-superficie-suave);
  cursor: pointer;
}
.zona-carga.arrastrando, .zona-carga:hover { border-color: var(--color-principal); background: #EEF8F6; }
.zona-carga span { color: var(--color-texto-suave); font-size: 14px; }
/* El campo de archivo cubre toda la zona: así se puede soltar ahí lo arrastrado. */
.zona-carga input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zona-carga:focus-within { outline: 2px solid var(--color-principal); outline-offset: 2px; }
.zona-elegidos { font-weight: 600; color: var(--color-principal) !important; }
.contadores { display: flex; flex-wrap: wrap; gap: 8px; }
.problema-ajeno { background: var(--color-error-fondo); color: var(--color-error); }
.problema-duplicado { background: var(--color-superficie-suave); color: var(--color-texto-suave); }
.estado-cfdi-por_revisar { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.estado-cfdi-clasificado { background: #E4ECF7; color: #24406B; }
.estado-cfdi-contabilizado { background: var(--color-bien-fondo); color: var(--color-bien); }
.estado-cfdi-rechazado { background: #E9ECF1; color: #3B4556; }
.contador-menu {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--color-aviso-punto); color: #1D2D4A; font-size: 12px; font-weight: 700; text-align: center;
}

/* --- Buscador de cuentas --- */

.sugerencias-cuentas {
  position: absolute; z-index: 50; max-width: min(560px, calc(100vw - 32px)); max-height: 320px; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none; background: var(--color-superficie);
  border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio); box-shadow: 0 8px 24px rgba(22, 35, 59, 0.16);
}
.sugerencias-cuentas li[data-codigo] {
  display: flex; gap: 12px; padding: 8px 10px; border-radius: 6px; font-size: 14px; cursor: pointer;
}
.sugerencias-cuentas li[data-codigo]:hover { background: var(--color-superficie-suave); }
.sugerencias-cuentas li.marcada { background: var(--color-bien-fondo); }
.sugerencias-cuentas .codigo { flex: 0 0 auto; min-width: 84px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sugerencias-cuentas mark { background: var(--color-aviso-fondo); color: inherit; border-radius: 2px; }
.sugerencias-cuentas .sin-resultados { padding: 10px; font-size: 14px; color: var(--color-texto-suave); }
.sugerencias-cuentas .pie-sugerencias {
  position: sticky; bottom: -4px; margin: 4px -4px -4px; padding: 7px 12px; font-size: 12px;
  color: var(--color-texto-suave); background: var(--color-superficie-suave); border-top: 1px solid var(--color-borde);
}
.ventana-catalogo {
  width: min(640px, calc(100vw - 32px)); max-height: 80vh; padding: 0; border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande); color: var(--color-texto); background: var(--color-superficie);
}
.ventana-catalogo::backdrop { background: rgba(22, 35, 59, 0.35); }
.ventana-catalogo[open] { display: flex; flex-direction: column; }
.ventana-encabezado { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px; }
.ventana-encabezado h2 { margin: 0; }
.ventana-busqueda { margin: 6px 18px 0; height: 40px; padding: 0 12px; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio); }
.ventana-nota { margin: 8px 18px; }
.ventana-tabla { overflow-y: auto; border-top: 1px solid var(--color-borde); }
.ventana-tabla tbody tr { cursor: pointer; }
.ventana-tabla tbody tr:hover, .ventana-tabla tbody tr:focus { background: var(--color-bien-fondo); outline: none; }

/* --- Documentos de CXP y CXC --- */

.datos-documento { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 24px; margin: 0; }
.datos-documento dt { font-size: 12.5px; font-weight: 600; color: var(--color-texto-suave); }
.datos-documento dd { margin: 2px 0 0; }
.importe-aplicar { height: 36px; padding: 0 10px; border: 1px solid var(--color-borde-fuerte); border-radius: 6px; font-variant-numeric: tabular-nums; }
.importe-aplicar.celda-error { border-color: var(--color-error); background: var(--color-error-fondo); }
.deshacer summary { list-style: none; display: inline-flex; }
.deshacer summary::-webkit-details-marker { display: none; }
.columna-aplicar { width: 170px; }
@media (max-width: 760px) {
  .solo-escritorio { display: none; }
  .columna-aplicar { width: 120px; }
}

/* --- Pestañas --- */

.pestanas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--color-borde); }
.pestanas a {
  padding: 10px 14px; color: var(--color-texto-suave); font-weight: 600; text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.pestanas a:hover { color: var(--color-texto); }
.pestanas a[aria-current="page"] { color: var(--color-principal); border-bottom-color: var(--color-principal); }

/* --- Conciliación bancaria --- */

.resumen-conciliacion { max-width: 720px; }
.resumen-conciliacion td { padding: 7px 12px; }
.resumen-conciliacion tr.total td { font-weight: 700; border-top: 2px solid var(--color-borde-fuerte); }
.texto-bien { color: var(--color-bien); }
.area-pegado {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio);
  font-family: ui-monospace, Menlo, monospace; font-size: 13px; tab-size: 18; resize: vertical;
}
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dos-columnas h3 { margin: 0 0 6px; font-size: 15px; }
@media (max-width: 1100px) { .dos-columnas { grid-template-columns: 1fr; } }
.en-linea { display: flex; align-items: center; gap: 10px; }
.fila-total td { font-weight: 700; border-top: 2px solid var(--color-borde-fuerte); }

/* Generador de reportes (paso 4.4) */
.lista-simple { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lista-simple li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lista-simple a[aria-current="page"] { font-weight: 600; }
.boton-enlace { background: none; border: 0; padding: 0; color: var(--color-principal); cursor: pointer; font: inherit; font-size: 13px; }
.boton-enlace:hover { text-decoration: underline; }
.tarjeta details summary { cursor: pointer; color: var(--color-principal); font-weight: 600; margin: 4px 0 8px; }
.tarjeta fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.tarjeta fieldset legend { font-weight: 600; margin-bottom: 6px; }