/* ================================================================
   iFacture — Design System
   ================================================================
   Hoja unica de tokens y componentes. Forma "Recuadro SII" con la
   paleta Petroleo (decision del 2026-09-26): IBM Plex Sans para texto,
   IBM Plex Mono para folios, RUT y montos, radio 4px y un solo color
   de accion. El coral queda solo para la marca (logo y recuadro).

   REGLAS
   - Ningun color, tamaño o radio se escribe a mano: se usan los tokens.
   - Al crear una vista nueva, consumir estas clases. El bloque style de
     la vista es solo para lo especifico de esa pantalla.
   - Se sobrescribe Color Admin / Bootstrap 5.2 a traves de sus propias
     variables (--bs-*, --app-*); no se reemplaza el tema.

   Referencia visual: https://claude.ai/artifact/4Ft2qZSpH2jtA9XsodVv9Y
   ================================================================ */

:root {
    /* --- Marca --- */
    --if-primary:        #0B5563;
    --if-primary-hover:  #08414C;
    --if-primary-active: #06343D;
    --if-primary-bg:     #E8F2F3;
    --if-primary-bg-alt: #F3F8F8;
    --if-primary-rgb:    11 85 99;   /* uso: rgb(var(--if-primary-rgb) / .15) */
    --if-on-primary:     #FFFFFF;    /* texto sobre un relleno de color */

    --if-accent:         #FF5956;    /* coral: solo logo y marca */
    --if-accent-soft:    #FF8785;
    --if-accent-bg:      rgba(255, 89, 86, 0.14);
    --if-accent-bg-soft: rgba(255, 89, 86, 0.09);
    --if-recuadro:       #CF2F2F;    /* recuadro RUT / tipo / folio del DTE */

    /* --- Semanticos (estados de documento) --- */
    --if-success:    #15803D;
    --if-success-bg: #F0FAF3;
    --if-success-br: #86CFA0;

    --if-warning:    #B45309;
    --if-warning-bg: #FFF9EC;
    --if-warning-br: #E9BB6B;

    --if-danger:       #B91C1C;
    --if-danger-hover: #991B1B;
    --if-danger-bg:    #FEF4F4;
    --if-danger-br:    #EDA0A0;

    --if-info:    #0B5563;
    --if-info-bg: #E8F2F3;
    --if-info-br: #B8D3D6;

    --if-neutral:    #475857;
    --if-neutral-bg: #EEF4F4;
    --if-neutral-br: #C9D4D6;

    /* --- Neutros --- */
    --if-text:        #10201F;
    --if-text-body:   #475857;
    --if-text-muted:  #667776;
    --if-text-subtle: #8A9998;

    --if-bg:            #F7F9F9;
    --if-surface:       #FFFFFF;
    --if-surface-alt:   #F7F9F9;
    --if-surface-hover: #EEF4F4;
    --if-surface-zebra: #FAFCFC;

    --if-border:       #E1E8E9;
    --if-border-soft:  #EDF2F2;
    --if-border-input: #C9D4D6;

    /* --- Series de graficos (el JS las lee de aqui) --- */
    --if-chart-1: #00849E;
    --if-chart-2: #C0621A;

    /* --- Sidebar (se aplica en la Etapa 2) --- */
    --if-sidebar-bg:          #FFFFFF;
    --if-sidebar-text:        #475857;
    --if-sidebar-active-bg:   #E8F2F3;
    --if-sidebar-active-text: #0B5563;
    --if-sidebar-border:      #E1E8E9;

    /* --- Tipografia --- */
    --if-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --if-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --if-fs-page:     22px;   /* titulo de pagina */
    --if-fs-section:  17px;   /* titulo de seccion */
    --if-fs-subtitle: 15px;
    --if-fs-body:     13px;   /* texto, celdas, controles */
    --if-fs-sm:       12px;   /* texto secundario, labels */
    --if-fs-xs:       11px;   /* auxiliar, encabezados de tabla */

    --if-lh-tight: 1.25;
    --if-lh:       1.5;

    /* --- Espaciado --- */
    --if-space-1: 4px;
    --if-space-2: 8px;
    --if-space-3: 12px;
    --if-space-4: 16px;
    --if-space-5: 20px;
    --if-space-6: 24px;
    --if-space-7: 32px;
    --if-space-8: 40px;
    --if-space-9: 48px;
    --if-space-10: 64px;

    /* --- Forma --- */
    --if-radius-sm:   4px;    /* controles */
    --if-radius:      4px;    /* cards */
    --if-radius-lg:   6px;    /* modales, menus */
    --if-radius-pill: 999px;

    --if-shadow:         0 1px 2px rgba(16, 32, 31, .06);
    --if-shadow-lg:      0 4px 14px rgba(16, 32, 31, .08);
    --if-shadow-overlay: 0 16px 40px rgba(16, 32, 31, .18);
    --if-focus-ring:     0 0 0 2px #FFFFFF, 0 0 0 4px var(--if-primary);
    --if-focus-soft:     0 0 0 3px rgb(var(--if-primary-rgb) / .16);

    --if-control-h:    34px;
    --if-control-h-sm: 28px;
    --if-control-h-lg: 42px;  /* tactil */

    --if-dur:  150ms;
    --if-ease: cubic-bezier(.2, 0, 0, 1);

    /* --- Puente con Bootstrap 5.2 --- */
    --bs-primary: var(--if-primary);
    --bs-primary-rgb: 11, 85, 99;
    --bs-success: var(--if-success);
    --bs-success-rgb: 21, 128, 61;
    --bs-warning: var(--if-warning);
    --bs-warning-rgb: 180, 83, 9;
    --bs-danger: var(--if-danger);
    --bs-danger-rgb: 185, 28, 28;
    --bs-info: var(--if-info);
    --bs-info-rgb: 11, 85, 99;
    --bs-body-font-family: var(--if-font-sans);
    --bs-font-sans-serif: var(--if-font-sans);
    --bs-font-monospace: var(--if-font-mono);
    --bs-body-font-size: var(--if-fs-body);
    --bs-body-color: var(--if-text-body);
    --bs-link-color: var(--if-primary);
    --bs-link-hover-color: var(--if-primary-hover);
    --bs-border-color: var(--if-border-input);
    --bs-border-radius: var(--if-radius-sm);
    --bs-border-radius-sm: var(--if-radius-sm);
    --bs-border-radius-lg: var(--if-radius-lg);

    /* --- Puente con Color Admin (componentes; el sidebar va en la Etapa 2) --- */
    --app-theme: var(--if-primary);
    --app-theme-rgb: 11, 85, 99;
    --app-border-color: var(--if-border);
    --app-component-color: var(--if-text);
    --app-component-border-color: var(--if-border-input);
    --app-component-active-bg: var(--if-primary);
    --app-component-active-bg-rgb: 11, 85, 99;
    --app-component-hover-bg: var(--if-surface-hover);
    --app-component-hover-color: var(--if-text);
    --app-component-focus-border-color: var(--if-primary);
    --app-component-dropdown-hover-bg: var(--if-surface-hover);
    --app-component-dropdown-border-color: var(--if-border);
    --app-component-modal-border-color: var(--if-border);
    --app-component-disabled-bg: var(--if-surface-alt);
    --app-component-disabled-color: var(--if-text-subtle);
}

/* ================================================================
   BASE Y TIPOGRAFIA
   ================================================================ */

body {
    font-family: var(--if-font-sans) !important;
    font-size: var(--if-fs-body);
    font-weight: 400;
    color: var(--if-text-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--if-font-sans);
    color: var(--if-text);
    font-weight: 600;
    line-height: var(--if-lh-tight);
}

