/**
 * PrintPOS Pro - Estilos globales.
 *
 * Define la identidad visual del sistema:
 * colores, temas, sombras, radios, tipografía y utilidades reutilizables.
 */

:root {
    /**
     * Paleta principal.
     * El azul base se suaviza para que no sea chilloso,
     * especialmente cuando se usa sobre fondos oscuros.
     */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-strong: #1d4ed8;
    --color-primary-soft: rgba(37, 99, 235, .10);
    --color-primary-border: rgba(37, 99, 235, .22);
    --color-primary-text: #1d4ed8;

    --color-secondary: #059669;
    --color-secondary-hover: #047857;
    --color-secondary-soft: rgba(5, 150, 105, .12);
    --color-secondary-border: rgba(5, 150, 105, .22);
    --color-secondary-text: #047857;

    --color-accent: #f97316;
    --color-accent-soft: rgba(249, 115, 22, .12);

    --color-danger: #dc2626;
    --color-danger-soft: rgba(220, 38, 38, .10);
    --color-danger-border: rgba(220, 38, 38, .22);

    /**
     * Superficies y texto.
     */
    --color-dark: #0f172a;
    --color-text: #111827;
    --color-muted: #64748b;
    --color-muted-soft: #94a3b8;
    --color-border: #e5e7eb;
    --color-border-soft: rgba(148, 163, 184, .18);

    --color-surface: #f4f7fb;
    --color-surface-soft: #f8fafc;
    --color-card: #ffffff;
    --color-card-elevated: #ffffff;
    --color-input: #ffffff;
    --color-white: #ffffff;

    /**
     * Sidebar.
     */
    --sidebar-bg-start: #0f172a;
    --sidebar-bg-end: #111827;
    --sidebar-link: rgba(255, 255, 255, .72);
    --sidebar-link-hover: rgba(255, 255, 255, .10);
    --sidebar-link-active: rgba(255, 255, 255, .12);
    --sidebar-text: #ffffff;
    --sidebar-muted: rgba(255, 255, 255, .58);

    /**
     * Layout.
     */
    --sidebar-width: 284px;
    --sidebar-collapsed-width: 84px;
    --topbar-height: 76px;

    /**
     * Sistema tipografico.
     *
     * Fase 1: estos tokens centralizan la jerarquia sin reemplazar aun
     * los pesos historicos definidos dentro de cada modulo. Esto permite
     * migrar pantalla por pantalla y verificar el resultado visual.
     */
    --font-stack-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-stack-inter: Inter, var(--font-stack-system);
    --font-stack-source-sans-3: "Source Sans 3", var(--font-stack-inter);
    --font-stack-ibm-plex-sans: "IBM Plex Sans", var(--font-stack-inter);
    --font-family-interface: var(--font-stack-inter);
    --font-family-sans: var(--font-family-interface);
    --bs-font-sans-serif: var(--font-family-interface);
    --bs-body-font-family: var(--font-family-interface);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;

    --type-page-title-size: clamp(2rem, 3vw, 2.625rem);
    --type-page-title-line-height: 1.08;
    --type-page-title-weight: var(--font-weight-bold);

    --type-section-title-size: 1.375rem;
    --type-section-title-line-height: 1.2;
    --type-section-title-weight: var(--font-weight-bold);

    --type-card-title-size: 1rem;
    --type-card-title-line-height: 1.3;
    --type-card-title-weight: var(--font-weight-semibold);

    --type-body-size: 1rem;
    --type-body-line-height: 1.5;
    --type-body-weight: var(--font-weight-regular);

    --type-secondary-size: .875rem;
    --type-secondary-line-height: 1.45;
    --type-secondary-weight: var(--font-weight-medium);

    --type-label-size: .75rem;
    --type-label-line-height: 1.3;
    --type-label-weight: var(--font-weight-semibold);

    --type-control-size: .875rem;
    --type-control-line-height: 1.25;
    --type-control-weight: var(--font-weight-semibold);

    --type-kpi-size: 1.625rem;
    --type-kpi-line-height: 1.1;
    --type-kpi-weight: var(--font-weight-bold);

    --type-navigation-size: 1rem;
    --type-navigation-line-height: 1.5;
    --type-navigation-weight: var(--font-weight-semibold);

    --type-subnavigation-size: .8rem;
    --type-subnavigation-line-height: 1.5;
    --type-subnavigation-weight: var(--font-weight-medium);

    --type-button-size: .875rem;
    --type-button-line-height: 1.25;
    --type-button-weight: var(--font-weight-semibold);

    --type-badge-size: .75rem;
    --type-badge-line-height: 1.2;
    --type-badge-weight: var(--font-weight-semibold);

    --type-modal-title-size: 1.125rem;
    --type-modal-title-line-height: 1.3;
    --type-modal-title-weight: var(--font-weight-bold);

    /**
     * Bordes y sombras.
     */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow-sm: 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-md: 0 18px 50px rgba(15, 23, 42, .10);
    --shadow-lg: 0 26px 70px rgba(15, 23, 42, .14);

    /**
     * Transiciones.
     */
    --page-transition-duration: .22s;
    --page-transition-distance: 8px;
}

