/* Capa de adaptación compartida. Cargar después de los estilos del módulo.
   Todos los registros utilizan tarjetas en móvil y tablas en escritorio. */
:root {
    --tiox-touch: 44px;
    --tiox-dialog-space: 20px;
}

html, body { margin: 0; min-width: 0; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas { max-width: 100%; }
img { height: auto; }
iframe { max-width: 100%; }
fieldset { min-width: 0; }
/* La presentación en tarjetas no debe mostrar tablas o controles ocultos. */
#form1 table[data-responsive][hidden],
#form1 table[data-responsive] [hidden] { display: none !important; }
#form1 table[data-responsive] caption.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.instance-notice {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh; width: 100%; padding: 20px;
    background: #f8d7da; color: #721c24; text-align: center; overflow-wrap: anywhere;
}
.instance-notice img { width: min(300px, 100%); margin-top: 20px; }
.instance-notice h1 { font-size: clamp(24px, 5vw, 32px); }
.instance-notice__message { font-size: 1.2rem; }
.instance-notice__instruction { margin-top: 1px; font-weight: bold; color: #a71d2a; }

.tipo-estacion-page,
.maintenance-shell,
.support-shell,
.monitoreo-page,
.catalog-panel,
.panel,
.content-card,
.table-card,
.filter-card,
.modal-card,
.message-card { min-width: 0; max-width: 100%; }

.tipo-estacion-page { width: min(1600px, 100%); }
.tipo-estacion-page.facturacion-individual-page,
.tipo-estacion-page.facturacion-automatica-page { width: min(1600px, 100%); }

.field, .field-group,
.form-grid > *, .filter-grid > *,
.summary-grid > *, .metrics-grid > *,
.fi-emisor-grid > *, .fa-filtros-grid > *, .fi-captura-grid > * { min-width: 0; }

.contract-form-sections, .emisor-form-sections, .station-form-sections { grid-template-columns: minmax(0, 1fr); }
.contract-form-section, .emisor-form-section, .station-form-section { min-width: 0; }
.contract-section-heading { flex-wrap: wrap; }
.contract-main-product { min-width: 0; flex-wrap: wrap; }
.contract-main-product strong, .contract-main-product span { white-space: normal; overflow-wrap: anywhere; }
.factura-receptor-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
.factura-receptor-row span { white-space: normal; overflow-wrap: anywhere; }
.fi-dropdown { font-family: "Inter", "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; }

.field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.field-group :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.field textarea { resize: vertical; }
.field label, .field > span,
.module-hero__copy, .module-hero__context,
.record-name, .detail-cell, .detail-item,
.modal-card h2, .modal-card h3, .modal-card p,
.message-card p, .summary-card, .metric-card {
    overflow-wrap: anywhere;
}

.module-hero .module-hero__actions { min-width: 0; max-width: 100%; flex-shrink: 1; }
.module-hero .module-hero__context { min-width: 0; }
.module-hero .module-hero__identity { max-width: 100%; }

.button, .btn, .modal-actions, .dialog-actions,
.modal-card__footer, .hero-actions, .filter-actions,
.table-actions, .row-actions, .operation-heading-actions,
.concept-form-actions, .execution-actions, .station-selection-actions {
    max-width: 100%;
    flex-wrap: wrap;
}

.button, .btn { white-space: normal; overflow-wrap: anywhere; }
.table-actions, .row-actions { gap: 8px; }
.kanban-board { min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }
.kanban-column, .kanban-list { min-width: 0; overflow-wrap: anywhere; }
.panel-heading, .table-heading, .content-card__header,
.station-selection-header, .results-heading, .script-preview-header { flex-wrap: wrap; }

/* Las regiones tabulares acotan el ancho sin recortar la página. */
.table-container, .table-wrap, .table-scroll,
.contract-concepts-table-wrap, .fa-table-scroll {
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.table-container:focus-visible, .table-wrap:focus-visible,
.table-scroll:focus-visible, .contract-concepts-table-wrap:focus-visible,
.fa-table-scroll:focus-visible { outline: 3px solid #3158e8; outline-offset: 2px; }

.table-pagination { min-width: 0; }
.table-pagination .table-pagination__controls { min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: center; }
.table-pagination .table-pagination__summary,
.table-pagination .table-pagination__page { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.pager, .pager > div { flex-wrap: wrap; max-width: 100%; }

/* Respetar showModal/is-open/is-visible y el scroll propio de cada familia. */
.modal-overlay, .modal-layer {
    padding: var(--tiox-dialog-space);
    max-width: 100%;
    max-height: 100%;
    overscroll-behavior: contain;
}

.modal-overlay .modal-card,
.modal-layer .modal-card,
.modal-overlay .message-card,
.modal-layer .message-card {
    max-width: 100%;
    max-height: calc(100vh - 2 * var(--tiox-dialog-space));
    max-height: calc(100dvh - 2 * var(--tiox-dialog-space));
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-card__body { min-width: 0; min-height: 0; }
.modal-card__header, .modal-card__footer { flex-shrink: 0; }
.modal-card > .modal-actions, .modal-card > .dialog-actions {
    position: sticky; bottom: 0; z-index: 3; background: #fff;
}
.modal-card__header h2 { white-space: normal; }
.modal-heading, .modal-heading__copy, .modal-header { min-width: 0; }
.modal-heading > div, .modal-header > div { min-width: 0; }
.modal-close, .close-button { flex-shrink: 0; }
.cot-pdf-card, .consultas-pdf-card, .fi-pdf-card { min-height: 0; }
#fiPdfCfdiFrame { min-height: 120px; }
.cot-pdf-card iframe, .consultas-pdf-card iframe { height: 60vh; height: 60dvh; }

/* Shell: una sola navegación, conservando permisos, IDs y estado activo. */
body.menu-page { overflow: auto; }
.menu-page .shell {
    width: 100%; height: 100vh; height: 100dvh;
    margin: 0; padding: 0; gap: 0;
    border: 0; border-radius: 0;
    flex-direction: row;
}
.menu-page .sidebar { height: 100%; }
.menu-page .workspace { flex: 1 1 0%; min-width: 0; height: 100%; }
.menu-page .main-content { flex: 1 1 0%; width: 100%; min-height: 0; border-radius: 0; }
.menu-page .content-iframe { border-radius: 0; }
.menu-page .sidebar-close, .menu-page .mobile-topbar { display: none; }
.menu-page .drawer-backdrop[hidden] { display: none; }
.menu-page .user-welcome, .menu-page .user-company,
.menu-page .mi-text, .menu-page .submenu-item { white-space: normal; overflow-wrap: anywhere; }
.menu-page .submenu-item > span { min-width: 0; }
.menu-page .company-empty-state { min-width: 0; }

@media (max-width: 1024px) {
    .emisor-fiscal-layout { grid-template-columns: minmax(0, 1fr); }
    .menu-page .shell { backdrop-filter: none; overflow: visible; }
    .menu-page .bg, .menu-page .bg-overlay { display: none; }
    .menu-page .mobile-topbar {
        display: flex; align-items: center; gap: 10px;
        flex: 0 0 auto; min-width: 0;
        padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
        border-bottom: 1px solid var(--menu-border);
        background: #fff;
    }
    .menu-page .sidebar-toggle, .menu-page .sidebar-close {
        display: inline-grid; place-items: center;
        width: 44px; height: 44px; flex: 0 0 44px;
        padding: 0; border: 0; border-radius: 9px;
        color: var(--accent-dark); background: #eef0f8;
        cursor: pointer; font-size: 26px;
    }
    .mobile-topbar__copy { min-width: 0; display: grid; gap: 2px; }
    .mobile-topbar__copy strong { color: #142878; font-size: 14px; overflow-wrap: anywhere; }
    .mobile-topbar__copy span { color: #64748b; font-size: 12px; overflow-wrap: anywhere; }
    .menu-page .sidebar {
        position: fixed; inset: 0 auto 0 0; z-index: 110;
        width: min(320px, calc(100% - 32px)); min-width: 0;
        height: 100vh; height: 100dvh;
        display: flex; flex: none; flex-direction: column; gap: 0;
        padding: 0; border-right: 1px solid var(--menu-border);
        background: linear-gradient(180deg, #fff, #f1f5fb);
        box-shadow: 6px 0 20px rgba(20,40,120,.15);
        visibility: hidden; transform: translateX(-100%);
        transition: transform .2s ease, visibility .2s;
    }
    .menu-page .shell.is-drawer-open .sidebar { visibility: visible; transform: translateX(0); }
    .menu-page .drawer-backdrop {
        position: fixed; inset: 0; z-index: 105;
        border: 0; background: rgba(7,23,79,.45);
    }
    .menu-page .sidebar-top {
        min-height: 72px; padding: 12px;
        border: 0; border-bottom: 1px solid var(--menu-border);
        border-radius: 0; gap: 8px; flex-shrink: 0;
    }
    .menu-page .brand { width: auto; flex: 1; }
    .menu-page .brand-logo.tiox-brand-logo { width: 118px; height: 44px; }
    .menu-page .header-actions { gap: 4px; }
    .menu-page .mobile-logout { display: none; }
    .menu-page .sidebar-user {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 16px; border-bottom: 1px solid var(--menu-border);
    }
    .menu-page .user-avatar { flex: 0 0 auto; color: var(--accent); font-size: 28px; }
    .menu-page .user-info { min-width: 0; display: grid; gap: 4px; }
    .menu-page .user-welcome { font-size: 14px; font-weight: 700; }
    .menu-page .user-company { font-size: 12px; color: var(--menu-muted); }
    .menu-page .sidebar-scroll { flex: 1 1 0%; min-height: 0; padding: 12px 0; overflow-y: auto; overscroll-behavior: contain; }
    .menu-page .nav {
        flex-direction: column; align-items: stretch; gap: 4px;
        padding: 0 10px; border: 0; border-radius: 0;
        overflow: visible; background: transparent;
    }
    .menu-page .menu-item {
        width: 100%; min-width: 0; height: auto; min-height: 44px;
        justify-content: space-between; gap: 10px; padding: 10px 12px;
        border: 0; border-radius: 10px; box-shadow: none;
        color: var(--menu-text); background: transparent;
        font-size: 14px; text-align: left; transform: none;
    }
    .menu-page .menu-item .mi-left { display: flex; min-width: 0; gap: 12px; }
    .menu-page .menu-item .mi-text, .menu-page .menu-item .arrow { display: inline; }
    .menu-page .menu-item.active {
        color: #fff; background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    }
    .menu-page .menu-item.active i { color: #fff; }
    .menu-page .submenu.visible {
        display: flex; flex-direction: column; gap: 2px;
        margin: 0; padding: 4px 0 4px 20px; border: 0;
    }
    .menu-page .submenu-item { min-height: 44px; padding: 10px 12px; font-size: 14px; }
    .menu-page .sidebar-bottom {
        display: block; flex-shrink: 0;
        padding: 10px 12px max(10px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--menu-border); background: #fff;
    }
    .menu-page .desktop-logout { display: flex; width: 100%; min-height: 44px; }
    .menu-page .btn-notification { width: 44px; height: 44px; }
    .menu-page .mdc-tooltip, .menu-page .mobile-submenu-popover { display: none; }

    .contract-grid--4, .contract-grid--5, .emisor-grid--fiscal,
    .emisor-grid--3, .emisor-grid--4, .producto-form-grid,
    .form-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metrics-grid, .metrics-grid.metrics-grid--eight,
    .summary-grid, .monitoreo-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    :root { --tiox-dialog-space: 8px; }
    .module-hero.module-hero { padding: 18px; gap: 16px; }
    .module-hero .module-hero__identity { gap: 12px; }
    .module-hero .module-hero__icon { flex: 0 0 44px; width: 44px; height: 44px; font-size: 23px; }
    .module-hero .module-hero__copy h1 { font-size: clamp(22px, 5vw, 28px); }
    .module-hero .module-hero__actions .button { flex: 1 1 140px; }
    .monitoreo-search { flex: 0 0 auto; min-width: 0; }
    .monitoreo-search input { font-size: 16px; }

    .summary-grid, .metrics-grid, .metrics-grid.metrics-grid--eight,
    .monitoreo-summary, .job-grid, .charts-grid, .efficiency-grid,
    .form-grid, .filter-grid, .contract-grid--4, .contract-grid--5, .contract-main-line,
    .emisor-grid--fiscal, .emisor-grid--3, .emisor-grid--4,
    .cliente-form-grid, .producto-form-grid, .form-grid-general,
    .form-grid-three, .software-grid, .fi-emisor-grid, .fi-pago-grid,
    .fi-captura-grid, .fi-productos-filtros, .fa-filtros-grid,
    .cot-header-grid, .cot-libre-grid, .concept-form-grid,
    .edit-form-row--station, .edit-form-row--schedule,
    .fa-resultado-grid { grid-template-columns: minmax(0, 1fr); }

    /* Restablecer spans solo en grids que aquí pasan a una columna. */
    .form-grid > .field, .filter-grid > .field, .filter-grid > .filter-actions,
    .form-grid > .edit-form-row, .usuario-form-grid .span-2,
    #editForm .edit-form-row > .field { grid-column: 1 / -1; }

    .field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
    .login-input, .search-box input, .cot-number, .plantilla-input { font-size: 16px; min-height: 44px; }
    .button, .btn { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
    .icon-button, .fi-icon-button, .consultas-icon-button,
    .modal-close, .close-button, .password-toggle,
    .table-pagination .table-pagination__button {
        min-width: 44px; width: 44px; min-height: 44px; height: 44px; flex-basis: 44px;
    }
    .sort-button, .monitoreo-type-button { min-height: 44px; }
    .switch, .role-option { min-height: 44px; }
    .permission-menu { grid-template-columns: minmax(0, 1fr) 44px; }
    .permission-menu.no-submenus { grid-template-columns: minmax(0, 1fr); }
    .permission-expand { width: 44px; }
    .permission-submenu { min-height: 44px; }
    .permission-name { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
    .modal-actions, .dialog-actions, .modal-card__footer { gap: 10px; flex-wrap: wrap; }
    .modal-actions .button, .dialog-actions .button, .modal-card__footer .button { flex: 1 1 auto; }
    .modal-card__header { align-items: flex-start; gap: 10px; }
    .modal-card__body { padding: 16px; }
    .modal-heading { padding-right: 34px; }
    .dialog-card, .message-card { padding: 24px 18px; }
    .table-pagination { justify-content: center; padding: 12px 0 0; }
    .table-pagination .table-pagination__summary { width: 100%; text-align: center; }
    .table-pagination .table-pagination__controls { width: 100%; margin-left: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }

    .bar-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
    .bar-row > span { overflow-wrap: anywhere; }
    .kanban-board { min-width: 0; grid-template-columns: minmax(0, 1fr); }
    .kanban-column { min-height: 0; }
    .kanban-list { min-height: 0; }
    .factura-receptor-row { grid-template-columns: minmax(0, 1fr); }
    .factura-receptor-row span { white-space: normal; overflow-wrap: anywhere; }
    .fi-generando-card { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    .login-shell { min-height: 100vh; min-height: 100dvh; padding-bottom: 16px; align-items: center; }
    .login-version { position: static; display: table; margin: 0 12px 12px auto; max-width: calc(100% - 24px); }
}

@media screen and (max-width: 767px) {
    /* Un mismo registro/tarjeta para todas las familias, sin clonar sus controles. */
    .tiox-card-region { min-height: 0; max-height: none; overflow: visible; border: 0; }
    #form1 table[data-responsive="cards"],
    #form1 table[data-responsive="cards"] tbody { display: block; width: 100%; min-width: 0; max-width: 100%; table-layout: auto; }
    #form1 table[data-responsive="cards"] colgroup { display: none; }
    #form1 table[data-responsive="cards"] thead { display: block; }
    #form1 table[data-responsive="cards"] thead tr { display: flex; flex-wrap: wrap; gap: 6px; }
    #form1 table[data-responsive="cards"] thead th { display: none; }
    #form1 table[data-responsive="cards"] thead th.tiox-control-heading { display: flex; align-items: center; gap: 10px; position: static; flex: 1 1 110px; padding: 8px; border-radius: 8px; white-space: normal; }
    #form1 table[data-responsive="cards"] thead th[data-label]::before { content: attr(data-label); }
    #form1 table[data-responsive="cards"] tbody tr {
        display: block; margin-bottom: 11px; padding: 10px 12px;
        border: 1px solid #dfe4ef; border-radius: 13px; box-shadow: 0 8px 24px rgba(26, 41, 91, .06);
    }
    #form1 table[data-responsive="cards"] tbody tr:not(.fa-elegida):not(.fa-bloqueada):not(.is-selected) { background: #fff; }
    #form1 table[data-responsive="cards"] tbody tr td {
        display: flex; width: 100%; min-width: 0; max-width: 100%; padding: 9px 0;
        border: 0; border-bottom: 1px solid #eef1f5; font-size: 14px;
        flex-direction: column; align-items: stretch; gap: 5px;
        text-align: left !important; overflow-wrap: anywhere; white-space: normal;
    }
    #form1 table[data-responsive="cards"] tbody tr td[data-label]::before {
        content: attr(data-label); display: block; color: #66708a; font-size: 12px;
        font-weight: 800; text-transform: uppercase; text-align: left; white-space: normal;
    }
    #form1 table[data-responsive="cards"] tbody tr td:last-child { border-bottom: 0; }
    #form1 table[data-responsive="cards"] tbody tr > th { display: block; width: 100%; white-space: normal; }
    #form1 table[data-responsive="cards"] tbody tr td > * { min-width: 0; max-width: 100%; }
    #form1 table[data-responsive="cards"] .record-name { min-width: 0; }
    #form1 table[data-responsive="cards"] :is(.record-name strong, .record-name small, .database-badge, .email-link, .cell-main, .cell-sub, .cell-primary, .cell-primary strong, .cell-primary span, .cell-primary small) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    #form1 table[data-responsive="cards"] .plantilla-input { width: 100%; }
    #form1 table[data-responsive="cards"] :is(.row-actions, .table-actions) { display: flex; flex-wrap: wrap; width: 100%; justify-content: flex-start; gap: 8px; }
    #form1 table[data-responsive="cards"] :is(.row-actions, .table-actions) .icon-button { flex: 1 1 44px; width: auto; }
    #form1 table[data-responsive="cards"] :is(.actions-cell, .factura-concepto-accion) > :is(.icon-button, .fi-icon-button) { width: 100%; }
    #form1 table[data-responsive="cards"] tbody input:not([type="checkbox"]):not([type="radio"]),
    #form1 table[data-responsive="cards"] tbody :is(select, textarea) { width: 100%; min-width: 0; max-width: 100%; }
    #form1 table[data-responsive="cards"] tfoot { display: block; width: 100%; }
    #form1 table[data-responsive="cards"] tfoot tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
    #form1 table[data-responsive="cards"] tfoot :is(th, td) { display: block; flex: 1 1 80px; min-width: 0; padding: 6px 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
    #form1 table[data-responsive="cards"] tfoot th { text-align: left; }
    #form1 table[data-responsive="cards"] tfoot tr.tiox-multi-total th { flex-basis: 100%; }
    #form1 table[data-responsive="cards"] tfoot td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: #66708a; }
    #form1 table[data-responsive="cards"] tfoot td:empty { display: none; }
    .table-container { min-height: 0; max-height: none; }
}

@media (pointer: coarse) {
    .button, .btn, .sort-button { min-height: 44px; }
    .icon-button, .fi-icon-button, .consultas-icon-button,
    .modal-close, .close-button, .table-pagination .table-pagination__button {
        min-width: 44px; min-height: 44px;
    }
}

@media (max-height: 500px) and (max-width: 1024px) {
    .menu-page .sidebar-top { min-height: 56px; padding: 6px 12px; }
    .menu-page .sidebar-user { padding: 6px 16px; }
    .menu-page .sidebar-bottom { padding-top: 6px; padding-bottom: 6px; }
    .menu-page .sidebar-version { padding-top: 4px; }
    .modal-overlay, .modal-layer { --tiox-dialog-space: 6px; }
    .cot-pdf-card iframe, .consultas-pdf-card iframe { height: 45vh; height: 45dvh; }
    .login-shell { align-items: flex-start; padding-top: 12px; padding-bottom: 44px; }
    .table-container { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
    .menu-page .sidebar, .login-logo-animated, .login-card { animation: none; transition: none; }
}

@media print {
    .table-container, .table-wrap, .table-scroll, .contract-concepts-table-wrap, .fa-table-scroll {
        overflow: visible; max-height: none; height: auto;
    }
    #form1 { position: static; min-height: 0; overflow: visible; padding: 0; }
    #form1 table[data-responsive] { display: table; min-width: 0; width: 100%; font-size: 9pt; }
    #form1 table[data-responsive] thead { display: table-header-group; }
    #form1 table[data-responsive] tbody { display: table-row-group; }
    #form1 table[data-responsive] tfoot { display: table-footer-group; }
    #form1 table[data-responsive] tr { display: table-row; }
    #form1 table[data-responsive] th, #form1 table[data-responsive] td { display: table-cell; width: auto; min-width: 0; }
    #form1 table[data-responsive="cards"] thead th.tiox-control-heading { display: table-cell; }
    #form1 table[data-responsive] td::before { display: none; }
    .table-pagination, .pager, .mobile-topbar, .drawer-backdrop { display: none !important; }
}