/* ============ CONTABILIDAD / SIRE — INTEGRACIÓN VISUAL ============
   Todo lo visual sale de componentes REALES del panel: .section-head, .hero-actions.fe-actions, .btn/.btn.secondary, .panel-card,
   .empty-state (Usuarios), .fe-filter-card + .fe-form-grid + .form-label/.form-control (Comprobantes), .fe-apidocs-tab
   (Tokens API / "Ver ejemplo"), .fe-table-card/.fe-table/.fe-empty-cell (Tokens/Comprobantes), .fe-user-summary (Usuarios),
   .fe-pill ok/warn (Tokens: Activo/Inactivo) y el modal fiscal .fe-pos-doc-modal + .fe-baja-dialog.
   Aquí SOLO van reglas imprescindibles de encaje; cada una indica el precedente que replica. Sin tipografías, colores,
   radios ni sombras nuevos. ============ */

/* 1. Ancho del contenido = Tokens API: MISMA regla y MISMO cap (1320px) de facturacion-internal-v2.css
      (`.fe-dashboard-section:has(#fe-tab-tokens.active) > .container`), extendida a esta pestaña. */
.fe-dashboard-section:has(#fe-tab-contabilidad.active) > .container {
  width: min(1320px, calc(100% - 34px));
}

/* 2. Acciones del encabezado: grupo real .hero-actions.fe-actions (Empresa / Usuarios: flex, wrap, gap 12px). Dentro de
      .section-head no lleva el margin-top de formulario; el texto no se parte, igual que #feNewTokenBtn (white-space: nowrap). */
#fe-tab-contabilidad .section-head .fe-actions { margin-top: 0; }
#fe-tab-contabilidad .section-head .fe-actions .btn { white-space: nowrap; }
#feSireSyncWrap { display: inline-flex; }

/* 3. Botón deshabilitado: MISMOS valores que el único disabled de botón del panel (#feTestSunatBtn:disabled). */
#feSireSyncBtn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* 4. Ritmo vertical: el estado vacío y la barra de filtros se separan igual que .section-head (margin-bottom 24px). */
#feSireEstado > .panel-card, #fe-tab-contabilidad .fe-filter-card { margin-bottom: 24px; }
#feSireEstado:empty { display: none; }

/* 5. Estado vacío: .empty-state real; su <p> y la fila de pills heredan el color muted del propio componente. */
#fe-tab-contabilidad .empty-state p { margin: 0 auto 16px; max-width: 620px; line-height: 1.55; }
#fe-tab-contabilidad .fe-sire-pills { display: flex; flex-wrap: wrap; gap: 8px; line-height: normal; }
#fe-tab-contabilidad .empty-state .fe-sire-pills { justify-content: center; margin-bottom: 16px; }

/* 6. Nota de solo lectura dentro de la barra de filtros: MISMOS valores que .section-head p (styles.css:272). */
#fe-tab-contabilidad .fe-sire-nota { margin: 0; color: var(--muted); line-height: 1.55; }

/* 7. Pestañas: .fe-apidocs-tabs con su margen propio; los paneles ocultos no ocupan espacio (igual que en el modal). */
#fe-tab-contabilidad .fe-apidocs-tabpanel[hidden] { display: none; }

/* 8. Resumen del periodo: .fe-table de UNA fila (4 columnas). Solo se quita el min-width:860px de .fe-table porque 4
      métricas entran en cualquier ancho; la separación con el detalle es la misma de .fe-user-summary (16px). */
#fe-tab-contabilidad .fe-sire-resumen { min-width: 0; }
#fe-tab-contabilidad .fe-sire-resumen-wrap { margin-bottom: 16px; }

/* 9. Estado vacío de la tabla de detalle legible también con scroll horizontal (móvil): el texto se ajusta al ancho visible. */
#fe-tab-contabilidad .fe-sire-table td.fe-empty-cell { white-space: normal; }
#fe-tab-contabilidad .fe-sire-vacio { display: block; position: sticky; left: 28px; width: min(100%, calc(100vw - 150px)); }

