/* BostonCars — Estilos custom (complementa Color Admin) */

/* ─── Desktop toggler: solo visible en wide-sidebar (Google) ── */
.navbar-desktop-toggler { display: none !important; }
.app-with-wide-sidebar .navbar-desktop-toggler { display: block !important; }

/* ─── Design theme picker ────────────────────────── */
.design-theme-btn {
    display: inline-block;
    line-height: 0;
    transition: transform 0.15s;
}
.design-theme-btn:hover {
    transform: scale(1.15);
}
.design-theme-btn span {
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* ─── Tablas compactas ──────────────────────────── */
.table-compact th,
.table-compact td {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

/* ─── Clickable table rows ─────────────────────── */
.table tr[onclick],
.table tr a:first-child {
    cursor: pointer;
}

.table td a.text-decoration-none:hover {
    text-decoration: none;
}

/* ─── HTMX loading indicator ────────────────────── */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}

/* Global HTMX loading bar */
.htmx-request.htmx-request::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--bs-theme-rgb-r, 0), var(--bs-theme-rgb-g, 172), var(--bs-theme-rgb-b, 193));
    background: var(--bs-theme, #00acb1);
    z-index: 99999;
    animation: htmx-progress 1.5s ease-in-out infinite;
}

@keyframes htmx-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ─── Toast notifications ───────────────────────── */
.toast-container {
    z-index: 99999;
}

/* ─── Búsqueda global (Ctrl+K) ─────────────────── */
#modal-busqueda-global .modal-content {
    border-radius: 12px;
    overflow: hidden;
}

#busqueda-global-resultados {
    max-height: 400px;
    overflow-y: auto;
}

.busqueda-global-grupo {
    padding: 4px 0;
}

.busqueda-global-grupo-titulo {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    padding: 6px 14px 2px;
}

.busqueda-global-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    margin: 1px 4px;
    transition: background 0.15s;
}

.busqueda-global-item:hover,
.busqueda-global-item.activo {
    background: var(--bs-theme, var(--bs-primary));
    color: #fff;
}

.busqueda-global-item:hover .busqueda-global-subtitulo,
.busqueda-global-item.activo .busqueda-global-subtitulo {
    color: rgba(255,255,255,0.8);
}

