/* ═══════════════════════════════════════════════════════════════════════════
   CABBIK FLOTA — APPLE STYLE + MODERN CAROUSEL
   ═══════════════════════════════════════════════════════════════════════════
   Inspirado en: apple.com + modern CSS scroll patterns
   ═══════════════════════════════════════════════════════════════════════════ */

@layer base, layout, components;

@layer base {
    :root {
        /* Colores Apple */
        --apple-bg: #f5f5f7;
        --apple-text: #1d1d1f;
        --apple-text-secondary: #6e6e73;
        --apple-blue: #0071e3;
        
        /* Espaciado */
        --spacing-sm: 1rem;
        --spacing-md: 1.5rem;
        --spacing-lg: 2rem;
        --spacing-xl: 3rem;
        --spacing-xxl: 4rem;
        
        /* Tipografía Apple */
        --apple-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
        
        /* Transiciones */
        --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
        --duration: 350ms;
    }
}

@layer layout {
    /* ─────────────────────────────────────────────────────────────────────
       SECCIÓN PRINCIPAL
       ───────────────────────────────────────────────────────────────────── */
    .pmi-panel-flota {
        background: var(--apple-bg);
        padding: var(--spacing-xxl) 0;
        font-family: var(--apple-font);
        -webkit-font-smoothing: antialiased;
        container-type: inline-size;
        inline-size: 100%;
    }
    
    /* ─────────────────────────────────────────────────────────────────────
       CABECERA
       ───────────────────────────────────────────────────────────────────── */
    .pmi-panel-flota .pmi-h2 {
        font-size: clamp(2rem, 5vw, 3rem);
        font-weight: 600;
        letter-spacing: -0.015em;
        line-height: 1.1;
        color: var(--apple-text);
        margin: 0 0 0.5rem;
        text-align: center;
        padding: 0;
    }
    
    .pmi-panel-flota .pmi-h2::before,
    .pmi-panel-flota .pmi-h2::after {
        display: none;
    }
    
    .pmi-panel-flota .pmi-subtitle {
        font-size: clamp(1rem, 2.5vw, 1.25rem);
        font-weight: 400;
        line-height: 1.5;
        color: var(--apple-text-secondary);
        margin: 0 0 var(--spacing-xl);
        text-align: center;
        padding: 0 var(--spacing-md);
    }
    
    /* ─────────────────────────────────────────────────────────────────────
       CARRUSEL (Arquitectura moderna)
       ───────────────────────────────────────────────────────────────────── */
    .pmi-grid-3 {
        /* Layout grid/flex híbrido */
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min(85cqi, 320px);
        gap: var(--spacing-xl);
        
        /* Scroll behavior */
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        
        /* Padding inteligente - SIN padding lateral (sangrado total) */
        padding-block: var(--spacing-md);
        padding-inline: 0;
        
        /* Ocultar scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
        
        /* Anchor para botones (si soportado) */
        anchor-name: --flota-carousel;
    }
    
    .pmi-grid-3::-webkit-scrollbar {
        display: none;
    }
    
    /* Snap points */
    .pmi-grid-3 > * {
        scroll-snap-align: start;
    }
}

