/* =============================================
   GenesysCore — Estilos de botón configurables
   Se eligen en el panel de Apariencia y se aplican vía
   [data-boton="..."] en <html>. Usan las variables de color
   del skin activo, por lo que combinan con todos los skins.

   Estilos: solido (default, sin atributo), contorno, suave, relieve.
   Aplican al botón de acción principal (.btn-primario).
   ============================================= */

/* ── CONTORNO: borde de color, fondo transparente ── */
:root[data-boton="contorno"] .btn-primario {
    background: transparent;
    color: var(--color-primario);
    border: 1.5px solid var(--color-primario);
    box-shadow: none;
}
:root[data-boton="contorno"] .btn-primario:hover:not(:disabled) {
    background: var(--color-primario);
    color: #fff;
}

/* ── SUAVE: fondo tenue del color, texto del color ── */
:root[data-boton="suave"] .btn-primario {
    background: var(--color-primario-light);
    color: var(--color-primario);
    border: 1px solid transparent;
    box-shadow: none;
}
:root[data-boton="suave"] .btn-primario:hover:not(:disabled) {
    background: var(--color-primario);
    color: #fff;
}

/* ── RELIEVE: efecto 3D con degradado + sombra inferior ── */
:root[data-boton="relieve"] .btn-primario {
    background: linear-gradient(180deg,
        rgba(var(--color-primario-rgb), 1) 0%,
        var(--color-primario-dark) 100%);
    color: #fff;
    border: none;
    box-shadow:
        0 2px 0 rgba(0,0,0,.18),
        0 4px 10px rgba(var(--color-primario-rgb), .35),
        inset 0 1px 0 rgba(255,255,255,.35);
    transform: translateY(0);
    transition: transform 80ms ease, box-shadow 120ms ease, background 120ms ease;
}
:root[data-boton="relieve"] .btn-primario:hover:not(:disabled) {
    box-shadow:
        0 3px 0 rgba(0,0,0,.20),
        0 6px 16px rgba(var(--color-primario-rgb), .45),
        inset 0 1px 0 rgba(255,255,255,.45);
}
:root[data-boton="relieve"] .btn-primario:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 rgba(0,0,0,.18),
        0 2px 6px rgba(var(--color-primario-rgb), .30),
        inset 0 1px 2px rgba(0,0,0,.20);
}

/* =============================================
   Selector de estilo de botón en el panel de Apariencia
   ============================================= */
.botones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.boton-opcion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border-radius: var(--radio-lg);
    border: 1.5px solid var(--color-borde);
    background: var(--color-bg-card);
    cursor: pointer;
    font-family: var(--fuente);
    transition: border-color var(--transicion), background var(--transicion);
}
.boton-opcion:hover { border-color: var(--color-texto-tenue); }
.boton-opcion.activo { border-color: var(--color-primario); background: var(--color-primario-light); }
.boton-nombre { font-size: 13px; font-weight: 600; color: var(--color-texto); }

/* Muestra de cada estilo (mini-botón de preview) */
.boton-muestra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: var(--radio);
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
}
.boton-muestra-solido {
    background: var(--color-primario);
    color: #fff;
}
.boton-muestra-contorno {
    background: transparent;
    color: var(--color-primario);
    border: 1.5px solid var(--color-primario);
}
.boton-muestra-suave {
    background: var(--color-primario-light);
    color: var(--color-primario);
}
.boton-muestra-relieve {
    background: linear-gradient(180deg, rgba(var(--color-primario-rgb),1) 0%, var(--color-primario-dark) 100%);
    color: #fff;
    box-shadow: 0 2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
}