/* Import Design System */
@import './design-system.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ========================================
   CoachPro - Estilos Mobile First
   Fitness Theme Colors
   ======================================== */

@layer base {
    /* Variables CSS para temas - Fitness Palette */
    :root {
        /* Fitness Theme - Neon Green Primary */
        --color-primary: 57 255 20; /* neon #39FF14 */
        --color-primary-dark: 46 209 15; /* neon-600 */
        --color-secondary: 255 107 53; /* energy #FF6B35 */
        --color-accent: 0 212 255; /* electric #00D4FF */

        /* Dark theme colors */
        --color-fitness-dark: 10 10 10; /* #0A0A0A */
        --color-fitness-gray: 26 26 26; /* #1A1A1A */
        --color-fitness-metallic: 45 45 45; /* #2D2D2D */

        --safe-area-top: env(safe-area-inset-top, 0px);
        --safe-area-bottom: env(safe-area-inset-bottom, 0px);
        --safe-area-left: env(safe-area-inset-left, 0px);
        --safe-area-right: env(safe-area-inset-right, 0px);
    }

    /* Reset touch highlight */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Smooth scrolling global */
    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
    }

    /* Prevenir overscroll en body */
    body {
        overscroll-behavior-y: contain;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Focus visible solo con teclado */
    :focus:not(:focus-visible) {
        outline: none;
    }

    :focus-visible {
        @apply outline-2 outline-offset-2 outline-neon-500;
    }
}

