/* =========================================================================== * cpg-filas-compactas.css · 23-08-2026 (tanda -ml) * * Filas más finas en ENTRENADORES y MONITORES. * * Todo lo de aquí cuelga de `[data-cpg-filas-compactas]`, una marca que pone * `cpg-filas-compactas.js` en el SÓLO mientras se está en una de esas * dos pantallas. Fuera de ellas no hay marca y esta hoja no hace nada: ni una * regla suelta que pueda escaparse a otra pantalla. * * ⚠️ VA EN PAREJA CON EL GUION. Uno sin el otro no sirve de nada. * * DE DÓNDE SALEN LOS 60 px DE ANTES * ───────────────────────────────── * · cada celda: `p-3` = 12 px arriba + 12 abajo * · el texto: `text-sm` = 20 px de línea * · los botones: 36 px de alto, que es lo que de verdad manda en la fila * * Bajando el relleno a 5 px y los botones a 30 px, la fila queda en unos 40 px: * un tercio menos, y caben cuatro o cinco entrenadores más sin hacer scroll. * * 🔴 NO SE USA `!important` EN NINGUNA REGLA. No hace falta: `[atributo]` más * tres elementos gana por especificidad a una clase suelta de Tailwind. Y un * `!important` aquí sería un problema el día que alguien quiera afinar una de * estas celdas desde otro sitio. * =========================================================================== */ /* ── Las celdas ─────────────────────────────────────────────────────────── */ html[data-cpg-filas-compactas] tbody td { padding-top: 5px; padding-bottom: 5px; } /* La cabecera acompaña: si se quedara alta desentonaría con el cuerpo. */ html[data-cpg-filas-compactas] thead th { padding-top: 6px; padding-bottom: 6px; } /* ── Las etiquetas de color (Activo / Inactivo / el rol) ─────────────────── */ /* Llevan su propio relleno vertical y son el segundo motivo de que la fila crezca. Se afinan sin tocar su tamaño de letra, que es lo que se lee. */ html[data-cpg-filas-compactas] tbody td .status-badge { padding-top: 1px; padding-bottom: 1px; line-height: 1.35; } /* ── Los botones de acción ─────────────────────────────────────────────── * Son cuatro por fila (editar · activar · eliminar · enlace de contraseña) y * miden 36 px: son ELLOS los que fijan la altura real de la fila. Sin bajarlos, * quitar relleno a las celdas no se notaría apenas. * * ⚠️ SÓLO EN PANTALLA ANCHA. En el móvil se dejan como están: 30 px es cómodo * con un ratón y pequeño para un dedo, y en esa lista hay un botón de eliminar. * Ahorrar diez píxeles no vale un borrado por error. * ────────────────────────────────────────────────────────────────────────── */ @media (min-width: 768px) { html[data-cpg-filas-compactas] tbody td button { height: 30px; min-height: 0; padding-left: 7px; padding-right: 7px; } }