/* ─── Global ─────────────────────────────────────────────────────────── */

body {
    font-family: "Nunito", sans-serif;
    background-color: #f8f9fa;
}

.navbar-brand {
    font-weight: 700;
}

/* ─── Layout público (tarjeta de contacto) ───────────────────────────── */

body.layout-public {
    background: linear-gradient(135deg, #999 0%, #333 100%);
    min-height: 100vh;
    font-family: "Segoe UI", sans-serif;
}

.card-profile {
    border-radius: 1.5rem;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.avatar-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
}

.avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6600 0%, #aa4400 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
    margin: 0 auto;
}

.btn-contact {
    border-radius: 50px;
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    transition: transform 0.15s;
}

.btn-contact:active {
    transform: scale(0.97);
}

.social-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    text-decoration: none;
    transition: transform 0.15s;
}

.social-icon:hover {
    transform: scale(1.1);
}

.btn-creanew {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ee5500;
    --bs-btn-border-color: #aa4400;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff6600;
    --bs-btn-hover-border-color: #cc5500;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ee5500;
    --bs-btn-active-border-color: #aa4400;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ffb380;
    --bs-btn-disabled-border-color: #ffb380;
}

.btn-link01 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0088aa;
    --bs-btn-border-color: #0088aa;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #006680;
    --bs-btn-hover-border-color: #004455;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #004455;
    --bs-btn-active-border-color: #006680;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0088aa;
    --bs-btn-disabled-border-color: #0088aa;
}

.btn-outline-link01 {
    --bs-btn-color: #0088aa;
    --bs-btn-border-color: #0088aa;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0088aa;
    --bs-btn-hover-border-color: #0088aa;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0088aa;
    --bs-btn-active-border-color: #0088aa;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0088aa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0088aa;
    --bs-gradient: none;
}

/* ─── Editor de perfil ───────────────────────────────────────────────── */

.avatar-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #dee2e6;
}

.avatar-placeholder-lg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #dee2e6;
}

#cropperContainer {
    max-height: 400px;
    overflow: hidden;
}

#cropperContainer img {
    max-width: 100%;
    display: block;
}

/* ─── Colores de marca ────────────────────────────────────────────────── */

.text-orange {
    color: #ff6600 !important;
}

.bg-orange {
    background-color: #ff6600 !important;
}

/* ─── Botones de marca ───────────────────────────────────────────────── */

.btn-navy {
    --bs-btn-color: #fff;
    --bs-btn-bg: #004455;
    --bs-btn-border-color: #004455;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #003344;
    --bs-btn-hover-border-color: #002233;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #002233;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #004455;
}

.btn-outline-navy {
    --bs-btn-color: #004455;
    --bs-btn-border-color: #004455;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #004455;
    --bs-btn-hover-border-color: #004455;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #004455;
    --bs-btn-disabled-color: #004455;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #004455;
    --bs-gradient: none;
}

.btn-amber {
    --bs-btn-color: #1a0a00;
    --bs-btn-bg: #ffaa00;
    --bs-btn-border-color: #e09900;
    --bs-btn-hover-color: #1a0a00;
    --bs-btn-hover-bg: #e09900;
    --bs-btn-hover-border-color: #cc8800;
    --bs-btn-active-color: #1a0a00;
    --bs-btn-active-bg: #cc8800;
    --bs-btn-disabled-color: #1a0a00;
    --bs-btn-disabled-bg: #ffaa00;
}
/* ─── Otros colores ────────────────────────────────────────────────── */

.text-gris3 {
    color: #333 !important;
}

.bg-gris3 {
    background-color: #333 !important;
}

.text-gris6 {
    color: #666 !important;
}

.bg-gris6 {
    background-color: #666 !important;
}

.text-gris9 {
    color: #999 !important;
}

.bg-gris9 {
    background-color: #999 !important;
}