/* =====================================================================
   SERNA #1 — Sistema global de botones
   ---------------------------------------------------------------------
   Override de Bootstrap 5.3 vía variables CSS (--bs-btn-*). Se carga
   justo después de bootstrap.min.css en layouts/admin y layouts/website,
   ANTES de cualquier hoja de página, para que las clases propias
   (.btn-search-custom, .btn-peek-carousel, etc.) sigan pudiendo ajustar
   tamaño y forma.

   Estilo: limpio tipo shadcn/Radix — bordes sutiles, radio suave,
   peso 500, anillo de foco visible y estados disabled claros.

   Jerarquía:
     .btn-primary          → sólido azul Pantone 2728C. Es la acción
                             principal de cada vista (Guardar, Pagar,
                             Agregar al carrito). Se deja sólido para que
                             haya un foco visual claro y buen contraste.
     .btn-outline-*        → outline: fondo transparente, borde suave del
                             color, texto del color. Estilo base.
     .btn-secondary/success/danger/warning/info/light/dark
                           → también outline, con un tinte de fondo muy
                             leve para distinguirlos de .btn-outline-*.
     .btn-link             → texto, sin borde.

   Para que .btn-primary también sea outline, basta con borrar el bloque
   ".btn-primary" de abajo y dejar que use el de ".btn-outline-primary".
   ===================================================================== */

:root {
    --sr-brand:          #0047BB;   /* Pantone 2728C */
    --sr-brand-hover:    #003C9E;
    --sr-brand-active:   #003284;
    --sr-brand-rgb:      0, 71, 187;
    --sr-ring-offset:    #FFFFFF;
    --sr-btn-shadow:     0 1px 2px rgba(16, 24, 40, 0.05);
    --sr-btn-font:       "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Open Sans", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────── */
.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-family: var(--sr-btn-font);
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.25rem;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-box-shadow: var(--sr-btn-shadow);
    --bs-btn-disabled-opacity: 0.5;
    --bs-btn-focus-box-shadow: 0 0 0 2px var(--sr-ring-offset), 0 0 0 4px rgba(var(--bs-btn-focus-shadow-rgb), 0.45);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    letter-spacing: 0;
    box-shadow: var(--bs-btn-box-shadow);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn {
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    cursor: not-allowed;
    pointer-events: auto;
    box-shadow: none;
}

/* Bootstrap usa pointer-events:none en .disabled (los <a>): lo respetamos */
a.btn.disabled { pointer-events: none; }

/* Iconos dentro del botón: tamaño y alineación consistentes */
.btn > i,
.btn > .bi,
.btn > .fa,
.btn > .fas,
.btn > .far,
.btn > svg {
    line-height: 1;
    flex-shrink: 0;
}

/* Tamaños */
.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.3125rem;
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-line-height: 1.125rem;
    --bs-btn-border-radius: 0.4375rem;
    gap: 0.3rem;
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-padding-x: 1.375rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-line-height: 1.5rem;
    --bs-btn-border-radius: 0.625rem;
}

/* Grupos: sin sombra duplicada entre botones pegados */
.btn-group > .btn,
.btn-group-vertical > .btn { box-shadow: none; }

