/* ==========================================================================
   COMPONENTE: BOTONES DE ACCIÓN
   Capa: componentes (ver CLAUDE.md, "Arquitectura CSS").
   Se usa en toda la web: paneles (Kraal, Secretaría, Tesorería, Tienda,
   Roles), formularios de evento/noticia/aviso, listado de inscritos,
   calendario, tienda.

   Uso: la clase base .scout-btn-accion SIEMPRE combinada con un color:
     .scout-btn-outline        gris  — Cerrar / Descartar / Limpiar, pestaña inactiva
     .scout-btn-outline-green  verde — Crear / Guardar / Confirmar / Restaurar
     .scout-btn-outline-blue   azul  — Ver / Ordenar / Filtrar / Buscar
     .scout-btn-outline-amber  ámbar — Editar / Modificar / cambios de estado
     .scout-btn-outline-red    rojo  — Eliminar (cualquier borrado)
     .scout-btn-outline-menu   morado de marca — pestaña o menú ACTIVO ("estás aquí")
   La base nunca lleva color ni borde propios: los pone el modificador.

   Los ajustes propios de una pantalla (botones compactos en la barra de
   gestores del calendario, a todo el ancho en el formulario de evento en
   móvil...) viven en el CSS de su módulo, no aquí.

   Movido aquí el 19/10/2026 desde css/paneles-scout-tabla.css, con los
   mismos valores. Los nombres de clase se pasarán a BEM al migrar cada
   módulo (ver CLAUDE.md).
   ========================================================================== */

/* ORDEN: colores → base → escritorio. A igual especificidad gana la regla
   que va después: no reordenar sin comprobarlo con la huella. (La clase
   antigua .scout-btn se eliminó el 19/10/2026: sus 5 usos de Secretaría
   pasaron a .scout-btn-accion.) */

/* Colores (estilo "outline": fondo blanco + borde y texto del color) */
.scout-btn-outline {
    background: var(--wp--custom--accion--fondo-gris);
    color: var(--wp--custom--accion--gris);
    border: 1px solid var(--wp--custom--accion--borde-gris);
}
.scout-btn-outline-red {
    background: #fff;
    color: var(--wp--custom--accion--rojo);
    border: 1px solid var(--wp--custom--accion--rojo);
}
.scout-btn-outline-amber {
    background: #fff;
    color: var(--wp--custom--accion--ambar);
    border: 1px solid var(--wp--custom--accion--ambar);
}
.scout-btn-outline-green {
    background: #fff;
    color: var(--wp--custom--accion--verde);
    border: 1px solid var(--wp--custom--accion--verde);
}
.scout-btn-outline-blue {
    background: #fff;
    color: var(--wp--custom--accion--azul);
    border: 1px solid var(--wp--custom--accion--azul);
}
/* Pestaña/menú activo: fondo morado suave y texto morado, como el ítem
   activo del menú de cabecera. Borde transparente (no "none") para medir lo
   mismo que sus hermanos inactivos, que sí llevan borde. */
.scout-btn-outline-menu {
    background: var(--wp--preset--color--morado-fondo);
    color: var(--wp--preset--color--morado);
    border: 1px solid transparent;
}

/* Base (sin color ni borde: los pone el modificador). De móvil a
   escritorio: estos son los valores de móvil; a partir de 600px (punto de
   corte de WordPress) se ajustan más abajo. Antes el corte era 640px. */
.scout-btn-accion {
    padding: var(--wp--custom--boton--relleno-vertical-movil) var(--wp--custom--boton--relleno-horizontal-movil);
    border-radius: var(--wp--custom--radio--boton);
    cursor: pointer;
    font-size: var(--wp--custom--boton--texto-movil);
    font-weight: 600;
    /* !important PENDIENTE de quitar: gana a ".entry-content ... a"
       (css/frontend-contenido-simple-post.css, subrayado de los enlaces de
       texto), que tiene más especificidad y subrayaba los botones que son
       un <a>. Es una regla nuestra, no de WordPress: se corregirá al migrar
       esa hoja, acotando su subrayado a los enlaces de texto. */
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

/* Escritorio (600px o más): botones más bajos y de letra algo mayor. */
@media (min-width: 600px) {
    .scout-btn-accion {
        padding: var(--wp--custom--boton--relleno-vertical) var(--wp--custom--boton--relleno-horizontal);
        font-size: var(--wp--custom--boton--texto);
    }
}

/* Caja de búsqueda en la misma fila que los botones: mismo relleno lateral y mismo tamaño de letra
   que ellos, en móvil y en escritorio. Su altura la da la fila (se estira), así que no lleva altura propia. */
.input-buscar-pub {
    padding: 0 var(--wp--custom--boton--relleno-horizontal-movil);
    font-size: var(--wp--custom--boton--texto-movil);
}
@media (min-width: 600px) {
    .input-buscar-pub {
        padding: 0 var(--wp--custom--boton--relleno-horizontal);
        font-size: var(--wp--custom--boton--texto);
    }
}