/**
 * Fuente de plataforma.
 *
 * El layout solo emite slugs normalizados por PlatformFont. Las familias y
 * fallbacks permanecen cerrados en CSS; nunca se interpolan nombres o URLs.
 */
:root[data-font-family="inter"] {
    --font-family-interface: var(--font-stack-inter);
}

:root[data-font-family="source-sans-3"] {
    --font-family-interface: var(--font-stack-source-sans-3);
}

:root[data-font-family="ibm-plex-sans"] {
    --font-family-interface: var(--font-stack-ibm-plex-sans);
    --font-weight-heavy: 700;
}

:root[data-font-family="ibm-plex-sans"] body {
    font-synthesis: style small-caps;
}

/* Select reutilizable: mantiene el control nativo para formularios y accesibilidad. */
.app-premium-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.app-premium-select > select {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0 !important;
}

.app-premium-select__button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 13px;
    color: var(--color-text);
    background: var(--color-input);
    font: inherit;
    font-weight: var(--type-control-weight);
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.app-premium-select__button:hover {
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
}

.app-premium-select.is-open .app-premium-select__button,
.app-premium-select__button:focus-visible {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.app-premium-select__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-premium-select__label.is-placeholder {
    color: var(--color-muted);
}

.app-premium-select__button i {
    color: var(--color-muted);
    transition: transform .18s ease;
}

.app-premium-select.is-open .app-premium-select__button i {
    transform: rotate(180deg);
}

.app-premium-select__menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    display: grid;
    max-height: 260px;
    padding: 7px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-card-elevated);
    box-shadow: var(--shadow-md);
}

.app-premium-select__menu[hidden] {
    display: none;
}

.app-premium-select__option {
    width: 100%;
    padding: 10px 11px;
    border: 0;
    border-radius: 9px;
    color: var(--color-text);
    background: transparent;
    font: inherit;
    font-size: .86rem;
    font-weight: var(--type-control-weight);
    text-align: left;
}

.app-premium-select__option:hover,
.app-premium-select__option:focus-visible,
.app-premium-select__option.is-selected {
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    outline: 0;
}

/*
 * Los rotulos auxiliares de fase o contexto ya no forman parte
 * de la interfaz final. Se ocultan globalmente para mantener
 * encabezados limpios sin editar cada vista historica.
 */
.module-eyebrow,
.sales-admin-eyebrow,
.cash-eyebrow,
.reports-eyebrow {
    display: none !important;
}

/**
 * Variables para modo oscuro.
 *
 * El azul se cambia a una versión más elegante y menos saturada.
 * Se evita usar azul puro fuerte sobre fondos negros.
 */
