/* ==========================================================================
   COMPONENTE: TABLAS Y BOTONES COMPARTIDOS DE LOS PANELES DE GESTIÓN
   Archivo: /css/paneles-scout-tabla.css
   Usado por: Panel Secretaría (shortcode-panel-secretaria.php) y
   Panel de Gestión de Roles (shortcode-panel-gestion-roles.php).

   Antes vivía como <style> incrustado dentro de la función PHP de
   Secretaría, así que solo se cargaba en esa página — Roles usaba las
   mismas clases sin tener ningún CSS real detrás. Al pasarlo a un
   archivo enqueued de verdad, ambos paneles comparten el mismo estilo
   siempre, estén en la página que estén.
   ========================================================================== */

/* 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(--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: #ffffff; }
    .scout-tabla tbody tr:nth-child(even) { background-color: #fafafa; }
}

/* 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); }

/* Botones unificados */
.scout-btn { padding: 8px 12px; border-radius: var(--radio-boton); cursor: pointer; font-size: 0.85em; font-weight: bold; text-align: center; display: inline-block; transition: opacity 0.2s; border: none; }
.scout-btn-outline { background: var(--color-accion-fondo-gris); color: var(--color-accion-gris); border: 1px solid var(--color-accion-borde-gris); }
.scout-btn-outline-red { background: #fff; color: var(--color-accion-rojo); border: 1px solid var(--color-accion-rojo); }
/* Ámbar: acción seria/semi-destructiva pero NO un borrado permanente
   (ej. "Dar de baja": anonimiza datos sensibles pero conserva nombre,
   email e histórico) — un escalón por debajo del rojo, que se reserva
   para lo irreversible de verdad (Purga LOPD). */
.scout-btn-outline-amber { background: #fff; color: var(--color-accion-ambar); border: 1px solid var(--color-accion-ambar); }
/* Verde = crear/guardar, azul = editar/acción principal genérica — las
   dos que faltaban (14/08/2026): antes de existir estas dos clases, cada
   botón verde/azul outline de la web se escribía a mano con
   background/color/border sueltos en el propio PHP, repetido más de una
   decena de veces entre Kraal y Tienda. */
.scout-btn-outline-green { background: #fff; color: var(--color-accion-verde); border: 1px solid var(--color-accion-verde); }
.scout-btn-outline-blue { background: #fff; color: var(--color-accion-azul); border: 1px solid var(--color-accion-azul); }
/* Morado de marca, SOLO para botones que en realidad son un menú/pestaña
   (20/08/2026, a petición expresa: "los botones que sean menús... deben
   ser grises si no están seleccionados y morados, como el texto del menú
   principal, si la opción está seleccionada"). Distinto del resto de la
   paleta a propósito: el azul/verde/ámbar/rojo describen QUÉ hace un
   botón (ver, crear, modificar, borrar); el morado aquí no describe una
   acción — dice "estás en esta sección", igual que el ítem activo del
   menú de cabecera (".current-menu-item", css/navegacion.css). Nunca se
   combina con las demás -outline-* en el mismo botón. */
/* Fondo morado suave + texto morado, SIN borde visible (21/08/2026, a
   petición expresa: "el mismo efecto que ya tiene el menú principal...
   fondo morado suave... ocultar el subrayado") — mismos dos valores que
   ".current-menu-item" en css/navegacion.css (--scout-global-fondo de
   fondo, --scout-global-base de texto), no el estilo "outline" (fondo
   blanco + borde de color) del resto de -outline-*. "border: 1px solid
   transparent" (no "none"): mantiene el mismo tamaño de caja que sus
   hermanos inactivos (".scout-btn-outline", que sí lleva borde real), o
   el botón activo mediría 2px menos y se vería desalineado en la fila. */
.scout-btn-outline-menu { background: var(--scout-global-fondo); color: var(--scout-global-base); border: 1px solid transparent; }

/* Botón de acción de página (no de fila de tabla) — mismo lenguaje de
   color que .scout-btn, pero más grande: para "Crear Evento", "Guardar
   Cambios" de un formulario grande, etc. Reutiliza los mismos modificadores
   -outline-verde/azul/rojo/amber de arriba en vez de duplicarlos.
   NORMA (14/08/2026): .scout-btn-accion nunca lleva color/borde propios —
   siempre va combinado con un .scout-btn-outline-* de arriba, que es quien
   los pone. Antes esta regla traía "border: none" fijo, que por ir
   declarada DESPUÉS de los .scout-btn-outline-* en este mismo archivo
   ganaba la cascada (misma especificidad, orden de aparición) y se comía
   su borde en todos los usos de esta clase (Tienda, Kraal, Listado de
   Inscritos) — encontrado en Tienda ("+ Nueva Campaña"/"+ Nuevo
   Artículo"), pero afectaba a los demás por igual sin que se hubiera
   notado aún. font-size explícito porque sin él heredaba el tamaño de
   párrafo del tema (más grande de lo que conviene a un botón).
   "text-decoration:none" con "!important" (20/08/2026, bug real
   encontrado: "Crear"/"Gestionar" en Panel de Kraal se veían subrayados,
   con el texto "más grande" — en realidad el mismo tamaño en px, pero el
   subrayado los hace parecer más pesados). Causa: ".entry-content...a"
   (css/frontend-contenido-simple-post.css, subrayado genérico para
   enlaces de texto normal dentro del contenido) tiene más especificidad
   que esta clase y le ganaba el "text-decoration" — pero SOLO a los usos
   de ".scout-btn-accion" que son un <a> de verdad (Ir al Listado, Eliminar,
   las pestañas de Kraal...), no a los que son <button> (Guardar, Cancelar
   evento...), de ahí que unos sí y otros no se vieran afectados sin que
   pareciera relacionado a simple vista. */
/* Padding recortado de 10px 18px a 5px 12px (21/08/2026, a petición
   expresa) — botones más bajos/estrechos en todos sus usos a la vez, al
   vivir en esta única clase base. */
.scout-btn-accion { padding: 5px 12px; border-radius: var(--radio-boton); cursor: pointer; font-size: 0.95rem; font-weight: 600; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }

/* Variante compacta para móvil (20/08/2026, a petición expresa: "lo ideal
   sería tener dos estilos para los botones según la pantalla... así
   tendríamos todos los botones con el mismo estilo pero con dos
   variantes"). Antes cada pantalla que necesitaba botones más pequeños en
   móvil escribía su PROPIO valor de padding/font-size por su cuenta
   (Editar Evento en backend-form-edicion-post.css, la barra "Solo
   gestores" en shortcode-calendario.css) — cualquier botón nuevo que no
   se acordara de hacerlo (como "Crear"/"Gestionar" del Panel de Kraal, que
   comparten fila con otros botones que SÍ encogían) se quedaba con el
   tamaño de escritorio en un móvil estrecho, sin que se notara hasta
   compararlos uno al lado del otro. Puesta aquí, en la propia clase base,
   la variante de móvil es automática para CUALQUIER uso nuevo de
   ".scout-btn-accion", sin tener que acordarse de añadirla cada vez. Los
   dos sitios que ya tenían su propia versión (más compacta todavía, para
   espacios más justos) siguen ganando por especificidad — esto es solo el
   valor por defecto para quien no pida algo distinto. */
@media (max-width: 640px) {
    .scout-btn-accion {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   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(--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: #ffffff;
        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; }
    .scout-btn { flex-grow: 1; margin-left: 5px; }

    /* --- 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; }
    .scout-tabla-censo td.celda-operaciones-censo {
        grid-row: 7; 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;
    }
}

/* ==========================================================================
   CABECERA "ENVUELTA EN LAVANDA" — versión genérica para paneles de gestión
   14/08/2026. Mismo sistema que .panel-tienda-lavanda/.panel-tienda-chrome
   en css/tienda.css (título+pestañas en su propia tarjeta blanca flotando
   sobre el fondo lavanda de la página, en vez de la tarjeta blanca a ras
   de borde de la plantilla de zona Admin) — pero con nombre genérico
   (panel-admin-*, no panel-tienda-*) para poder reutilizarlo en Kraal,
   Secretaría, Tesorería... sin tocar nada de css/tienda.css ni de
   inc/tienda/ (Tienda ya quedó cerrada, no se toca).
   Usado por primera vez en: Panel de Kraal
   (panel_scouter_shortcode_panel_kraal() en inc/shortcodes-panel-scouter.php).
   ========================================================================== */
.scout-formulario-wrapper.panel-admin-lavanda {
    background-color: transparent !important;
    padding: 0 !important;
}
/* La "tarjeta blanca" de la plantilla de zona Admin (compartida por todos
   los paneles de gestión) se neutraliza SOLO cuando contiene el marcador
   .panel-admin-lavanda, igual que ya se hace para Tienda — el resto de
   paneles sin ese marcador no se ven afectados. */
.has-border-color.has-base-background-color.has-background:has(.panel-admin-lavanda) {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
/* Un div más, un nivel por debajo, con su propio borde puesto como estilo
   en línea por Gutenberg (mismo hallazgo que en Tienda: no lleva las
   clases .has-border-color/etc., así que la regla de arriba no lo
   alcanza) — seleccionado por relación, no por clase. */
div:has(.scout-formulario-wrapper.panel-admin-lavanda) {
    border: none !important;
    border-radius: 0 !important;
}
/* Caja + título homogeneizados con el estilo de Editar Evento/Editar
   Noticia (20/08/2026, a petición expresa: "homogeneizar las páginas de
   administración usando este estilo... empezamos con el Panel de Kraal...
   que la primera caja cogiera el estilo que queremos" — ver
   ".scout-caja-info-acciones" en css/backend-form-edicion-post.css, mismo
   criterio de borde/radio/padding aquí). ⚠️ ".panel-admin-chrome"/
   ".panel-admin-titulo" NO son exclusivas de Panel de Kraal como decía
   este comentario al principio — Secretaría también las usa
   (inc/shortcode-panel-secretaria.php), así que este cambio de caja/
   título se ve IGUAL en las dos páginas (efecto deseado, ya que el
   objetivo final es homogeneizar todos los paneles — pero si algo de
   Secretaría se queja de esto, es por esto). Lo que SÍ es exclusivo de
   Kraal es la fila de pestañas-como-botones de aquí abajo, montada con
   ".scout-cabecera-editor" en el PHP, no con ".panel-tabs-nav" (que
   Secretaría/Tienda siguen usando tal cual). No se toca ".sw-titulo-
   pagina" (style.css), la clase compartida de la que heredaba antes de
   esta. Ancho de página sin tocar a propósito (útil para tablas
   extensas). */
.panel-admin-chrome {
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: var(--radio-tarjeta);
    padding: 16px;
    margin-bottom: var(--espacio-lg);
    box-sizing: border-box;
}
.panel-admin-chrome .panel-tabs-nav { margin-bottom: 0; }
.panel-admin-chrome .panel-subtabs-nav { margin-top: var(--espacio-lg); margin-bottom: 0; }
/* Título compacto y a la izquierda (antes: ".sw-titulo-pagina" lo pintaba
   grande, centrado y con una línea divisoria — apropiado para el título
   único de una página, pero pesado para una cabecera que ya vive dentro
   de su propia caja pequeña). Mismo tratamiento que
   ".scout-titulo-mini" (backend-form-edicion-post.css): mayúsculas,
   gris, en línea con su icono.

   Tamaño homogeneizado a 1.5rem/24px (21/08/2026, a petición expresa:
   "definir y homogeneizar los títulos de las páginas de administración
   ... 24px, a la izquierda, con el color/fuente que tiene ahora PANEL DE
   KRAAL") — antes 13px, pensado solo para la cabecera compacta de Panel
   de Kraal/Secretaría/Roles/Tienda. Con este cambio pasa a ser también
   el título de página completo (Crear Evento/Noticia/Aviso, Listado de
   Inscritos, Guía de Uso, Ordenar Muro...) — mismo color/mayúsculas/peso
   que antes, solo más grande. NO toca ".scout-titulo-mini": ese es un
   elemento distinto a propósito (la línea de estado de Editar
   Evento/Noticia, deliberadamente la mitad de tamaño — ver su propio
   comentario en backend-form-edicion-post.css), no un título de página. */
.panel-admin-titulo {
    text-align: left !important;
    text-transform: uppercase !important;
    color: #555555 !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    border-bottom: none !important;
    margin: 0 0 12px !important;
    padding-bottom: 0 !important;
}
/* Sin margen inferior cuando el título comparte fila con los botones
   (Panel de Kraal, ".scout-cabecera-editor") — el "12px" de la regla base
   de arriba es para cuando el título va SOLO, con las pestañas debajo
   (Secretaría, sigue así). "!important" (20/08/2026, corrección real: sin
   él no ganaba a la regla base, que también lleva "!important" — el
   título se quedaba 6px más arriba que los botones, no centrados de
   verdad pese al "align-items:center" de ".scout-cabecera-editor"). */
.scout-cabecera-editor .panel-admin-titulo {
    margin: 0 !important;
}
/* Sin margen inferior propio tampoco en la fila entera (20/08/2026, a
   petición expresa: "reducir el espacio... con la caja") — los 20px de
   ".scout-cabecera-editor" (pensados para separarla del formulario que
   viene justo debajo en Editar Evento) se sumaban aquí al padding de
   ".panel-admin-chrome" (16px), dejando ~36px de hueco antes del borde
   inferior de la caja. */
.panel-admin-chrome .scout-cabecera-editor {
    margin-bottom: 0;
}
.panel-admin-contenido { margin-top: var(--espacio-lg); }

/* Caja de contenido con el mismo estilo que la caja de arriba (20/08/2026,
   a petición expresa: "dale el mismo estilo a la caja siguiente, la que
   muestra un contenido según la elección de la primera caja"). Marcador
   propio ".panel-kraal-contenido" — ".panel-admin-contenido" a secas
   también la usan Secretaría/Roles/Tienda, que no se han homogeneizado
   todavía (ver comentario en inc/shortcodes-panel-scouter.php). Mismos
   valores que ".panel-admin-chrome". */
.panel-kraal-contenido {
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: var(--radio-tarjeta);
    padding: 16px;
    box-sizing: border-box;
}
/* Botones "Crear"/"Gestionar" (Eventos Recurrentes) — separación del
   contenido de debajo (antes la ponía el "border-bottom" de
   ".panel-subtabs-nav", ya no aplica al ser botones en vez de pestañas).
   Alineados a la derecha (21/08/2026, a petición expresa) — hereda
   "justify-content" de ".scout-fila-acciones-cabecera"
   (backend-form-edicion-post.css), que por defecto no fija ninguno
   (queda a la izquierda); se sobreescribe solo aquí, no en el resto de
   usos de esa clase (la cabecera de Editar Evento, que sigue igual). */
.panel-kraal-subacciones {
    margin-bottom: var(--espacio-lg);
    justify-content: flex-end;
}

/* Relleno lateral recortado en móvil (22/08/2026, a petición expresa:
   "Panel de Kraal/Eventos Recurrentes/calendario y listado... mucho
   espacio desaprovechado en los laterales, caja dentro de caja dentro de
   caja") — SOLO móvil, el escritorio no se toca. ".panel-admin-chrome"/
   ".panel-kraal-contenido" traían 16px de relleno en los 4 lados fijo,
   sin reducir en pantallas estrechas (a diferencia de
   ".scout-formulario-wrapper", que ya baja a 0 lateral por debajo de
   640px, ver backend-form-edicion-post.css) — con el resto de capas de
   fuera (margen global del sitio, tarjeta blanca de la plantilla...) ya
   sumando lo suyo, este 16px extra por cada lado de ESTAS DOS cajas era
   la capa que faltaba identificar (ver CLAUDE.md, "Capas de padding
   lateral en móvil"). Vertical sin tocar (14px, sigue separando del
   contenido de arriba/abajo) — solo el lateral baja a 8px. Sin marcador
   ".panel-kraal-contenido" en ".panel-admin-chrome" (compartida con
   Secretaría/Tienda) a propósito: es un ajuste seguro en cualquier panel,
   al ser solo móvil y no afectar al escritorio de ninguno. */
@media (max-width: 640px) {
    .panel-admin-chrome,
    .panel-kraal-contenido {
        padding: 14px 8px;
    }
}

/* ==========================================================================
   COLOR DE LOS BOTONES DE FILA (Ver/Editar/Borrar) — SOLO MÓVIL
   14/08/2026: unificado desde Tienda (.btn-editar-generico/.btn-ver-generico,
   antes en css/tienda.css) y Kraal (.btn-ver-pub/.btn-editar-pub/
   .btn-borrar-pub, renombradas aquí a los mismos nombres genéricos, antes
   en inc/shortcodes-panel-scouter.php) — mismo azul/gris/rojo en los dos
   sitios, así que ya no tiene sentido tenerlo duplicado.
   Solo el COLOR vive aquí: la FORMA (ancho fijo en Tienda con solo 2
   botones, ancho flex a reparto igual en Kraal con 3) sigue en el CSS de
   cada uno, porque esa sí difiere por necesidad. Cada regla de forma ya
   pone su propio "border: 1px solid transparent" de base, así que aquí
   basta con cambiar el border-color.
   Guardado tras 768px (igual que las tarjetas móviles) y con !important:
   en escritorio estos enlaces siguen su propio color de texto plano
   (herencia, o el morado corporativo vía estilo en línea en Tienda) — no
   se toca, solo cambia el aspecto de botón en móvil.
   !important también en background/border-color, no solo en color
   (bug real, visto el 14/08/2026): la regla de FORMA de cada tabla
   (ej. ".tabla-mis-publicaciones-moderna.scout-tabla td.celda-acciones-pub a"
   en Kraal) tiene 2 clases + 2 etiquetas de especificidad, más que esta
   regla de 1 sola clase — sin !important, su "border: 1px solid
   transparent" de base ganaba la cascada y dejaba el borde invisible
   pese a que esta regla intentaba ponerle color. */
@media (max-width: 768px) {
    /* Editar = ámbar (20/08/2026, rediseño completo) — antes azul. */
    .btn-editar-generico {
        background: #fff !important;
        border-color: var(--color-accion-ambar) !important;
        color: var(--color-accion-ambar) !important;
    }
    /* Ver = azul (20/08/2026, rediseño completo) — antes gris neutro. */
    .btn-ver-generico {
        background: #fff !important;
        border-color: var(--color-accion-azul) !important;
        color: var(--color-accion-azul) !important;
    }
    .btn-borrar-generico {
        background: #fff !important;
        border-color: var(--color-accion-rojo) !important;
        color: var(--color-accion-rojo) !important;
    }
    /* Verde (20/08/2026, rediseño completo) — clase nueva para "Restaurar"
       (papelera propia del Scouter): antes reutilizaba ".btn-editar-generico"
       solo por comodidad de estilo, pero "Restaurar" es deshacer un
       borrado, no editar — le corresponde el mismo verde que Crear/Guardar. */
    .btn-restaurar-generico {
        background: #fff !important;
        border-color: var(--color-accion-verde) !important;
        color: var(--color-accion-verde) !important;
    }
}