/* ===========================================================================
 * cpg-bandeja.css — LA LISTA DE LA BANDEJA, MÁS ANCHA
 * Tanda -oa · 24-08-2026
 *
 * Plataforma creada por David Hernández Díaz para el Club Patinaje Guadalajara.
 * Web creada por OMIAXvisual.
 * ===========================================================================
 *
 * QUÉ HACE
 * David, 24-08: «el rectángulo de la izquierda se puede hacer un poco más
 * grande para que se vean mejor los datos, y comerle un poco de espacio al de
 * la derecha».
 *
 * La lista de correos medía **340 píxeles fijos**, y ahí no cabe un asunto
 * entero: «Consulta web: Ainhoa Garcés S…». Desde la tanda -nz hay además una
 * línea más por fila —el correo de quien escribe—, así que se nota más.
 *
 * ───────────────────────────────────────────────────────────────────────────
 * POR QUÉ SE ARREGLA CON UNA HOJA DE ESTILO Y NO CON UN GUION
 *
 * Porque es una cuestión de ANCHURA, no de comportamiento. Un guion tendría que
 * esperar a que la pantalla estuviera pintada para medirla y cambiarla, y eso
 * se ve: primero sale estrecha y luego da un salto. **Lo que es de estilo se
 * resuelve con estilo.**
 *
 * ───────────────────────────────────────────────────────────────────────────
 * ⭐ POR QUÉ ESTO NO TOCA NINGUNA OTRA PANTALLA
 *
 * La clase `lg:grid-cols-[340px_1fr]` aparece **UNA sola vez en todo el
 * programa**, y es justo la bandeja (comprobado sobre el bundle: una
 * coincidencia). Así que cambiarla no puede descolocar nada más.
 *
 * ⚠️ Y por eso mismo es la excepción que confirma la regla de la casa: aquí SÍ
 * vale agarrarse a una clase de Tailwind, porque esa clase **no describe cómo
 * se ve algo en general, describe ESTA rejilla concreta** —lleva la medida
 * dentro del nombre— y no se repite. Para identificar un botón o una fila
 * seguiría sin valer.
 *
 * ───────────────────────────────────────────────────────────────────────────
 * ⭐ POR QUÉ NO HACE FALTA `!important`
 *
 * Esta hoja se carga DESPUÉS de la del programa, así que con la misma fuerza
 * ya ganaría. Aun así se le añade `div` delante: eso le da un punto más de
 * especificidad y deja de depender del orden de carga, que es la clase de
 * detalle que se rompe el día que alguien mueve una línea del index.
 *
 * Reversible: quitar el <link> de index.html.
 * =========================================================================== */

/* A partir de pantalla mediana-grande, que es donde el programa pone las dos
   columnas. Por debajo de 1024 px van una encima de otra y esto no aplica. */
@media (min-width: 1024px) {
  div.lg\:grid-cols-\[340px_1fr\] {
    /* 340 → 420. El `minmax(0, …)` es el mismo truco que usa el programa en sus
       otras rejillas: sin él, un asunto largo puede EMPUJAR la columna y
       desbordar la caja en vez de recortarse. */
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  }
}

/* En pantallas anchas —como la de David— sobra sitio de verdad, así que se le
   da un poco más. El panel de la derecha se queda con más de 1.200 px, que es
   de sobra para leer una consulta. */
@media (min-width: 1600px) {
  div.lg\:grid-cols-\[340px_1fr\] {
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  }
}