/* public/assets/css/app.css - Estilos personalizados para el sitio público */

/* ===== Utilidades ===== */
.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;
}

/* ===== Animaciones ===== */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

.animate-fade-in { animation: fade-in 0.6s ease-out forwards; }
.animate-slide-up { animation: slide-up 0.6s ease-out forwards; }

/* ===== Live Banner ===== */
#live-banner {
    animation: live-pulse 2s infinite;
}

@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

#live-banner .animate-ping {
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* ===== Radio Player (Footer) ===== */
#radio-player {
    transform: translateY(0);
}

#radio-player.hidden-player {
    transform: translateY(100%);
    pointer-events: none;
}

#radio-player.audio-playing #radio-play i {
    /* Se maneja via JS */
}

/* ===== YouTube Embed ===== */
.youtube-embed-container {
    position: relative;
}

.youtube-embed-container iframe {
    border: none;
}

/* ===== Prose (para contenido HTML) ===== */
.prose {
    line-height: 1.8;
}

.prose p { margin-bottom: 1.25rem; }
.prose h1, .prose h2, .prose h3, .prose h4 { 
    color: #1e3a5f; 
    margin-top: 2rem; 
    margin-bottom: 1rem;
    font-weight: 700;
}
.prose h1 { font-size: 2.25rem; }
.prose h2 { font-size: 1.875rem; }
.prose h3 { font-size: 1.5rem; }
.prose strong { color: #1f2937; font-weight: 600; }
.prose a { color: #1e3a5f; text-decoration: underline; }
.prose a:hover { color: #c49a2a; }
.prose ul, .prose ol { margin: 1rem 0 1rem 1.5rem; }
.prose li { margin: 0.5rem 0; }
.prose blockquote { 
    border-left: 4px solid #c49a2a; 
    padding-left: 1rem; 
    margin: 1.5rem 0; 
    font-style: italic; 
    color: #4b5563; 
}
.prose img { max-width: 100%; height: auto; border-radius: 0.75rem; }

/* ===== Botones ===== */
.btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold transition-all duration-200 focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-primary text-white hover:bg-primary/90 focus:ring-primary;
}

.btn-secondary {
    @apply bg-secondary text-primary hover:bg-secondary/90 focus:ring-secondary;
}

.btn-outline {
    @apply bg-transparent border-2 border-current text-current hover:bg-current/10 focus:ring-current;
}

/* ===== Cards ===== */
.card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition-shadow duration-300 hover:shadow-lg;
}

.card-hover-lift {
    @apply transition-transform duration-300 hover:-translate-y-1;
}

/* ===== Formularios ===== */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-error {
    @apply mt-1 text-sm text-red-600;
}

/* ===== Tablas ===== */
.table-container {
    @apply overflow-x-auto;
}

.table {
    @apply w-full;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50 border-b border-gray-100;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-100;
}

.table tbody tr {
    @apply hover:bg-gray-50 transition-colors;
}

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

.badge-success { @apply bg-green-100 text-green-800; }
.badge-warning { @apply bg-yellow-100 text-yellow-800; }
.badge-danger { @apply bg-red-100 text-red-800; }
.badge-info { @apply bg-blue-100 text-blue-800; }
.badge-gray { @apply bg-gray-100 text-gray-800; }

/* ===== Modal ===== */
.modal-overlay {
    @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto;
}

/* ===== Tooltips ===== */
.tooltip {
    @apply relative;
}

.tooltip::after {
    @apply absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs bg-gray-900 text-white rounded opacity-0 invisible transition-all;
    content: attr(data-tooltip);
}

.tooltip:hover::after {
    @apply opacity-100 visible;
}

/* ===== Scrollbar personalizado ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full hover:bg-gray-400;
}

/* ===== Focus visible ===== */
:focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2;
}

/* ===== Print ===== */
@media print {
    header, footer, #radio-player, #live-banner-container, .btn, nav {
        display: none !important;
    }
    main { padding-top: 0 !important; }
    .prose { color: #000; }
}

/* ===== Responsive adjustments ===== */
@media (max-width: 640px) {
    .prose h1 { font-size: 1.875rem; }
    .prose h2 { font-size: 1.5rem; }
    .prose h3 { font-size: 1.25rem; }
    
    .btn { @apply px-4 py-2 text-sm; }
}

/* ===== High contrast mode ===== */
@media (prefers-contrast: high) {
    .btn-primary { @apply border-2 border-current; }
    .card { @apply border-2 border-gray-400; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}