a { color: var(--if-primary); }
a:hover { color: var(--if-primary-hover); }

/* Jerarquia comun para vistas nuevas */
.if-page-title    { font-size: var(--if-fs-page);     font-weight: 600; color: var(--if-text); margin: 0; }
.if-section-title { font-size: var(--if-fs-section);  font-weight: 600; color: var(--if-text); margin: 0; }
.if-subtitle      { font-size: var(--if-fs-subtitle); font-weight: 500; color: var(--if-text); margin: 0; }
.if-text-secondary{ font-size: var(--if-fs-sm); color: var(--if-text-muted); }
.if-label         { font-size: var(--if-fs-sm); font-weight: 500; color: var(--if-text-body); }
.if-help          { font-size: var(--if-fs-xs); color: var(--if-text-subtle); }

/* Cifras: folios, RUT, fechas y montos */
.num, .folio, .rut, .monto {
    font-family: var(--if-font-mono);
    font-variant-numeric: tabular-nums;
}
.monto { font-weight: 500; color: var(--if-text); white-space: nowrap; }

:focus-visible { outline: none; box-shadow: var(--if-focus-ring); }

/* ================================================================
   TITULOS DE PAGINA
   ================================================================ */

h1.text-primary,
.emision-title,
.page-header {
    color: var(--if-text) !important;
    font-family: var(--if-font-sans);
    font-weight: 600;
    font-size: var(--if-fs-page);
}

/* Badge de conteo junto al titulo (ej: "12 documentos") */
#info-registros {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: var(--if-fs-sm);
    background-color: var(--if-primary-bg) !important;
    color: var(--if-primary) !important;
    border: 1px solid var(--if-info-br);
    border-radius: var(--if-radius-sm);
    padding: 2px 8px;
}

/* ================================================================
   ENCABEZADO DE PAGINA
   <div class="page-head"><div class="page-head__title"><h1 class="if-page-title">…</h1>
   {% help_link %} <span id="info-registros"></span></div>
   <div class="page-head__actions">botones</div></div>
   ================================================================ */

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--if-space-3);
    flex-wrap: wrap;
}
.page-head__title { display: flex; align-items: center; gap: var(--if-space-3); min-width: 0; }
.page-head__actions { display: flex; align-items: center; gap: var(--if-space-2); flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .page-head__actions,
    .page-head__actions .btn { width: 100%; }
}

/* ================================================================
   BOTONES
   Primary · Secondary · Outline · Ghost · Danger · Success
   Tamaños: .btn-xs 24px · .btn-sm 28px · normal 34px · .btn-lg 42px
   Carga: agregar .is-loading al boton (queda deshabilitado al clic).
   ================================================================ */

.btn {
    --bs-btn-font-family: var(--if-font-sans);
    --bs-btn-font-size: var(--if-fs-body);
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 14px;
    --bs-btn-padding-y: 6px;
    --bs-btn-border-radius: var(--if-radius-sm);
    --bs-btn-focus-box-shadow: var(--if-focus-ring);
    --bs-btn-disabled-opacity: .45;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--if-control-h);
    line-height: 1.2;
    box-shadow: none;
    transition: background-color var(--if-dur) var(--if-ease),
                border-color var(--if-dur) var(--if-ease),
                color var(--if-dur) var(--if-ease),
                box-shadow var(--if-dur) var(--if-ease);
}
.btn:focus-visible { box-shadow: var(--if-focus-ring) !important; }
.btn:active { box-shadow: none !important; }

.btn-sm { --bs-btn-padding-x: 10px; --bs-btn-padding-y: 4px; --bs-btn-font-size: var(--if-fs-sm); min-height: var(--if-control-h-sm); }
.btn-xs { padding: 2px 8px; font-size: var(--if-fs-xs); min-height: 24px; }
.btn-lg { --bs-btn-padding-x: 18px; --bs-btn-padding-y: 8px; --bs-btn-font-size: 14px; min-height: var(--if-control-h-lg); }
.btn-icon { padding: 0; width: var(--if-control-h); }

.btn-primary {
    --bs-btn-color: var(--if-on-primary);
    --bs-btn-bg: var(--if-primary);
    --bs-btn-border-color: var(--if-primary);
    --bs-btn-hover-color: var(--if-on-primary);
    --bs-btn-hover-bg: var(--if-primary-hover);
    --bs-btn-hover-border-color: var(--if-primary-hover);
    --bs-btn-active-color: var(--if-on-primary);
    --bs-btn-active-bg: var(--if-primary-active);
    --bs-btn-active-border-color: var(--if-primary-active);
    --bs-btn-disabled-color: var(--if-on-primary);
    --bs-btn-disabled-bg: var(--if-primary);
    --bs-btn-disabled-border-color: var(--if-primary);
}

.btn-secondary,
.btn-default,
.btn-white,
.btn-light {
    --bs-btn-color: var(--if-text);
    --bs-btn-bg: var(--if-surface);
    --bs-btn-border-color: var(--if-border-input);
    --bs-btn-hover-color: var(--if-text);
    --bs-btn-hover-bg: var(--if-surface-hover);
    --bs-btn-hover-border-color: var(--if-border-input);
    --bs-btn-active-color: var(--if-text);
    --bs-btn-active-bg: var(--if-border-soft);
    --bs-btn-active-border-color: var(--if-border-input);
    --bs-btn-disabled-color: var(--if-text-muted);
    --bs-btn-disabled-bg: var(--if-surface);
    --bs-btn-disabled-border-color: var(--if-border-input);
}

.btn-outline-primary {
    --bs-btn-color: var(--if-primary);
    --bs-btn-border-color: var(--if-primary);
    --bs-btn-hover-color: var(--if-primary-hover);
    --bs-btn-hover-bg: var(--if-primary-bg);
    --bs-btn-hover-border-color: var(--if-primary-hover);
    --bs-btn-active-color: var(--if-primary-hover);
    --bs-btn-active-bg: var(--if-primary-bg);
    --bs-btn-active-border-color: var(--if-primary-hover);
    --bs-btn-disabled-color: var(--if-primary);
    --bs-btn-disabled-border-color: var(--if-primary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--if-text-body);
    --bs-btn-border-color: var(--if-border-input);
    --bs-btn-hover-color: var(--if-text);
    --bs-btn-hover-bg: var(--if-surface-hover);
    --bs-btn-hover-border-color: var(--if-border-input);
    --bs-btn-active-color: var(--if-text);
    --bs-btn-active-bg: var(--if-border-soft);
    --bs-btn-active-border-color: var(--if-border-input);
}
.btn-outline-danger {
    --bs-btn-color: var(--if-danger);
    --bs-btn-border-color: var(--if-danger-br);
    --bs-btn-hover-color: var(--if-danger-hover);
    --bs-btn-hover-bg: var(--if-danger-bg);
    --bs-btn-hover-border-color: var(--if-danger);
    --bs-btn-active-color: var(--if-danger-hover);
    --bs-btn-active-bg: var(--if-danger-bg);
    --bs-btn-active-border-color: var(--if-danger);
}

.btn-ghost,
.btn-link {
    --bs-btn-color: var(--if-text-body);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--if-text);
    --bs-btn-hover-bg: var(--if-surface-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--if-text);
    --bs-btn-active-bg: var(--if-border-soft);
    --bs-btn-active-border-color: transparent;
    text-decoration: none;
}
.btn-link { --bs-btn-color: var(--if-primary); --bs-btn-hover-color: var(--if-primary-hover); }