/* ── Primario (sólido) ────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--sr-brand);
    --bs-btn-border-color: var(--sr-brand);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--sr-brand-hover);
    --bs-btn-hover-border-color: var(--sr-brand-hover);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--sr-brand-active);
    --bs-btn-active-border-color: var(--sr-brand-active);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--sr-brand);
    --bs-btn-disabled-border-color: var(--sr-brand);
    --bs-btn-focus-shadow-rgb: var(--sr-brand-rgb);
    --bs-btn-box-shadow: 0 1px 2px rgba(0, 71, 187, 0.18);
}

/* ── Outline (estilo base) ────────────────────────────────────────── */
.btn-outline-primary {
    --bs-btn-color: var(--sr-brand);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #99B5E4;
    --bs-btn-hover-color: var(--sr-brand-hover);
    --bs-btn-hover-bg: #F0F4FB;
    --bs-btn-hover-border-color: var(--sr-brand);
    --bs-btn-active-color: var(--sr-brand-active);
    --bs-btn-active-bg: #E0E9F6;
    --bs-btn-active-border-color: var(--sr-brand);
    --bs-btn-disabled-color: var(--sr-brand);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #99B5E4;
    --bs-btn-focus-shadow-rgb: var(--sr-brand-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: #344054;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #D0D5DD;
    --bs-btn-hover-color: #101828;
    --bs-btn-hover-bg: #F2F4F7;
    --bs-btn-hover-border-color: #98A2B3;
    --bs-btn-active-color: #101828;
    --bs-btn-active-bg: #EAECF0;
    --bs-btn-active-border-color: #98A2B3;
    --bs-btn-disabled-color: #344054;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #D0D5DD;
    --bs-btn-focus-shadow-rgb: 102, 112, 133;
}

.btn-outline-success {
    --bs-btn-color: #15803D;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #A1CCB1;
    --bs-btn-hover-color: #166534;
    --bs-btn-hover-bg: #F1F7F3;
    --bs-btn-hover-border-color: #15803D;
    --bs-btn-active-color: #166534;
    --bs-btn-active-bg: #E3F0E8;
    --bs-btn-active-border-color: #15803D;
    --bs-btn-disabled-color: #15803D;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #A1CCB1;
    --bs-btn-focus-shadow-rgb: 21, 128, 61;
}

.btn-outline-danger {
    --bs-btn-color: #DC2626;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #F1A8A8;
    --bs-btn-hover-color: #B91C1C;
    --bs-btn-hover-bg: #FDF2F2;
    --bs-btn-hover-border-color: #DC2626;
    --bs-btn-active-color: #991B1B;
    --bs-btn-active-bg: #FBE5E5;
    --bs-btn-active-border-color: #DC2626;
    --bs-btn-disabled-color: #DC2626;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #F1A8A8;
    --bs-btn-focus-shadow-rgb: 220, 38, 38;
}

.btn-outline-warning {
    --bs-btn-color: #B45309;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #E1BA9D;
    --bs-btn-hover-color: #92400E;
    --bs-btn-hover-bg: #FBF5F0;
    --bs-btn-hover-border-color: #B45309;
    --bs-btn-active-color: #92400E;
    --bs-btn-active-bg: #F6EAE1;
    --bs-btn-active-border-color: #B45309;
    --bs-btn-disabled-color: #B45309;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #E1BA9D;
    --bs-btn-focus-shadow-rgb: 180, 83, 9;
}

.btn-outline-info {
    --bs-btn-color: #0E7490;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #9FC7D3;
    --bs-btn-hover-color: #155E75;
    --bs-btn-hover-bg: #F1F7F8;
    --bs-btn-hover-border-color: #0E7490;
    --bs-btn-active-color: #155E75;
    --bs-btn-active-bg: #E2EEF2;
    --bs-btn-active-border-color: #0E7490;
    --bs-btn-disabled-color: #0E7490;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #9FC7D3;
    --bs-btn-focus-shadow-rgb: 14, 116, 144;
}

.btn-outline-dark {
    --bs-btn-color: #101828;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #98A2B3;
    --bs-btn-hover-color: #101828;
    --bs-btn-hover-bg: #F2F4F7;
    --bs-btn-hover-border-color: #344054;
    --bs-btn-active-color: #101828;
    --bs-btn-active-bg: #EAECF0;
    --bs-btn-active-border-color: #344054;
    --bs-btn-disabled-color: #101828;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #98A2B3;
    --bs-btn-focus-shadow-rgb: 52, 64, 84;
}

/* Para fondos oscuros (hero, header azul) */
.btn-outline-light {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 255, 255, 0.45);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.2);
    --bs-btn-active-border-color: #FFFFFF;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.45);
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
    --bs-btn-box-shadow: none;
}

/* ── Variantes "sólidas" de Bootstrap → outline con tinte leve ────── */
.btn-secondary {
    --bs-btn-color: #344054;
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #D0D5DD;
    --bs-btn-hover-color: #101828;
    --bs-btn-hover-bg: #F2F4F7;
    --bs-btn-hover-border-color: #98A2B3;
    --bs-btn-active-color: #101828;
    --bs-btn-active-bg: #EAECF0;
    --bs-btn-active-border-color: #98A2B3;
    --bs-btn-disabled-color: #344054;
    --bs-btn-disabled-bg: #FFFFFF;
    --bs-btn-disabled-border-color: #D0D5DD;
    --bs-btn-focus-shadow-rgb: 102, 112, 133;
}

