/* XMLPro — hoja de estilos de la interfaz web.
   Idea rectora: cada contribuyente es un expediente. Su RFC, en grande y separado en sus partes,
   es la carátula; las secciones son las pestañas del expediente. Todo lo demás se mantiene sobrio. */

:root {
    --papel: #f3f4f0;
    --superficie: #ffffff;
    --tinta: #1c2230;
    --grafito: #5b6271;
    --linea: #d7dad2;
    --linea-suave: #e6e8e2;

    --libro: #1e5e4e;          /* acción principal y "vigente" */
    --libro-oscuro: #164a3d;
    --libro-claro: #e1ede8;
    --ambar: #8a5608;
    --ambar-claro: #f6ead4;
    --sello: #a3271f;
    --sello-claro: #f7e2df;

    --ui: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
    --codigo: "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;

    --radio: 6px;
    --ancho: 1180px;
    --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--ui);
    font-size: 1rem;
    line-height: 1.5;
    font-feature-settings: "tnum" 1;
    /* El pie de página queda abajo aunque la página tenga poco contenido. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--libro); text-underline-offset: 0.18em; }
a:hover { color: var(--libro-oscuro); }

:focus-visible {
    outline: 2px solid var(--libro);
    outline-offset: 2px;
    border-radius: 2px;
}

h1, h2 { font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.05rem; }
p { margin: 0 0 0.6rem; max-width: 72ch; }

.oculto-visual {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.saltar {
    position: absolute; left: 8px; top: -40px; padding: 8px 12px;
    background: var(--tinta); color: #fff; z-index: 10;
}
.saltar:focus { top: 8px; }

/* ---------- Barra superior ---------- */