.btn-danger {
    --bs-btn-color: var(--if-on-primary);
    --bs-btn-bg: var(--if-danger);
    --bs-btn-border-color: var(--if-danger);
    --bs-btn-hover-color: var(--if-on-primary);
    --bs-btn-hover-bg: var(--if-danger-hover);
    --bs-btn-hover-border-color: var(--if-danger-hover);
    --bs-btn-active-color: var(--if-on-primary);
    --bs-btn-active-bg: var(--if-danger-hover);
    --bs-btn-active-border-color: var(--if-danger-hover);
    --bs-btn-disabled-color: var(--if-on-primary);
    --bs-btn-disabled-bg: var(--if-danger);
    --bs-btn-disabled-border-color: var(--if-danger);
}

.btn-success {
    --bs-btn-color: var(--if-on-primary);
    --bs-btn-bg: var(--if-success);
    --bs-btn-border-color: var(--if-success);
    --bs-btn-hover-color: var(--if-on-primary);
    --bs-btn-hover-bg: #166534;
    --bs-btn-hover-border-color: #166534;
    --bs-btn-active-color: var(--if-on-primary);
    --bs-btn-active-bg: #14532D;
    --bs-btn-active-border-color: #14532D;
    --bs-btn-disabled-color: var(--if-on-primary);
    --bs-btn-disabled-bg: var(--if-success);
    --bs-btn-disabled-border-color: var(--if-success);
}

.btn-warning {
    --bs-btn-color: var(--if-on-primary);
    --bs-btn-bg: var(--if-warning);
    --bs-btn-border-color: var(--if-warning);
    --bs-btn-hover-color: var(--if-on-primary);
    --bs-btn-hover-bg: #92400E;
    --bs-btn-hover-border-color: #92400E;
    --bs-btn-active-color: var(--if-on-primary);
    --bs-btn-active-bg: #92400E;
    --bs-btn-active-border-color: #92400E;
}

.btn-info {
    --bs-btn-color: var(--if-primary);
    --bs-btn-bg: var(--if-primary-bg);
    --bs-btn-border-color: var(--if-info-br);
    --bs-btn-hover-color: var(--if-primary-hover);
    --bs-btn-hover-bg: #DCEBED;
    --bs-btn-hover-border-color: var(--if-info-br);
    --bs-btn-active-color: var(--if-primary-hover);
    --bs-btn-active-bg: #DCEBED;
    --bs-btn-active-border-color: var(--if-info-br);
}

/* Estado de carga: el texto se oculta y aparece un spinner del mismo color */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--bs-btn-color, currentColor);
    border-right-color: transparent;
    animation: if-spin .7s linear infinite;
}
@keyframes if-spin { to { transform: rotate(360deg); } }

/* ================================================================
   FORMULARIOS
   ================================================================ */

.form-control,
.form-select {
    min-height: var(--if-control-h);
    padding: 6px 10px;
    font-family: var(--if-font-sans);
    font-size: var(--if-fs-body);
    font-weight: 400;
    color: var(--if-text);
    background-color: var(--if-surface);
    border: 1px solid var(--if-border-input);
    border-radius: var(--if-radius-sm);
    transition: border-color var(--if-dur) var(--if-ease), box-shadow var(--if-dur) var(--if-ease);
}
.form-select { padding-right: 32px; }
.form-control::placeholder { color: var(--if-text-subtle); opacity: 1; }
.form-control:focus,
.form-select:focus {
    color: var(--if-text);
    background-color: var(--if-surface);
    border-color: var(--if-primary);
    box-shadow: var(--if-focus-soft);
    outline: 0;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--if-surface-alt);
    color: var(--if-text-muted);
    border-color: var(--if-border);
    opacity: 1;
}
.form-control-sm, .form-select-sm { min-height: var(--if-control-h-sm); font-size: var(--if-fs-sm); padding-top: 3px; padding-bottom: 3px; }
.form-control-lg, .form-select-lg { min-height: var(--if-control-h-lg); font-size: 14px; }
textarea.form-control { min-height: 72px; line-height: var(--if-lh); }

.form-label,
.col-form-label {
    font-size: var(--if-fs-sm);
    font-weight: 500;
    color: var(--if-text-body);
    margin-bottom: var(--if-space-1);
}
.form-text { font-size: var(--if-fs-sm); color: var(--if-text-muted); }

/* Validacion */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--if-danger);
    background-image: none;
    padding-right: 10px;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--if-danger);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, .14);
}
.invalid-feedback {
    font-size: var(--if-fs-sm);
    color: var(--if-danger);
    margin-top: var(--if-space-1);
}

/* Checkbox, radio y switch */
.form-check-input {
    border: 1.5px solid var(--if-border-input);
    background-color: var(--if-surface);
}
.form-check-input:checked {
    background-color: var(--if-primary);
    border-color: var(--if-primary);
}
.form-check-input:focus {
    border-color: var(--if-primary);
    box-shadow: var(--if-focus-soft);
}
.form-check-label { color: var(--if-text); }

/* Input group */
.input-group-text {
    font-size: var(--if-fs-body);
    color: var(--if-text-muted);
    background-color: var(--if-surface-alt);
    border: 1px solid var(--if-border-input);
    border-radius: var(--if-radius-sm);
}

/* Archivo */
.form-control[type="file"]::file-selector-button {
    background: var(--if-surface-alt);
    color: var(--if-text);
    border-right: 1px solid var(--if-border-input);
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: var(--if-control-h);
    border: 1px solid var(--if-border-input) !important;
    border-radius: var(--if-radius-sm) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    color: var(--if-text);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--if-primary) !important;
    box-shadow: var(--if-focus-soft);
}
.select2-dropdown {
    border-color: var(--if-border) !important;
    border-radius: var(--if-radius-lg) !important;
    box-shadow: var(--if-shadow-lg);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--if-primary) !important;
}

/* Selectores de fecha */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
    background: var(--if-primary) !important;
    background-image: none !important;
    color: var(--if-on-primary) !important;
}
.daterangepicker td.in-range { background-color: var(--if-primary-bg); color: var(--if-primary); }
.daterangepicker .ranges li.active { background-color: var(--if-primary); }
.daterangepicker .applyBtn { background-color: var(--if-primary); border-color: var(--if-primary); }

/* ================================================================
   CARDS Y PANELES
   ================================================================ */

.card {
    border: 1px solid var(--if-border);
    border-radius: var(--if-radius);
    box-shadow: none;
}
.card-header {
    background: var(--if-surface);
    border-bottom: 1px solid var(--if-border);
    font-weight: 600;
    color: var(--if-text);
}
.card-footer { background: var(--if-surface-alt); border-top: 1px solid var(--if-border); }

.panel {
    border: 1px solid var(--if-border);
    border-radius: var(--if-radius);
    box-shadow: none;
}
.panel.panel-inverse > .panel-heading,
.panel.panel-default > .panel-heading {
    background: var(--if-surface);
    color: var(--if-text);
    border-bottom: 1px solid var(--if-border);
}
.panel > .panel-heading .panel-title {
    font-size: var(--if-fs-body);
    font-weight: 600;
    color: var(--if-text);
}

/* ================================================================
   AVISO EN LINEA
   Explica una regla de la pantalla (pre-emision, edicion de borrador).
   ================================================================ */

.pre-hint {
    font-size: var(--if-fs-sm);
    color: var(--if-text);
    background: var(--if-info-bg);
    border: 1px solid var(--if-info-br);
    border-left: 3px solid var(--if-primary);
    border-radius: var(--if-radius-sm);
    padding: 10px 14px;
}
.pre-hint > i:first-child { color: var(--if-primary); }

/* ================================================================
   RECUADRO SII
   Identifica el documento como en el DTE impreso: RUT del emisor,
   tipo y folio. Va en detalles y modales que refieren a un documento.
   <div class="recuadro-sii"><span>R.U.T.: 76.543.210-3</span>
   <span>Factura electronica</span><span>N° 1284</span></div>
   ================================================================ */