.busqueda-global-icono {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.busqueda-global-icono.tipo-persona { background: #e3f2fd; color: #1565c0; }
.busqueda-global-icono.tipo-credito { background: #e8f5e9; color: #2e7d32; }
.busqueda-global-icono.tipo-carpeta { background: #fff3e0; color: #e65100; }
.busqueda-global-icono.tipo-vehiculo { background: #f3e5f5; color: #7b1fa2; }

[data-bs-theme="dark"] .busqueda-global-icono.tipo-persona { background: #1e3a5f; color: #90caf9; }
[data-bs-theme="dark"] .busqueda-global-icono.tipo-credito { background: #1b3a1f; color: #a5d6a7; }
[data-bs-theme="dark"] .busqueda-global-icono.tipo-carpeta { background: #3e2723; color: #ffcc80; }
[data-bs-theme="dark"] .busqueda-global-icono.tipo-vehiculo { background: #311b4e; color: #ce93d8; }

.busqueda-global-titulo {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.2;
}

.busqueda-global-subtitulo {
    font-size: 0.75rem;
    color: #6c757d;
    line-height: 1.2;
}

.busqueda-global-vacio {
    text-align: center;
    padding: 24px 14px;
    color: #6c757d;
    font-size: 0.85rem;
}

.busqueda-global-cargando {
    text-align: center;
    padding: 20px 14px;
}

#busqueda-global-resultados:not(:empty) {
    border-top: 1px solid var(--bs-border-color);
}

/* ─── Notificaciones badge ────────────────────────── */
#notif-badge .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 0.6rem;
}

/* ─── Menu profile icon fallback ──────────────────── */
.menu-profile-image-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    font-size: 1.1rem;
}

/* ─── Header user icon fallback ───────────────────── */
.image-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

/* ─── Mobile: tables scroll horizontal ────────────── */
@media (max-width: 767.98px) {
    .table-responsive-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─── Print ─────────────────────────────────────── */
@media print {
    .app-sidebar, .app-header, .no-print, .toast-container,
    .btn-scroll-to-top, .app-sidebar-bg, .app-sidebar-mobile-backdrop { display: none !important; }
    .app-content { margin: 0 !important; padding: 0 !important; }
    table { font-size: 10pt; }
    a[href]:after { content: none; }
}

/* ─── HTMX swap animations ──────────────────────── */
.htmx-swapping {
    opacity: 0;
    transition: opacity 0.15s ease-out;
}
.htmx-settling {
    opacity: 1;
    transition: opacity 0.15s ease-in;
}
.htmx-added {
    opacity: 0;
    animation: htmx-fade-in 0.2s ease forwards;
}
@keyframes htmx-fade-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   APPLE THEME — iOS/macOS native look
   Activo cuando body tiene clase .theme-apple
   ═══════════════════════════════════════════════════════════════ */

/* Font: SF Pro (system) */
.theme-apple {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* Cards: bordes más suaves, sombras sutiles tipo iOS */
.theme-apple .card {
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
}
.theme-apple .card-header {
    border-radius: 12px 12px 0 0;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Sidebar: translúcido tipo macOS */
.theme-apple .app-sidebar {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Header: barra limpia tipo iOS */
.theme-apple .app-header {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 0.5px solid rgba(0,0,0,0.12);
    box-shadow: none;
}

/* Botones: rounded tipo iOS */
.theme-apple .btn {
    border-radius: 8px;
    font-weight: 500;
}
.theme-apple .btn-theme {
    border-radius: 20px;
}
.theme-apple .btn-sm {
    border-radius: 6px;
}
.theme-apple .btn-outline-secondary {
    border-color: rgba(0,0,0,0.12);
}

/* Inputs: estilo iOS */
.theme-apple .form-control,
.theme-apple .form-select {
    border-radius: 8px;
    border-color: rgba(0,0,0,0.12);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.theme-apple .form-control:focus,
.theme-apple .form-select:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}

/* Badges: pill shape tipo iOS */
.theme-apple .badge {
    border-radius: 20px;
    font-weight: 500;
    letter-spacing: 0;
}

/* Tablas: líneas más sutiles */
.theme-apple .table {
    --bs-table-border-color: rgba(0,0,0,0.06);
}
.theme-apple .table thead th {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #86868b;
}

/* Breadcrumb: estilo Apple minimalista */
.theme-apple .breadcrumb {
    font-weight: 500;
}
.theme-apple .breadcrumb-item a {
    color: #007AFF;
}
.theme-apple .breadcrumb-item.active {
    color: #1d1d1f;
    font-weight: 600;
}

/* Nav tabs: segmented control tipo iOS */
.theme-apple .nav-tabs {
    border-bottom: none;
    background: #f5f5f7;
    border-radius: 10px;
    padding: 3px;
}
.theme-apple .nav-tabs .nav-link {
    border: none;
    border-radius: 8px;
    color: #1d1d1f;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
}
.theme-apple .nav-tabs .nav-link.active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    color: #007AFF;
}

/* Progress bars: rounded */
.theme-apple .progress {
    border-radius: 20px;
}
.theme-apple .progress-bar {
    border-radius: 20px;
}

/* Alerts: rounded */
.theme-apple .alert {
    border-radius: 10px;
    border: none;
}

/* Modal: iOS sheet style */
.theme-apple .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

/* Dropdown: rounded */
.theme-apple .dropdown-menu {
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* Toggle switch estilo iOS */
.theme-apple .form-check-input[type="checkbox"] {
    border-radius: 20px;
}

/* H5 títulos: peso Apple */
.theme-apple h5, .theme-apple h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Scrollbar tipo macOS */
.theme-apple ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.theme-apple ::-webkit-scrollbar-track {
    background: transparent;
}
.theme-apple ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 10px;
}
.theme-apple ::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25);
}

/* ═══════════════════════════════════════════════════════════════
 * Componentes reutilizables — extraídos de estilos inline repetidos
 * ═══════════════════════════════════════════════════════════════ */

/* Breadcrumb compacto (usado en todas las páginas internas) */
.breadcrumb-sm {
    font-size: .8rem;
}

/* Texto pequeño genérico */
.text-xs { font-size: .7rem !important; }
.text-xxs { font-size: .65rem !important; }

/* Icono circular de hub (48px) */
.hub-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─── Responsive iPhone 13 Pro (390px) ─── */
@media (max-width: 991.98px) {
    /* Mobile: prevenir scroll horizontal */
    html, body { overflow-x: hidden; max-width: 100vw; }
    #app, .app-content, .content { max-width: 100vw; overflow-x: hidden; }

    /* Header: ajustar al ancho del viewport */
    #header.app-header { left: 0 !important; right: 0; width: 100%; }

    /* Content: sin offset cuando sidebar está oculto */
    .app-sidebar-fixed .app-content { margin-left: 0 !important; }

    /* Sidebar: oculto por defecto en mobile, se muestra con toggle */
    .app-sidebar { transform: translateX(-100%); transition: transform .2s; }
    .app-sidebar-mobile-toggled .app-sidebar { transform: translateX(0); }
}

@media (max-width: 575.98px) {
    /* Login: card no se sale del viewport */
    .login-card { max-width: 100%; margin: 0 .75rem; }
    .login-card-body { padding: 1.25rem; }

    /* Cards header: flex-wrap para no apretar badges + botones */
    .card-header.d-flex { flex-wrap: wrap; gap: .5rem; }

    /* Montos grandes: font más compacto */
    .card-body .fs-5 { font-size: 1rem !important; }

    /* Cotizador: cards sin min-height forzado */
    .opcion-plazo { min-height: 0; height: auto; }

    /* Tablas: font más chico para caber */
    .table-compact { font-size: .7rem !important; }
    .table-compact th, .table-compact td { padding: .2rem .3rem !important; }

    /* Barra acciones crédito: documentos debajo */
    .border-start.ps-3 {
        border-left: 0 !important; padding-left: 0 !important;
        border-top: 1px solid var(--bs-border-color);
        padding-top: .5rem; margin-top: .5rem; width: 100%;
    }

    /* Field system: labels más compactos */
    .field-label { font-size: .6rem; }
    .field-value { font-size: .85rem; }
    .field-value--kpi { font-size: 1rem; }
    .field-group-title { font-size: .6rem; }
}