/* 10. Modal: MISMOS valores que #feApiEjemploModal (api-integracion.css), con el ancho de un formulario corto. */
.fe-sire-modal .fe-pos-doc-backdrop { background: rgba(2, 6, 23, .36); backdrop-filter: blur(4px); }
.fe-sire-modal .fe-baja-dialog { position: relative; width: min(560px, calc(100vw - 28px)); max-height: min(90vh, 820px); overflow: auto; margin: 0; overscroll-behavior: contain; }
.fe-sire-modal .fe-baja-dialog:focus { outline: none; }
.fe-sire-modal .section-head { margin-bottom: 12px; align-items: flex-start; }
.fe-sire-modal .section-head h3 { margin: 0; font-size: 24px; line-height: 1; letter-spacing: -.04em; }
.fe-sire-modal .section-head .mini-title { margin-bottom: 6px; }
.fe-sire-modal .fe-sire-muted { color: var(--ink); margin: 0 0 14px; line-height: 1.6; font-size: 13.5px; }   /* = .fe-apidocs p del modal "Ver ejemplo" */
.fe-sire-modal .fe-sire-sol { margin: 16px 0 6px; }
.fe-sire-modal .fe-sire-pills { display: flex; flex-wrap: wrap; gap: 8px; line-height: normal; }
.fe-sire-modal .fe-sire-pills .fe-pill { font-family: var(--font-mono), Poppins, sans-serif; }
.fe-sire-modal .fe-baja-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 10px; }
.fe-sire-modal-x { width: 42px; min-width: 42px; padding: 0; font-size: 22px; line-height: 1; justify-content: center; flex: 0 0 42px; }
html.fe-sire-modal-open, html.fe-sire-modal-open body { overflow: hidden; }

/* Breakpoints del panel (980px de styles.css; 640px de api-integracion.css para el modal). */
@media (max-width: 980px) {
  #fe-tab-contabilidad .section-head { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  /* Paginación (.fe-pagination) en móvil: los controles ocupan el ancho y los botones se compactan para no salirse de la tarjeta. */
  #fe-tab-contabilidad .fe-pagination__controls { width: 100%; justify-content: space-between; gap: 8px; }
  #fe-tab-contabilidad .fe-pagination__controls .btn { min-height: 42px; padding: 0 12px; white-space: nowrap; }
  #fe-tab-contabilidad .fe-pagination__page { min-width: 0; flex: 1 1 auto; }
  .fe-sire-modal { padding: 10px; }
  .fe-sire-modal .fe-baja-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 18px; }
}

/* 11. Textos de panel = MISMA declaración "BODY / TEXTOS DE PANEL" de facturacion-internal-v2.css (.section-head p,
       #feUsersLimitText, #feUsersPlanText, .fe-table td): var(--font-mono). Los equivalentes de SIRE (cabecera de la tarjeta,
       estado vacío, nota, badges y texto del modal) la reciben igual; los títulos siguen con su propia fuente. */
#fe-tab-contabilidad .fe-user-summary strong,
#fe-tab-contabilidad .fe-user-summary span,
#fe-tab-contabilidad .empty-state p,
#fe-tab-contabilidad .fe-sire-nota,
#fe-tab-contabilidad .fe-sire-pills .fe-pill,
.fe-sire-modal .fe-sire-muted {
  font-family: var(--font-mono), Poppins, sans-serif;
}

/* 12. [hidden] efectivo: .btn (inline-flex) y .form-label (grid) pisan el display del atributo hidden. MISMO patrón del
       panel: `.fe-pos-doc-modal[hidden] { display: none !important; }` (styles.css). */
#fe-tab-contabilidad [hidden] { display: none !important; }

/* 13. FASE 10D — detalle y paginación. Reutiliza .fe-table, .fe-pagination, .fe-pill, .btn; solo encaje: */
#feSireDetalleModal .fe-baja-dialog { width: min(720px, calc(100vw - 28px)); }   /* 2 columnas SUNAT / Sistema */
#feSireDetalleModal .fe-sire-detalle { min-width: 0; }
#feSireDetalleModal .fe-sire-detalle th[scope="row"] { width: 140px; }
#feSireDetalleModal .fe-sire-muted { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fe-sire-difs { margin: 12px 0 0; padding-left: 18px; font-family: var(--font-mono), Poppins, sans-serif; font-size: 13.5px; line-height: 1.6; }
#fe-tab-contabilidad .fe-sire-card-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; }
#fe-tab-contabilidad tr[data-sire-det] { cursor: pointer; }
#fe-tab-contabilidad tr[data-sire-det]:focus-visible { outline: 3px solid rgba(192,254,4,.9); outline-offset: -3px; }   /* = foco de .fe-apidocs-tab */
#fe-tab-contabilidad .fe-sire-pills .fe-sire-nota { align-self: center; }
#fe-tab-contabilidad .fe-pagination .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }   /* = #feTestSunatBtn:disabled */