.recuadro-sii {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 14px;
    border: 2px solid var(--if-recuadro);
    color: var(--if-recuadro);
    font-family: var(--if-font-mono);
    font-size: var(--if-fs-xs);
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    text-transform: uppercase;
    background: var(--if-surface);
}

/* Referencia a un documento dentro de un modal o detalle */
.doc-ref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--if-space-3);
    padding: var(--if-space-3);
    border: 1px solid var(--if-border);
    border-radius: var(--if-radius-sm);
    background: var(--if-surface);
}
.doc-ref__info { display: flex; flex-direction: column; gap: 2px; font-size: var(--if-fs-sm); color: var(--if-text-body); }
.doc-ref__info b { color: var(--if-text); font-size: var(--if-fs-body); }

/* ================================================================
   DATATABLES
   ================================================================ */

table.dataTable thead tr,
table.dataTable thead th {
    background-color: var(--if-surface) !important;
    border-bottom: 2px solid var(--if-primary) !important;
    color: var(--if-text-body) !important;
    font-family: var(--if-font-sans);
    font-size: var(--if-fs-xs) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .05em !important;
    white-space: nowrap;
}

table.dataTable thead th:hover,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background-color: var(--if-surface-alt) !important;
}

table.dataTable tbody td {
    color: var(--if-text-body) !important;
    font-family: var(--if-font-sans);
    font-size: var(--if-fs-body) !important;
    font-weight: 400;
    vertical-align: middle !important;
    border-top: 1px solid var(--if-border-soft) !important;
    border-bottom: none !important;
}

table.dataTable tbody tr:nth-child(even),
table.dataTable tbody tr:nth-child(even) td { background-color: var(--if-surface) !important; }
table.dataTable tbody tr:hover td { background-color: var(--if-surface-hover) !important; }
table.dataTable tbody td,
table.dataTable thead th { padding: 10px 12px !important; }
table.dataTable { width: 100% !important; }
.dataTables_wrapper { width: 100%; overflow-x: auto; }

/* Fila seleccionada (extension Select) */
table.dataTable tbody tr.selected > *,
table.dataTable tbody > tr.selected td {
    box-shadow: inset 0 0 0 9999px var(--if-primary-bg) !important;
    color: var(--if-text) !important;
}
table.dataTable tbody tr.selected > *:first-child { box-shadow: inset 3px 0 0 var(--if-primary), inset 0 0 0 9999px var(--if-primary-bg) !important; }

/* Columnas de cifras */
table.dataTable td.num,
table.dataTable td.monto,
table.dataTable td.folio,
table.dataTable td.rut,
table.dataTable td.text-end { font-variant-numeric: tabular-nums; }
table.dataTable td.num,
table.dataTable td.monto,
table.dataTable td.folio,
table.dataTable td.rut { white-space: nowrap; }

/* Fila de totales */
table.dataTable tfoot th {
    background-color: var(--if-surface-alt) !important;
    border-top: 2px solid var(--if-border) !important;
    color: var(--if-text) !important;
    font-size: var(--if-fs-sm);
    font-weight: 600;
    padding: 10px 12px !important;
    font-variant-numeric: tabular-nums;
}
table.dataTable tfoot th.text-end { font-family: var(--if-font-mono); }

/* Estado vacio y carga */
table.dataTable td.dataTables_empty {
    padding: var(--if-space-7) var(--if-space-4) !important;
    color: var(--if-text-muted) !important;
    text-align: center;
}
.dataTables_processing {
    background: var(--if-surface) !important;
    border: 1px solid var(--if-border) !important;
    border-radius: var(--if-radius-lg) !important;
    box-shadow: var(--if-shadow-lg) !important;
    color: var(--if-text-body) !important;
    font-size: var(--if-fs-sm);
}

/* Fila hija de Responsive */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: var(--if-primary) !important;
    border-color: var(--if-surface) !important;
    box-shadow: none !important;
}

/* Botones de exportacion */
.dt-buttons .dt-button,
.dt-buttons .btn {
    background: var(--if-surface) !important;
    border: 1px solid var(--if-border-input) !important;
    color: var(--if-text) !important;
    border-radius: var(--if-radius-sm) !important;
    font-size: var(--if-fs-sm) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
.dt-buttons .dt-button:hover,
.dt-buttons .btn:hover {
    background: var(--if-surface-hover) !important;
    border-color: var(--if-border-input) !important;
    color: var(--if-text) !important;
}

/* Buscador y cantidad de registros */
.dataTables_filter input,
.dataTables_length select {
    min-height: var(--if-control-h);
    border: 1px solid var(--if-border-input) !important;
    border-radius: var(--if-radius-sm) !important;
    padding: 4px 10px !important;
    font-size: var(--if-fs-body) !important;
    color: var(--if-text) !important;
}
.dataTables_length select { padding-right: 30px !important; }
.dataTables_filter input:focus,
.dataTables_length select:focus {
    border-color: var(--if-primary) !important;
    outline: none !important;
    box-shadow: var(--if-focus-soft) !important;
}
.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
    font-size: var(--if-fs-sm) !important;
    color: var(--if-text-muted) !important;
}

/* Paginacion (DataTables clasico y Bootstrap 5) */
.pagination {
    --bs-pagination-color: var(--if-text-body);
    --bs-pagination-bg: var(--if-surface);
    --bs-pagination-border-color: var(--if-border);
    --bs-pagination-hover-color: var(--if-text);
    --bs-pagination-hover-bg: var(--if-surface-hover);
    --bs-pagination-hover-border-color: var(--if-border);
    --bs-pagination-focus-box-shadow: var(--if-focus-ring);
    --bs-pagination-active-color: var(--if-on-primary);
    --bs-pagination-active-bg: var(--if-primary);
    --bs-pagination-active-border-color: var(--if-primary);
    --bs-pagination-disabled-color: var(--if-text-subtle);
    --bs-pagination-border-radius: var(--if-radius-sm);
    --bs-pagination-font-size: var(--if-fs-sm);
    gap: 4px;
}
.page-link { border-radius: var(--if-radius-sm) !important; font-variant-numeric: tabular-nums; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--if-primary) !important;
    border-color: var(--if-primary) !important;
    color: var(--if-on-primary) !important;
    border-radius: var(--if-radius-sm) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--if-surface-hover) !important;
    border-color: var(--if-border) !important;
    color: var(--if-text) !important;
    border-radius: var(--if-radius-sm) !important;
}

/* ================================================================
   RESUMEN DEL PERIODO
   Banda con neto, exento, IVA y total de lo que muestra la tabla, y los
   conteos por estado. Ventas, Compras y Cesiones la usan igual.
   ================================================================ */

.resumen-periodo {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) repeat(4, minmax(0, 1fr));
    background: var(--if-surface);
    border: 1px solid var(--if-border);
    border-radius: var(--if-radius);
    overflow: hidden;
}
.resumen-periodo__titulo {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--if-fs-xs);
    font-weight: 600;
    color: var(--if-text-body);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.resumen-periodo__titulo span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--if-text-muted); }
