/* 
  Como estamos usando Tailwind CSS, este archivo lo mantendremos para
  estilos muy específicos que no sean fáciles de hacer con utilidades, 
  o resetes globales adicionales.
*/

* {
  -webkit-tap-highlight-color: transparent; /* Quita el resaltado azul al tocar en móviles */
}

/* Área segura para móviles (ej: el notch de iPhone o barras de navegación) */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Contenedor central de inicio: usa viewport completo como referencia */
#home-central {
    position: fixed;
    left: 0;
    right: 0;
    /* 
      top: calcula el punto medio entre:
      - barra superior (aprox 13% del viewport)
      - barra inferior (aprox 13% desde el fondo)
      Punto medio = 13% + (74% / 2) = ~50%, ajustado a 47% visualmente 
    */
    top: 55%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* el main maneja clicks, los botones los re-habilitan */
}

#home-central .circle-container,
#home-central button,
#home-central a {
    pointer-events: auto;
}

/* Estilos para el diseño circular de niveles */
.circle-container {
    position: relative;
    width: 340px;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.circular-item {
    position: absolute;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    z-index: 20;
}
/* Posiciones calculadas en incrementos de 60 grados */
.pos-1 { transform: rotate(270deg) translate(155px) rotate(-270deg); }
.pos-2 { transform: rotate(330deg) translate(155px) rotate(-330deg); }
.pos-3 { transform: rotate(30deg) translate(155px) rotate(-30deg); }
.pos-4 { transform: rotate(90deg) translate(145px) rotate(-90deg); }
.pos-5 { transform: rotate(150deg) translate(155px) rotate(-150deg); }
.pos-6 { transform: rotate(210deg) translate(155px) rotate(-210deg); }

/* Mascota del probador: escala proporcionalmente con el contenedor padre */
.fitting-room-mascot {
    position: relative;
    /* Usa el 85% de la altura del contenedor como tamaño, con un máximo de 240px */
    width: min(85%, 240px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    /* Mismo estilo visual que mascot-container */
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1) 0%, rgba(230, 245, 255, 0.8) 100%);
    border-radius: 50%;
    border: 8px solid white;
    box-shadow: 
        0 20px 50px rgba(0, 94, 150, 0.15),
        inset 0 0 30px rgba(255, 255, 255, 1),
        inset 0 10px 20px rgba(0, 94, 150, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.fitting-room-mascot::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px dashed rgba(0, 94, 150, 0.2);
    animation: rotate-slow 20s linear infinite;
    pointer-events: none;
}

.fitting-room-mascot .mascot-render {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mascot Viewer System */
.mascot-container {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    
    /* Contenedor redondo (Portal) */
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1) 0%, rgba(230, 245, 255, 0.8) 100%);
    border-radius: 50%;
    border: 8px solid white;
    box-shadow: 
        0 20px 50px rgba(0, 94, 150, 0.15),
        inset 0 0 30px rgba(255, 255, 255, 1),
        inset 0 10px 20px rgba(0, 94, 150, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible; /* Permitir que la mascota sobresalga un poco si es necesario */
}

.mascot-container::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px dashed rgba(0, 94, 150, 0.2);
    animation: rotate-slow 20s linear infinite;
    pointer-events: none;
}

.mascot-container::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%);
    pointer-events: none;
}

@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.mascot-render {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    z-index: 10;
    
    /* Clipping para asegurar que nada salga del circulo si la imagen tiene fondo */
    border-radius: 50%;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Fix para overflow:hidden + border-radius en algunos navegadores */
}

.mascot-asset {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Cambiamos a contain para asegurar que se vea toda la mascota */
    filter: drop-shadow(0 15px 25px rgba(0, 94, 150, 0.2));
    animation: mascot-float 6s ease-in-out infinite;
    z-index: 10;
}

.mascot-shadow {
    position: absolute;
    bottom: 15%;
    width: 50%;
    height: 15px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    z-index: 5;
    animation: shadow-pulse 6s ease-in-out infinite;
}

/* Premium Animations */
@keyframes mascot-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.02); }
}