/* 14. FASE 11A — Cierre mensual: mismas tablas .fe-table (resumen de una o pocas filas) dentro de .fe-table-card. */
#feSirePanel-cierre .fe-table-card + .fe-table-card { margin-top: 24px; }
#feSirePanel-cierre .fe-cierre-tabla th[scope="row"] { white-space: nowrap; }
#feSirePanel-cierre .fe-cierre-obs { white-space: normal; }
#feSirePanel-cierre .fe-sire-nota { margin-top: 12px; }
#feSirePanel-cierre .fe-pill { white-space: nowrap; }

/* 15. FASE 11B — Crédito fiscal / Revisar compras / Configuración tributaria / mapeo 621. Mismos componentes; solo encaje: */
#feSirePanel-cierre .fe-table-card[hidden] { display: none; }
#feSirePanel-cierre .fe-cf-filtro { display: flex; align-items: center; gap: 8px; margin: 0; }          /* select inline en la cabecera, como el filtro de Comprobantes */
#feSirePanel-cierre .fe-cf-filtro .form-control { min-height: 42px; width: auto; }
#fe-tab-contabilidad .fe-cf-motivo, .fe-sire-modal .fe-cf-motivo { white-space: normal; min-width: 220px; }
#fe-tab-contabilidad tr[data-cf-det] { cursor: pointer; }
#fe-tab-contabilidad tr[data-cf-det]:focus-visible { outline: 3px solid rgba(192,254,4,.9); outline-offset: -3px; }   /* = foco de .fe-apidocs-tab */
#feCfDetalleModal .fe-baja-dialog, #feCfMapeoModal .fe-baja-dialog { width: min(980px, calc(100vw - 28px)); }
#feTribModal .fe-baja-dialog { width: min(720px, calc(100vw - 28px)); }
.fe-sire-modal .fe-cf-h { margin: 18px 0 8px; font-size: 15px; display: flex; gap: 10px; align-items: center; }
.fe-sire-modal .fe-sire-detalle th[scope="row"] { white-space: nowrap; }
.fe-sire-modal .fe-form-grid .fe-full { grid-column: 1 / -1; }
.fe-sire-modal textarea.form-control { min-height: 72px; resize: vertical; font-family: inherit; }
.fe-sire-modal a { color: inherit; text-decoration: underline; }

/* 16. FASE 11B.2A — Datos tributarios, selección múltiple y referencia de NC. Mismos componentes (.form-label, .btn, .fe-sire-nota). */
#feSirePanel-cierre .fe-cf-lote { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin: 0 0 16px; }
#feSirePanel-cierre .fe-cf-lote[hidden] { display: none; }
#feSirePanel-cierre .fe-cf-lote .form-label { margin: 0; }
#feSirePanel-cierre .fe-cf-lote-motivo { flex: 1 1 260px; }
#feSirePanel-cierre .fe-cf-lote .fe-sire-nota { flex: 1 1 100%; margin-top: 0; }
#feSirePanel-cierre #feCfLoteN { align-self: center; font-weight: 700; }
#feSirePanel-cierre .fe-cf-ref { display: block; margin: 2px 0 0; white-space: nowrap; }
#feSirePanel-cierre .fe-sire-table input[type="checkbox"], .fe-sire-modal .fe-cf-check input { width: 18px; height: 18px; accent-color: #0b0b0b; cursor: pointer; }
.fe-sire-modal .fe-cf-check { display: flex; flex-direction: row; gap: 10px; align-items: center; }#feDatosTrib .fe-cierre-tabla th[scope="row"] { white-space: normal; min-width: 220px; }   /* rótulos largos de datos tributarios: se ajustan en vez de desplazar la tabla */
#feCfLoteModal .fe-baja-dialog > .fe-baja-acciones { display: none; }   /* el modal de confirmación ya trae Cancelar / Confirmar */