.btn-light {
    --bs-btn-color: #344054;
    --bs-btn-bg: #F9FAFB;
    --bs-btn-border-color: #E4E7EC;
    --bs-btn-hover-color: #101828;
    --bs-btn-hover-bg: #F2F4F7;
    --bs-btn-hover-border-color: #D0D5DD;
    --bs-btn-active-color: #101828;
    --bs-btn-active-bg: #EAECF0;
    --bs-btn-active-border-color: #D0D5DD;
    --bs-btn-disabled-color: #344054;
    --bs-btn-disabled-bg: #F9FAFB;
    --bs-btn-disabled-border-color: #E4E7EC;
    --bs-btn-focus-shadow-rgb: 102, 112, 133;
}

.btn-dark {
    --bs-btn-color: #101828;
    --bs-btn-bg: #F9FAFB;
    --bs-btn-border-color: #98A2B3;
    --bs-btn-hover-color: #101828;
    --bs-btn-hover-bg: #F2F4F7;
    --bs-btn-hover-border-color: #344054;
    --bs-btn-active-color: #101828;
    --bs-btn-active-bg: #EAECF0;
    --bs-btn-active-border-color: #344054;
    --bs-btn-disabled-color: #101828;
    --bs-btn-disabled-bg: #F9FAFB;
    --bs-btn-disabled-border-color: #98A2B3;
    --bs-btn-focus-shadow-rgb: 52, 64, 84;
}

.btn-success {
    --bs-btn-color: #15803D;
    --bs-btn-bg: #F1F7F3;
    --bs-btn-border-color: #A1CCB1;
    --bs-btn-hover-color: #166534;
    --bs-btn-hover-bg: #E3F0E8;
    --bs-btn-hover-border-color: #15803D;
    --bs-btn-active-color: #166534;
    --bs-btn-active-bg: #D5E9DC;
    --bs-btn-active-border-color: #15803D;
    --bs-btn-disabled-color: #15803D;
    --bs-btn-disabled-bg: #F1F7F3;
    --bs-btn-disabled-border-color: #A1CCB1;
    --bs-btn-focus-shadow-rgb: 21, 128, 61;
}

.btn-danger {
    --bs-btn-color: #DC2626;
    --bs-btn-bg: #FDF2F2;
    --bs-btn-border-color: #F1A8A8;
    --bs-btn-hover-color: #B91C1C;
    --bs-btn-hover-bg: #FBE5E5;
    --bs-btn-hover-border-color: #DC2626;
    --bs-btn-active-color: #991B1B;
    --bs-btn-active-bg: #F8D7D7;
    --bs-btn-active-border-color: #DC2626;
    --bs-btn-disabled-color: #DC2626;
    --bs-btn-disabled-bg: #FDF2F2;
    --bs-btn-disabled-border-color: #F1A8A8;
    --bs-btn-focus-shadow-rgb: 220, 38, 38;
}

.btn-warning {
    --bs-btn-color: #B45309;
    --bs-btn-bg: #FBF5F0;
    --bs-btn-border-color: #E1BA9D;
    --bs-btn-hover-color: #92400E;
    --bs-btn-hover-bg: #F6EAE1;
    --bs-btn-hover-border-color: #B45309;
    --bs-btn-active-color: #92400E;
    --bs-btn-active-bg: #F1DFD2;
    --bs-btn-active-border-color: #B45309;
    --bs-btn-disabled-color: #B45309;
    --bs-btn-disabled-bg: #FBF5F0;
    --bs-btn-disabled-border-color: #E1BA9D;
    --bs-btn-focus-shadow-rgb: 180, 83, 9;
}

.btn-info {
    --bs-btn-color: #0E7490;
    --bs-btn-bg: #F1F7F8;
    --bs-btn-border-color: #9FC7D3;
    --bs-btn-hover-color: #155E75;
    --bs-btn-hover-bg: #E2EEF2;
    --bs-btn-hover-border-color: #0E7490;
    --bs-btn-active-color: #155E75;
    --bs-btn-active-bg: #D3E5EB;
    --bs-btn-active-border-color: #0E7490;
    --bs-btn-disabled-color: #0E7490;
    --bs-btn-disabled-bg: #F1F7F8;
    --bs-btn-disabled-border-color: #9FC7D3;
    --bs-btn-focus-shadow-rgb: 14, 116, 144;
}