@layer components {
    /* ========================================
       Botones Mobile First - Fitness Theme
       ======================================== */
    .btn {
        @apply inline-flex items-center justify-center font-semibold rounded-xl transition-all duration-200 touch-manipulation active:scale-[0.98];
    }

    .btn-sm {
        @apply h-9 px-4 text-sm;
    }

    .btn-md {
        @apply h-11 px-5 text-sm;
    }

    .btn-lg {
        @apply h-12 px-6 text-base;
    }

    .btn-xl {
        @apply h-14 px-8 text-base;
    }

    /* Fitness Theme Buttons */
    .btn-primary {
        @apply bg-neon-500 text-black font-bold hover:bg-neon-400 active:bg-neon-600 shadow-lg shadow-neon-500/25;
    }

    .btn-secondary {
        @apply bg-energy-500 text-white hover:bg-energy-400 active:bg-energy-600 dark:bg-energy-600 dark:hover:bg-energy-500 shadow-lg shadow-energy-500/25;
    }

    .btn-accent {
        @apply bg-electric-500 text-white hover:bg-electric-400 active:bg-electric-600 shadow-lg shadow-electric-500/25;
    }

    .btn-outline {
        @apply border-2 border-neon-500 text-neon-500 hover:bg-neon-500 hover:text-black active:bg-neon-600;
    }

    .btn-outline-secondary {
        @apply border-2 border-energy-500 text-energy-500 hover:bg-energy-500 hover:text-white active:bg-energy-600;
    }

    .btn-ghost {
        @apply text-gray-700 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-800;
    }

    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700 active:bg-red-800 shadow-lg shadow-red-500/25;
    }

    .btn-success {
        @apply bg-neon-500 text-black hover:bg-neon-400 active:bg-neon-600 shadow-lg shadow-neon-500/25;
    }

    .btn-icon {
        @apply p-0 aspect-square;
    }

    .btn-icon.btn-sm {
        @apply w-9;
    }

    .btn-icon.btn-md {
        @apply w-11;
    }

    .btn-icon.btn-lg {
        @apply w-12;
    }

    /* ========================================
       Cards Mobile First
       ======================================== */
    .card {
        @apply bg-white dark:bg-gray-800 rounded-2xl shadow-sm;
    }

    .card-interactive {
        @apply card transition-all duration-200 hover:shadow-md active:scale-[0.99] cursor-pointer;
    }

    .card-bordered {
        @apply card border border-gray-200 dark:border-gray-700 shadow-none;
    }

    /* ========================================
       Inputs Mobile First
       ======================================== */
    .input {
        @apply w-full h-12 px-4 text-base rounded-xl border-2 border-gray-300 dark:border-gray-600
               bg-white dark:bg-gray-800 text-gray-900 dark:text-white
               placeholder-gray-400 dark:placeholder-gray-500
               transition-all duration-200
               focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none
               disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .input-error {
        @apply border-red-500 focus:border-red-500 focus:ring-red-500/20;
    }

    .input-success {
        @apply border-green-500 focus:border-green-500 focus:ring-green-500/20;
    }

    .input-lg {
        @apply h-14 text-lg;
    }

    .input-sm {
        @apply h-10 text-sm;
    }

    .textarea {
        @apply input h-auto min-h-[120px] py-3 resize-none;
    }

    .select {
        @apply input appearance-none bg-no-repeat bg-right pr-10;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.75rem center;
        background-size: 1.25rem;
    }

    /* ========================================
       Badges
       ======================================== */
    .badge {
        @apply inline-flex items-center px-2.5 py-1 text-xs font-semibold rounded-full;
    }

    .badge-primary {
        @apply bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300;
    }

    .badge-success {
        @apply bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300;
    }

    .badge-warning {
        @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300;
    }

    .badge-danger {
        @apply bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300;
    }

    .badge-gray {
        @apply bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300;
    }

    /* ========================================
       Avatars
       ======================================== */
    .avatar {
        @apply relative inline-flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden;
    }

    .avatar-xs {
        @apply w-6 h-6 text-xs;
    }

    .avatar-sm {
        @apply w-8 h-8 text-sm;
    }

    .avatar-md {
        @apply w-10 h-10 text-base;
    }

    .avatar-lg {
        @apply w-12 h-12 text-lg;
    }

    .avatar-xl {
        @apply w-16 h-16 text-xl;
    }

    .avatar-2xl {
        @apply w-24 h-24 text-2xl;
    }

    /* ========================================
       Skeleton Loaders
       ======================================== */
    .skeleton {
        @apply bg-gray-200 dark:bg-gray-700 rounded animate-pulse;
    }

    .skeleton-text {
        @apply skeleton h-4 w-full;
    }

    .skeleton-title {
        @apply skeleton h-6 w-3/4;
    }

    .skeleton-circle {
        @apply skeleton rounded-full;
    }

    /* ========================================
       Safe Areas para dispositivos con notch
       ======================================== */
    .safe-area-top {
        padding-top: var(--safe-area-top);
    }

    .safe-area-bottom {
        padding-bottom: var(--safe-area-bottom);
    }

    .safe-area-left {
        padding-left: var(--safe-area-left);
    }

    .safe-area-right {
        padding-right: var(--safe-area-right);
    }

    .safe-area-x {
        padding-left: var(--safe-area-left);
        padding-right: var(--safe-area-right);
    }

    .safe-area-y {
        padding-top: var(--safe-area-top);
        padding-bottom: var(--safe-area-bottom);
    }

    .safe-area-all {
        padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
    }

    /* ========================================
       Touch Optimizations
       ======================================== */
    .touch-manipulation {
        touch-action: manipulation;
    }

    .touch-pan-x {
        touch-action: pan-x;
    }

    .touch-pan-y {
        touch-action: pan-y;
    }

    .touch-none {
        touch-action: none;
    }

    /* ========================================
       Scroll Containers
       ======================================== */
    .scroll-touch {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .scroll-snap-x {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .scroll-snap-y {
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .snap-start {
        scroll-snap-align: start;
    }

    .snap-center {
        scroll-snap-align: center;
    }

    /* ========================================
       Pull to Refresh Indicator
       ======================================== */
    .pull-indicator {
        @apply flex items-center justify-center w-10 h-10 rounded-full bg-white dark:bg-gray-800 shadow-lg;
    }

    /* ========================================
       No Selection (para UI elements)
       ======================================== */
    .no-select {
        -webkit-user-select: none;
        user-select: none;
    }

    /* ========================================
       GPU Acceleration
       ======================================== */
    .gpu-accelerated {
        transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
    }

    /* ========================================
       Mobile Navigation
       ======================================== */
    .mobile-nav {
        @apply fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900
               border-t border-gray-200 dark:border-gray-700
               safe-area-bottom z-40;
    }

    .mobile-nav-item {
        @apply flex flex-col items-center justify-center flex-1 py-2 px-1
               text-gray-500 dark:text-gray-400
               transition-colors touch-manipulation
               active:bg-gray-100 dark:active:bg-gray-800;
    }

    .mobile-nav-item.active {
        @apply text-indigo-600 dark:text-indigo-400;
    }

    /* ========================================
       Responsive Typography
       ======================================== */
    .text-responsive-xs {
        @apply text-xs sm:text-sm;
    }

    .text-responsive-sm {
        @apply text-sm sm:text-base;
    }

    .text-responsive-base {
        @apply text-base sm:text-lg;
    }

    .text-responsive-lg {
        @apply text-lg sm:text-xl;
    }

    .text-responsive-xl {
        @apply text-xl sm:text-2xl;
    }

    .text-responsive-2xl {
        @apply text-2xl sm:text-3xl;
    }
}

@layer utilities {
    /* Line clamp utilities */
    .line-clamp-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Hide scrollbar but keep functionality */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* Thin scrollbar */
    .scrollbar-thin {
        scrollbar-width: thin;
        scrollbar-color: theme('colors.gray.400') transparent;
    }

    .scrollbar-thin::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .scrollbar-thin::-webkit-scrollbar-track {
        background: transparent;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
        background-color: theme('colors.gray.400');
        border-radius: 3px;
    }
}

/* ========================================
   Animaciones Mobile
   ======================================== */
@keyframes slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scale-in {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.animate-slide-up {
    animation: slide-up 0.3s ease-out;
}

.animate-slide-down {
    animation: slide-down 0.3s ease-out;
}

.animate-fade-in {
    animation: fade-in 0.2s ease-out;
}

.animate-scale-in {
    animation: scale-in 0.2s ease-out;
}

.animate-shake {
    animation: shake 0.3s ease-in-out;
}

/* ========================================
   Page Transitions (App-like)
   ======================================== */
.page-enter-active,
.page-leave-active {
    transition: all 0.2s ease-out;
}

.page-enter-from {
    opacity: 0;
    transform: translateX(20px);
}

.page-leave-to {
    opacity: 0;
    transform: translateX(-20px);
}

/* iOS-style back gesture */
.slide-right-enter-active,
.slide-right-leave-active {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-right-enter-from {
    transform: translateX(100%);
}

.slide-right-leave-to {
    transform: translateX(-30%);
}

/* ========================================
   Glassmorphism Effects
   ======================================== */
.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8);
}

.dark .glass {
    background: rgba(17, 24, 39, 0.8);
}

.glass-strong {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.9);
}

.dark .glass-strong {
    background: rgba(17, 24, 39, 0.9);
}

/* ========================================
   Press States (Native-like feedback)
   ======================================== */
.press-effect {
    @apply transition-transform duration-100 active:scale-[0.97];
}

.press-effect-strong {
    @apply transition-transform duration-100 active:scale-[0.95];
}

/* ========================================
   Floating Action Button Styles
   ======================================== */
.fab {
    @apply fixed bottom-20 right-4 w-14 h-14 rounded-full shadow-lg
           flex items-center justify-center
           bg-indigo-600 text-white
           transition-all duration-200
           active:scale-95 active:shadow-md
           z-30;
}

.fab:hover {
    @apply bg-indigo-700 shadow-xl;
}

.fab-extended {
    @apply fab w-auto px-6 rounded-full;
}

/* ========================================
   Bottom Sheet Styles
   ======================================== */
.bottom-sheet {
    @apply fixed inset-x-0 bottom-0 z-50
           bg-white dark:bg-gray-800
           rounded-t-3xl shadow-2xl
           transform transition-transform duration-300 ease-out;
}

.bottom-sheet-handle {
    @apply w-12 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mt-3 mb-2;
}

/* ========================================
   Swipeable Cards
   ======================================== */
.swipeable {
    @apply transition-transform duration-200;
    touch-action: pan-y;
}

.swipeable-action {
    @apply absolute inset-y-0 flex items-center justify-center px-6;
}

.swipeable-action-left {
    @apply swipeable-action left-0 bg-red-500 text-white;
}

.swipeable-action-right {
    @apply swipeable-action right-0 bg-green-500 text-white;
}

/* ========================================
   Loading States
   ======================================== */
.loading-dots::after {
    content: '';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* ========================================
   Empty States
   ======================================== */
.empty-state {
    @apply flex flex-col items-center justify-center py-12 px-4 text-center;
}

.empty-state-icon {
    @apply w-20 h-20 mb-4 text-gray-300 dark:text-gray-600;
}

.empty-state-title {
    @apply text-lg font-semibold text-gray-900 dark:text-white mb-2;
}

.empty-state-description {
    @apply text-sm text-gray-500 dark:text-gray-400 max-w-sm;
}

/* ========================================
   Status Indicators
   ======================================== */
.status-dot {
    @apply w-2 h-2 rounded-full;
}

.status-dot-online {
    @apply status-dot bg-green-500;
}

.status-dot-offline {
    @apply status-dot bg-gray-400;
}

.status-dot-busy {
    @apply status-dot bg-red-500;
}

.status-dot-away {
    @apply status-dot bg-yellow-500;
}

/* Pulsing status */
.status-dot-pulse {
    @apply relative;
}

.status-dot-pulse::before {
    content: '';
    @apply absolute inset-0 rounded-full animate-ping opacity-75;
    background: inherit;
}

/* ========================================
   MOBILE RESPONSIVE FIXES
   Solo reglas no-destructivas que no interfieren con Tailwind
   ======================================== */
@media (max-width: 1023px) {
    /* Prevenir Overflow Horizontal */
    #app,
    .min-h-screen {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Tablas responsive — scroll horizontal */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Prevenir desbordamiento de imágenes */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }

    /* Fix para contenido largo */
    pre, code {
        overflow-x: auto;
        max-width: 100%;
        word-break: break-word;
    }

    /* Scroll nativo */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .overflow-x-auto::-webkit-scrollbar {
        display: none;
    }
}

/* === Breakpoint extra pequeño (< 375px) === */
@media (max-width: 374px) {
    /* Grids 2-col que colapsan a 1 en pantallas muy pequeñas */
    .grid-cols-2.mobile-collapse {
        grid-template-columns: 1fr;
    }
}

/* === iOS Safari específico === */
@supports (-webkit-touch-callout: none) {
    .min-h-screen {
        min-height: -webkit-fill-available;
    }

    /* Prevenir zoom al enfocar inputs en iOS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* === Landscape en móvil === */
@media (orientation: landscape) and (max-height: 500px) {
    .mobile-header {
        height: 44px !important;
    }

    .mobile-bottom-nav {
        height: 48px !important;
    }

    .tab-label {
        display: none;
    }
}