@keyframes shadow-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 0.3; }
}

.mascot-container:hover .mascot-render {
    transform: scale(1.1);
}

.mascot-container:active .mascot-render {
    transform: scale(0.95);
}


/* Efectos 3D y Tarjetas Árticas */
.btn-3d, .tactile-button {
    transition: all 0.075s;
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
}
.btn-3d:active, .tactile-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
}

.card-arctic, .card-shadow {
    background: #ffffff;
    border-bottom: 4px solid #dbf1fe;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px -2px rgba(2, 119, 189, 0.08);
}
.card-arctic:active {
    transform: translateY(2px);
    border-bottom-width: 0px;
}

/* Lógica de pestañas por CSS */
#tab-community:checked ~ #content-community { display: block; }
#tab-community:checked ~ #content-chats { display: none; }
#tab-chats:checked ~ #content-community { display: none; }
#tab-chats:checked ~ #content-chats { display: block; }

#tab-chats:checked ~ .tabs-container #label-chats { 
    background-color: white; 
    color: #005e96; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
#tab-community:checked ~ .tabs-container #label-community { 
    background-color: white; 
    color: #005e96; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Tienda: Brillo Ártico y Scrollbars */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.arctic-shimmer {
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.4) 100%);
    background-size: 200% 200%;
    animation: shimmer 4s infinite linear;
}
@keyframes shimmer {
    0% { background-position: -200% -200%; }
    100% { background-position: 200% 200%; }
}

/* Toggle Switch Skeuomorph */
.toggle-checkbox:checked + .toggle-label {
    background-color: #005e96; /* primary */
}
.toggle-checkbox:checked + .toggle-label:after {
    transform: translateX(100%);
}
.toggle-label:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background-color: white;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Custom Scrollbar for Modals */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    border: 2px solid #f1f5f9;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}
/* Dark Mode Support */
.dark body {
    background-color: #0f172a; /* slate-900 */
    color: #f8fafc; /* slate-50 */
}

.dark .bg-white {
    background-color: #1e293b; /* slate-800 */
    border-color: #334155; /* slate-700 */
}

.dark .text-on-surface {
    color: #f1f5f9;
}

.dark .text-on-surface-variant {
    color: #94a3b8;
}

.dark .card-arctic, .dark .card-shadow {
    background: #1e293b;
    border-color: #334155;
    border-bottom-color: #0f172a;
}

.dark .bg-surface-container-lowest {
    background-color: #0f172a;
}

.dark .bg-surface-container-high {
    background-color: #1e293b;
}

.dark .border-outline-variant {
    border-color: #334155;
}

.dark .bg-surface-variant {
    background-color: #334155;
}

.dark input, .dark textarea {
    background-color: #1e293b;
    color: white;
    border-color: #334155;
}

.dark .material-symbols-outlined {
    color: #94a3b8;
}

.dark .text-primary {
    color: #38bdf8; /* sky-400 */
}

.dark .bg-primary-container {
    background-color: #0369a1;
}



/* ANIMACIONES PREMIUM */
@keyframes arctic-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.arctic-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: arctic-shimmer 3s infinite linear;
}

/* FEEDBACK STATES */
.feedback-correct {
    background-color: #D7FFB8 !important;
    border-color: #58CC02 !important;
    color: #58CC02 !important;
}

.feedback-correct #feedback-icon-container {
    background-color: #58CC02;
}

.feedback-correct #feedback-next-btn-mobile,
.feedback-correct #feedback-next-btn-desktop {
    border-color: #46a302;
    color: #58cc02;
}

.feedback-incorrect {
    background-color: #FFDFE0 !important;
    border-color: #FF4B4B !important;
    color: #FF4B4B !important;
}

.feedback-incorrect #feedback-icon-container {
    background-color: #FF4B4B;
}

.feedback-incorrect #feedback-next-btn-mobile,
.feedback-incorrect #feedback-next-btn-desktop {
    border-color: #e53e3e;
    color: #ff4b4b;
}

/* UTILIDADES */
.h-safe-bottom {
    height: env(safe-area-inset-bottom, 16px);
}