/* ==========================================================================
   QFact · Design System (Light Theme)
   --------------------------------------------------------------------------
   Sistema visual único para todos los formularios de la plataforma.
   Se incluye globalmente desde public/include/menu.php.

   Contenido:
     1. Tokens (variables CSS)
     2. Base y tipografía responsive
     3. Layout (contenedor, grid, secciones)
     4. Tarjetas (cards)
     5. Controles (input, select, textarea, checkbox, switch)
     6. Estados (hover, focus, disabled, error, success)
     7. Botones (primario, secundario, peligro, icono)
     8. Feedback (alerts, badges, validación)
     9. Tablas
    10. Extras (resumen de totales, barra de acciones, modal, utilidades)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Superficies */
    --qf-bg: #F7FAFC;            /* Gris claro: fondo general */
    --qf-surface: #FFFFFF;
    --qf-surface-alt: #F7FAFC;   /* Gris claro: tablas y bloques de datos */

    /* Marca · Azul institucional */
    --qf-primary: #3182CE;       /* Azul acero: acciones, enlaces y acentos */
    --qf-primary-hover: #2B6CB0;
    --qf-secondary: #1A365D;     /* Azul marino: encabezados y textos principales */
    --qf-accent-soft: #EBF8FF;   /* Azul suave: resaltado del total a pagar */

    /* Texto */
    --qf-text: #1A365D;
    --qf-text-muted: #4A5568;

    /* Bordes y foco */
    --qf-border: #CBD5E1;
    --qf-border-soft: #E2E8F0;
    --qf-border-accent: #3182CE; /* Líneas divisorias de acento */
    --qf-focus-ring: #90CDF4;

    /* Semánticos */
    --qf-error: #DC2626;
    --qf-error-soft: #FEF2F2;
    --qf-success: #16A34A;
    --qf-success-soft: #F0FDF4;
    --qf-warning: #F59E0B;
    --qf-warning-soft: #FFFBEB;

    /* Formas */
    --qf-radius-card: 12px;
    --qf-radius-control: 8px;
    --qf-shadow: 0 1px 3px rgba(26, 54, 93, .08), 0 1px 2px rgba(26, 54, 93, .04);
    --qf-shadow-primary: 0 1px 2px rgba(49, 130, 206, .3);

    /* Espaciado y tipografía */
    --qf-pad-card: 24px;
    --qf-gap: 16px;
    --qf-font-size: 16px;
    --qf-transition: 150ms ease;

    /* Integración con Bootstrap */
    --bs-body-bg: var(--qf-bg);
    --bs-body-color: var(--qf-text);
    --bs-border-color: var(--qf-border);
    --bs-primary: var(--qf-primary);
    --bs-border-radius: var(--qf-radius-control);
}

/* --------------------------------------------------------------------------
   2. BASE Y TIPOGRAFÍA RESPONSIVE
   -------------------------------------------------------------------------- */