@layer components {
    /* ─────────────────────────────────────────────────────────────────────
       CARDS ESTILO APPLE PREMIUM (Fondo negro)
       ───────────────────────────────────────────────────────────────────── */
    .pmi-card--flota {
        /* Layout */
        display: grid;
        grid-template-rows: auto auto auto 1fr;
        gap: 0.75rem;
        
        /* Card negra premium */
        background: #1d1d1f;
        border-radius: 18px;
        padding: 2rem 1.5rem;
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.12),
            0 8px 24px rgba(0, 0, 0, 0.08);
        
        /* Alineación */
        text-align: center;
        align-items: center;
        
        /* Transición suave */
        transition: transform var(--duration) var(--ease-apple);
    }
    
    /* Hover sutil en toda la card */
    @media (hover: hover) {
        .pmi-card--flota:hover {
            transform: translateY(-4px);
        }
    }
    
    /* ─────────────────────────────────────────────────────────────────────
       IMAGEN DEL VEHÍCULO
       ───────────────────────────────────────────────────────────────────── */
    .pmi-card__image {
        inline-size: 100%;
        block-size: 220px;
        display: grid;
        place-items: center;
        overflow: visible;
    }
    
    .pmi-card__image img {
        max-inline-size: 100%;
        max-block-size: 100%;
        object-fit: contain;
        /* Sombra más pronunciada para fondo negro */
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
        transition: transform var(--duration) var(--ease-apple);
    }
    
    @media (hover: hover) {
        .pmi-card--flota:hover .pmi-card__image img {
            transform: scale(1.03);
        }
    }
    
    /* ─────────────────────────────────────────────────────────────────────
       CONTENIDO (Textos en blanco para cards negras)
       ───────────────────────────────────────────────────────────────────── */
    .pmi-card-title {
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: #f5f5f7;
        line-height: 1.2;
        margin: 0;
    }
    
    .pmi-card__capacity {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        font-size: 0.9375rem;
        font-weight: 400;
        color: #a1a1a6;
    }
    
    .pmi-card__capacity svg {
        inline-size: 16px;
        block-size: 16px;
        opacity: 0.7;
    }
    
    .pmi-card-text {
        font-size: 0.875rem;
        line-height: 1.4;
        color: #a1a1a6;
    }
    
    /* ─────────────────────────────────────────────────────────────────────
       ADAPTACIÓN DEL BOTÓN DEL FOOTER PARA CARDS DE FLOTA
       ───────────────────────────────────────────────────────────────────── */
    .pmi-card-cta-adapt {
        /* Ajustar tamaño para cards */
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9375rem !important;
        
        /* Asegurar que funcione en cards negras */
        margin-top: auto !important;
    }
    
    /* El botón ya tiene todas las animaciones del footer:
       - Shine effect
       - Hover states
       - Breathing/pulse
       Solo necesitamos estos ajustes de tamaño */
    
    /* ─────────────────────────────────────────────────────────────────────
       NAVEGACIÓN (Botones con JS)
       ───────────────────────────────────────────────────────────────────── */
    .pmi-carousel-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        inline-size: 3rem;
        block-size: 3rem;
        border-radius: 50%;
        
        /* Glassmorphism */
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.08),
            0 8px 24px rgba(0, 0, 0, 0.06);
        
        /* Contenido */
        display: grid;
        place-items: center;
        color: var(--apple-text);
        
        /* Interacción */
        cursor: pointer;
        opacity: 0;
        z-index: 20;
        
        transition: 
            opacity var(--duration) var(--ease-apple),
            background var(--duration) var(--ease-apple),
            transform var(--duration) var(--ease-apple);
    }
    
    .relative:hover .pmi-carousel-nav {
        opacity: 1;
    }
    
    .pmi-carousel-nav:hover {
        background: rgba(255, 255, 255, 1);
        transform: translateY(-50%) scale(1.05);
    }
    
    .pmi-carousel-nav:disabled {
        cursor: not-allowed;
        opacity: 0.2 !important;
    }
    
    .pmi-nav-prev {
        left: var(--spacing-sm);
    }
    
    .pmi-nav-next {
        right: var(--spacing-sm);
    }
    
    .pmi-carousel-nav svg {
        inline-size: 1.25rem;
        block-size: 1.25rem;
        stroke-width: 2.5;
    }
    
    /* Responsive: ocultar flechas en móvil */
    @media (max-width: 768px) {
        .pmi-carousel-nav {
            display: none;
        }
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pmi-grid-3 {
        grid-auto-columns: min(80cqi, 300px);
    }
}

@media (max-width: 768px) {
    .pmi-panel-flota {
        padding: var(--spacing-xl) 0;
    }
    
    .pmi-panel-flota .pmi-h2 {
        font-size: 2rem;
    }
    
    .pmi-panel-flota .pmi-subtitle {
        font-size: 1.0625rem;
        margin-bottom: var(--spacing-lg);
    }
    
    .pmi-grid-3 {
        grid-auto-columns: min(75cqi, 280px);
        gap: var(--spacing-lg);
        padding-inline: 0;
    }
    
    .pmi-card__image {
        block-size: 180px;
    }
}

@media (max-width: 480px) {
    .pmi-grid-3 {
        grid-auto-columns: min(85cqi, 260px);
    }
    
    .pmi-card__image {
        block-size: 160px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESIBILIDAD
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

.pmi-card--flota:focus-within {
    outline: 2px solid var(--apple-blue);
    outline-offset: 4px;
    border-radius: 8px;
}

.pmi-card__cta:focus-visible {
    outline: 2px solid var(--apple-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE (Preparado)
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .pmi-panel-flota[data-theme="auto"] {
        --apple-bg: #000000;
        --apple-text: #f5f5f7;
        --apple-text-secondary: #a1a1a6;
    }
    
    .pmi-panel-flota[data-theme="auto"] .pmi-carousel-nav {
        background: rgba(29, 29, 31, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
        color: #f5f5f7;
    }
}