/* ========================================================================== MÓDULO SECRETARÍA: TABLAS DEL PANEL (censo, solicitudes, roles) Capa: módulos. Solo lo propio de estas tablas; la base y la tarjeta de móvil son del componente css/componentes/tabla.css. 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. ========================================================================== */ /* Cabecera pegajosa para el censo */ .scout-tabla-censo thead { position: sticky; top: 0; background: #f3f4f6; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } /* Reparto de ancho en escritorio (30/09/2026, a petición expresa: "entre Operaciones y Check sobra espacio") — sin ancho de columna explícito, el layout automático de la tabla reparte el espacio sobrante de forma más o menos proporcional a TODAS las columnas, incluidas estas dos (un botón "Editar" y una casilla), que no necesitan tanto. Poniéndoles un ancho fijo ("width" como pista de ancho, no "table-layout:fixed" — eso obligaría a fijar TODAS las columnas), el resto (Vinculación, Roles, Detalles/Educandos...) se queda con el espacio libre. Solo escritorio — en móvil cada fila es su propia tarjeta y no aplica. */ @media (min-width: 769px) { .scout-tabla-censo th.th-operaciones-censo, .scout-tabla-censo td.celda-operaciones-censo { width: 90px; } .scout-tabla-censo th.th-check-censo, .scout-tabla-censo td.celda-verificado-censo { width: 60px; text-align: center; } } @media screen and (max-width: 850px) { /* --- Solicitudes Pendientes de Validación --- */ .tabla-solicitudes-secretaria.scout-tabla td.celda-id-solic { grid-row: 1; grid-column: 1; padding: 9px 5px !important; text-align: left !important; background: #eaeaea; } .tabla-solicitudes-secretaria.scout-tabla td.celda-vinc-solic { grid-row: 1; grid-column: 2; padding: 9px 5px !important; text-align: right !important; background: #eaeaea; } .tabla-solicitudes-secretaria.scout-tabla td.celda-id-solic:before, .tabla-solicitudes-secretaria.scout-tabla td.celda-vinc-solic:before { content: none; } .tabla-solicitudes-secretaria.scout-tabla td.celda-contacto-solic { grid-row: 2; grid-column: 1 / -1; } .tabla-solicitudes-secretaria.scout-tabla td.celda-detalles-solic { grid-row: 3; grid-column: 1 / -1; } .tabla-solicitudes-secretaria.scout-tabla td.celda-operaciones-solic { grid-row: 4; grid-column: 1 / -1; padding-left: 5px !important; text-align: left; } .tabla-solicitudes-secretaria.scout-tabla td.celda-operaciones-solic:before { content: none; } .tabla-solicitudes-secretaria.scout-tabla td.celda-operaciones-solic .scout-acciones-flex { justify-content: flex-start; } /* --- Censo Consolidado de Usuarios --- */ .scout-tabla-censo td.celda-id-censo { grid-row: 1; grid-column: 1; padding: 9px 5px !important; text-align: left !important; background: #eaeaea; } .scout-tabla-censo td.celda-vinculacion-censo { grid-row: 1; grid-column: 2; padding: 9px 5px !important; text-align: right !important; background: #eaeaea; } .scout-tabla-censo td.celda-id-censo:before, .scout-tabla-censo td.celda-vinculacion-censo:before { content: none; } /* 27/09/2026, a petición expresa: rediseño para tarjeta más compacta. "Contacto" (email — teléfono en una sola línea) y "Estado" (antes fundidos en una celda) pasan a ser dos filas propias, cada una con su etiqueta — igual que Vinculación/Roles/Educandos, en vez de un bloque suelto. "Roles" tampoco tenía fila propia antes — caía al final, incluso después del botón Editar (una acción debería ir siempre la última, no en medio de datos). */ .scout-tabla-censo td.celda-contacto-censo { grid-row: 2; grid-column: 1 / -1; } /* Salto de línea de correo+teléfono (27/09/2026, a petición expresa: "salta línea... en realidad tiene sitio") — la regla base ".scout-tabla td" reserva un 40% de la celda para la etiqueta (35% de ancho para ella), pensado para etiquetas largas tipo "EDUCANDOS / DETALLES"; "CONTACTO" es mucho más corta y no necesita tanto, así que aquí se le reserva menos, dejando más ancho real para el correo + teléfono. */ .scout-tabla-censo td.celda-contacto-censo { padding-left: 22% !important; } .scout-tabla-censo td.celda-contacto-censo:before { width: 18%; } .scout-tabla-censo td.celda-estado-censo { grid-row: 3; grid-column: 1 / -1; text-align: right; } .scout-tabla-censo td.celda-roles-censo { grid-row: 4; grid-column: 1 / -1; } .scout-tabla-censo td.celda-detalles-censo { grid-row: 5; grid-column: 1 / -1; } .scout-tabla-censo td.celda-ultimo-acceso-censo { grid-row: 6; grid-column: 1 / -1; } /* "Check" multifunción, alineado a la derecha como el resto de valores de la tarjeta. En escritorio es la última columna; en la tarjeta móvil va justo antes de Editar (las acciones siempre al final). */ .scout-tabla-censo td.celda-verificado-censo { grid-row: 7; grid-column: 1 / -1; text-align: right; } .scout-tabla-censo td.celda-operaciones-censo { grid-row: 8; grid-column: 1 / -1; padding-left: 5px !important; text-align: left; } .scout-tabla-censo td.celda-operaciones-censo:before { content: none; } .scout-tabla-censo td.celda-operaciones-censo .scout-acciones-flex { justify-content: flex-start; } /* Insignias de Roles alineadas a la derecha (27/09/2026, a petición expresa: "no lo está") — el div interno que las apila en columna lleva "align-items:flex-start" en el PHP (inline), que gana a la alineación a la derecha del texto de la celda; se corrige aquí. */ .scout-tabla-censo td.celda-roles-censo > div { align-items: flex-end !important; } /* Tamaño de letra uniforme (27/09/2026, a petición expresa: "varios tamaños de fuente... ponlos todos al tamaño de los títulos") — cada valor (email, teléfono, badges, hijos/as, fecha de último acceso) traía su propio tamaño suelto en el PHP (0.75em, 0.78em, 0.85em, 0.9em...), ninguno igual al de las etiquetas en mayúscula ("CONTACTO/ESTADO"...). "!important" hace falta porque esos tamaños vienen puestos como estilo inline en el PHP, que gana a una regla normal de hoja de estilos. Tarjeta compacta a propósito — es un listado, no una ficha individual. */ .scout-tabla-censo td.celda-contacto-censo *, .scout-tabla-censo td.celda-estado-censo *, .scout-tabla-censo td.celda-roles-censo *, .scout-tabla-censo td.celda-detalles-censo *, .scout-tabla-censo td.celda-ultimo-acceso-censo * { font-size: 0.74rem !important; } /* --- Gestión de Roles --- 3 columnas fijas = los 3 roles adicionales actuales (Secretaría, Tesorería, Tienda — ver sw_roles_adicionales_disponibles()). Si se añade un cuarto rol de función en el futuro, cambiar el "repeat(3, ...)" de abajo a "repeat(4, ...)" — es el único ajuste manual que pide este bloque para seguir viéndose bien. */ .tabla-roles-secretaria.scout-tabla tbody tr { grid-template-columns: repeat(3, 1fr); } .tabla-roles-secretaria.scout-tabla td.celda-usuario-rol { grid-row: 1; grid-column: 1 / -1; padding: 9px 5px !important; text-align: left !important; background: #eaeaea; } .tabla-roles-secretaria.scout-tabla td.celda-usuario-rol:before { content: none; } .tabla-roles-secretaria.scout-tabla td.celda-base-rol { grid-row: 2; grid-column: 1 / -1; padding: 9px 5px 9px 40% !important; text-align: right !important; } .tabla-roles-secretaria.scout-tabla td.celda-check-rol { grid-row: 3; padding: 9px 5px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .tabla-roles-secretaria.scout-tabla td.celda-check-rol:before { content: attr(data-label); position: static; width: auto; text-align: center; font-size: 0.68rem; } }