body {
    background-color: var(--qf-bg);
    color: var(--qf-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--qf-font-size);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .qf-title {
    color: var(--qf-text);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* Página de formulario: ancho máximo y centrado */
.qf-form {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding: 24px 16px 96px;
}

/* Página ancha (listados, informes, dashboards): mismo ritmo vertical, sin tope de ancho */
.qf-page {
    width: 100%;
    padding: 24px 16px 96px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
/* Rejilla de campos: 1 columna en móvil, 2 en tablet, 3 en desktop */
.qf-grid {
    display: grid;
    gap: var(--qf-gap);
    grid-template-columns: 1fr;
    align-items: start;
}

.qf-col-2 { grid-column: span 1; }
.qf-col-full { grid-column: 1 / -1; }

/* Sección interna con título y separador */
.qf-section + .qf-section {
    margin-top: var(--qf-pad-card);
    padding-top: var(--qf-pad-card);
    border-top: 1px solid var(--qf-border-accent);
}

.qf-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--qf-border-accent);
    margin: 0 0 16px;
}

.qf-section__title svg { width: 16px; height: 16px; flex: none; }

/* Encabezado de página */
.qf-page-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.qf-page-head h1, .qf-page-head h2 { margin: 0; }

/* --------------------------------------------------------------------------
   4. TARJETAS
   -------------------------------------------------------------------------- */
.card,
.qf-card {
    background-color: var(--qf-surface);
    border: 1px solid var(--qf-border);
    border-radius: var(--qf-radius-card);
    box-shadow: var(--qf-shadow);
    margin-bottom: var(--qf-pad-card);
    overflow: hidden;
}

/* Encabezado de tarjeta: azul marino institucional con acento de acero */
.card > .card-header,
.qf-card__head {
    background-color: var(--qf-surface);
    border-bottom: 1px solid var(--qf-border-soft);
    border-left: 3px solid var(--qf-primary);
    padding: 16px 20px;
    color: var(--qf-secondary);
    font-weight: 600;
}

.card > .card-body,
.qf-card__body {
    padding: var(--qf-pad-card);
}

.card > .card-footer,
.qf-card__foot {
    background-color: var(--qf-surface);
    border-top: 1px solid var(--qf-border-soft);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Se elimina el efecto "flotante" antiguo para una interfaz más sobria */
.card { transition: box-shadow var(--qf-transition); }
.card:hover { transform: none; box-shadow: var(--qf-shadow); }

/* --------------------------------------------------------------------------
   5. CONTROLES
   -------------------------------------------------------------------------- */
.form-label,
.qf-label {
    display: block;
    margin-bottom: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--qf-text);
}

.form-label .qf-req { color: var(--qf-error); }

.form-control,
.form-select,
.qf-input,
.qf-select {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    font-size: .9375rem;
    color: var(--qf-text);
    background-color: var(--qf-surface);
    border: 1px solid var(--qf-border);
    border-radius: var(--qf-radius-control);
    transition: border-color var(--qf-transition), box-shadow var(--qf-transition), background-color var(--qf-transition);
}

textarea.form-control { min-height: auto; }

.form-control::placeholder { color: #94A3B8; }

/* Hover */
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: #94A3B8;
}

/* Focus accesible: borde primario + ring de 3px */
.form-control:focus,
.form-select:focus,
.qf-input:focus,
.qf-select:focus {
    border-color: var(--qf-primary);
    box-shadow: 0 0 0 3px var(--qf-focus-ring);
    outline: none;
}

/* Estado deshabilitado */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--qf-surface-alt);
    color: var(--qf-text-muted);
    cursor: not-allowed;
}

.form-text,
.qf-hint {
    display: block;
    margin-top: 6px;
    font-size: .8125rem;
    color: var(--qf-text-muted);
}

/* Casillas y switch */
.form-check { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.form-check-input {
    width: 18px; height: 18px; margin: 0; flex: none;
    border: 1px solid var(--qf-border);
    cursor: pointer;
}
.form-check-input:checked { background-color: var(--qf-primary); border-color: var(--qf-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--qf-focus-ring); border-color: var(--qf-primary); }
.form-check-label { font-size: .9375rem; cursor: pointer; }

.form-switch .form-check-input { width: 38px; height: 22px; }

/* --------------------------------------------------------------------------
   6. ESTADOS DE VALIDACIÓN
   -------------------------------------------------------------------------- */
.form-control.is-invalid,
.form-select.is-invalid,
.qf-invalid {
    border-color: var(--qf-error) !important;
    background-image: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--qf-success);
    background-image: none;
}

.invalid-feedback,
.qf-error-msg {
    display: block;
    margin-top: 6px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--qf-error);
}

.invalid-feedback:empty { display: none; }

/* --------------------------------------------------------------------------
   7. BOTONES
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: .9375rem;
    border-radius: var(--qf-radius-control);
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color var(--qf-transition), transform var(--qf-transition), box-shadow var(--qf-transition), border-color var(--qf-transition);
    border: 1px solid transparent;
}

.btn svg { width: 16px; height: 16px; flex: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--qf-focus-ring); }

/* Primario */
.btn-primary,
.btn-success {
    background-color: var(--qf-primary);
    border-color: var(--qf-primary);
    color: #FFFFFF;
    padding: 12px 24px;
    box-shadow: var(--qf-shadow-primary);
}
.btn-primary:hover,
.btn-success:hover {
    background-color: var(--qf-primary-hover);
    border-color: var(--qf-primary-hover);
    color: #FFFFFF;
    transform: translateY(-1px);
}
.btn-primary:active,
.btn-success:active { transform: translateY(0); }

/* Secundario */
.btn-secondary,
.btn-outline-secondary,
.btn-light {
    background-color: var(--qf-surface);
    border: 1px solid var(--qf-border);
    color: var(--qf-text);
    box-shadow: none;
}
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
    background-color: var(--qf-surface-alt);
    border-color: var(--qf-border);
    color: var(--qf-text);
}

/* Peligro */
.btn-danger,
.btn-outline-danger {
    background-color: var(--qf-surface);
    border: 1px solid #FCA5A5;
    color: var(--qf-error);
    box-shadow: none;
}
.btn-danger:hover,
.btn-outline-danger:hover {
    background-color: var(--qf-error-soft);
    border-color: #FCA5A5;
    color: var(--qf-error);
}

