/**
 * AutoPyme Logistics (APL) - Hoja Común de Estilos y Maquetación
 * 
 * Responsabilidad:
 * 1. Define la composición, layout, flexbox, grid, dimensiones y espaciados independientes del tema.
 * 2. Consume las constantes y tokens semánticos definidos en themes/apl_theme_*.css.
 * 3. Garantiza que la estructura física no varíe al conmutar entre Modo Claro, Modo Oscuro o Automático.
 */

/* ==========================================================================
   1. Estilos Globales Adaptativos (Consumiendo Constantes de Tema)
   ========================================================================== */

:root {
    /* Personalización corporativa de AutoPyme Logistics (Azul Sky) */
    --apl-primary: #0284c7;
    --apl-primary-hover: #0369a1;
    --apl-primary-active: #075985;
    --apl-primary-rgb: 2, 132, 199;
    --apl-primary-text: #ffffff;

    /* Mapeo al contrato de autopyme_components (action_button, dialog,
       wizard_stepper, avatar_uploader): estos componentes estándar leen
       --apc-primary-*, no --apl-*, para no acoplarse a ninguna app anfitriona. */
    --apc-primary: var(--apl-primary);
    --apc-primary-hover: var(--apl-primary-hover);
    --apc-primary-active: var(--apl-primary-active);
    --apc-primary-rgb: var(--apl-primary-rgb);
    --apc-primary-text: var(--apl-primary-text);
}