.resumen-periodo__titulo i { cursor: help; color: var(--if-text-muted); }
.resumen-periodo__item {
    padding: 10px 16px;
    border-left: 1px solid var(--if-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.resumen-periodo__item span {
    font-size: var(--if-fs-xs);
    font-weight: 600;
    color: var(--if-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.resumen-periodo__item b { font-size: 16px; font-weight: 500; color: var(--if-text); overflow: hidden; text-overflow: ellipsis; }
.resumen-periodo__item--total { background: var(--if-primary-bg-alt); }
.resumen-periodo__item--total b { color: var(--if-primary); font-weight: 600; }
.resumen-periodo__conteos {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--if-space-5);
    padding: 8px 16px;
    border-top: 1px solid var(--if-border);
    background: var(--if-surface-alt);
    font-size: var(--if-fs-sm);
    color: var(--if-text-body);
}
.resumen-periodo__conteos span { display: inline-flex; align-items: center; gap: 6px; }
.resumen-periodo__conteos b { font-family: var(--if-font-mono); font-weight: 600; color: var(--if-text); }
.resumen-periodo__enlace { display: inline-flex; align-items: center; gap: 6px; color: var(--if-text-body); text-decoration: none; }
.resumen-periodo__enlace:hover { color: var(--if-primary); text-decoration: none; }
.resumen-periodo__enlace .ri-arrow-right-line { color: var(--if-primary); }
@media (max-width: 991.98px) {
    .resumen-periodo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .resumen-periodo__titulo { grid-column: 1 / -1; }
    .resumen-periodo__item { border-top: 1px solid var(--if-border); }
    .resumen-periodo__item:nth-of-type(odd) { border-left: none; }
}

/* Grilla de conteos: varias metricas chicas en un solo bloque con divisores.
   <div class="kpi-strip kpi-strip--4"><div class="kpi-strip__item">
   <span class="kpi-strip__label">…</span><b class="kpi-strip__value">…</b></div></div> */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr));
    gap: 1px;
    background: var(--if-border);
    border: 1px solid var(--if-border);
    border-radius: var(--if-radius);
    overflow: hidden;
    height: 100%;
}
.kpi-strip--3 { --kpi-cols: 3; }
.kpi-strip--4 { --kpi-cols: 4; }
.kpi-strip--7 { --kpi-cols: 7; }
@media (max-width: 1399.98px) { .kpi-strip--7 { --kpi-cols: 4; } }
.kpi-strip__item { background: var(--if-surface); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-strip__label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--if-fs-xs); font-weight: 600; color: var(--if-text-muted);
    text-transform: uppercase; letter-spacing: .05em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-strip__value { font-family: var(--if-font-mono); font-size: 18px; font-weight: 500; color: var(--if-text); }
@media (max-width: 767.98px) { .kpi-strip { --kpi-cols: 2 !important; } }

/* Etiqueta de categoria (afecto/exento, tipo de transportista). No es un
   estado: va en neutro, sin icono ni color semantico. */
.etiqueta {
    display: inline-flex;
    align-items: center;
    font-size: var(--if-fs-sm);
    font-weight: 500;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 3px;
    border: 1px solid var(--if-border-input);
    background: var(--if-surface-alt);
    color: var(--if-text-body);
    white-space: nowrap;
}
.etiqueta--acento { border-color: var(--if-info-br); background: var(--if-primary-bg); color: var(--if-primary); }

/* Punto de estado para conteos y leyendas (siempre junto a su texto) */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--if-text-subtle); }
.dot--ok   { background: var(--if-success); }
.dot--warn { background: var(--if-warning); }
.dot--err  { background: var(--if-danger); }
.dot--info { background: var(--if-info); }

/* Acciones de fila: una accion visible y el resto en el menu */
.fila-acciones { display: inline-flex; align-items: center; gap: 2px; }
.fila-acciones .btn-icon { width: var(--if-control-h-sm); min-height: var(--if-control-h-sm); color: var(--if-text-body); font-size: 16px; }
.fila-acciones .btn-icon:hover { color: var(--if-primary); }
.dropdown-item { display: flex; align-items: center; gap: var(--if-space-2); }
.dropdown-item > i { font-size: 15px; color: var(--if-text-muted); width: 16px; text-align: center; }
.dropdown-item.disabled { color: var(--if-text-subtle); }

/* ================================================================
   KPI CARDS
   ================================================================ */

.kpi-card {
    background: var(--if-surface);
    border-radius: var(--if-radius);
    padding: var(--if-space-4) 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: none;
    border: 1px solid var(--if-border);
    height: 100%;
}

.kpi-icon {
    width: 40px; height: 40px;
    border-radius: var(--if-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}

.kpi-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--if-text);
    font-family: var(--if-font-mono);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.kpi-label {
    font-size: var(--if-fs-xs);
    color: var(--if-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 3px;
}

/* Variantes de icono, por significado y no por nombre de pantalla.
   Se conservan los alias historicos para no romper vistas existentes. */
.kpi-icon-primary,
.kpi-icon-total, .kpi-icon-monto, .kpi-icon-docs, .kpi-icon-cert {
    background: var(--if-primary-bg); color: var(--if-primary);
}
.kpi-icon-success,
.kpi-icon-aceptadas, .kpi-icon-aceptados, .kpi-icon-correo {
    background: var(--if-success-bg); color: var(--if-success);
}
.kpi-icon-warning,
.kpi-icon-pendientes, .kpi-icon-telefono {
    background: var(--if-warning-bg); color: var(--if-warning);
}
.kpi-icon-danger,
.kpi-icon-rechazadas, .kpi-icon-rechazados {
    background: var(--if-danger-bg); color: var(--if-danger);
}
.kpi-icon-accent {
    background: var(--if-accent-bg-soft); color: var(--if-recuadro);
}
.kpi-icon-neutral,
.kpi-icon-direccion {
    background: var(--if-neutral-bg); color: var(--if-neutral);
}

/* ================================================================
   ESTADOS DE DOCUMENTO
   Siempre icono + texto: el estado se lee sin depender del color.
   Clases historicas: .badge-estado-ok / -warn / -err / -info / -none.
   Estados SII: .badge-estado-aceptado, -reparos, -enviado, -procesando,
   -pendiente, -rechazado, -anulado, -error, -emitido.
   ================================================================ */

.badge-estado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--if-font-sans);
    font-size: var(--if-fs-sm);
    font-weight: 500;
    line-height: 1;
    padding: 4px 8px 4px 6px;
    border-radius: 3px;
    border: 1px solid;
    white-space: nowrap;
}
.badge-estado::before {
    content: "";
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--if-estado-icon) center / contain no-repeat;
            mask: var(--if-estado-icon) center / contain no-repeat;
}
/* Si la vista ya trae su propio icono, no se duplica */
.badge-estado:has(> i)::before { display: none; }
.badge-estado > i { font-size: 13px; line-height: 1; }