/* Barra oscura: el logo (metálico) está hecho para fondo oscuro. */
.barra {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px var(--gutter);
    background: #0f131b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #e6e9ef;
}
.marca { display: inline-flex; align-items: center; flex: none; }
.marca-logo { display: block; height: 40px; width: auto; }
.barra .selector-etiqueta { color: #a4acbb; }
.barra .selector-campo {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: #f3f4f0;
}
.barra .selector-campo option { color: var(--tinta); background: #fff; }
.barra .selector-campo:focus-visible { outline: 2px solid #3fd0c9; outline-offset: 1px; }
.barra .cuenta-actual { color: #c3c9d4; }
.barra .menu-usuario > summary:focus-visible { outline: 2px solid #3fd0c9; outline-offset: 2px; }


.selector { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.selector-etiqueta { font-size: 0.85rem; color: var(--grafito); }
.selector-campo {
    flex: 0 1 420px;
    min-width: 0;
    font: inherit;
    font-size: 0.92rem;
    padding: 6px 10px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--papel);
    color: var(--tinta);
}

.modo-dev {
    font-size: 0.8rem;
    color: var(--ambar);
    background: var(--ambar-claro);
    padding: 2px 10px;
    border-radius: 999px;
}

/* ---------- Página ---------- */

.contenido { padding-bottom: 64px; flex: 1 0 auto; }

.pagina {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 32px var(--gutter) 0;
}

.encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.bajada { color: var(--grafito); margin: 4px 0 0; }

.con-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
}

/* ---------- El expediente: franja con el RFC y pestañas ---------- */

.franja {
    background: var(--tinta);
    color: #fff;
}

.franja-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 28px var(--gutter) 18px;
}

.franja-nombre {
    font-size: 1.15rem;
    font-weight: 500;
    margin: 6px 0 14px;
    max-width: none;
}

.franja-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 32px;
    margin: 0;
    font-size: 0.88rem;
}
.franja-datos div { display: flex; gap: 8px; }
.franja-datos dt { color: #a9b0be; }
.franja-datos dd { margin: 0; }

.pestanas {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.pestana {
    padding: 10px 18px 11px;
    color: #c9ced8;
    text-decoration: none;
    border-radius: var(--radio) var(--radio) 0 0;
    white-space: nowrap;
}
.pestana:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.pestana.active {
    background: var(--papel);
    color: var(--tinta);
    font-weight: 600;
}

/* ---------- RFC: el elemento protagonista ---------- */

.rfc {
    font-family: var(--codigo);
    font-weight: 500;
    white-space: nowrap;
}
.rfc > span + span { margin-left: 0.3em; }
.rfc-fecha { color: var(--grafito); }

.rfc-grande {
    display: block;
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.05;
}
.rfc-grande > span + span { margin-left: 0.35em; }
.rfc-grande .rfc-fecha { color: #8fa3b8; }
.rfc-grande .rfc-clave { color: #9fd3c2; }

.codigo { font-family: var(--codigo); font-size: 0.92em; }

/* ---------- Tablas ---------- */

.tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    font-size: 0.95rem;
}
.tabla th {
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--grafito);
    padding: 10px 14px;
    border-bottom: 1px solid var(--linea);
    background: #fafbf8;
}
.tabla td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--linea-suave);
    vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #f8f9f6; }
.fila-inactiva td { color: var(--grafito); }

.enlace-fila { text-decoration: none; }
.enlace-fila:hover .rfc { text-decoration: underline; }

/* ---------- Estados ---------- */

.estado {
    display: inline-block;
    font-size: 0.83rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.estado-vigente { background: var(--libro-claro); color: var(--libro-oscuro); }
.estado-por-vencer { background: var(--ambar-claro); color: var(--ambar); }
.estado-vencido, .estado-falta { background: var(--sello-claro); color: var(--sello); }
.estado-inactivo, .estado-opcional { background: var(--linea-suave); color: var(--grafito); }

/* ---------- Resumen ---------- */

.resumen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
}
.bloque { padding: 22px 24px; }
.bloque + .bloque { border-left: 1px solid var(--linea); }
.bloque-ancho {
    grid-column: 1 / -1;
    border-left: 0 !important;
    border-top: 1px solid var(--linea);
}
.bloque h2 { margin-bottom: 10px; }
.bloque-estado { margin-bottom: 12px; }
.detalle { color: var(--grafito); font-size: 0.92rem; }

.cifras { display: flex; gap: 48px; margin: 0 0 8px; }
.cifras dt { font-size: 0.92rem; }
.cifras dd {
    margin: 2px 0 0;
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- Formularios ---------- */

.panel {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 22px 22px 20px;
}
.panel h2 { margin-bottom: 18px; }

.campo { margin: 0 0 16px; border: 0; padding: 0; }
.campo > label, .campo legend {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 6px;
    padding: 0;
}
.campo-corto .entrada { max-width: 9rem; }

.entrada {
    width: 100%;
    font: inherit;
    font-size: 0.95rem;
    padding: 8px 10px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fff;
    color: var(--tinta);
}
.entrada:focus-visible { outline-offset: 0; border-color: var(--libro); }
.entrada-codigo { font-family: var(--codigo); letter-spacing: 0.04em; text-transform: uppercase; }
.entrada-archivo { font: inherit; font-size: 0.9rem; max-width: 100%; }

.opciones { display: flex; gap: 20px; }
.opcion { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.opcion input { accent-color: var(--libro); }

.ayuda { font-size: 0.85rem; color: var(--grafito); margin: 6px 0 0; }
.validation-message { color: var(--sello); font-size: 0.85rem; margin-top: 4px; }
.invalid { border-color: var(--sello); }

.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.boton {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 9px 16px;
    border-radius: var(--radio);
    border: 1px solid var(--libro);
    background: var(--libro);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.boton:hover { background: var(--libro-oscuro); border-color: var(--libro-oscuro); color: #fff; }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }
.boton-secundario { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton-secundario:hover { background: var(--linea-suave); color: var(--tinta); border-color: var(--linea); }

.buscador { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.buscador label { font-weight: 600; font-size: 0.9rem; }
.buscador .entrada { max-width: 320px; }
.contador { color: var(--grafito); font-size: 0.88rem; white-space: nowrap; }

/* ---------- Avisos y estados vacíos ---------- */

.aviso {
    border-left: 4px solid var(--grafito);
    background: var(--superficie);
    padding: 12px 16px;
    margin: 0 0 16px;
    border-radius: 0 var(--radio) var(--radio) 0;
}
.aviso-titulo { font-weight: 650; margin-bottom: 4px; }
.aviso-cuerpo > :last-child { margin-bottom: 0; }
.aviso-error { border-color: var(--sello); background: var(--sello-claro); }
.aviso-exito { border-color: var(--libro); background: var(--libro-claro); }
.aviso-nota { margin: 8px 0 0; color: var(--ambar); }

.vacio {
    border: 1px dashed var(--linea);
    border-radius: var(--radio);
    padding: 28px 24px;
    background: var(--superficie);
}
.vacio-titulo { font-weight: 650; }
.vacio p:last-child { color: var(--grafito); margin-bottom: 0; }

.cargando { color: var(--grafito); padding: 16px 0; }

/* ---------- Error de circuito de Blazor ---------- */

#blazor-error-ui {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 12px var(--gutter);
    background: var(--sello); color: #fff;
    z-index: 1000;
}
#blazor-error-ui .reload { color: #fff; font-weight: 600; margin-left: 12px; }

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
    .con-panel { grid-template-columns: 1fr; }
    .resumen { grid-template-columns: 1fr; }
    .bloque + .bloque { border-left: 0; border-top: 1px solid var(--linea); }
}

@media (max-width: 640px) {
    .barra { flex-wrap: wrap; gap: 10px 16px; }
    .selector { order: 3; flex-basis: 100%; }
    .selector-etiqueta { display: none; }
    .selector-campo { flex: 1; }
    .ocultar-movil { display: none; }
    .franja-datos { flex-direction: column; }
    .cifras { gap: 32px; }
    .pestanas { gap: 0; }
    .pestana { padding: 10px 12px 11px; }
}

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

/* ---------- Cuenta y licencia ---------- */

.cuenta-actual {
    font-size: 0.88rem;
    color: var(--grafito);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.aviso-licencia {
    background: var(--ambar-claro);
    color: var(--ambar);
    border-bottom: 1px solid #ecd6ad;
}
.aviso-licencia p {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 9px var(--gutter);
    font-size: 0.92rem;
    font-weight: 500;
}
/* Descargas cuyos paquetes el SAT está por desechar (o ya desechó). */
.aviso-descargas {
    background: var(--ambar-claro);
    color: var(--ambar);
    border-bottom: 1px solid #ecd6ad;
}
.aviso-descargas-vencida { background: var(--sello-claro); color: var(--sello); border-color: #ecc4bf; }
.aviso-descargas-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 9px var(--gutter);
    font-size: 0.92rem;
}
.aviso-descargas-titulo { margin: 0; font-weight: 600; }
.aviso-descargas ul { margin: 4px 0 0; padding-left: 18px; }
.aviso-descargas li { margin: 2px 0; overflow-wrap: anywhere; }
.aviso-descargas a { color: inherit; font-weight: 600; }

.aviso-licencia-gracia { background: var(--sello-claro); color: var(--sello); border-color: #ecc4bf; }

@media (max-width: 640px) {
    .cuenta-actual { display: none; }
}

/* ---------- Descargas del SAT ---------- */

.plazo { margin: 6px 0 0; font-size: 0.85rem; color: var(--grafito); max-width: 34ch; }
.texto-error { color: var(--sello); }
.plazo-urgente { color: var(--sello); font-weight: 600; }

.fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ayuda-fija { margin: 0; padding: 8px 10px; background: var(--papel); border-radius: var(--radio); }

.filtros-extra { margin: 0 0 16px; }
.filtros-extra summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--libro); margin-bottom: 12px; }

.tabla-descargas td { vertical-align: top; }
.celda-periodo { font-variant-numeric: tabular-nums; min-width: 6.5rem; }
.tabla-descargas .detalle { display: block; font-size: 0.85rem; margin: 2px 0 0; }
.nota-fila { font-size: 0.85rem; color: var(--grafito); margin: 6px 0 0; max-width: 34ch; }
.numero { text-align: right; font-variant-numeric: tabular-nums; }

.paquetes { list-style: none; margin: 0; padding: 0; }
.paquetes li + li { margin-top: 2px; }

.boton-texto {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--libro);
    background: none;
    border: 0;
    padding: 4px 0 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.boton-texto:disabled { color: var(--grafito); cursor: default; text-decoration: none; }

/* Las tablas anchas se desplazan dentro de su columna en lugar de invadir el panel lateral. */
.con-panel > div:first-child { min-width: 0; overflow-x: auto; }
.tabla + .detalle { margin-top: 10px; }

/* ---------- Comprobantes ---------- */

.segmentado {
    display: inline-flex;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
    overflow: hidden;
}
.segmento {
    padding: 8px 16px;
    color: var(--tinta);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
}
.segmento + .segmento { border-left: 1px solid var(--linea); }
.segmento:hover { background: var(--linea-suave); color: var(--tinta); }
.segmento.activo { background: var(--libro); color: #fff; font-weight: 600; }

.filtros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0 14px;
    align-items: end;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 16px 16px 4px;
    margin-bottom: 20px;
}
.filtros .campo { margin-bottom: 12px; }
.filtros .campo-buscar { grid-column: span 2; }
.filtros-acciones {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 12px;
}
.atajos { display: flex; gap: 16px; }
.atajos .boton-texto { padding: 0; }

.totales-tipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.total-tipo {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 14px 16px;
}
.total-tipo-titulo { font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.total-tipo-titulo .detalle { font-weight: 400; font-size: 0.85rem; }
.total-tipo-cifras { margin: 0; display: grid; gap: 2px; font-size: 0.9rem; }
.total-tipo-cifras div { display: flex; justify-content: space-between; gap: 12px; }
.total-tipo-cifras dt { color: var(--grafito); }
.total-tipo-cifras dd { margin: 0; font-variant-numeric: tabular-nums; }
.total-tipo-total { border-top: 1px solid var(--linea-suave); padding-top: 4px; margin-top: 2px; font-weight: 600; }
.total-tipo-total dt { color: var(--tinta); }

/* Insignia del tipo de comprobante: I ingreso, E egreso, P pago, N nómina, T traslado. */
.tipo-cfdi {
    display: inline-grid;
    place-items: center;
    width: 1.55em;
    height: 1.55em;
    border-radius: 4px;
    font-family: var(--codigo);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.tipo-I { background: var(--libro-claro); color: var(--libro-oscuro); }
.tipo-E { background: var(--sello-claro); color: var(--sello); }
.tipo-P { background: #e3e9f3; color: #2f4d7a; }
.tipo-N { background: var(--ambar-claro); color: var(--ambar); }
.tipo-T { background: var(--linea-suave); color: var(--grafito); }
.tipo-cfdi-grande { font-size: 1rem; vertical-align: 0.15em; margin-right: 4px; }

.tabla-desplazable { overflow-x: auto; }
.tabla-comprobantes td { vertical-align: top; }
.tabla-comprobantes .detalle, .tabla-compacta .detalle { display: block; font-size: 0.82rem; margin-top: 2px; }
.celda-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.celda-contraparte { min-width: 12rem; }
.enlace-comprobante { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.enlace-comprobante:hover .codigo { text-decoration: underline; }
.fila-cancelada td { color: var(--grafito); }
.fila-cancelada .numero { text-decoration: line-through; }
.texto-pendiente { color: var(--ambar); font-weight: 600; }

.tabla th.numero { text-align: right; }
.tabla td.numero { white-space: nowrap; }
.encabezado .acciones { align-items: center; margin-top: 0; }

.paginacion { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; flex-wrap: wrap; }
.paginacion .contador { margin-right: auto; }

/* Detalle */
.migas { margin: 0 0 12px; font-size: 0.92rem; }
.migas a { text-decoration: none; }
.uuid { font-size: 0.85rem; overflow-wrap: anywhere; }

.partes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
    margin-bottom: 16px;
}
.parte { padding: 18px 20px; }
.parte + .parte { border-left: 1px solid var(--linea); }
.parte h2 { font-size: 0.85rem; color: var(--grafito); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.parte .rfc { font-size: 1.15rem; font-weight: 600; }
.parte-nombre { margin: 4px 0 6px; font-weight: 500; }
.parte .detalle { margin: 2px 0 0; }

.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 24px;
    margin: 0 0 24px;
    font-size: 0.92rem;
}
.ficha dt { color: var(--grafito); font-size: 0.82rem; }
.ficha dd { margin: 2px 0 0; overflow-wrap: anywhere; }

.seccion { margin: 0 0 28px; }
.seccion h2 { margin-bottom: 12px; }
.tabla-compacta { font-size: 0.9rem; }
.tabla-compacta td, .tabla-compacta th { padding: 8px 12px; }
.tabla-compacta td { vertical-align: top; }
.celda-impuestos { min-width: 10rem; }

.seccion-totales { display: flex; justify-content: flex-end; }
.totales {
    margin: 0;
    min-width: min(100%, 380px);
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 12px 16px;
    font-size: 0.93rem;
}
.totales div { display: flex; justify-content: space-between; gap: 24px; padding: 3px 0; }
.totales dt { color: var(--grafito); }
.totales dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totales-total { border-top: 1px solid var(--linea); margin-top: 4px; padding-top: 8px !important; font-size: 1.05rem; font-weight: 650; }
.totales-total dt { color: var(--tinta); }
.totales-nomina { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; margin-bottom: 14px; }

.complemento {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 10px 14px;
    margin-bottom: 8px;
}
.complemento summary { cursor: pointer; font-weight: 600; }
.json {
    margin: 8px 0 0;
    padding: 12px;
    background: var(--papel);
    border-radius: var(--radio);
    font-family: var(--codigo);
    font-size: 0.8rem;
    overflow-x: auto;
    max-height: 420px;
}

@media (max-width: 900px) {
    .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .campo-buscar { grid-column: 1 / -1; }
    .partes { grid-template-columns: 1fr; }
    .parte + .parte { border-left: 0; border-top: 1px solid var(--linea); }
}

/* Revisión del IVA de gastos */
.barra-seleccion {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 10px 14px;
    margin-bottom: 10px;
}
.barra-seleccion .boton { padding: 6px 12px; font-size: 0.9rem; }
.celda-seleccion { width: 2.2rem; }
.celda-seleccion input { width: 1.05rem; height: 1.05rem; accent-color: var(--libro); }
.fila-seleccionada td { background: var(--libro-claro); }
.total-tipo-acreditable { border-top: 1px dashed var(--linea); padding-top: 4px; margin-top: 2px; }
.revision-iva {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 16px 18px 6px;
    max-width: 640px;
}
.revision-iva .acciones { margin-bottom: 12px; }

/* ---------- Bandeja de revisión de gastos ---------- */

.bandeja:focus { outline: none; }
.mes { display: flex; align-items: center; gap: 10px; }
.mes strong { min-width: 10rem; text-align: center; font-size: 1.05rem; }
.mes .boton { padding: 6px 14px; }

.avance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.avance-cifra {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.avance-cifra strong { font-size: 1.45rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.barra-avance { display: block; height: 6px; background: var(--linea-suave); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.barra-avance span { display: block; height: 100%; background: var(--libro); border-radius: 3px; }

.aviso-mes {
    background: var(--ambar-claro);
    color: var(--ambar);
    border-radius: var(--radio);
    padding: 9px 14px;
    margin: 0 0 16px;
    font-size: 0.92rem;
}
.aviso-mes a { color: inherit; font-weight: 600; }
.bandeja-cuerpo { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.bandeja-lista {
    flex: 1 1 380px;
    min-width: 0;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    position: sticky;
    top: 12px;
}
.bandeja-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--linea);
    background: #fafbf8;
}
.chip {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--linea);
    background: #fff;
    color: var(--tinta);
    cursor: pointer;
}
.chip-activo { background: var(--libro); border-color: var(--libro); color: #fff; }
.chip-cuenta { font-weight: 400; opacity: 0.8; margin-left: 2px; }
.bandeja-buscar { flex: 1 1 100%; font-size: 0.9rem; padding: 6px 9px; }
.bandeja-filas { max-height: calc(100vh - 230px); min-height: 240px; overflow-y: auto; }
.bandeja-nada { padding: 16px; margin: 0; }

.fila-gasto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--linea-suave);
    background: #fff;
    color: var(--tinta);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.fila-gasto:hover { background: #f8f9f6; }
.fila-gasto-activa, .fila-gasto-activa:hover { background: #eef4f1; box-shadow: inset 3px 0 0 var(--libro); }
.fila-gasto-quien { min-width: 0; display: flex; flex-direction: column; }
.fila-gasto-nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-gasto-quien .detalle { font-size: 0.82rem; }
.fila-gasto-monto { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fila-gasto-alerta { grid-column: 1 / -1; font-size: 0.82rem; color: var(--ambar); }
.alerta-grave { color: var(--sello); }

.bandeja-panel {
    flex: 999 1 560px;
    min-width: 0;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 20px 22px;
}
.panel-cabeza { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-cabeza p { margin: 0; }
.eti-mayus { font-size: 0.78rem; color: var(--grafito); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.panel-proveedor { font-size: 1.3rem; margin: 2px 0; }
.panel-total { text-align: right; }
.panel-importe { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ficha-compacta { margin-bottom: 16px; }

.validaciones { border-top: 1px solid var(--linea); padding-top: 14px; margin-bottom: 16px; }
.validaciones h3 { font-size: 1rem; margin: 0 0 8px; }
.validaciones ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.validaciones li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.93rem; }
.validaciones li .estado { justify-self: start; }

.totales-linea { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 24px; margin: 10px 0 18px; font-size: 0.92rem; }
.totales-linea div { display: flex; gap: 8px; }
.totales-linea dt { color: var(--grafito); }
.totales-linea dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.totales-linea-total dd { font-size: 1.05rem; }

.decision { border-top: 1px solid var(--linea); padding-top: 16px; }
.decision .acciones { align-items: center; }
.acciones-derecha { margin-left: auto; display: flex; gap: 8px; }
kbd {
    font-family: var(--codigo);
    font-size: 0.72rem;
    border: 1px solid currentColor;
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 5px;
    margin-left: 6px;
    opacity: 0.75;
}

@media (max-width: 900px) {
    .avance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bandeja-lista { position: static; }
    .bandeja-filas { max-height: 50vh; }
    .acciones-derecha { margin-left: 0; }
}

/* ---------- Detalle del CFDI ---------- */

.encabezado-cfdi h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.insignias { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }

.subpestanas {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--linea);
    margin: 0 0 20px;
    overflow-x: auto;
}
.subpestana {
    padding: 10px 14px;
    color: var(--grafito);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    margin-bottom: -1px;
}
.subpestana:hover { color: var(--tinta); }
.subpestana-activa { color: var(--tinta); font-weight: 600; border-bottom-color: var(--libro); }
.subpestana-cuenta {
    font-size: 0.75rem;
    background: var(--linea-suave);
    color: var(--grafito);
    border-radius: 999px;
    padding: 0 7px;
    margin-left: 4px;
}

.detalle-cuerpo { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.detalle-principal { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.detalle-lateral { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.detalle-principal .partes, .detalle-principal .ficha { margin: 0; }

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 16px 18px;
    margin: 0 0 18px;
}
.detalle-principal .tarjeta, .detalle-lateral .tarjeta { margin: 0; }
.tarjeta h2 { font-size: 1.05rem; margin: 0 0 10px; }
.tarjeta > p:last-child { margin-bottom: 0; }
.tarjeta-tabla { padding: 0; overflow: hidden; }
.tarjeta-tabla h2 { padding: 14px 16px 0; }
.tarjeta-tabla .tabla { border: 0; border-radius: 0; border-top: 1px solid var(--linea); }
.tarjeta-pie { padding: 10px 16px; margin: 0; }
.ficha-tarjeta { padding: 0 16px; }

.lista-validaciones { list-style: none; margin: 0; padding: 0; }
.lista-validaciones li {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--linea-suave);
    font-size: 0.93rem;
    align-items: start;
}
.lista-validaciones .estado { justify-self: start; }
.historia-fecha { display: block; color: var(--grafito); font-size: 0.85rem; }

.historia { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--linea); display: grid; gap: 10px; font-size: 0.92rem; }
.historia li { position: relative; }
.historia li::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--libro);
}
.historia .detalle { display: block; font-size: 0.82rem; }
.historia .hito-pendiente { color: var(--ambar); }
.historia .hito-pendiente::before { background: var(--ambar); }
.historia .hito-grave { color: var(--sello); }
.historia .hito-grave::before { background: var(--sello); }

.ficha-una { grid-template-columns: 1fr; gap: 8px; margin: 0; }
.totales-sin-marco { border: 0; padding: 0; min-width: 0; }
.fila-total td { font-weight: 600; background: #fafbf8; }

.lista-complementos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.complemento-fila {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}
.complemento summary .estado { margin-left: 8px; }
.xml { max-height: 70vh; white-space: pre; }
.lista-complementos .complemento { margin: 0; }

/* ---------- Ingresos cobrados ---------- */

.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px 12px; }
.tarjeta-cabeza h2 { padding: 0; margin: 0; }
.bandeja-filtros-linea { display: flex; flex-wrap: wrap; gap: 6px; }
.fila-negativa .numero { color: var(--sello); }
.avance-cifra .detalle { font-size: 0.8rem; }

/* ---------- Declaración del mes ---------- */

.declaracion { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; margin-bottom: 18px; align-items: start; }
.declaracion .tarjeta { margin: 0; }
.renglones { margin: 0; display: grid; }
.renglones > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    padding: 8px 0;
    border-top: 1px solid var(--linea-suave);
    align-items: baseline;
}
.renglones > div:first-child { border-top: 0; }
.renglones dt { font-size: 0.93rem; }
.renglones dt .detalle { display: block; font-size: 0.8rem; margin-top: 2px; }
.renglones dt a.detalle { display: inline; margin-left: 6px; font-size: 0.8rem; }
.renglones dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.renglon-resultado { border-top: 1px solid var(--linea) !important; font-weight: 600; }
.renglon-total { border-top: 2px solid var(--tinta) !important; font-weight: 700; font-size: 1.05rem; }
.renglon-total dt { font-size: 1rem; }
.texto-favor { color: var(--libro); }
.resumen-linea {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin: 0;
    padding: 0 16px 12px;
}
.resumen-linea > div { display: flex; flex-direction: column; }
.resumen-linea dt { font-size: 0.8rem; color: var(--grafito); }
.resumen-linea dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Registro de la declaración y saldos a favor ---------- */

.boton-chico { padding: 4px 10px; font-size: 0.85rem; }
.boton-peligro { background: var(--sello); border-color: var(--sello); color: #fff; }
.boton-peligro:hover { background: #861f18; border-color: #861f18; color: #fff; }
.entrada-importe { max-width: 11rem; text-align: right; font-variant-numeric: tabular-nums; }
.registro-iva { margin-bottom: 18px; }
.registro-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.registro-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: 0.93rem; }
.registro-cifras { max-width: 460px; }
.registro-iva .aviso-mes ul { margin: 6px 0 0; padding-left: 18px; }
.registro-formulario { max-width: 640px; }
.registro-formulario .opciones { margin-bottom: 8px; }
.registro-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 0 16px; }
.tabla-saldos { max-width: 520px; }
.tabla-saldos .entrada-importe { padding: 4px 8px; margin-left: auto; display: block; }
.saldo-uso { display: block; font-size: 0.9rem; white-space: nowrap; }
.fila-acciones td { border-top: 0; padding-top: 0; }
.acciones-fila { margin-top: 0; }
.accion-saldo { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-end; padding: 8px 0; }
.accion-saldo .campo { margin-bottom: 8px; }
.accion-saldo .acciones { margin: 0 0 8px; }
.ayuda-panel { margin: -8px 0 16px; }

/* ---------- Inicio de sesión ---------- */

.sesion-pagina {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 22px;
    background: radial-gradient(ellipse at 50% 0%, #1c2433 0%, #0f131b 60%);
}
.sesion-logo { display: block; width: 240px; max-width: 70vw; height: auto; }
.sesion-caja {
    width: 100%;
    max-width: 400px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 28px 28px 20px;
}
.sesion-titulo { font-size: 1.35rem; margin: 0 0 16px; }
.sesion-texto { margin: 0 0 16px; color: var(--grafito); }
.sesion-formulario .entrada { width: 100%; max-width: none; }
.sesion-boton { width: 100%; margin-top: 4px; }
.sesion-pie { margin: 0; font-size: 0.82rem; color: #8b93a3; display: inline-flex; align-items: center; gap: 6px; }
.sesion-pie span { color: #c3c9d4; font-weight: 600; letter-spacing: 0.01em; }
.aviso-aviso { border-color: var(--ambar); background: var(--ambar-claro); }

.menu-usuario { position: relative; margin-left: auto; }
.menu-usuario > summary {
    list-style: none;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--libro);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
}
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    min-width: 230px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: 0 8px 24px rgba(28, 34, 48, 0.12);
    padding: 12px 14px;
    display: grid;
    gap: 8px;
}
.menu-usuario-panel p { margin: 0; }
.menu-usuario-nombre { font-weight: 600; }
.menu-usuario-panel form { margin: 0; }

/* ---------- Pie de página: respaldo de VJ Soluciones ---------- */

.pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 18px var(--gutter) 28px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid var(--linea);
    font-size: 0.8rem;
    color: var(--grafito);
}
.pie .simbolo-vj { color: var(--tinta); opacity: 0.85; }
.pie-version { margin-left: auto; font-family: var(--codigo); font-size: 0.75rem; }
.simbolo-vj { display: inline-block; vertical-align: middle; flex: none; }