/* Normalización a la paleta QFact de las variantes restantes de Bootstrap */

/* Sólidos de aviso/información → acción primaria */
.btn-warning,
.btn-info {
    background-color: var(--qf-primary);
    border-color: var(--qf-primary);
    color: #FFFFFF;
    box-shadow: var(--qf-shadow-primary);
}
.btn-warning:hover,
.btn-info:hover {
    background-color: var(--qf-primary-hover);
    border-color: var(--qf-primary-hover);
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Contornos y variantes claras → acción secundaria */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-dark,
.btn-dark {
    background-color: var(--qf-surface);
    border: 1px solid var(--qf-border);
    color: var(--qf-text);
    box-shadow: none;
}
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-dark:hover,
.btn-dark:hover {
    background-color: var(--qf-surface-alt);
    border-color: var(--qf-border);
    color: var(--qf-text);
}

/* Enlace-botón → secundario discreto */
.btn-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--qf-primary);
    box-shadow: none;
    padding: 8px 12px;
}
.btn-link:hover { color: var(--qf-primary-hover); text-decoration: underline; }

/* Tamaños: se declaran después de los colores para que el padding no se sobrescriba */
.btn-sm { padding: 6px 12px; font-size: .875rem; gap: 6px; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }

/* Botón de icono (acciones en tablas y filas de detalle) */
.btn-icon {
    padding: 8px;
    width: 38px;
    height: 38px;
    border-radius: var(--qf-radius-control);
    background-color: var(--qf-surface);
    border: 1px solid var(--qf-border);
    color: var(--qf-text-muted);
    box-shadow: none;
}
.btn-icon:hover { background-color: var(--qf-surface-alt); color: var(--qf-text); }
.btn-icon.btn-icon--danger { border-color: #FCA5A5; color: var(--qf-error); }
.btn-icon.btn-icon--danger:hover { background-color: var(--qf-error-soft); color: var(--qf-error); }

/* Barra de acciones inferior */
.qf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    padding-top: 16px;
    margin-top: var(--qf-pad-card);
    border-top: 1px solid var(--qf-border-soft);
}

.qf-actions--sticky {
    position: sticky;
    bottom: 0;
    background-color: var(--qf-surface);
    border-top: 1px solid var(--qf-border);
    padding: 16px var(--qf-pad-card);
    margin: 0 calc(-1 * var(--qf-pad-card));
    border-radius: 0 0 var(--qf-radius-card) var(--qf-radius-card);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, .04);
}

/* --------------------------------------------------------------------------
   8. FEEDBACK
   -------------------------------------------------------------------------- */
.alert {
    border: 1px solid var(--qf-border);
    border-radius: var(--qf-radius-control);
    padding: 14px 16px;
    font-size: .9375rem;
    margin-bottom: var(--qf-gap);
}
.alert-success { background-color: var(--qf-success-soft); border-color: #BBF7D0; color: #14532D; }
.alert-danger, .alert-error { background-color: var(--qf-error-soft); border-color: #FECACA; color: #7F1D1D; }
.alert-warning { background-color: var(--qf-warning-soft); border-color: #FDE68A; color: #78350F; }
.alert-info { background-color: var(--qf-accent-soft); border-color: var(--qf-focus-ring); color: var(--qf-secondary); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 999px;
}
.badge.bg-success { background-color: var(--qf-success) !important; }
.badge.bg-danger { background-color: var(--qf-error) !important; }
.badge.bg-warning { background-color: var(--qf-warning) !important; color: #FFFFFF !important; }
.badge.bg-primary { background-color: var(--qf-primary) !important; }
.badge.bg-secondary, .badge.bg-dark { background-color: var(--qf-text-muted) !important; }
.badge.bg-info { background-color: var(--qf-primary) !important; }

/* Acentos laterales de tarjeta (indicadores): se alinean a los colores del sistema */
.card.border-start.border-4.border-primary { border-left-color: var(--qf-primary) !important; }
.card.border-start.border-4.border-success { border-left-color: var(--qf-success) !important; }
.card.border-start.border-4.border-warning { border-left-color: var(--qf-warning) !important; }
.card.border-start.border-4.border-danger { border-left-color: var(--qf-error) !important; }
.card.border-start.border-4.border-info { border-left-color: var(--qf-primary) !important; }

/* --------------------------------------------------------------------------
   9. TABLAS
   -------------------------------------------------------------------------- */
.table { margin-bottom: 0; color: var(--qf-text); }
.table > :not(caption) > * > * { padding: 12px 14px; border-bottom-color: var(--qf-border-soft); }
.table > thead th,
.table thead.table-light th {
    background-color: var(--qf-surface-alt);
    color: var(--qf-text-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--qf-border);
    white-space: nowrap;
}
.table-hover > tbody > tr:hover > * { background-color: var(--qf-accent-soft); }
.table-responsive { border-radius: var(--qf-radius-control); }

/* --------------------------------------------------------------------------
   10. EXTRAS
   -------------------------------------------------------------------------- */
/* Resumen de totales */
.qf-summary {
    display: grid;
    gap: 8px;
}
.qf-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: .9375rem;
    color: var(--qf-text-muted);
}
.qf-summary__row span:last-child { color: var(--qf-text); font-variant-numeric: tabular-nums; }
.qf-summary__row--total {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--qf-focus-ring);
    border-radius: var(--qf-radius-control);
    background-color: var(--qf-accent-soft);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--qf-secondary);
}
.qf-summary__row--total span:last-child { font-size: 1.25rem; color: var(--qf-primary-hover); }

/* Contenedor del resumen: alineado a la derecha y separado del detalle por 1px */
.qf-summary-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding: 0 16px 16px;
    border-top: 1px solid var(--qf-border-soft);
}
.qf-summary-wrap .qf-summary { width: 100%; max-width: 360px; }