/* ── Link ─────────────────────────────────────────────────────────── */
.btn-link {
    --bs-btn-color: var(--sr-brand);
    --bs-btn-hover-color: var(--sr-brand-hover);
    --bs-btn-active-color: var(--sr-brand-active);
    --bs-btn-disabled-color: #98A2B3;
    --bs-btn-focus-shadow-rgb: var(--sr-brand-rgb);
    --bs-btn-box-shadow: none;
    text-decoration: none;
    text-underline-offset: 3px;
}

.btn-link:hover { text-decoration: underline; }

/* ── Acciones dentro de tablas ────────────────────────────────────── */
/* Botones de fila (ver / editar / eliminar): cuadrados de 32px, "soft":
   fondo tintado del color de la acción, icono a color y sin borde en
   reposo; al pasar el cursor el tinte se intensifica y aparece el borde. */
.table td .btn-sm[class*="btn-outline-"],
.table td .btn-sm.btn-light {
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0;
    --bs-btn-border-radius: 0.375rem;
    --bs-btn-box-shadow: none;
    min-width: 2rem;
    height: 2rem;
}

.table td .btn-sm[class*="btn-outline-"] > svg,
.table td .btn-sm.btn-light > svg { width: 16px; height: 16px; stroke-width: 2.1; }

.table td .btn-sm.btn-outline-primary   { --bs-btn-bg: #EEF3FC; --bs-btn-color: #0047BB; --bs-btn-border-color: #EEF3FC; --bs-btn-hover-bg: #DCE6F8; --bs-btn-hover-color: #003C9E; --bs-btn-hover-border-color: #99B5E4; --bs-btn-active-bg: #C9D9F3; --bs-btn-active-color: #003284; --bs-btn-active-border-color: #0047BB; }
.table td .btn-sm.btn-outline-secondary,
.table td .btn-sm.btn-outline-dark,
.table td .btn-sm.btn-light             { --bs-btn-bg: #F2F4F7; --bs-btn-color: #344054; --bs-btn-border-color: #F2F4F7; --bs-btn-hover-bg: #E4E7EC; --bs-btn-hover-color: #101828; --bs-btn-hover-border-color: #D0D5DD; --bs-btn-active-bg: #D0D5DD; --bs-btn-active-color: #101828; --bs-btn-active-border-color: #98A2B3; }
.table td .btn-sm.btn-outline-success   { --bs-btn-bg: #ECF6EF; --bs-btn-color: #15803D; --bs-btn-border-color: #ECF6EF; --bs-btn-hover-bg: #D7EDDF; --bs-btn-hover-color: #166534; --bs-btn-hover-border-color: #A1CCB1; --bs-btn-active-bg: #C3E3CF; --bs-btn-active-color: #166534; --bs-btn-active-border-color: #15803D; }
.table td .btn-sm.btn-outline-warning   { --bs-btn-bg: #FEF4E6; --bs-btn-color: #C2610C; --bs-btn-border-color: #FEF4E6; --bs-btn-hover-bg: #FCE6C8; --bs-btn-hover-color: #9A4A08; --bs-btn-hover-border-color: #F2C48D; --bs-btn-active-bg: #FAD7A8; --bs-btn-active-color: #9A4A08; --bs-btn-active-border-color: #C2610C; }
.table td .btn-sm.btn-outline-info      { --bs-btn-bg: #E9F5F8; --bs-btn-color: #0E7490; --bs-btn-border-color: #E9F5F8; --bs-btn-hover-bg: #D3EBF1; --bs-btn-hover-color: #155E75; --bs-btn-hover-border-color: #9FC7D3; --bs-btn-active-bg: #BEE0E9; --bs-btn-active-color: #155E75; --bs-btn-active-border-color: #0E7490; }
.table td .btn-sm.btn-outline-danger    { --bs-btn-bg: #FDEEEE; --bs-btn-color: #DC2626; --bs-btn-border-color: #FDEEEE; --bs-btn-hover-bg: #FBDADA; --bs-btn-hover-color: #B91C1C; --bs-btn-hover-border-color: #F1A8A8; --bs-btn-active-bg: #F8C6C6; --bs-btn-active-color: #991B1B; --bs-btn-active-border-color: #DC2626; }