/* Estilos base */
    :root {
        --bg: #000;
        --fg: #eee;
        --gold: #e0b539;
    }
    html, body {
        height: 100%;
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font-family: 'Inter', system-ui, sans-serif;
    }
    body {
        margin: 0;
        background: #000;
        color: #eee;
        min-height: 100vh;
        font-family: 'Inter', system-ui, sans-serif;
    }
    #particulas-reactivas {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: #000;
    }

    /* 1. ESTILO DE LISTADO - Tailwind maneja el Grid */
    #listado {
        padding: 0; 
        list-style: none;
    }

    /* 2. ESTILO DE TARJETA PARA GRID Y TEXTO */
    .card {
        /* IMPORTANTE: Esto asegura que la tarjeta ocupe toda la altura de su celda en el grid */
        height: 100%; 
        
        /* Estilo base de la tarjeta */
        background: rgba(10, 10, 10, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.05);
        
        /* Fuerza la aceleración del hardware para las transiciones */
        will-change: transform, box-shadow; 
        
        /* Aseguramos el espacio para la fecha/hora en la parte inferior */
        padding-bottom: 3rem; 
        
        /* La separación (gap) ahora es manejada por el UL padre */
        margin-bottom: 0; 
        
        /* Transición para el hover */
        transition: transform 0.3s ease-in-out, border-color 0.3s, box-shadow 0.3s;
    }

    /* Mantenemos el hover brillante sin rotación */
    .card:hover {
        transform: translateY(-4px); /* Sutil elevación */
        border-color: #e0b539; /* Borde dorado */
        box-shadow: 0 10px 20px rgba(224, 181, 57, 0.4); /* Brillo dorado intenso */
    }

    .card-text {
        white-space: pre-wrap; /* Respeta los saltos de línea y el formato del texto */
    }

    /* 3. ANIMACIÓN DE CARGA MÁS SOFISTICADA */
    @keyframes shine {
        0%, 100% { background-position: -200% 0; }
        50% { background-position: 200% 0; }
    }
    .loading-card {
        background: linear-gradient(90deg, #1f2937 25%, #111827 50%, #1f2937 75%);
        background-size: 200% 100%;
        animation: shine 1.5s infinite;
        min-height: 100px;
        margin-bottom: 1.5rem;
    }