/* Móvil: el resumen ocupa el ancho completo y reduce su separación */
@media (max-width: 639.98px) {
    .qf-summary-wrap { margin-top: 16px; padding: 0 12px 12px; }
    .qf-summary-wrap .qf-summary { max-width: none; }
}

/* Filas dinámicas (detalle de factura, series) */
.qf-row {
    display: grid;
    gap: var(--qf-gap);
    grid-template-columns: 1fr;
    padding: 16px;
    border: 1px solid var(--qf-border-soft);
    border-radius: var(--qf-radius-control);
    background-color: var(--qf-surface);
    margin-bottom: 12px;
}
.qf-row__actions { display: flex; justify-content: flex-end; }

/* Modal */
.modal-content {
    border: 1px solid var(--qf-border);
    border-radius: var(--qf-radius-card);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}
.modal-header { border-bottom: 1px solid var(--qf-border-soft); padding: 18px 20px; }
.modal-body { padding: var(--qf-pad-card); }
.modal-footer { border-top: 1px solid var(--qf-border-soft); padding: 16px 20px; }

/* Menú superior */
.navbar.bg-dark { background-color: var(--qf-secondary) !important; }
.navbar .nav-link { font-size: .9375rem; }
.dropdown-menu {
    border: 1px solid var(--qf-border);
    border-radius: var(--qf-radius-control);
    box-shadow: var(--qf-shadow);
    padding: 6px;
}
.dropdown-item { border-radius: 6px; padding: 8px 10px; font-size: .9375rem; }
.dropdown-item:hover { background-color: var(--qf-surface-alt); }

/* Utilidades */
.qf-muted { color: var(--qf-text-muted) !important; }
.qf-mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.qf-nowrap { white-space: nowrap; }
.qf-mt-0 { margin-top: 0 !important; }
.qf-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Avisos temporales creados por QF.avisar() */
.qf-avisos { margin-bottom: var(--qf-gap); }
.qf-avisos .alert { margin-bottom: 8px; border-radius: var(--qf-radius-control); }

/* --------------------------------------------------------------------------
   11. RESPONSIVE
   -------------------------------------------------------------------------- */

/* Móvil (< 640px) */
@media (max-width: 639.98px) {
    :root { --qf-font-size: 14px; --qf-pad-card: 16px; --qf-gap: 12px; }

    .qf-form, .qf-page { padding: 16px 12px 88px; }
    .qf-actions { justify-content: stretch; }
    .qf-actions .btn { width: 100%; }
    .qf-page-head { flex-direction: column; align-items: stretch; }
    .qf-page-head .btn { width: 100%; }
    th, td { font-size: .8125rem; }
}

/* Tablet (640px – 1024px) */
@media (min-width: 640px) {
    :root { --qf-font-size: 15px; --qf-pad-card: 20px; }

    .qf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qf-col-wide { grid-column: span 2; }
    .qf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop (> 1024px) */
@media (min-width: 1024px) {
    :root { --qf-font-size: 16px; --qf-pad-card: 24px; }

    .qf-form, .qf-page { padding: 32px 24px 96px; }
    .qf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .qf-row { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
    .qf-row__actions { grid-column: 1 / -1; }
}

/* Impresión: se ocultan acciones */
@media print {
    .qf-actions, .navbar, .qf-page-head .btn { display: none !important; }
    .card { box-shadow: none; border-color: #999; }
}