.badge-estado-ok, .badge-estado-aceptado, .badge-estado-emitido {
    background: var(--if-success-bg); color: var(--if-success); border-color: var(--if-success-br);
    --if-estado-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.badge-estado-reparos {
    background: var(--if-success-bg); color: var(--if-success); border-color: var(--if-success-br);
    --if-estado-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3 3 5-6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.5 3v5.5' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='13.5' cy='12.3' r='1.2'/%3E%3C/svg%3E");
}
.badge-estado-warn, .badge-estado-pendiente {
    background: var(--if-warning-bg); color: var(--if-warning); border-color: var(--if-warning-br);
    --if-estado-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='M8 4.8V8l2.2 1.4'/%3E%3C/svg%3E");
}
.badge-estado-err, .badge-estado-rechazado, .badge-estado-error {
    background: var(--if-danger-bg); color: var(--if-danger); border-color: var(--if-danger-br);
    --if-estado-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E");
}
.badge-estado-info, .badge-estado-enviado, .badge-estado-procesando {
    background: var(--if-info-bg); color: var(--if-info); border-color: var(--if-info-br);
    --if-estado-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h9M8.5 4.5L12 8l-3.5 3.5'/%3E%3C/svg%3E");
}
.badge-estado-none, .badge-estado-anulado {
    background: var(--if-neutral-bg); color: var(--if-neutral); border-color: var(--if-neutral-br);
    --if-estado-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='M4 12l8-8'/%3E%3C/svg%3E");
}

/* ================================================================
   AVISOS, TOASTS Y DIALOGOS
   ================================================================ */

.alert {
    display: flex;
    gap: var(--if-space-2);
    align-items: flex-start;
    padding: 10px 12px;
    font-size: var(--if-fs-body);
    border: 1px solid;
    border-radius: var(--if-radius-sm);
    color: var(--if-text);
}
.alert.alert-success { background-color: var(--if-success-bg); border-color: var(--if-success-br); --bs-alert-color: var(--if-text); }
.alert.alert-warning { background-color: var(--if-warning-bg); border-color: var(--if-warning-br); --bs-alert-color: var(--if-text); }
.alert.alert-danger  { background-color: var(--if-danger-bg);  border-color: var(--if-danger-br);  --bs-alert-color: var(--if-text); }
.alert.alert-info,
.alert.alert-primary { background-color: var(--if-info-bg);    border-color: var(--if-info-br);    --bs-alert-color: var(--if-text); }
.alert.alert-success > i:first-child { color: var(--if-success); }
.alert.alert-warning > i:first-child { color: var(--if-warning); }
.alert.alert-danger  > i:first-child { color: var(--if-danger); }
.alert.alert-info > i:first-child,
.alert.alert-primary > i:first-child { color: var(--if-info); }
.alert .alert-link { color: inherit; text-decoration: underline; }
.alert-dismissible { padding-right: 40px; }

/* toastr: fondo oscuro neutro con franja del color del estado */
#toast-container > div {
    opacity: 1;
    font-family: var(--if-font-sans);
    font-size: var(--if-fs-body);
    border-radius: var(--if-radius-lg);
    box-shadow: var(--if-shadow-overlay);
    background-color: var(--if-text);
    border-left: 4px solid var(--if-text-subtle);
}
#toast-container > div:hover { box-shadow: var(--if-shadow-overlay); }
#toast-container > .toast-success { border-left-color: #4ADE80; }
#toast-container > .toast-error   { border-left-color: #F87171; }
#toast-container > .toast-warning { border-left-color: #FBBF24; }
#toast-container > .toast-info    { border-left-color: #7FC3CD; }
#toast-container .toast-title { font-weight: 600; }

/* SweetAlert2. El color del boton de confirmar viene de confirmButtonColor
   en cada llamada (acento o peligro), por eso no se fuerza aqui. */
.swal2-popup {
    font-family: var(--if-font-sans) !important;
    border-radius: var(--if-radius-lg) !important;
}
.swal2-title { color: var(--if-text) !important; font-size: var(--if-fs-section) !important; font-weight: 600 !important; }
.swal2-html-container, .swal2-content { color: var(--if-text-body) !important; font-size: var(--if-fs-body) !important; }
.swal2-styled { border-radius: var(--if-radius-sm) !important; font-size: var(--if-fs-body) !important; font-weight: 500 !important; }
.swal2-styled.swal2-cancel  { background-color: var(--if-surface) !important; color: var(--if-text) !important; border: 1px solid var(--if-border-input) !important; }
.swal2-styled:focus { box-shadow: var(--if-focus-ring) !important; }

/* ================================================================
   MENUS, PESTAÑAS Y BREADCRUMB
   ================================================================ */

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--if-primary-bg);
    --bs-dropdown-link-active-color: var(--if-primary);
    font-size: var(--if-fs-body);
    border: 1px solid var(--if-border);
    border-radius: var(--if-radius-lg);
    box-shadow: var(--if-shadow-lg);
    padding: var(--if-space-1);
}
.dropdown-item {
    border-radius: var(--if-radius-sm);
    padding: 7px 10px;
    color: var(--if-text);
}
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--if-surface-hover); color: var(--if-text); }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--if-primary-bg); color: var(--if-primary); }
.dropdown-item.text-danger:hover { background-color: var(--if-danger-bg); }
.dropdown-divider { border-color: var(--if-border); margin: var(--if-space-1) 0; }

.nav-tabs {
    border-bottom: 1px solid var(--if-border);
    background: transparent;
    gap: 2px;
}
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    padding: 8px 12px;
    color: var(--if-text-body);
    background: transparent;
    font-weight: 500;
}
.nav-tabs .nav-link:hover { color: var(--if-text); border-bottom-color: var(--if-border-input); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--if-primary);
    background: transparent;
    border-bottom-color: var(--if-primary);
    font-weight: 600;
}
.nav-pills .nav-link { border-radius: var(--if-radius-sm); color: var(--if-text-body); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--if-primary-bg); color: var(--if-primary); font-weight: 600; }

/* ================================================================
   MODALES
   Tamaños: .modal-sm 400px · estandar 560px · .modal-lg 800px ·
   .modal-xl 1140px. Bajo 576px el modal se abre como hoja inferior.
   ================================================================ */

.modal { --bs-modal-width: 560px; }
@media (min-width: 576px) {
    .modal-sm { --bs-modal-width: 400px; }
}
@media (min-width: 992px) {
    .modal-lg, .modal-xl { --bs-modal-width: 800px; }
}
@media (min-width: 1200px) {
    .modal-xl { --bs-modal-width: 1140px; }
}

.modal-content {
    border: none;
    border-radius: var(--if-radius-lg);
    box-shadow: var(--if-shadow-overlay);
    background: var(--if-surface);
}
.modal-header {
    padding: var(--if-space-4) var(--if-space-5);
    border-bottom: 1px solid var(--if-border);
    align-items: flex-start;
}
.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--if-text);
    line-height: var(--if-lh-tight);
}
.modal-body { padding: var(--if-space-5); }
.modal-footer {
    padding: var(--if-space-3) var(--if-space-5);
    border-top: 1px solid var(--if-border);
    background: var(--if-surface-alt);
    border-radius: 0 0 var(--if-radius-lg) var(--if-radius-lg);
    gap: var(--if-space-2);
}
.modal-footer > * { margin: 0; }
.modal-backdrop { --bs-backdrop-bg: #10201F; --bs-backdrop-opacity: .45; }
.modal.fade:not(.right):not(.left):not(.modal-right) .modal-dialog { transform: translateY(8px); transition: transform .18s var(--if-ease); }
.modal.show:not(.right):not(.left):not(.modal-right) .modal-dialog { transform: none; }

/* Hoja inferior en movil. Los modales laterales (.modal.right / .left /
   .modal-right) mantienen su panel de alto completo. */
@media (max-width: 575.98px) {
    .modal:not(.right):not(.left):not(.modal-right) .modal-dialog {
        margin: 0;
        min-height: 100%;
        display: flex;
        align-items: flex-end;
    }
    .modal:not(.right):not(.left):not(.modal-right) .modal-dialog-scrollable { height: 100%; }
    .modal:not(.right):not(.left):not(.modal-right) .modal-content {
        border-radius: 12px 12px 0 0;
        max-height: 92vh;
    }
    .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        border-radius: 0;
    }
    .modal-footer .btn { width: 100%; min-height: var(--if-control-h-lg); }
    .modal.fade:not(.right):not(.left):not(.modal-right) .modal-dialog { transform: translateY(24px); }
    .modal.show:not(.right):not(.left):not(.modal-right) .modal-dialog { transform: none; }
}

