/* public/css/ux-improvements.css */

/* ===================================
   MEJORA #5: Feedback Táctil Móvil
   =================================== */

/* Feedback táctil general para botones y enlaces */
@media (hover: none) and (pointer: coarse) {

    button:active,
    a:active,
    [role="button"]:active {
        transform: scale(0.97);
        transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Botones primarios */
    .bg-indigo-600:active {
        background-color: rgb(67, 56, 202);
        /* indigo-700 */
    }

    /* Botones secundarios */
    .bg-gray-100:active {
        background-color: rgb(229, 231, 235);
        /* gray-200 */
    }

    /* Botones de peligro */
    .bg-red-600:active {
        background-color: rgb(185, 28, 28);
        /* red-700 */
    }
}

/* ===================================
   MEJORA #11: Focus States Personalizados
   =================================== */

/* Focus general con outline personalizado */
*:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgb(255 255 255), 0 0 0 4px rgb(99 102 241);
}

/* Dark mode focus */
.dark *:focus-visible {
    box-shadow: 0 0 0 2px rgb(31 41 55), 0 0 0 4px rgb(99 102 241);
}

/* Focus para inputs y textareas */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-color: rgb(99 102 241);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
}

.dark input:focus-visible,
.dark textarea:focus-visible,
.dark select:focus-visible {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Focus para botones primarios */
.bg-indigo-600:focus-visible {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

/* Focus para enlaces */
a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ===================================
   MEJORA #9: Animaciones de Modales
   =================================== */

/* Animación de fade in para modales */
@keyframes modal-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Animación scale-in simplificada - compatible con cualquier centrado */
@keyframes modal-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Aplicar a overlays de modales */
[id$="-modal"]:not(.hidden) {
    animation: modal-fade-in 0.2s ease-out;
}

/* Aplicar a contenido de modales - usando selector más específico */
[id$="-modal"]:not(.hidden)>div:not([class*="fixed"]):not([class*="absolute"]) {
    animation: modal-scale-in 0.2s ease-out;
}

/* Para modales que usan contenedor interno con bg-white */
[id$="-modal"]:not(.hidden) .bg-white,
[id$="-modal"]:not(.hidden) .dark\:bg-gray-800 {
    animation: modal-scale-in 0.2s ease-out;
}

/* ===================================
   MEJORA #1: Tooltips para Botones
   =================================== */

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(17 24 39);
    /* gray-900 */
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgb(17 24 39);
}

.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus-within .tooltip {
    opacity: 1;
}

/* ===================================
   MEJORA #4: Skeleton Screens
   =================================== */

@keyframes skeleton-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.skeleton {
    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background: linear-gradient(90deg,
            rgb(229 231 235) 0%,
            rgb(243 244 246) 50%,
            rgb(229 231 235) 100%);
    background-size: 200% 100%;
}

.dark .skeleton {
    background: linear-gradient(90deg,
            rgb(55 65 81) 0%,
            rgb(75 85 99) 50%,
            rgb(55 65 81) 100%);
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-shimmer {
    animation: skeleton-shimmer 2s linear infinite;
}

/* ===================================
   MEJORA #14: Drag & Drop Visual
   =================================== */

.dragging {
    opacity: 0.5;
    transform: scale(0.95) rotate(2deg);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.drop-target {
    position: relative;
}

.drop-target::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px dashed rgb(99 102 241);
    border-radius: 1rem;
    background-color: rgba(99, 102, 241, 0.05);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.drop-target.drag-over::after {
    opacity: 1;
}

/* ===================================
   MEJORA #13: Indicador "Escribiendo..."
   =================================== */

@keyframes typing-bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-4px);
    }
}

.typing-dot {
    animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* ===================================
   UTILIDADES GENERALES
   =================================== */

/* Transiciones suaves */
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover lift effect */
.hover-lift {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-2px);
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}