html[data-bs-theme="dark"] {
    --color-primary: #7aa7ff;
    --color-primary-hover: #93c5fd;
    --color-primary-strong: #3b82f6;
    --color-primary-soft: rgba(96, 165, 250, .13);
    --color-primary-border: rgba(96, 165, 250, .24);
    --color-primary-text: #9cc2ff;

    --color-secondary: #34d399;
    --color-secondary-hover: #6ee7b7;
    --color-secondary-soft: rgba(52, 211, 153, .12);
    --color-secondary-border: rgba(52, 211, 153, .22);
    --color-secondary-text: #86efac;

    --color-accent: #fb923c;
    --color-accent-soft: rgba(251, 146, 60, .12);

    --color-danger: #f87171;
    --color-danger-soft: rgba(248, 113, 113, .11);
    --color-danger-border: rgba(248, 113, 113, .24);

    --color-dark: #020617;
    --color-text: #f8fafc;
    --color-muted: #a9b6c9;
    --color-muted-soft: #74839a;
    --color-border: rgba(148, 163, 184, .22);
    --color-border-soft: rgba(148, 163, 184, .13);

    --color-surface: #020617;
    --color-surface-soft: #0b1220;
    --color-card: #0f172a;
    --color-card-elevated: #111c2f;
    --color-input: #0b1220;
    --color-white: #ffffff;

    --sidebar-bg-start: #0b1220;
    --sidebar-bg-end: #07101f;
    --sidebar-link: rgba(226, 232, 240, .72);
    --sidebar-link-hover: rgba(148, 163, 184, .11);
    --sidebar-link-active: rgba(148, 163, 184, .15);
    --sidebar-text: #f8fafc;
    --sidebar-muted: rgba(203, 213, 225, .62);

    --shadow-sm: 0 10px 30px rgba(0, 0, 0, .28);
    --shadow-md: 0 22px 60px rgba(0, 0, 0, .38);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .46);
}

/**
 * Reset base del documento.
 */
html,
body {
    min-height: 100%;
}

/**
 * Cuerpo principal.
 */
body {
    margin: 0;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-family-sans);
    overflow-x: hidden;
}

html[data-bs-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(96, 165, 250, .08), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(52, 211, 153, .055), transparent 34rem),
        var(--color-surface);
}

/**
 * Transiciones suaves para elementos interactivos.
 */
a,
button {
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        opacity .2s ease,
        box-shadow .2s ease;
}

/**
 * Evita cambios bruscos cuando el usuario navega entre páginas internas.
 */
body.is-page-leaving {
    cursor: progress;
}

/**
 * Tarjeta reutilizable empresarial.
 */
.enterprise-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/**
 * Mejora de contraste de tarjetas en modo oscuro.
 */
html[data-bs-theme="dark"] .enterprise-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .018)),
        var(--color-card);
    border-color: var(--color-border);
}

/**
 * Badge de estado reutilizable.
 */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: var(--type-badge-size);
    font-weight: var(--type-badge-weight);
    line-height: var(--type-badge-line-height);
}

/**
 * Estados reutilizables.
 */
.status-pill-success {
    background: var(--color-secondary-soft);
    color: var(--color-secondary-text);
}

.status-pill-primary {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}

.status-pill-danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/**
 * Botones globales.
 */
.btn {
    border-radius: 12px;
    font-weight: var(--type-button-weight);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary));
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .18);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-strong));
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(37, 99, 235, .22);
}

html[data-bs-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 14px 34px rgba(37, 99, 235, .20);
}

/**
 * Dropdowns globales.
 */
.dropdown-menu {
    background: var(--color-card);
    border-color: var(--color-border);
    color: var(--color-text);
}

.dropdown-item {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
}

/**
 * Inputs generales.
 */
.form-control,
.form-select {
    background-color: var(--color-input);
    border-color: var(--color-border);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-input);
    border-color: var(--color-primary-border);
    color: var(--color-text);
    box-shadow: 0 0 0 .22rem var(--color-primary-soft);
}

.form-control::placeholder {
    color: var(--color-muted);
    font-weight: var(--font-weight-regular);
}

.modal-title {
    font-size: var(--type-modal-title-size);
    font-weight: var(--type-modal-title-weight);
    line-height: var(--type-modal-title-line-height);
}

.modal-body {
    font-weight: var(--type-body-weight);
}

.badge {
    font-weight: var(--type-badge-weight);
    line-height: var(--type-badge-line-height);
}

/**
 * Enlaces y textos principales.
 */
.text-primary {
    color: var(--color-primary-text) !important;
}

.bg-primary {
    background-color: var(--color-primary-strong) !important;
}

/**
 * Estado inicial del sidebar antes de que cargue JavaScript.
 */