/* ================================================================
   ESTADO VACIO Y CARGA
   ================================================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--if-space-2);
    padding: var(--if-space-8) var(--if-space-4);
    color: var(--if-text-muted);
    font-size: var(--if-fs-body);
}
.empty-state__icon {
    width: 44px; height: 44px;
    border-radius: var(--if-radius);
    background: var(--if-primary-bg);
    color: var(--if-primary);
    display: grid; place-items: center;
    font-size: 22px;
}
.empty-state__title { color: var(--if-text); font-weight: 600; font-size: 14px; }
.empty-state--card {
    background: var(--if-surface);
    border: 1px dashed var(--if-border-input);
    border-radius: var(--if-radius);
}

.skeleton {
    display: block;
    height: 10px;
    border-radius: var(--if-radius-sm);
    background: linear-gradient(90deg, var(--if-surface-alt), var(--if-border), var(--if-surface-alt));
    background-size: 200% 100%;
    animation: if-shimmer 1.4s ease-in-out infinite;
}
@keyframes if-shimmer { to { background-position: -200% 0; } }

/* ================================================================
   BOTONES DE ACCION EN TABLA
   ================================================================ */

.btn-accion-editar,
.btn-accion-eliminar,
.btn-accion-ver {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--if-radius-sm);
    font-size: 15px;
    text-decoration: none;
    transition: background-color var(--if-dur), color var(--if-dur), border-color var(--if-dur);
    cursor: pointer;
}

/* accion no disponible: se mantiene visible pero sin interaccion */
.btn-accion-editar.disabled,
.btn-accion-eliminar.disabled,
.btn-accion-ver.disabled {
    background: var(--if-surface-hover);
    color: var(--if-text-muted) !important;
    border: 1px solid var(--if-border);
    cursor: not-allowed;
    opacity: .65;
}

.btn-accion-editar {
    background: var(--if-primary-bg); color: var(--if-primary) !important;
    border: 1px solid var(--if-info-br);
}
.btn-accion-editar:hover {
    background: var(--if-primary); color: var(--if-on-primary) !important; border-color: var(--if-primary);
}

.btn-accion-eliminar {
    background: var(--if-danger-bg); color: var(--if-danger) !important;
    border: 1px solid var(--if-danger-br);
}
.btn-accion-eliminar:hover {
    background: var(--if-danger); color: var(--if-on-primary) !important; border-color: var(--if-danger);
}

.btn-accion-ver {
    background: var(--if-surface-hover); color: var(--if-text-body) !important;
    border: 1px solid var(--if-border);
}
.btn-accion-ver:hover {
    background: var(--if-text-body); color: var(--if-surface) !important; border-color: var(--if-text-body);
}

/* Accion no disponible */
.btn-accion-disabled {
    background: var(--if-surface-alt); color: var(--if-text-subtle) !important;
    border-color: var(--if-border); cursor: not-allowed;
}
.btn-accion-disabled:hover {
    background: var(--if-surface-alt); color: var(--if-text-subtle) !important; border-color: var(--if-border);
}

/* Tooltip de los botones de accion */
.tooltip-container { position: relative; display: inline-block; }
.tooltip-caf {
    visibility: hidden; min-width: 70px;
    background: var(--if-text); color: var(--if-surface);
    text-align: center; border-radius: var(--if-radius-sm); padding: 4px 8px;
    position: absolute; z-index: 9999; bottom: 130%; left: 50%;
    transform: translateX(-50%); opacity: 0; transition: opacity .2s;
    font-size: var(--if-fs-xs); white-space: nowrap; pointer-events: none;
}
.tooltip-container:hover .tooltip-caf { visibility: visible; opacity: 1; }
.tooltip { --bs-tooltip-bg: var(--if-text); --bs-tooltip-font-size: var(--if-fs-xs); --bs-tooltip-border-radius: var(--if-radius-sm); }

/* ================================================================
   BARRA DE FILTROS
   ================================================================ */

.filtro-bar {
    background: var(--if-surface);
    border-radius: var(--if-radius);
    border: 1px solid var(--if-border);
    overflow: hidden;
}

