/* ============================================================
   BOTONES FÍSICOS — Mapa Laboral México
   Estilo "Física": imita un botón de resina/plástico duro.
   - Múltiples gradientes (brillo de resina + cuerpo azul)
   - Sombra gruesa inferior = "grosor" del botón (base)
   - Al hacer clic: el eje Y baja (transform: translateY) y la
     sombra inferior desaparece simulando contacto con la base.
   Color único: Azul Laboral #3b5998
   ============================================================ */

.btn, .btn-primary, .btn-solid, .btn-danger, .btn-accent,
.btn-ver, .btn-nav-registro, .btn-submit, .btn-principal,
.btn-registro, .btn-mapa, .btn-buscar, .btn-mp,
.btn-ws, .btn-ws-share, .btn-fb-share, .btn-in-share,
.btn-copy, .btn-share, .btn-enviar-cv, .btn-crear-cv,
.btn-descargar, .btn-regresar-mapa, .btn-back, .btn-test,
.btn-psico, .btn-logout, .btn-cancel, .btn-outline,
.action-btn, .btn-view, .btn-edit, .btn-premium, .btn-close,
.btn-reactivate, .btn-delete, .popup-link,
.search-container button,
button[class*="btn"], a[class*="btn"] {
    cursor: pointer;
    text-decoration: none !important;
    border: none !important;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;

    background:
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.18) 100%),
        linear-gradient(180deg, #6f90c9 0%, #3b5998 50%, #2c4370 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
    border-radius: 14px !important;
    box-shadow:
        0 6px 0 #22335a,
        0 10px 18px rgba(0,0,0,0.32),
        inset 0 1px 2px rgba(255,255,255,0.45),
        inset 0 -4px 8px rgba(0,0,0,0.28) !important;
    transition: transform 90ms ease, box-shadow 90ms ease, filter 160ms ease !important;
    transform: translateY(0) !important;
}

.btn:hover, .btn-primary:hover, .btn-solid:hover, .btn-danger:hover, .btn-accent:hover,
.btn-ver:hover, .btn-nav-registro:hover, .btn-submit:hover, .btn-principal:hover,
.btn-registro:hover, .btn-mapa:hover, .btn-buscar:hover, .btn-mp:hover,
.btn-ws:hover, .btn-ws-share:hover, .btn-fb-share:hover, .btn-in-share:hover,
.btn-copy:hover, .btn-share:hover, .btn-enviar-cv:hover, .btn-crear-cv:hover,
.btn-descargar:hover, .btn-regresar-mapa:hover, .btn-back:hover, .btn-test:hover,
.btn-psico:hover, .btn-logout:hover, .btn-cancel:hover, .btn-outline:hover,
.action-btn:hover, .btn-view:hover, .btn-edit:hover, .btn-premium:hover,
.btn-close:hover, .btn-reactivate:hover, .btn-delete:hover, .popup-link:hover,
.search-container button:hover,
button[class*="btn"]:hover, a[class*="btn"]:hover {
    filter: brightness(1.07);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.15) 38%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.16) 100%),
        linear-gradient(180deg, #7b9ad8 0%, #3b5998 50%, #2c4370 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 7px 0 #22335a,
        0 14px 24px rgba(0,0,0,0.38),
        inset 0 1px 2px rgba(255,255,255,0.5),
        inset 0 -4px 8px rgba(0,0,0,0.25) !important;
}

.btn:active, .btn-primary:active, .btn-solid:active, .btn-danger:active, .btn-accent:active,
.btn-ver:active, .btn-nav-registro:active, .btn-submit:active, .btn-principal:active,
.btn-registro:active, .btn-mapa:active, .btn-buscar:active, .btn-mp:active,
.btn-ws:active, .btn-ws-share:active, .btn-fb-share:active, .btn-in-share:active,
.btn-copy:active, .btn-share:active, .btn-enviar-cv:active, .btn-crear-cv:active,
.btn-descargar:active, .btn-regresar-mapa:active, .btn-back:active, .btn-test:active,
.btn-psico:active, .btn-logout:active, .btn-cancel:active, .btn-outline:active,
.action-btn:active, .btn-view:active, .btn-edit:active, .btn-premium:active,
.btn-close:active, .btn-reactivate:active, .btn-delete:active, .popup-link:active,
.search-container button:active,
button[class*="btn"]:active, a[class*="btn"]:active {
    filter: brightness(0.95);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 40%, rgba(0,0,0,0.25) 100%),
        linear-gradient(180deg, #5676b3 0%, #2c4370 60%, #22335a 100%) !important;
    transform: translateY(6px) !important;
    box-shadow:
        0 0 0 #22335a,
        0 1px 3px rgba(0,0,0,0.2),
        inset 0 3px 8px rgba(0,0,0,0.35),
        inset 0 -1px 2px rgba(255,255,255,0.12) !important;
}

/* Botones deshabilitados: sin animación de "prensado" */
button:disabled, .btn:disabled, .btn-primary:disabled, .btn-submit:disabled,
.btn-principal:disabled, .btn-mp:disabled,
button[class*="btn"]:disabled, a[class*="btn"].disabled {
    opacity: 0.5 !important;
    transform: none !important;
    cursor: not-allowed !important;
    filter: grayscale(0.5) !important;
    box-shadow: 0 2px 0 #22335a, 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Foco visible para accesibilidad */
.btn:focus-visible, button[class*="btn"]:focus-visible, a[class*="btn"]:focus-visible {
    outline: 3px solid rgba(59, 89, 152, 0.45);
    outline-offset: 2px;
}

/* ============================================================
   VARIANTE WHATSAPP — Verde con texto blanco
   Misma animación "Física", color de marca WhatsApp.
   ============================================================ */
a.btn-ws, button.btn-ws, .btn-ws,
a.btn-ws-share, button.btn-ws-share, .btn-ws-share {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.18) 100%),
        linear-gradient(180deg, #4be08a 0%, #25d366 50%, #17a34a 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 6px 0 #0f7a3d,
        0 10px 18px rgba(0,0,0,0.32),
        inset 0 1px 2px rgba(255,255,255,0.45),
        inset 0 -4px 8px rgba(0,0,0,0.28) !important;
}

a.btn-ws:hover, button.btn-ws:hover, .btn-ws:hover,
a.btn-ws-share:hover, button.btn-ws-share:hover, .btn-ws-share:hover {
    filter: brightness(1.07);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.15) 38%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.16) 100%),
        linear-gradient(180deg, #5fe89b 0%, #28d86b 50%, #1bb454 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 7px 0 #0f7a3d,
        0 14px 24px rgba(0,0,0,0.38),
        inset 0 1px 2px rgba(255,255,255,0.5),
        inset 0 -4px 8px rgba(0,0,0,0.25) !important;
}

a.btn-ws:active, button.btn-ws:active, .btn-ws:active,
a.btn-ws-share:active, button.btn-ws-share:active, .btn-ws-share:active {
    filter: brightness(0.95);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 40%, rgba(0,0,0,0.25) 100%),
        linear-gradient(180deg, #21b95b 0%, #149e49 60%, #0f7a3d 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 0 #0f7a3d,
        0 1px 3px rgba(0,0,0,0.2),
        inset 0 3px 8px rgba(0,0,0,0.35),
        inset 0 -1px 2px rgba(255,255,255,0.12) !important;
}