/* Capa: layout (marco de las páginas de gestión). Lo usan Consejo, Secretaría,
   Tienda, Tesorería, Transporte...
   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 "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: var(--wp--preset--color--base);
    border: 1px solid #D1D5DB;
    border-radius: var(--wp--custom--radio--tarjeta);
    padding: 16px;
    margin-bottom: var(--wp--preset--spacing--lg);
    box-sizing: border-box;
}
.panel-admin-chrome .panel-tabs-nav { margin-bottom: 0; }
.panel-admin-chrome .panel-subtabs-nav { margin-top: var(--wp--preset--spacing--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: var(--color-titulo) !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(--wp--preset--spacing--lg); }

/* 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 {
        padding: 14px 8px;
    }
}