body.apl-themed,
html.apl-themed {
    background-color: var(--apl-bg-app) !important;
    color: var(--apl-text-primary) !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Contenedores de tarjeta y superficies elevadas */
.apl-card {
    background-color: var(--apl-bg-surface) !important;
    border: 1px solid var(--apl-border) !important;
    color: var(--apl-text-primary) !important;
    box-shadow: var(--apl-shadow-md);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.apl-card-solid {
    background-color: var(--apl-bg-surface-solid) !important;
    border: 1px solid var(--apl-border) !important;
    color: var(--apl-text-primary) !important;
}

/* Campos de entrada (inputs) temáticos con padding ergonómico.
   Alias de APL sobre el estilo unificado de autopyme_components (field.css,
   clase .apc-field): mapea los tokens propios de APL a --apc-field-*, para que
   cualquier campo con esta clase comparta el mismo lenguaje visual que el
   resto de la librería de componentes (y que los formularios OWL basados
   en base_input_field, que consumen las mismas variables). */
.apl-input {
    --apc-field-bg: var(--apl-bg-input);
    --apc-field-border: var(--apl-border);
    --apc-field-border-focus: var(--apl-border-focus);
    --apc-field-text: var(--apl-text-primary);
    --apc-field-placeholder: var(--apl-placeholder, var(--apl-text-muted));

    padding: 0.65rem 1rem !important;
    box-sizing: border-box !important;
    background-color: var(--apc-field-bg) !important;
    border: 1px solid var(--apc-field-border) !important;
    color: var(--apc-field-text) !important;
    transition: border-color 0.15s ease, background-color 0.25s ease;
}

.apl-input:focus {
    border-color: var(--apc-field-border-focus) !important;
    outline: none !important;
}

/* Alias de APL sobre la Action Bar de autopyme_components (action_bar.css,
   clase .apc-actionbar): mismo botón de Guardar/Cancelar en cualquier
   dispositivo, solo con el lenguaje visual (colores) propio de APL. */
.apl-theme-actionbar {
    --apc-actionbar-bg: var(--apl-bg-surface-solid);
    --apc-actionbar-border: var(--apl-divider);
    --apc-actionbar-text: var(--apl-text-primary);
    --apc-actionbar-icon: var(--apl-text-secondary);
    --apc-actionbar-primary-bg: var(--apl-brand-primary);
    --apc-actionbar-primary-bg-hover: var(--apl-brand-primary-hover, var(--apl-brand-primary));
    --apc-actionbar-ghost-bg-hover: var(--apl-bg-pill);
}

/* Campos de entrada con borde inferior activo (Estilo Material Design Underline) */
.apl-input-underline {
    border: none !important;
    border-bottom: 2px solid var(--apl-border) !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    background-color: var(--apl-bg-input) !important;
    color: var(--apl-text-primary) !important;
    padding: 0.55rem 0.75rem !important;
    box-sizing: border-box !important;
    transition: border-bottom-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
}

.apl-input-underline:hover {
    border-bottom-color: var(--apl-border-focus) !important;
}

.apl-input-underline:focus {
    border-bottom-color: var(--apl-border-focus) !important;
    background-color: var(--apl-bg-surface-hover) !important;
    box-shadow: 0 1px 0 0 var(--apl-border-focus) !important;
}

.apl-input-underline::placeholder {
    color: var(--apl-placeholder, var(--apl-text-muted)) !important;
    opacity: var(--apl-placeholder-opacity, 0.6) !important;
}

/* Variante de acento Emerald para puntos de origen y destino */
.apl-input-underline-emerald:focus {
    border-bottom-color: #10b981 !important;
    box-shadow: 0 1px 0 0 #10b981 !important;
}

.apl-input-underline-emerald:hover {
    border-bottom-color: #10b981 !important;
}

/* ==========================================================================
   Etiquetas de campos (Labels) - Contraste Óptimo Universal
   ========================================================================== */

/* 1. Regla base para etiquetas generales */
.apl-label,
label.apl-label {
    font-size: 0.75rem !important; /* 12px */
    font-weight: 600 !important;
    color: var(--apl-label-color, var(--apl-text-primary)) !important;
    letter-spacing: -0.01em !important;
    display: inline-block !important;
}

/* 2. En superficies y contenedores oscuros (Modales DeCA, Editores de Empresa, Ajustes, Relevos)
      Garantizar contraste alto y nitidez (Slate 300: #cbd5e1) SÓLO en modo oscuro: en modo claro
      <html> también lleva bg-slate-900 y la regla dejaría las etiquetas casi invisibles. */
[data-apl-theme="dark"] #new-deca-modal label,
[data-apl-theme="dark"] #apl-partner-editor-container label,
[data-apl-theme="dark"] .o_autopyme_partner_editor label,
[data-apl-theme="dark"] #modal-deca-detail label,
[data-apl-theme="dark"] #transfer-modal label,
[data-apl-theme="dark"] #modal-add-collaborator label,
[data-apl-theme="dark"] #modal-driver-not-registered label,
[data-apl-theme="dark"] #modal-settings label,
[data-apl-theme="dark"] #modal-qr-hub label,
[data-apl-theme="dark"] #police-modal label,
[data-apl-theme="dark"] .bg-slate-950 label,
[data-apl-theme="dark"] .bg-slate-900 label,
[data-apl-theme="dark"] .bg-slate-800 label,
[data-apl-theme="dark"] .bg-slate-850 label,
[data-apl-theme="dark"] label,
[data-apl-theme="dark"] .apl-label,
[data-apl-theme="dark"] label.apl-label,
[data-apl-theme="dark"] .o_base_input_label {
    color: #cbd5e1 !important; /* Slate 300: Máximo contraste y confort visual en fondos oscuros */
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    display: inline-block !important;
}

/* 3. Permitir que clases de utilidad de color de texto en etiquetas mantengan su color explícito */
label.text-white, .text-white label { color: #ffffff !important; }
label.text-slate-100, .text-slate-100 label { color: #f1f5f9 !important; }
label.text-slate-200, .text-slate-200 label { color: #e2e8f0 !important; }
label.text-slate-300, .text-slate-300 label { color: #cbd5e1 !important; }
label.text-slate-400, .text-slate-400 label { color: #94a3b8 !important; }

/* 4. En formularios y superficies claras específicas en Modo Claro
   (incluye #deca-detail-form-area y #deca-detail-content-area: en móvil se
   portan fuera de #deca-detail-split-panel.apl-card -ver portalDecaPanel en
   apl_deca.js- así que sin esta regla sus labels heredan el ".text-slate-100
   label" de <body> y quedan invisibles, del mismo color que el fondo). */
[data-apl-theme="light"] .apl-card label,
[data-apl-theme="light"] .apl-card-solid label,
[data-apl-theme="light"] form.apl-card label,
[data-apl-theme="light"] .bg-white label,
[data-apl-theme="light"] #deca-detail-form-area label,
[data-apl-theme="light"] #deca-detail-content-area label {
    color: #1e293b !important; /* Slate 800 */
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    display: inline-block !important;
}

/* 5. Inputs, Selects y Textareas en modales y editores oscuros */
#new-deca-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
#new-deca-modal select,
#new-deca-modal textarea,
#apl-partner-editor-container input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
#apl-partner-editor-container select,
.o_autopyme_partner_editor input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.o_autopyme_partner_editor select {
    background-color: #0f172a !important; /* Slate 900 sólido para que nunca se muestre blanco */
    border: 1px solid #334155 !important; /* Slate 700 */
    color: #ffffff !important;
    border-radius: 0.75rem !important;
    padding: 0.65rem 1rem !important;
    box-sizing: border-box !important;
    font-size: 0.8125rem !important;
}

#new-deca-modal input:focus,
#new-deca-modal select:focus,
#new-deca-modal textarea:focus,
#apl-partner-editor-container input:focus,
#apl-partner-editor-container select:focus,
.o_autopyme_partner_editor input:focus,
.o_autopyme_partner_editor select:focus {
    border-color: #0284c7 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #0284c7 !important;
}

/* Campos con icono a la izquierda (buscadores): conservar el hueco del icono */
#new-deca-modal input.pl-8,
#apl-partner-editor-container input.pl-8 { padding-left: 2rem !important; }
#new-deca-modal input.pl-10,
#apl-partner-editor-container input.pl-10 { padding-left: 2.5rem !important; }

#new-deca-modal select option,
#apl-partner-editor-container select option,
.o_autopyme_partner_editor select option,
#transfer-modal select option {
    background-color: #0f172a !important;
    color: #ffffff !important;
}

/* Placeholders Adaptativos - Propuesta 1: Micro-Guía Sutil en Cursiva y Atenuada */
.apl-input::placeholder,
input.apl-input::placeholder,
textarea.apl-input::placeholder,
input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    text-transform: lowercase !important;
    font-size: 0.75rem !important; /* ~12px: claramente menor que el texto real escrito (14-16px) */
    font-weight: 400 !important;
    font-style: italic !important; /* Cursiva inequívoca de ayuda/guía que no se confunde con dato real */
    letter-spacing: 0.01em !important;
    color: var(--apl-placeholder, #64748b) !important;
    opacity: var(--apl-placeholder-opacity, 0.48) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Adaptación dinámica según el modo de visualización (Oscuro / Claro) */
html[data-apl-theme="dark"] input::placeholder,
html[data-apl-theme="dark"] textarea::placeholder,
html[data-apl-theme="dark"] input::-webkit-input-placeholder,
html[data-apl-theme="dark"] textarea::-webkit-input-placeholder,
html[data-apl-theme="dark"] input::-moz-placeholder,
html[data-apl-theme="dark"] textarea::-moz-placeholder {
    color: var(--apl-placeholder, #64748b) !important;
    opacity: 0.45 !important;
}

html[data-apl-theme="light"] input::placeholder,
html[data-apl-theme="light"] textarea::placeholder,
html[data-apl-theme="light"] input::-webkit-input-placeholder,
html[data-apl-theme="light"] textarea::-webkit-input-placeholder,
html[data-apl-theme="light"] input::-moz-placeholder,
html[data-apl-theme="light"] textarea::-moz-placeholder {
    color: var(--apl-placeholder, #64748b) !important;
    opacity: 0.52 !important;
}

/* Override específico para inputs con clase uppercase (ej. CIF/NIF, matrículas) */
input.uppercase::placeholder,
.uppercase input::placeholder,
input[class*="uppercase"]::placeholder {
    text-transform: lowercase !important;
    font-style: italic !important;
}

/* Textos adaptativos */
.apl-text-primary {
    color: var(--apl-text-primary) !important;
}

.apl-text-secondary {
    color: var(--apl-text-secondary) !important;
}

.apl-text-muted {
    color: var(--apl-text-muted) !important;
}

/* Divisores adaptativos */
.apl-divider {
    border-color: var(--apl-divider) !important;
}

/* ==========================================================================
   2. Componente Selector de Modo de Visualización (Pill Bar - Solo Iconos)
   ========================================================================== */

.apl-theme-selector-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.25rem;
}

.apl-theme-selector {
    display: inline-flex;
    align-items: center;
    background-color: var(--apl-bg-pill);
    border: 1px solid var(--apl-border-subtle);
    border-radius: 9999px;
    padding: 3px;
    gap: 3px;
    box-shadow: var(--apl-shadow-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    max-width: 140px;
}

.apl-theme-selector:hover {
    border-color: var(--apl-border-strong);
    background-color: var(--apl-bg-card-hover);
}

.apl-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    max-width: 36px;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: var(--apl-text-muted);
    cursor: pointer;
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.apl-theme-btn .material-symbols-outlined {
    font-size: 1.1875rem;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

.apl-theme-btn:hover {
    color: var(--apl-text-primary);
}

.apl-theme-btn:active {
    transform: scale(0.92);
}

/* Estado Plegado (Collapsed): Sólo el botón activo es visible */
.apl-theme-selector.collapsed {
    padding: 3px;
    gap: 0;
    max-width: 44px;
}

.apl-theme-selector.collapsed .apl-theme-btn:not(.active) {
    max-width: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border: none !important;
}

.apl-theme-selector.collapsed .apl-theme-btn.active {
    background-color: transparent;
    color: var(--apl-text-primary);
    box-shadow: none;
    pointer-events: auto;
}

/* Estado Desplegado (Expanded): Muestra todos los botones y resalta el activo */
.apl-theme-selector.expanded {
    gap: 4px;
    padding: 3px 4px;
    background-color: var(--apl-bg-surface);
    border-color: var(--apl-brand-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    max-width: 140px;
}

.apl-theme-selector.expanded .apl-theme-btn.active {
    background-color: var(--apl-bg-pill-active);
    color: var(--apl-brand-primary);
    box-shadow: var(--apl-shadow-sm);
}

[data-apl-theme="dark"] .apl-theme-selector.expanded .apl-theme-btn.active {
    color: #38bdf8; /* Sky 400 */
    background-color: rgba(56, 189, 248, 0.18);
}

[data-apl-theme="light"] .apl-theme-selector.expanded .apl-theme-btn.active {
    color: #0284c7; /* Sky 600 */
    background-color: rgba(2, 132, 199, 0.15);
}

/* ==========================================================================
   3. Botones de Selección de Métodos de Autenticación
   ========================================================================== */

.apl-auth-method-btn {
    display: flex !important;
    width: 100% !important;
    height: 3rem !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    padding: 0 1.25rem !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    line-height: 1.25rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background-color: var(--apl-bg-surface-solid) !important;
    border: 1.5px solid var(--apl-border) !important;
    color: var(--apl-text-primary) !important;
    box-shadow: var(--apl-shadow-sm) !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
}

.apl-auth-method-btn:hover {
    background-color: var(--apl-bg-surface-hover) !important;
    border-color: var(--apl-border-focus) !important;
    box-shadow: var(--apl-shadow-md) !important;
}

.apl-auth-method-btn:active {
    transform: scale(0.98) !important;
}

/* Envoltura de iconos para garantizar alineación milimétrica */
.apl-btn-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.375rem !important;
    height: 1.375rem !important;
    min-width: 1.375rem !important;
    min-height: 1.375rem !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.google-logo-svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.apl-email-icon {
    font-size: 1.375rem !important;
    line-height: 1 !important;
    display: block !important;
    color: var(--apl-brand-primary) !important;
}

.apl-btn-text {
    line-height: 1.25rem !important;
    white-space: nowrap !important;
    color: inherit !important;
}

/* ==========================================================================
   4. Estilos Adaptativos para Asistentes y Formularios a Pantalla Completa
   ========================================================================== */

.apl-input {
    background-color: var(--apl-bg-input) !important;
    border: 1px solid var(--apl-border) !important;
    color: var(--apl-text-primary) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.apl-input:focus {
    border-color: var(--apl-brand-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--apl-brand-primary) !important;
}

.company-type-card {
    position: relative;
    background-color: var(--apl-bg-surface) !important;
    border: 1.5px solid var(--apl-border) !important;
    color: var(--apl-text-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.15s ease;
}

.company-type-card:hover {
    border-color: var(--apl-brand-primary) !important;
    background-color: var(--apl-bg-surface-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.company-type-card:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--apl-brand-primary) !important;
    outline-offset: 2px !important;
}

/* Estado Seleccionado / Activo */
.company-type-card:has(input[type="radio"]:checked),
.company-type-card.is-selected {
    border-color: var(--apl-brand-primary) !important;
    border-width: 1.5px !important;
}

:root .company-type-card:has(input[type="radio"]:checked),
:root .company-type-card.is-selected,
[data-apl-theme="light"] .company-type-card:has(input[type="radio"]:checked),
[data-apl-theme="light"] .company-type-card.is-selected {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(255, 255, 255, 0.98) 100%) !important;
    box-shadow: 0 0 0 1px var(--apl-brand-primary), 0 4px 16px -2px rgba(2, 132, 199, 0.18) !important;
}

[data-apl-theme="dark"] .company-type-card:has(input[type="radio"]:checked),
[data-apl-theme="dark"] .company-type-card.is-selected {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.14) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    box-shadow: 0 0 0 1px var(--apl-brand-primary), 0 4px 20px -2px rgba(56, 189, 248, 0.22) !important;
}

.company-type-card:has(input[type="radio"]:checked) .company-type-icon-box,
.company-type-card.is-selected .company-type-icon-box {
    transform: scale(1.06);
    box-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.12);
}

/* Indicador de Selección Circular (Radio Personalizado) */
.company-type-indicator {
    border-color: var(--apl-border) !important;
    background-color: transparent;
    transition: all 0.2s ease;
}

.company-type-card:hover .company-type-indicator {
    border-color: var(--apl-brand-primary) !important;
}

.company-type-card:has(input[type="radio"]:checked) .company-type-indicator,
.company-type-card.is-selected .company-type-indicator {
    border-color: var(--apl-brand-primary) !important;
    background-color: var(--apl-brand-primary) !important;
    box-shadow: 0 0 0 3px var(--apl-brand-glow);
}

.company-type-check {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.company-type-card:has(input[type="radio"]:checked) .company-type-check,
.company-type-card.is-selected .company-type-check {
    transform: scale(1) !important;
}

.apl-bar-active {
    background-color: #38bdf8 !important;
}

.apl-bar-inactive {
    background-color: var(--apl-divider) !important;
}

/* ==========================================================================
   5. Fondo Especial de Asistente de Registro (Bienvenida & Registro Nuevo)
   ========================================================================== */
.apl-registry-bg {
    background: var(--apl-bg-registry) !important;
}

/* ==========================================================================
   6. Alertas y Banners Semánticos Adaptativos (Design System PSF)
   ========================================================================== */
.apl-alert,
.apl-alert-info,
.apl-alert-warning,
.apl-alert-success,
.apl-alert-error,
.apl-alert-danger {
    border-radius: 0.75rem !important; /* rounded-xl */
    line-height: 1.5 !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.apl-alert-title {
    font-size: 0.8125rem !important; /* 13px */
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.2rem !important;
}

/* 1. Alerta Informativa / Aviso (Notice / Guidance) - Celeste fresco Google/APL */
.apl-alert-info {
    background-color: var(--apl-alert-info-bg) !important;
    border: 1px solid var(--apl-alert-info-border) !important;
    color: var(--apl-alert-info-text) !important;
}
.apl-alert-info .apl-alert-title,
.apl-alert-info .apl-alert-icon {
    color: var(--apl-alert-info-title) !important;
}

/* 2. Alerta de Advertencia (Warning / Caution) - Ámbar dorado */
.apl-alert-warning {
    background-color: var(--apl-alert-warning-bg) !important;
    border: 1px solid var(--apl-alert-warning-border) !important;
    color: var(--apl-alert-warning-text) !important;
}
.apl-alert-warning .apl-alert-title,
.apl-alert-warning .apl-alert-icon {
    color: var(--apl-alert-warning-title) !important;
}

/* 3. Alerta de Éxito (Success / Confirmation) - Esmeralda menta */
.apl-alert-success {
    background-color: var(--apl-alert-success-bg) !important;
    border: 1px solid var(--apl-alert-success-border) !important;
    color: var(--apl-alert-success-text) !important;
}
.apl-alert-success .apl-alert-title,
.apl-alert-success .apl-alert-icon {
    color: var(--apl-alert-success-title) !important;
}

/* 4. Alerta de Error (Danger / Error) - Rojo coral */
.apl-alert-error,
.apl-alert-danger {
    background-color: var(--apl-alert-error-bg) !important;
    border: 1px solid var(--apl-alert-error-border) !important;
    color: var(--apl-alert-error-text) !important;
}
.apl-alert-error .apl-alert-title,
.apl-alert-error .apl-alert-icon,
.apl-alert-danger .apl-alert-title,
.apl-alert-danger .apl-alert-icon {
    color: var(--apl-alert-error-title) !important;
}

/* ==========================================================================
   5. Listas Desplegables de Autocompletado (Sugerencias 100% Opacas y Temáticas)
   ========================================================================== */

.apl-autocomplete-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Posición por defecto: DEBAJO del input (Dropdown) sin tapar jamás el campo */
.apl-autocomplete-dropdown,
.apl-autocomplete-dropdown.drop-down {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Posición cuando el campo está abajo en la pantalla: POR ENCIMA del input (Dropup) sin tapar el campo */
.apl-autocomplete-dropdown.drop-up {
    bottom: calc(100% + 4px) !important;
    top: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --- MODO CLARO (Light Mode) --- */
[data-apl-theme="light"] .apl-autocomplete-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}

[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-item {
    border-bottom: 1px solid #f1f5f9 !important;
    background-color: #ffffff !important;
}

[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-item:last-child {
    border-bottom: none !important;
}

[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-item:hover,
[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-item:active {
    background-color: #f1f5f9 !important;
}

[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-title {
    color: #0f172a !important;
    font-weight: 600 !important;
}

[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-zipcity {
    color: #475569 !important;
}

[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-subtitle {
    color: #64748b !important;
}

[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-subtitle .material-symbols-outlined {
    color: #94a3b8 !important;
}

[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-footer button {
    color: #0284c7 !important;
}

[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-footer button:hover {
    background-color: #e2e8f0 !important;
    color: #0369a1 !important;
}

[data-apl-theme="light"] .apl-autocomplete-dropdown .apl-autocomplete-empty {
    color: #64748b !important;
}

/* --- MODO OSCURO (Dark Mode - Por defecto) --- */
:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown,
[data-apl-theme="dark"] .apl-autocomplete-dropdown {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
}

:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-item,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-item {
    border-bottom: 1px solid rgba(51, 65, 85, 0.5) !important;
    background-color: transparent !important;
}

:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-item:last-child,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-item:last-child {
    border-bottom: none !important;
}

:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-item:hover,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-item:hover,
:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-item:active,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-item:active {
    background-color: #1e293b !important;
}

:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-title,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-zipcity,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-zipcity {
    color: #94a3b8 !important;
}

:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-subtitle,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-subtitle {
    color: #94a3b8 !important;
}

:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-subtitle .material-symbols-outlined,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-subtitle .material-symbols-outlined {
    color: #64748b !important;
}

:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-footer,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-footer {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border-top: 1px solid #334155 !important;
}

:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-footer button,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-footer button {
    color: #38bdf8 !important;
}

:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-footer button:hover,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-footer button:hover {
    background-color: #1e293b !important;
    color: #7dd3fc !important;
}

:root:not([data-apl-theme="light"]) .apl-autocomplete-dropdown .apl-autocomplete-empty,
[data-apl-theme="dark"] .apl-autocomplete-dropdown .apl-autocomplete-empty {
    color: #94a3b8 !important;
}

/* Fallback de seguridad para clases con bg-slate-850 */
.bg-slate-850 {
    background-color: #1e293b !important;
}
[data-apl-theme="light"] .bg-slate-850 {
    background-color: #ffffff !important;
}

/* ==========================================================================
   Master-Detail Split Layout para Pantallas Grandes (Desktop / Tablets) y Modo Horizontal
   ========================================================================== */
@media (min-width: 768px), (orientation: landscape) and (min-width: 560px) {
    #deca-master-detail-container {
        display: grid !important;
        grid-template-columns: 380px 1fr !important;
        gap: 1.5rem !important;
        align-items: start !important;
        width: 100% !important;
    }
    #deca-list-panel {
        width: 100% !important;
        max-width: 380px !important;
        display: block !important;
    }
    #deca-detail-split-panel {
        display: flex !important;
        width: 100% !important;
    }
}

@media (min-width: 1024px) {
    #deca-master-detail-container {
        grid-template-columns: 430px 1fr !important;
    }
    #deca-list-panel {
        max-width: 430px !important;
    }
}

/* Sin carga seleccionada en modo horizontal (apl-md-no-selection, ver apl_deca.js
   applyMasterDetailEmptyLayout): la lista ocupa toda la pantalla en vez de
   repartirse en dos paneles con el de detalle vacío. */
@media (min-width: 768px), (orientation: landscape) and (min-width: 560px) {
    #deca-master-detail-container.apl-md-no-selection {
        grid-template-columns: 1fr !important;
    }
    #deca-master-detail-container.apl-md-no-selection #deca-list-panel {
        max-width: none !important;
    }
    #deca-master-detail-container.apl-md-no-selection #deca-detail-split-panel {
        display: none !important;
    }
}

/* ==========================================================================
   Botón Volver en Detalle DeCA: Oculto en visualización horizontal (Landscape o Desktop)
   En visualización horizontal no es necesario ya que simplemente se pulsa en otra tarjeta.
   ========================================================================== */
@media (orientation: landscape), (min-width: 768px) {
    #btn-deca-detail-back,
    .apl-detail-back-btn {
        display: none !important;
    }
}

/* ==========================================================================
   Indicador de Tipo de Empresa en Cabecera (Modo Horizontal / Pantallas Anchas)
   ========================================================================== */
.apl-header-company-type {
    display: none !important;
}

@media (orientation: landscape), (min-width: 640px) {
    .apl-header-company-type {
        display: flex !important;
    }
}

[data-apl-theme="light"] .apl-header-company-type.apl-company-carrier {
    background-color: rgba(14, 165, 233, 0.12) !important;
    border-color: rgba(14, 165, 233, 0.35) !important;
    color: #0284c7 !important;
}

[data-apl-theme="light"] .apl-header-company-type.apl-company-shipper {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #059669 !important;
}

/* ==========================================================================
   Adaptación de Menús de Secciones y Detalles en Modo Claro
   (Drawer Hamburguesa #modal-hamburger, Modal de Ajustes #modal-settings y #modal-about)
   ========================================================================== */

/* 1. Paneles Izquierdos (Navegación / Secciones) */
[data-apl-theme="light"] #apl-nav-drawer,
[data-apl-theme="light"] #settings-panel-sections,
[data-apl-theme="light"] .o_autopyme_dual_panel_left,
[data-apl-theme="light"] .o_autopyme_settings_sections_panel {
    background-color: #ffffff !important;
    border-right-color: #e2e8f0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08) !important;
}

/* Cabeceras de los paneles izquierdos */
[data-apl-theme="light"] #apl-nav-drawer > div:first-child,
[data-apl-theme="light"] #settings-panel-sections > div:first-child,
[data-apl-theme="light"] .o_autopyme_dual_panel_left > div:first-child,
[data-apl-theme="light"] .o_autopyme_settings_sections_panel > div:first-child {
    background-color: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}

[data-apl-theme="light"] #apl-nav-drawer h3,
[data-apl-theme="light"] #settings-panel-sections h3,
[data-apl-theme="light"] .o_autopyme_dual_panel_left h3,
[data-apl-theme="light"] .o_autopyme_settings_sections_panel h3,
[data-apl-theme="light"] #settings-panel-sections .text-white {
    color: #0f172a !important;
}

[data-apl-theme="light"] #apl-nav-drawer p.text-sky-400,
[data-apl-theme="light"] .o_autopyme_dual_panel_left p.text-sky-400 {
    color: #0284c7 !important;
}

/* Botón cerrar 'X' en cabecera */
[data-apl-theme="light"] #apl-nav-drawer button,
[data-apl-theme="light"] #settings-panel-sections button[onclick="closeSettingsModal()"],
[data-apl-theme="light"] .o_autopyme_dual_panel_left button[aria-label*="errar"] {
    color: #64748b !important;
}

[data-apl-theme="light"] #apl-nav-drawer button:hover,
[data-apl-theme="light"] #settings-panel-sections button[onclick="closeSettingsModal()"]:hover,
[data-apl-theme="light"] .o_autopyme_dual_panel_left button[aria-label*="errar"]:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

/* Items interactivos de navegación / secciones */
[data-apl-theme="light"] .o_autopyme_dual_panel_item,
[data-apl-theme="light"] .o_autopyme_settings_item {
    color: #334155 !important;
}

[data-apl-theme="light"] .o_autopyme_dual_panel_item:hover,
[data-apl-theme="light"] .o_autopyme_settings_item:hover {
    background-color: #f1f5f9 !important;
}

[data-apl-theme="light"] .o_autopyme_dual_panel_item .text-slate-200,
[data-apl-theme="light"] .o_autopyme_settings_item .text-slate-200 {
    color: #1e293b !important;
}

[data-apl-theme="light"] .o_autopyme_dual_panel_item:hover .text-slate-200,
[data-apl-theme="light"] .o_autopyme_settings_item:hover .text-slate-200 {
    color: #0f172a !important;
}

[data-apl-theme="light"] .o_autopyme_dual_panel_item .text-slate-400,
[data-apl-theme="light"] .o_autopyme_settings_item .text-slate-400 {
    color: #64748b !important;
}

[data-apl-theme="light"] .o_autopyme_dual_panel_item .text-slate-500,
[data-apl-theme="light"] .o_autopyme_settings_item .text-slate-500 {
    color: #94a3b8 !important;
}

[data-apl-theme="light"] .o_autopyme_dual_panel_item:hover .text-slate-500,
[data-apl-theme="light"] .o_autopyme_settings_item:hover .text-slate-500 {
    color: #475569 !important;
}

/* Pies de paneles izquierdos */
[data-apl-theme="light"] #apl-nav-drawer > div:last-child,
[data-apl-theme="light"] #settings-panel-sections > div:last-child {
    background-color: #f8fafc !important;
    border-top-color: #e2e8f0 !important;
}

/* Botón cerrar sesión */
[data-apl-theme="light"] #apl-nav-drawer a[href*="logout"] {
    color: #e11d48 !important;
}

[data-apl-theme="light"] #apl-nav-drawer a[href*="logout"]:hover {
    background-color: #ffe4e6 !important;
    color: #be123c !important;
}

/* Botón Volver a la aplicación en footer de ajustes */
[data-apl-theme="light"] #settings-panel-sections button[onclick="closeSettingsModal()"]:last-child,
[data-apl-theme="light"] #settings-panel-sections .border-t button {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-apl-theme="light"] #settings-panel-sections button[onclick="closeSettingsModal()"]:last-child:hover,
[data-apl-theme="light"] #settings-panel-sections .border-t button:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* 2. Paneles Derechos (Contenido / Detalles) */
[data-apl-theme="light"] #hamburger-panel-content,
[data-apl-theme="light"] #settings-panel-content,
[data-apl-theme="light"] .o_autopyme_dual_panel_right,
[data-apl-theme="light"] .o_autopyme_settings_content_panel {
    background-color: #f8fafc !important;
}

/* Barras superiores de detalle */
[data-apl-theme="light"] #hamburger-panel-content > div:first-child,
[data-apl-theme="light"] #settings-panel-content > div:first-child,
[data-apl-theme="light"] .o_autopyme_dual_panel_right > div:first-child,
[data-apl-theme="light"] .o_autopyme_settings_content_panel > div:first-child {
    background-color: #ffffff !important;
    border-bottom-color: #e2e8f0 !important;
}

[data-apl-theme="light"] #hamburger-panel-content h3,
[data-apl-theme="light"] #settings-panel-content h3,
[data-apl-theme="light"] #settings-active-title {
    color: #0f172a !important;
}

/* Botones de retorno <- */
[data-apl-theme="light"] .o_autopyme_dual_panel_back_btn,
[data-apl-theme="light"] .o_autopyme_settings_back_btn,
[data-apl-theme="light"] #btn-back-hamburger-menu,
[data-apl-theme="light"] #btn-back-settings-sections {
    background-color: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}

[data-apl-theme="light"] .o_autopyme_dual_panel_back_btn:hover,
[data-apl-theme="light"] .o_autopyme_settings_back_btn:hover,
[data-apl-theme="light"] #btn-back-hamburger-menu:hover,
[data-apl-theme="light"] #btn-back-settings-sections:hover {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}

/* Tarjetas interiores en paneles de detalle */
[data-apl-theme="light"] #hamburger-panel-content .bg-slate-800\/80,
[data-apl-theme="light"] #hamburger-panel-content .bg-slate-800,
[data-apl-theme="light"] #settings-panel-content .bg-slate-800\/80,
[data-apl-theme="light"] #settings-panel-content .bg-slate-800,
[data-apl-theme="light"] .settings-section-content .bg-slate-800\/80,
[data-apl-theme="light"] .settings-section-content .bg-slate-800 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-apl-theme="light"] #hamburger-panel-content h4,
[data-apl-theme="light"] #settings-panel-content h4,
[data-apl-theme="light"] .settings-section-content h4 {
    color: #0f172a !important;
}

[data-apl-theme="light"] #hamburger-panel-content .text-slate-400,
[data-apl-theme="light"] #settings-panel-content .text-slate-400,
[data-apl-theme="light"] .settings-section-content .text-slate-400 {
    color: #64748b !important;
}

[data-apl-theme="light"] #hamburger-panel-content .bg-slate-900\/60,
[data-apl-theme="light"] #settings-panel-content .bg-slate-900\/60,
[data-apl-theme="light"] .settings-section-content .bg-slate-900\/60 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* Inputs y Selects dentro de Ajustes */
[data-apl-theme="light"] #settings-panel-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
[data-apl-theme="light"] #settings-panel-content select {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

[data-apl-theme="light"] #settings-panel-content input:focus,
[data-apl-theme="light"] #settings-panel-content select:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15) !important;
}

[data-apl-theme="light"] #settings-panel-content label {
    color: #1e293b !important;
}

/* Opciones de tema en Preferencias: componente estándar Segmented Control
   (autopyme_components), con la paleta propia de APL vía --apc-segmented-* */
#settings-panel-content .apl-theme-segmented {
    --apc-segmented-bg: rgba(15, 23, 42, 0.6);
    --apc-segmented-border: #334155;
    --apc-segmented-active-bg: #0ea5e9;
    --apc-segmented-text: #94a3b8;
    --apc-segmented-text-active: #ffffff;
}

[data-apl-theme="light"] #settings-panel-content .apl-theme-segmented {
    --apc-segmented-bg: #f1f5f9;
    --apc-segmented-border: #e2e8f0;
    --apc-segmented-active-bg: #0284c7;
    --apc-segmented-text: #64748b;
    --apc-segmented-text-active: #ffffff;
}

/* Barra deslizante de tamaño de letra en Preferencias */
[data-apl-theme="light"] #settings-panel-content .apl-fontscale-slider {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

[data-apl-theme="light"] #settings-panel-content #apl-fontscale-value-label {
    color: #0f172a !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

[data-apl-theme="light"] #settings-panel-content .apl-fontscale-tick.bg-slate-600 {
    background-color: #cbd5e1 !important;
}

/* Estado de lista de passkeys / dispositivos vinculados */
[data-apl-theme="light"] #passkey-list-container > div {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

/* 3. Modal "Acerca de..." (#modal-about) */
[data-apl-theme="light"] #modal-about > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

[data-apl-theme="light"] #modal-about h3 {
    color: #0f172a !important;
}

[data-apl-theme="light"] #modal-about .bg-slate-900\/60 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

[data-apl-theme="light"] #modal-about button {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
}

