/* ============================================================ */
/*  buttons.css                                                 */
/*  Sistema de botones — estructura, colores y efectos         */
/*                                                              */
/*  ÍNDICE                                                      */
/*  A. FORMA / LAYOUT                                          */
/*     A1. Píldora                                             */
/*     A2. Normal                                              */
/*     A3. Círculo                                             */
/*  B. COLORES BASE (2 versiones por variante)                 */
/*     B1. Estándar (primary)                                  */
/*     B2. Secondary (gris)                                    */
/*     B3. Success  — white  | filled                         */
/*     B4. Danger   — white  | filled                         */
/*     B5. Circle   — active | inactive                        */
/*  C. EFECTOS DE HOVER                                        */
/*     C1. Efecto fade (default)                               */
/*     C2. Efecto wipe (cortina desde abajo)                   */
/*     C3. Efecto pulse                                        */
/* ============================================================ */


/* ============================================================ */
/*  A. FORMA / LAYOUT                                          */
/* ============================================================ */

/* ── A1. Píldora ── */
.btn-pill {
    border-radius: 20px !important;
    justify-content: center !important;
    padding: 4px 1px !important;
    font-size: 12px !important;
    transition: all 0.2s ease-in-out;
}

/* ── A2. Normal ── */
.btn-normal {
    width: auto !important;
    height: auto !important;
    text-decoration: none;
}

a.btn-normal {
    width: auto !important;
    height: auto !important;
    padding: 8px 15px;
    text-align: center;
    border-radius: 1px;
    text-decoration: none;
}

/* ── A3. Círculo ── */
.btn-circle-icon {
    border-radius: 100% !important;
    font-size: 11px !important;
}

/* Focus/active reset compartido para círculos */
.btn-circle-active.ui-state-focus,
.btn-circle-active.ui-state-active,
.btn-circle-inactive.ui-state-focus,
.btn-circle-inactive.ui-state-active {
    outline: none !important;
    outline-offset: none !important;
}

/* ============================================================ */
/*  A2. TAMAÑO DEL BOTON 										*/
/* ============================================================ */
.btn-big {
	padding: 6px 15px !important;
	border: 1px solid #2c3e50 !important;
}

.btn-big span {
	margin-left: 10px !important;; 
}

/* ============================================================ */
/*  B. COLORES BASE                                            */
/* ============================================================ */

/* ── B1. Estándar (primary) ── */
.btn-estandar {
    background-color: var(--btn-estandar-bg) !important;
    border-color:     var(--btn-estandar-border) !important;
    color:            var(--btn-estandar-color) !important;
}
.btn-estandar:hover {
    background-color: var(--btn-estandar-bg-hover) !important;
    border-color:     var(--btn-estandar-border-hover) !important;
    color:            var(--btn-estandar-color) !important;
}

/* ── B2. Secondary (gris) ── */
.btn-secondary {
    background-color: var(--btn-secondary-bg) !important;
    border:           1px solid var(--btn-secondary-border) !important;
}
.btn-secondary:hover {
    background-color: var(--btn-secondary-bg-hover) !important;
    border:           1px solid var(--btn-secondary-border-hover) !important;
}

/* ── B3. Success ── */

/* Versión WHITE — outline verde, rellena al hover */
.btn-success-white {
    background-color: white !important;
    color:            var(--btn-success-white-color) !important;
    border:           1px solid var(--btn-success-white-border) !important;
}
.btn-success-white:hover {
    background-color: var(--btn-success-white-bg-hover) !important;
    border-color:     var(--btn-success-white-bg-hover) !important;
    color:            white !important;
}

/* Versión FILLED — sólido verde */
.btn-success-filled {
    background-color: var(--btn-success-filled-bg) !important;
    border:           1px solid var(--btn-success-filled-border) !important;
    color:            white !important;
}
.btn-success-filled:hover {
    background-color: var(--btn-success-filled-bg-hover) !important;
    border-color:     var(--btn-success-filled-bg-hover) !important;
    color:            white !important;
}

/* Focus/active reset success */
.btn-success-white.ui-state-focus,  .btn-success-white.ui-state-active,
.btn-success-filled.ui-state-focus, .btn-success-filled.ui-state-active {
    outline: none !important;
    outline-offset: none !important;
}

/* ── B4. Danger ── */