.filtro-bar__header {
    display: flex;
    align-items: center;
    padding: var(--if-space-2) 18px;
    background: var(--if-surface-alt);
    border-bottom: 1px solid var(--if-border);
    font-size: var(--if-fs-xs);
    font-weight: 600;
    color: var(--if-text-body);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* La mayuscula es para el titulo del header, no para sus acciones: los
   <a class="btn"> la heredarian (los <button> no, por el reboot). */
.filtro-bar__header .btn {
    text-transform: none;
    letter-spacing: normal;
}

.filtro-bar__body {
    display: flex;
    flex-wrap: wrap;           /* entre 1200 y 1600px los filtros no caben en una fila */
    align-items: flex-end;
    gap: 10px;
    padding: var(--if-space-3) 18px;
}

.filtro-bar__nota {
    padding: 6px 18px 10px;
    font-size: var(--if-fs-xs);
    color: var(--if-text-muted);
}

.filtro-campo {
    display: flex;
    flex-direction: column;
    gap: var(--if-space-1);
    flex-shrink: 0;
}

.filtro-label {
    font-size: var(--if-fs-sm);
    font-weight: 500;
    color: var(--if-text-body);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

.filtro-sep {
    width: 1px;
    height: var(--if-control-h);
    background: var(--if-border);
    align-self: flex-end;
    flex-shrink: 0;
    margin: 0 2px;
}

.filtro-input {
    height: var(--if-control-h);
    font-size: var(--if-fs-body);
    border: 1px solid var(--if-border-input);
    border-radius: var(--if-radius-sm);
    color: var(--if-text);
    padding: 0 10px;
    transition: border-color var(--if-dur), box-shadow var(--if-dur);
    background: var(--if-surface);
}
.filtro-input:focus {
    border-color: var(--if-primary);
    box-shadow: var(--if-focus-soft);
    outline: none;
}

.filtro-fechas { display: flex; align-items: center; gap: 6px; }
.filtro-fechas .filtro-input { min-width: 130px; font-family: var(--if-font-mono); }
.filtro-fechas__sep { font-size: 14px; color: var(--if-text-subtle); flex-shrink: 0; }

.filtro-input--tipo   { min-width: 180px; }
.filtro-input--estado { min-width: 130px; }
.filtro-input--folio  { min-width: 120px; font-family: var(--if-font-mono); }

/* Botones de periodo rapido (control segmentado) */
.btn-group .btn-period {
    height: var(--if-control-h);
    padding: 0 12px;
    font-size: var(--if-fs-sm);
    font-weight: 500;
    color: var(--if-text-body);
    background: var(--if-surface);
    border: 1px solid var(--if-border-input) !important;
    line-height: 1;
    transition: background-color var(--if-dur), color var(--if-dur);
    white-space: nowrap;
}
.btn-group .btn-period:first-child { border-radius: var(--if-radius-sm) 0 0 var(--if-radius-sm) !important; }
.btn-group .btn-period:last-child  { border-radius: 0 var(--if-radius-sm) var(--if-radius-sm) 0 !important; }
.btn-group .btn-period:not(:first-child) { border-left: none !important; }
.btn-period:hover { background: var(--if-surface-hover); color: var(--if-text); }
.btn-period.active {
    background: var(--if-primary-bg) !important;
    border-color: var(--if-border-input) !important;
    color: var(--if-primary) !important;
    font-weight: 600;
}

/* Acciones de la barra */
.btn-filtrar {
    height: var(--if-control-h);
    padding: 0 18px;
    font-size: var(--if-fs-body);
    font-weight: 500;
    background: var(--if-primary);
    color: var(--if-on-primary);
    border: none;
    border-radius: var(--if-radius-sm);
    transition: background-color var(--if-dur);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.btn-filtrar:hover { background: var(--if-primary-hover); color: var(--if-on-primary); }

.btn-limpiar {
    height: var(--if-control-h);
    width: var(--if-control-h);
    padding: 0;
    font-size: 15px;
    background: transparent;
    color: var(--if-text-muted);
    border: 1px solid var(--if-border-input);
    border-radius: var(--if-radius-sm);
    transition: background-color var(--if-dur), color var(--if-dur), border-color var(--if-dur);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-limpiar:hover {
    background: var(--if-surface-hover);
    color: var(--if-text);
    border-color: var(--if-border-input);
}

@media (max-width: 960px) {
    .filtro-bar__body { flex-wrap: wrap; }
    .filtro-sep { display: none; }
    .filtro-fechas .filtro-input { min-width: 120px; }
    .filtro-input--tipo,
    .filtro-input--estado,
    .filtro-input--folio { min-width: unset; width: 100%; }
    .filtro-campo--actions { margin-left: 0 !important; }
}
@media (max-width: 575.98px) {
    .filtro-bar__body { padding: var(--if-space-3); }
    .filtro-campo { width: 100%; }
    .filtro-fechas { width: 100%; }
    .filtro-fechas .filtro-input { min-width: 0; flex: 1; }
    .filtro-campo .btn-group { width: 100%; }
    .btn-group .btn-period { flex: 1; height: var(--if-control-h-lg); }
    .filtro-campo--actions .btn-filtrar { flex: 1; justify-content: center; height: var(--if-control-h-lg); }
    .filtro-campo--actions .btn-limpiar { width: var(--if-control-h-lg); height: var(--if-control-h-lg); }
    .filtro-campo--actions > .filtro-label { display: none; }
}

/* ── Ayuda contextual ─────────────────────────────────────────────
   Icono que abre la pagina del manual (docs.ifacture.cl) de la vista
   actual. Se renderiza con {% help_link %} — ver central/templatetags/ayuda.py */
.help-link {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--if-border-input);
    background: var(--if-surface);
    color: var(--if-text-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--if-dur), color var(--if-dur), border-color var(--if-dur);
    flex: none;
}
.help-link:hover,
.help-link:focus-visible {
    border-color: var(--if-primary);
    background: var(--if-primary-bg);
    color: var(--if-primary);
    text-decoration: none;
}

/* ================================================================
   MODAL LATERAL (cabecera, cuerpo con scroll y secciones)
   Nacio en Cesiones; lo reutilizan Ventas (historial de correos).
   ================================================================ */

.modal-dialog-cesion,
.modal-dialog-cliente,
.modal-dialog-producto,
.modal-dialog-transportista { max-width: 600px; }
.modal-cesion-header,
.modal-cliente-header,
.modal-producto-header,
.modal-transportista-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--if-space-5) var(--if-space-6) var(--if-space-4);
    border-bottom: 1px solid var(--if-border);
    background: var(--if-surface);
    position: relative;
}
.modal-cesion-header__icon,
.modal-cliente-header__icon,
.modal-producto-header__icon,
.modal-transportista-header__icon {
    width: 40px; height: 40px;
    background: var(--if-primary-bg);
    color: var(--if-primary);
    border-radius: var(--if-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.modal-cesion-header .modal-title,
.modal-cliente-header .modal-title,
.modal-producto-header .modal-title,
.modal-transportista-header .modal-title {
    font-size: 16px; font-weight: 600; color: var(--if-text); line-height: 1.2;
}
.modal-cesion-header .modal-subtitle,
.modal-cliente-header .modal-subtitle,
.modal-producto-header .modal-subtitle,
.modal-transportista-header .modal-subtitle {
    font-size: var(--if-fs-sm); color: var(--if-text-muted); margin-top: 2px;
}
.btn-modal-close {
    margin-left: auto;
    background: none; border: none;
    color: var(--if-text-muted); font-size: 20px;
    cursor: pointer; padding: 4px;
    border-radius: var(--if-radius-sm); line-height: 1;
    transition: background-color var(--if-dur), color var(--if-dur);
}
.btn-modal-close:hover { background: var(--if-surface-hover); color: var(--if-text); }

.modal-body-scroll { max-height: calc(100vh - 140px); overflow-y: auto; }

/* ── Secciones formulario ── */
.form-seccion { padding: var(--if-space-4) var(--if-space-6) var(--if-space-2); }
.form-seccion__header {
    display: flex;
    align-items: center;
    font-size: var(--if-fs-xs);
    font-weight: 600;
    color: var(--if-text-body);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-left: 3px solid var(--if-primary);
    padding-left: 10px;
    margin-bottom: 14px;
}
.form-seccion__body .form-group { margin-bottom: 0; }
.form-seccion__body label {
    font-size: var(--if-fs-sm);
    font-weight: 500;
    color: var(--if-text-body);
    margin-bottom: var(--if-space-1);
}

/* ================================================================
   RESPONSIVE Y MOVIMIENTO
   ================================================================ */

@media (max-width: 767.98px) {
    /* area tactil minima y sin zoom automatico de iOS en los campos */
    .btn:not(.btn-sm):not(.btn-xs):not(.btn-icon) { min-height: var(--if-control-h-lg); }
    .form-control,
    .form-select,
    .filtro-input { min-height: var(--if-control-h-lg); font-size: 16px; }
    .modal-body { padding: var(--if-space-4); }
    /* Tablas: ancho minimo y scroll lateral en su contenedor, en vez de aplastar columnas */
    table.dataTable { min-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Boton o accion que el perfil del usuario no permite (ifacture-layout.js, data-requiere) */
.if-sin-permiso,
.if-sin-permiso:hover { opacity: .45; cursor: not-allowed !important; }
.dropdown-item.if-sin-permiso:hover { background: transparent; color: var(--if-text-subtle); }

/* ================================================================
   APARIENCIA (navbar, a la izquierda del usuario: claro / oscuro / sistema)
   ================================================================ */
.app-header .navbar-item.if-tema {
    display: inline-flex; align-items: center; align-self: center; gap: 2px; padding: 2px; margin-right: var(--if-space-2);
    border: 1px solid var(--if-border); border-radius: var(--if-radius-sm); background: var(--if-surface);
}
.if-tema__opcion {
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 3px;
    background: transparent; color: var(--if-text-muted); font-size: 15px; cursor: pointer;
    transition: background var(--if-dur) var(--if-ease), color var(--if-dur) var(--if-ease);
}
.if-tema__opcion:hover { background: var(--if-surface-hover); color: var(--if-text); }
.if-tema__opcion[aria-pressed="true"] { background: var(--if-primary-bg); color: var(--if-primary); }
.if-tema__opcion:focus-visible { outline: none; box-shadow: var(--if-focus-ring); }

/* Ambiente de la empresa en el navbar (Produccion / Certificacion), siempre visible */
.if-ambiente {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: var(--if-space-3);
    padding: 4px 8px; border: 1px solid; border-radius: 3px; font-size: var(--if-fs-xs); font-weight: 600; line-height: 1; white-space: nowrap;
}
.if-ambiente i { font-size: 13px; }
.if-ambiente--prod { color: var(--if-success); background: var(--if-success-bg); border-color: var(--if-success-br); }
.if-ambiente--cert { color: var(--if-warning); background: var(--if-warning-bg); border-color: var(--if-warning-br); }
@media (max-width: 575.98px) {
    .if-ambiente { margin-left: 0; padding: 4px 6px; }
    .if-ambiente__txt { display: none; }
    /* En el telefono el selector de tema es un solo boton que alterna */
    .app-header .navbar-item.if-tema { margin-right: var(--if-space-1); }
    .if-tema__opcion:not([aria-pressed="true"]) { display: none; }
    .if-tema__opcion[aria-pressed="true"] { background: transparent; color: var(--if-text-body); }
}