[data-apl-theme="light"] #modal-about button:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   4. Ficha DeCA y Vistas Móviles: Espaciado Armónico de Campos y Etiquetas
   Garantiza separación limpia entre la etiqueta del campo y el objeto previo
   (sea cabecera de sección u otro campo anterior con su línea divisoria).
   ========================================================================== */
.apl-detail-field {
    padding-top: 0.625rem !important; /* 10px: margen superior limpio sobre la etiqueta */
    padding-bottom: 0.5rem !important; /* 8px: espacio inferior tras el valor */
}

/* Fallbacks de utilidades de espaciado para componentes móviles */
.pt-2\.5 {
    padding-top: 0.625rem !important;
}
.pt-3 {
    padding-top: 0.75rem !important;
}
.pb-2 {
    padding-bottom: 0.5rem !important;
}
.pb-2\.5 {
    padding-bottom: 0.625rem !important;
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))) !important;
    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse)) !important;
}

/* ==========================================================================
   5. Pantalla de Login
   - Vertical (móvil): tarjeta única con franja azul de marca arriba y panel
     blanco de accesos debajo, unidos en corte recto.
   - Horizontal (escritorio / apaisado): pantalla partida a altura completa,
     panel de marca a la izquierda y accesos a la derecha.
   ========================================================================== */