html.sidebar-collapsed-preload body {
    --sidebar-initial-width: var(--sidebar-collapsed-width);
}

/**
 * Desactiva animaciones para usuarios que prefieren menos movimiento.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   PrintPOS Pro - Jerarquía visual global de formularios
   =========================================================

   Objetivo:
   - Diferenciar claramente label, valor ingresado y placeholder.
   - Mantener consistencia en modo claro y oscuro.
   - Evitar correcciones repetidas por módulo.

   Esta capa no cambia la estructura HTML ni la lógica del sistema.
   Solo normaliza la lectura visual de formularios enterprise.
   ========================================================= */

:root {
    --form-label-color: #475569;
    --form-label-color-strong: #334155;
    --form-label-size: 12px;
    --form-label-weight: var(--type-label-weight);
    --form-label-letter-spacing: .012em;

    --form-value-color: #0f172a;
    --form-value-weight: var(--font-weight-medium);

    --form-placeholder-color: #a3afc2;
    --form-placeholder-weight: var(--font-weight-regular);
}

html[data-bs-theme="dark"] {
    --form-label-color: #a9b6c9;
    --form-label-color-strong: #cbd5e1;
    --form-value-color: #f8fafc;
    --form-placeholder-color: rgba(203, 213, 225, .52);
}

/**
 * Labels globales dentro del panel.
 * Se usa :where() para no subir especificidad innecesariamente.
 */
.app-main :where(
    .form-label,
    .services-field label,
    .inventory-field label,
    .cash-field label,
    .cash-modal label,
    .cash-form-label,
    .pos-checkout-group > label,
    .pos-payment-title-row > label:first-child,
    .pos-checkout-field label
) {
    color: var(--form-label-color) !important;
    font-size: var(--form-label-size) !important;
    font-weight: var(--form-label-weight) !important;
    letter-spacing: var(--form-label-letter-spacing);
    line-height: 1.25;
}

/**
 * Labels de campos enfocados: ayuda al usuario a identificar
 * rápidamente dónde está escribiendo sin ensuciar el diseño.
 */
.app-main :where(
    .services-field:focus-within label,
    .inventory-field:focus-within label,
    .cash-field:focus-within label,
    .cash-modal :where(.cash-field, .cash-modal-field):focus-within label,
    .pos-checkout-field:focus-within label,
    .pos-checkout-group:focus-within > label
) {
    color: var(--color-primary-text) !important;
}

/**
 * Valores reales ingresados o seleccionados.
 * El valor debe leerse más fuerte que el label.
 */
.app-main :where(
    .form-control,
    .form-select,
    .services-field input,
    .services-field textarea,
    .services-custom-select__button,
    .inventory-field input,
    .inventory-field textarea,
    .inventory-select-shell select,
    .cash-modal input,
    .cash-modal textarea,
    .cash-modal select,
    .pos-checkout-modal input,
    .pos-checkout-modal textarea,
    .pos-checkout-modal select
) {
    color: var(--form-value-color);
    font-weight: var(--form-value-weight);
}

/**
 * Placeholders realmente suaves.
 * No deben competir con el dato ingresado.
 */
.app-main :where(
    .form-control,
    .services-field input,
    .services-field textarea,
    .inventory-field input,
    .inventory-field textarea,
    .cash-modal input,
    .cash-modal textarea,
    .pos-checkout-modal input,
    .pos-checkout-modal textarea
)::placeholder {
    color: var(--form-placeholder-color) !important;
    font-weight: var(--form-placeholder-weight) !important;
    opacity: 1;
}

/**
 * Cabeceras de módulo con acciones centradas verticalmente.
 * Aplica a Servicios, Inventario, Movimientos, Kardex y pantallas
 * que usen la estructura module-header/module-actions.
 */
.app-main .module-header {
    align-items: center;
}

.app-main .module-header > div:first-child {
    min-width: 0;
}

.app-main .module-header .module-actions {
    align-self: center;
    align-items: center;
    margin-top: 0;
}

.app-main .module-header .module-actions .btn,
.app-main .module-header .module-actions a,
.app-main .module-header .module-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .app-main .module-header {
        align-items: flex-start;
    }

    .app-main .module-header .module-actions {
        width: 100%;
        align-self: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}