/* ==========================================================================
   Transiciones del sitio y del panel.

   Criterio (público con sensibilidad sensorial): movimiento suave, corto y
   predecible. Solo aparece cuando la persona actúa (pasar el mouse, abrir un
   panel, enviar un formulario) o una única vez al cargar una página.
   Nunca hay bucles, avance automático ni parpadeos.

   Si el sistema pide "reducir movimiento" (prefers-reduced-motion), todo esto se
   desactiva: ver la regla global al final de tokens.css y el bloque de abajo.
   ========================================================================== */

:root {
    --t-rapido: 160ms;
    --t-normal: 240ms;
    --t-pagina: 420ms;
    --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Cambios suaves de color, borde y sombra ---------- */
a,
.boton,
.menu a,
.menu-boton,
.vistas a,
.etiqueta,
.cal__num--boton,
button.cal__evento,
a.cal__evento,
.rol-opcion,
summary,
.campo input,
.campo select,
.campo textarea,
.tabla tbody tr {
    transition:
        background-color var(--t-rapido) var(--curva),
        color var(--t-rapido) var(--curva),
        border-color var(--t-rapido) var(--curva),
        box-shadow var(--t-rapido) var(--curva),
        transform var(--t-rapido) var(--curva);
}

/* Los botones se levantan apenas, y vuelven al presionarlos */
.boton:hover:not([disabled]) { transform: translateY(-1px); }
.boton:active:not([disabled]) { transform: translateY(0); }

.tabla tbody tr:hover { background: var(--superficie); }

/* ---------- Tarjetas: levantamiento leve al pasar el mouse ---------- */
.pilar,
.integrante,
.kpi,
.solicitud,
.foto-admin,
.galeria__item .galeria__imagen,
.evento__fecha {
    transition:
        transform var(--t-normal) var(--curva),
        box-shadow var(--t-normal) var(--curva);
}

.pilar:hover,
.integrante:hover,
.kpi:hover,
.solicitud:hover,
.foto-admin:hover,
.galeria__item:hover .galeria__imagen {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(28, 42, 51, 0.09);
}

.evento:hover .evento__fecha { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(28, 42, 51, 0.08); }

/* ---------- Entradas (una sola vez) ---------- */
@keyframes aparecer {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes desplegar {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes crecer-vertical {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@keyframes crecer-horizontal {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Página pública: entrada suave al cargar */
#contenido { animation: aparecer var(--t-pagina) var(--curva) both; }

/* Menú móvil al abrirse */
.js .menu.menu--abierto { animation: desplegar var(--t-normal) var(--curva) both; }

/* Paneles que aparecen como respuesta a una acción (abrir un formulario, confirmar, mensaje de estado) */
.panel-formulario,
.confirmar,
.aviso--ok,
.resumen-errores {
    animation: desplegar var(--t-normal) var(--curva) both;
}

/* Gráficos del panel: las barras crecen una vez al mostrarse */
.grafico .barra { transform-origin: bottom; animation: crecer-vertical 650ms var(--curva) both; }
.grafico__mes:nth-child(2) .barra { animation-delay: 60ms; }
.grafico__mes:nth-child(3) .barra { animation-delay: 120ms; }
.grafico__mes:nth-child(4) .barra { animation-delay: 180ms; }
.grafico__mes:nth-child(5) .barra { animation-delay: 240ms; }
.grafico__mes:nth-child(6) .barra { animation-delay: 300ms; }
.barras-h__barra { transform-origin: left; animation: crecer-horizontal 650ms var(--curva) both; }
.barras-h li:nth-child(2) .barras-h__barra { animation-delay: 60ms; }
.barras-h li:nth-child(3) .barras-h__barra { animation-delay: 120ms; }
.barras-h li:nth-child(4) .barras-h__barra { animation-delay: 180ms; }
.barras-h li:nth-child(5) .barras-h__barra { animation-delay: 240ms; }

/* ---------- Si la persona pidió reducir el movimiento: nada se mueve ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .boton:hover:not([disabled]),
    .pilar:hover,
    .integrante:hover,
    .kpi:hover,
    .solicitud:hover,
    .foto-admin:hover,
    .galeria__item:hover .galeria__imagen,
    .evento:hover .evento__fecha {
        transform: none;
    }
}