.apl-login-main {
    padding: 1rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

@media (min-width: 640px) {
    .apl-login-main {
        padding-top: 2rem !important;
    }
}

.apl-login-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 26rem;
    border-radius: 1.25rem;
    box-shadow: var(--apl-shadow-xl);
}

/* Panel de marca (franja azul) */
.apl-login-visual {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.375rem 1.25rem 1rem;
    border-radius: 1.25rem 1.25rem 0 0;
    color: #ffffff;
    background: linear-gradient(150deg, #0369a1 0%, #0284c7 45%, #38bdf8 100%);
}

/* Trama de puntos sutil sobre el degradado */
.apl-login-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.2px, transparent 1.3px);
    background-size: 22px 22px;
}

.apl-login-hero-text {
    position: relative;
}

.apl-login-hero-title {
    font-size: 1.5rem;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0;
}

.apl-login-hero-subtitle {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    margin: 0.5rem auto 0;
    max-width: 34ch;
}

.apl-login-hero-list {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

.apl-login-hero-list li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: #ffffff;
}

.apl-login-hero-list .material-symbols-outlined {
    display: inline-grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.2);
}

.apl-login-hero-picture {
    position: relative;
    display: block;
    width: 100%;
}

.apl-login-truck-img {
    width: 66%;
    max-width: 240px;
    min-width: 150px;
    height: auto;
    display: block;
    margin: 0.75rem auto 0;
    object-fit: contain;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.28));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}

