/* ==========================================================================
   COMPONENTE: TABLA DE GESTIÓN (.scout-tabla) Y SU TARJETA DE MÓVIL
   Capa: componentes. Lo usan Secretaría (censo, solicitudes, roles), Tienda
   (campañas, artículos, pedidos, informes), Consejo (mis publicaciones) y
   el listado de inscritos. Receta en CLAUDE.md, "Sistema de tarjetas
   móviles". La colocación de las celdas de cada tabla vive en su módulo.
   Separado el 19/10/2026 de css/paneles-scout-tabla.css (migración CSS por
   capas, ver CLAUDE.md "Arquitectura CSS"), con las reglas tal cual.
   ========================================================================== */

/* Estructura Base Escritorio */
.scout-tabla-contenedor { overflow-x: auto; margin-bottom: 50px; }
/* Marco, SOLO escritorio (14/08/2026, a petición expresa): mismo lenguaje
   que las tarjetas móviles (box-shadow en vez de border, para no ocupar
   espacio en el box model; radio-aviso en vez de radio-boton, para que
   coincida con el tamaño de esquina de las tarjetas). Guardado tras el
   breakpoint de 768px a propósito — en móvil cada fila YA es su propia
   tarjeta con su propio marco (ver CLAUDE.md, "Sistema de tarjetas
   móviles"), así que un marco aquí también sería una caja envolviendo
   más cajas, el mismo problema que ya se corrigió una vez en Tienda. */
@media (min-width: 769px) {
    .scout-tabla-contenedor {
        box-shadow: 0 0 0 1px #AAAAAA;
        border-radius: var(--wp--custom--radio--aviso);
    }
}
/* Tipografía/color/padding igualados al Listado de Inscritos (23/08/2026,
   a petición expresa: "seguro que las fuentes y espacios y colores son
   las mismas que el listado de inscritos?" — no lo eran; Inscritos tenía
   su propio <style> a medida en vez de usar esta clase compartida,
   así que hasta hoy había dos sistemas de tabla distintos conviviendo en
   la web). Afecta a TODO lo que use ".scout-tabla": Secretaría (Censo,
   Solicitudes), Gestión de Roles y Tienda (Campañas/Artículos/Pedidos/
   Informes) — es el cambio de fondo que se pidió, no solo Tienda. */
.scout-tabla { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; font-size: 0.87rem; }
.scout-tabla th, .scout-tabla td { padding: 9px 8px; vertical-align: middle; }
.scout-tabla tbody td { color: #1f2937; }
.scout-tabla thead tr { background-color: #f3f4f6; border-bottom: 2px solid #e5e7eb; }
.scout-tabla thead th {
    padding: 10px 8px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #374151;
    white-space: nowrap;
}
.scout-tabla tbody tr { border-bottom: 1px solid #e5e7eb; }
/* Rayado tipo Excel, SOLO escritorio (14/08/2026): antes las filas no
   llevaban fondo propio, así que en vez de blanco se veía lo que hubiera
   detrás de la tabla (con el rediseño de Tienda a fondo lavanda, ese
   "detrás" dejó de ser blanco y las filas se veían transparentes/lavanda
   — se nota en cualquier tabla .scout-tabla, no solo Tienda). Con
   min-width:769px (justo por encima del breakpoint de 768px que usan
   las tarjetas móviles) queda fuera del alcance de la vista móvil, que
   ya pone su propio fondo blanco por tarjeta sin pasar por aquí. */
@media (min-width: 769px) {
    .scout-tabla tbody tr:nth-child(odd)  { background-color: var(--wp--preset--color--base); }
    .scout-tabla tbody tr:nth-child(even) { background-color: #fafafa; }
}

/* ==========================================================================
   TRANSFORMACIÓN A TARJETAS EN MÓVIL — mismo patrón que el resto de la web
   (ver CLAUDE.md, "Sistema de tarjetas móviles para tablas de administración"):
   display:grid con grid-row/grid-column explícitos por celda, nunca flex+order
   (no fuerza el salto de línea). Cubre las 3 tablas de este panel: Solicitudes
   Pendientes, Censo de Usuarios y Gestión de Roles — antes cada una hubiera
   necesitado su propio <style> inline copiado a mano; al vivir aquí, las 3
   comparten exactamente la misma base y solo difieren en la colocación de
   sus propias celdas.
   ========================================================================== */
/* 850px (subido desde 768px el 14/08/2026): la tabla de Roles (nombre +
   select de rol base + 3 casillas) se quedaba sin sitio en escritorio a
   partir de ~780px, mostrando la última columna (Tienda) cortada por el
   scroll horizontal. Con más margen, pasa a tarjeta antes de llegar a
   faltar sitio. Afecta a las 3 tablas de este archivo por igual — no es
   un problema para Solicitudes/Censo, que caben con margen de sobra. */
@media screen and (max-width: 850px) {
    .scout-tabla-contenedor { padding: 2px; }

    /* Reinicio compartido por las 3 tablas */
    .scout-tabla { min-width: 100% !important; }
    /* Sin esto, la cabecera de escritorio (5 columnas de texto) sigue
       marcando el ancho mínimo real de toda la tabla, y es ESO lo que
       fuerza el scroll horizontal y aplasta las tarjetas contra el borde
       — el mismo síntoma, otra vez, de "algo desktop sin neutralizar en
       el media query" (ver CLAUDE.md, capa 8 de la receta de tarjetas). */
    .scout-tabla thead { display: none; }
    .scout-tabla tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0;
        border: none;
        border-radius: var(--wp--custom--radio--aviso);
        box-shadow: 0 0 0 1px #AAAAAA;
        /* Blanco explícito, no transparente (14/08/2026): desde que
           Secretaría/Roles se envolvieron en .panel-admin-lavanda, el
           fondo real de la página es lavanda, y "transparente" dejaba
           verlo a través de la tarjeta — mismo fallo y misma corrección
           que ya se hizo en Tienda y en Kraal. */
        background: var(--wp--preset--color--base);
        margin-bottom: 20px;
        overflow: hidden;
    }
    .scout-tabla td {
        box-sizing: border-box;
        min-width: 0;
        border: none !important;
        padding: 9px 5px 9px 40% !important;
        text-align: right;
        position: relative;
    }
    .scout-tabla td:before {
        content: attr(data-label);
        position: absolute;
        left: 5px; top: 9px;
        width: 35%;
        text-align: left;
        font-weight: bold;
        color: #6b7280;
        font-size: 0.74rem;
        text-transform: uppercase;
    }
    .scout-tabla td > ul { padding-left: 0; list-style-type: none; margin: 0; text-align: right; }
    .scout-tabla td > ul li { margin-bottom: 4px; }
    .scout-tabla input, .scout-tabla select, .scout-tabla button { font-family: inherit; }

    .scout-acciones-flex { flex-direction: row !important; justify-content: flex-end; flex-wrap: wrap; }
}