/* Versión WHITE — outline rojo, rellena al hover */
.btn-danger-white {
    background-color: white !important;
    color:            var(--btn-danger-white-color) !important;
    border:           1px solid var(--btn-danger-white-border) !important;
}
.btn-danger-white:hover {
    background-color: var(--btn-danger-white-bg-hover) !important;
    border-color:     var(--btn-danger-white-bg-hover) !important;
    color:            white !important;
}

/* Versión FILLED — sólido rojo */
.btn-danger-filled {
    background-color: var(--color-danger) !important;
    border:           1px solid var(--color-danger) !important;
    color:            white !important;
}
.btn-danger-filled:hover {
    background-color: var(--btn-danger-filled-bg-hover) !important;
    border-color:     var(--btn-danger-filled-bg-hover) !important;
    color:            white !important;
}

/* Focus/active reset danger */
.btn-danger-white.ui-state-focus,  .btn-danger-white.ui-state-active,
.btn-danger-filled.ui-state-focus, .btn-danger-filled.ui-state-active {
    outline: none !important;
    outline-offset: none !important;
}

/* ── B5. Circle ── */

/* Versión ACTIVE — sólido azul marino */
.btn-circle-active {
    background-color: var(--btn-circle-bg) !important;
    color:            white !important;
    border:           1px solid var(--btn-circle-border) !important;
}
.btn-circle-active:hover {
    background-color: var(--btn-circle-bg-hover) !important;
    border-color:     var(--btn-circle-bg-hover) !important;
    color:            white !important;
}

/* Versión INACTIVE — outline azul marino, rellena al hover */
.btn-circle-inactive {
    background-color: white !important;
    color:            var(--btn-circle-bg) !important;
    border:           1px solid var(--btn-circle-border) !important;
}
.btn-circle-inactive:hover {
    background-color: var(--btn-circle-bg) !important;
    border-color:     var(--btn-circle-bg) !important;
    color:            white !important;
}


/* ============================================================ */
/*  C. EFECTOS DE HOVER                                        */
/*                                                              */
/*  Clases de efecto independientes, combinables con           */
/*  cualquier variante de color. Ejemplo de uso:               */
/*                                                              */
/*    <p:commandButton styleClass="btn-normal               */
/*                                 btn-danger-white         */
/*                                 btn-effect-wipe" />      */
/*                                                              */
/* ============================================================ */

/* ── C1. Fade (default) — sin clase extra, es el comportamiento natural ── */
/*  El hover directo en cada variante ya aplica fade via transition.        */
/*  Puedes forzarlo explícitamente con esta clase si necesitas el timing:  */
.btn-effect-fade {
    transition: background-color var(--transition-fast),
                border-color     var(--transition-fast),
                color            var(--transition-fast) !important;
}

/* ── C2. Wipe — cortina que sube desde abajo ── */
.btn-effect-wipe {
    position: relative;
    overflow: hidden;
    transition: color            var(--transition-fast),
                border-color     var(--transition-fast) !important;
}

.btn-effect-wipe::before {
    content: "";
    position: absolute;
    inset: 0;
    /* El color del relleno lo hereda del --bg-hover del token de la variante.   */
    /* Se puede sobreescribir inline si se necesita un color puntual.            */
    background-color: currentColor;
    opacity: 0.15;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

/* Para que el wipe use el color sólido de hover de cada variante,
   declaramos el color de la cortina por familia: */
.btn-danger-white.btn-effect-wipe::before,
.btn-danger-filled.btn-effect-wipe::before  { background-color: var(--util-red);            opacity: 1; }
.btn-success-white.btn-effect-wipe::before,
.btn-success-filled.btn-effect-wipe::before { background-color: var(--btn-success-filled-bg); opacity: 1; }
.btn-estandar.btn-effect-wipe::before       { background-color: var(--btn-estandar-bg-hover); opacity: 1; }
.btn-secondary.btn-effect-wipe::before      { background-color: var(--util-gray-hover);       opacity: 1; }
.btn-circle-active.btn-effect-wipe::before,
.btn-circle-inactive.btn-effect-wipe::before{ background-color: var(--btn-circle-bg-hover);   opacity: 1; }

.btn-effect-wipe:hover::before {
    transform: scaleY(1);
}

.btn-effect-wipe > * {
    position: relative;
    z-index: 1;
}

/* ── C3. Pulse — escala suave al hacer hover ── */
.btn-effect-pulse {
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast) !important;
}
.btn-effect-pulse:hover {
    transform:  scale(1.04);
    box-shadow: var(--shadow-btn-hover);
}
.btn-effect-pulse:active {
    transform: scale(0.97);
}