.apl-login-truck-img:hover {
    transform: translateY(-2px) scale(1.02);
}

/* Panel de accesos (blanco) pegado a la franja azul con corte recto */
.apl-login-card-container {
    width: 100%;
    box-sizing: border-box;
    padding: 1.375rem 1.125rem 1.5rem;
    background-color: var(--apl-bg-surface-solid) !important;
    border-top: 0 !important;
    border-radius: 0 0 1.25rem 1.25rem;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Modo Horizontal (escritorio o dispositivo apaisado; no aplica al simulador
   en vertical ni a tablets en vertical): pantalla partida a altura completa.
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (min-width: 520px) {
    body:not([data-sim-orientation="portrait"]) .apl-login-main {
        padding: 0 !important;
        align-items: stretch !important;
    }

    body:not([data-sim-orientation="portrait"]) .apl-login-layout {
        flex: 1 1 auto;
        flex-direction: row;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    body:not([data-sim-orientation="portrait"]) .apl-login-visual {
        flex: 1.15 1 0;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        padding: 2.5rem 6vw;
        border-radius: 0;
    }

    body:not([data-sim-orientation="portrait"]) .apl-login-visual::before {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
        mask-image: linear-gradient(90deg, transparent, #000 60%);
    }

    body:not([data-sim-orientation="portrait"]) .apl-login-hero-title {
        font-size: clamp(1.75rem, 3vw, 2.75rem);
        max-width: 16ch;
    }

    body:not([data-sim-orientation="portrait"]) .apl-login-hero-subtitle {
        font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
        margin: 0.875rem 0 1.5rem;
        max-width: 36ch;
    }

    body:not([data-sim-orientation="portrait"]) .apl-login-hero-list {
        display: grid;
        gap: 0.625rem;
    }

    body:not([data-sim-orientation="portrait"]) .apl-login-truck-img {
        width: min(520px, 85%);
        max-width: none;
        max-height: 34vh;
        margin: 2.25rem 0 0;
    }

    body:not([data-sim-orientation="portrait"]) .apl-login-card-container {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2.5rem 2rem;
        border: 0 !important;
        border-radius: 0;
        overflow-y: auto;
    }

    /* El contenido de accesos conserva un ancho cómodo centrado en su mitad */
    body:not([data-sim-orientation="portrait"]) .apl-login-card-container > * {
        width: 100%;
        max-width: 25rem;
        margin-left: auto;
        margin-right: auto;
    }

    body:not([data-sim-orientation="portrait"]) .apl-login-card-container h2 {
        font-size: 1.375rem !important;
    }
}

/* Teléfonos apaisados de baja altura (ej. Pixel en landscape): versión compacta */
@media (orientation: landscape) and (max-height: 480px) {
    .apl-login-visual {
        padding: 1rem 1.5rem !important;
    }

    .apl-login-hero-title {
        font-size: 1.25rem !important;
    }

    .apl-login-hero-subtitle,
    .apl-login-hero-list {
        display: none !important;
    }

    .apl-login-truck-img {
        width: 80% !important;
        max-height: 42vh !important;
        margin-top: 0.75rem !important;
    }

    .apl-login-card-container {
        justify-content: flex-start !important;
        padding: 0.875rem 1.25rem !important;
    }

    body:not([data-sim-orientation="portrait"]) .apl-login-card-container h2 {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
    }
}

/* ==========================================================================
   6. Diálogos y paneles en Modo Claro
   Los diálogos de la app se maquetaron con superficies oscuras fijas
   (bg-slate-800/900, texto blanco). En modo claro se traducen a los tokens del
   tema para que toda la app siga el selector claro/oscuro/auto. El modo oscuro
   no cambia.
   ========================================================================== */
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) {
    --apl-dlg-surface: var(--apl-bg-surface-solid, #ffffff);
    --apl-dlg-soft: #f8fafc;
    --apl-dlg-strong: #e2e8f0;
    color: var(--apl-text-primary);
}

/* Superficies opacas (paneles, cabeceras, barras) */
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is(.bg-slate-950, .bg-slate-900, .bg-slate-850, .bg-slate-800),
[data-apl-theme="light"] #new-deca-modal.bg-slate-900 {
    background-color: var(--apl-dlg-surface) !important;
}

/* Superficies translúcidas anidadas (bloques internos, tarjetas de sección) */
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is([class*="bg-slate-950/"], [class*="bg-slate-900/"], [class*="bg-slate-800/"], [class*="bg-slate-700/"]) {
    background-color: var(--apl-dlg-soft) !important;
}

/* Botones secundarios neutros (Cerrar, Entendido…) */
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) .bg-slate-700 {
    background-color: var(--apl-dlg-strong) !important;
    color: var(--apl-text-secondary) !important;
}

/* Bordes y divisores */
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is([class*="border-slate-6"], [class*="border-slate-7"], [class*="border-slate-8"], [class*="border-slate-9"]) {
    border-color: var(--apl-divider) !important;
}

/* Textos claros → texto principal/secundario/atenuado del tema
   (se respetan los textos blancos sobre botones y distintivos de color) */
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is(.text-white, .text-slate-50, .text-slate-100, .text-slate-200):not([class*="bg-sky-"], [class*="bg-emerald-"], [class*="bg-rose-"], [class*="bg-red-"], [class*="bg-amber-"], [class*="bg-indigo-"], [class*="bg-purple-"]):not(:is([class*="bg-sky-5"], [class*="bg-sky-6"], [class*="bg-sky-7"], [class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-emerald-7"], [class*="bg-rose-5"], [class*="bg-rose-6"], [class*="bg-red-5"], [class*="bg-red-6"], [class*="bg-amber-4"], [class*="bg-amber-5"]) *) {
    color: var(--apl-text-primary) !important;
}

[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) .text-slate-300 {
    color: var(--apl-text-secondary) !important;
}

[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is(.text-slate-400, .text-slate-500) {
    color: var(--apl-text-muted) !important;
}

/* Acentos de color con contraste suficiente sobre fondo claro */
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is(.text-sky-300, .text-sky-400) { color: #0284c7 !important; }
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is(.text-emerald-300, .text-emerald-400) { color: #059669 !important; }
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is(.text-amber-300, .text-amber-400) { color: #b45309 !important; }
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is(.text-rose-300, .text-rose-400, .text-red-300, .text-red-400) { color: #e11d48 !important; }

/* Campos de formulario (sustituye el relleno oscuro forzado en la sección 5) */
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container, .o_autopyme_partner_editor) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
    background-color: var(--apl-bg-input, #f8fafc) !important;
    border-color: var(--apl-border, #cbd5e1) !important;
    color: var(--apl-text-primary) !important;
}

[data-apl-theme="light"] :is(#new-deca-modal, #apl-partner-editor-container, .o_autopyme_partner_editor, #transfer-modal) select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* Bloques con tinte de color oscuro → tinte claro equivalente */
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is([class*="bg-sky-950"], [class*="bg-sky-900"]) {
    background-color: rgba(14, 165, 233, 0.08) !important;
}
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is([class*="bg-emerald-950"], [class*="bg-emerald-900"]) {
    background-color: rgba(16, 185, 129, 0.08) !important;
}
[data-apl-theme="light"] :is(#modal-deca-detail, #modal-qr-hub, #new-deca-modal, #police-modal, #modal-add-collaborator, #modal-driver-not-registered, #transfer-modal, #modal-hamburger, .o_autopyme_carrier_vehicles_master_detail, #apl-partner-editor-container) :is([class*="bg-amber-950"], [class*="bg-amber-900"]) {
    background-color: rgba(245, 158, 11, 0.08) !important;
}

/* Barra deslizante de "Tamaño de letra por defecto" en Preferencias.
   El <input> ocupa toda la altura de la barra (2.75rem) para que la pista
   nativa nunca deje un hueco visible; el pulgar (1.75rem) se centra sobre
   la línea decorativa mediante un margin-top explícito en vez de dejar
   que cada navegador decida cómo posicionar un pulgar más pequeño que la
   pista: (altura de la pista - altura del pulgar) / 2 = 0.5rem. */
.apl-fontscale-range {
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    outline: none;
}

.apl-fontscale-range::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 100%;
}

.apl-fontscale-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.5rem;
    border-radius: 9999px;
    background: #0ea5e9;
    border: 0.1875rem solid #f8fafc;
    box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.apl-fontscale-range::-moz-range-track {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 100%;
}

.apl-fontscale-range::-moz-range-thumb {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: #0ea5e9;
    border: 0.1875rem solid #f8fafc;
    box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

[data-apl-theme="light"] .apl-fontscale-range::-webkit-slider-thumb,
[data-apl-theme="light"] .apl-fontscale-range::-moz-range-thumb {
    border-color: #ffffff;
}

/* ==========================================================================
   Tablero de Aplicaciones (#tab-board, apl_app_board.js)
   ========================================================================== */

#apl-app-board.apc-launcher {
    --apc-launcher-title-color: var(--apl-text-muted);
    --apc-launcher-tile-bg: var(--apl-bg-surface-solid);
    --apc-launcher-tile-border: var(--apl-divider);
    --apc-launcher-text: var(--apl-text-primary);
    touch-action: none;
}

#apl-app-board .apc-launcher-item {
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

#apl-app-board .apc-launcher-item.apl-launcher-dragging {
    z-index: 20;
    box-shadow: 0 0.75rem 1.5rem -0.25rem rgba(0, 0, 0, 0.35);
    cursor: grabbing;
    transition: none;
}

/* Barra "← Menú" + título de cada pantalla de app abierta desde el tablero */
.apl-app-screen-toolbar {
    min-width: 0;
}
.apl-app-screen-toolbar h2 {
    min-width: 0;
}

/* ==========================================================================
   Interruptor (switch) genérico, p. ej. Ajustes > Valores por Defecto
   ========================================================================== */

.apl-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
}
.apl-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.apl-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: rgba(100, 116, 139, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.3);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.apl-switch-track::after {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #f8fafc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease;
}
.apl-switch input:checked + .apl-switch-track {
    background: #0ea5e9;
    border-color: #0ea5e9;
}
.apl-switch input:checked + .apl-switch-track::after {
    transform: translateX(1.25rem);
}
.apl-switch input:focus-visible + .apl-switch-track {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}