/* ==========================================================
   OBITUS DESIGN SYSTEM — FASE 1
   Última actualización: fixes post-revisión visual
   Sistema visual de producto v1.0
   Basado en: Documento Desarrollo MB, Junio 2026
   ========================================================== */


/* ----------------------------------------------------------
   01 TIPOGRAFÍA
   Playfair Display — títulos/headings
   Inter            — cuerpo y UI
   ---------------------------------------------------------- */

body,
p, span, li, td, th, label,
input, textarea, select, button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: var(--obitus-blue);
    line-height: 1.25;
}

.section-title .title,
.section-title h2,
.breadcrumb-area h2,
.breadcrumb-area .page-title h2 {
    font-family: 'Playfair Display', Georgia, serif !important;
}

.section-title .subtitle,
.section-title span.subtitle {
    color: var(--obitus-gold) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}


/* ----------------------------------------------------------
   02 TOPBAR — ocultamos para diseño limpio del PDF
   ---------------------------------------------------------- */

.topbar-area {
    display: none !important;
}


/* ----------------------------------------------------------
   03 NAVBAR
   ---------------------------------------------------------- */

.navbar-area,
.header-style-01 .navbar-area {
    background: var(--obitus-blue) !important;
    border-bottom: 1px solid rgba(200,170,80,0.15) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.18) !important;
    padding: 0 !important;
}

.navbar-area .navbar {
    padding: 14px 0 !important;
}

/* Logo */
.navbar-area .logo-wrapper a,
.navbar-area .logo img {
    max-height: 48px;
}

/* El logo quedaba pegado arriba en su caja blanca (padding simétrico
   pero sin centrado vertical real). Lo centramos con flex. */
.navbar-area.nav-style-02 .nav-container .logo-wrapper {
    display: flex !important;
    align-items: center !important;
}

/* Links de navegación */
.navbar-area .navbar-nav > li > a {
    color: rgba(255,255,255,0.82) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    transition: color 0.2s !important;
    background: none !important;
}

.navbar-area .navbar-nav > li > a:hover,
.navbar-area .navbar-nav > li.current-menu-item > a,
.navbar-area .navbar-nav > li.active > a {
    color: var(--obitus-gold) !important;
    background: none !important;
}

/* Dropdown */
.navbar-area .sub-menu,
.navbar-area ul.sub-menu {
    background: var(--obitus-blue) !important;
    border: 1px solid rgba(200,170,80,0.2) !important;
    border-radius: var(--obitus-radius-sm) !important;
    box-shadow: var(--obitus-shadow-medium) !important;
    padding: 8px 0 !important;
}

.navbar-area .sub-menu li a {
    color: rgba(255,255,255,0.78) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    transition: color 0.15s, background 0.15s !important;
}

.navbar-area .sub-menu li a:hover {
    color: var(--obitus-gold) !important;
    background: rgba(200,170,80,0.08) !important;
}

/* Toggler mobile */
.navbar-toggler {
    border-color: rgba(255,255,255,0.3) !important;
}

.navbar-toggler .navbar-toggler-icon,
.navbar-toggler span {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

@media (max-width: 991px) {
    .navbar-area .navbar-collapse,
    .navbar-area #bizcoxx_main_menu {
        background: var(--obitus-blue) !important;
        border-top: 1px solid rgba(200,170,80,0.15) !important;
        padding: 8px 0 16px !important;
    }

    .navbar-area .navbar-nav > li > a {
        padding: 10px 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }

    /* El <ul> interno traía su propio fondo rosa del theme, encima del navy del collapse */
    .navbar-area.nav-style-02 .nav-container .navbar-collapse .navbar-nav {
        background-color: transparent !important;
    }

    /* Botón hamburguesa: era blanco sobre blanco (invisible) */
    .navbar-toggler {
        background: var(--obitus-blue) !important;
        border-color: rgba(200,170,80,0.5) !important;
    }

    /* Logo: si no hay imagen configurada, evita que la caja rota se coma el header */
    .logo-wrapper {
        max-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden;
    }
    .logo-wrapper a.logo {
        display: flex !important;
        align-items: center !important;
        max-height: 44px;
    }
    .logo-wrapper img {
        max-height: 40px !important;
        max-width: 160px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }

    /* Logo + hamburguesa + ícono de cuenta comparten la primera fila;
       el menú desplegable siempre debe caer completo en su propia fila
       de abajo (flex-basis:100% fuerza el salto de línea). */
    .nav-container {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }
    .responsive-mobile-menu {
        display: flex !important;
        align-items: center !important;
        flex: 1;
        min-width: 0;
        order: 1;
    }
    .ob-account-wrap {
        align-self: center;
        margin-left: 10px !important;
        flex-shrink: 0;
        order: 2;
    }
    .navbar-area .nav-right-content { order: 2; }
    .navbar-area .navbar-collapse {
        flex-basis: 100% !important;
        width: 100% !important;
        order: 10 !important;
    }
}


/* ----------------------------------------------------------
   04 BOTÓN CTA NAVBAR (Crear Homenaje)
   ---------------------------------------------------------- */

/* El theme original recorta .nav-right-content con un clip-path en punta
   (efecto "burbuja de chat"). Lo quitamos para un botón limpio. */
.navbar-area.nav-style-02 .nav-container .nav-right-content {
    -webkit-clip-path: none !important;
    clip-path: none !important;
    background-color: transparent !important;
    margin-left: 16px !important;
}

.nav-right-content .btn,
.nav-right-content a,
.nav-right-content .boxed-btn,
.header-btn,
.nav-donate-btn {
    background: var(--obitus-gold) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--obitus-radius-sm) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 24px !important;
    transition: opacity 0.2s !important;
    white-space: nowrap;
}

.nav-right-content .btn:hover,
.nav-right-content a:hover,
.nav-right-content .boxed-btn:hover,
.header-btn:hover,
.nav-donate-btn:hover {
    opacity: 0.88 !important;
    color: #fff !important;
}

/* El <a> que envuelve a .info-bar-item heredaba background+padding propios
   de la regla ".nav-right-content a" de arriba, creando dos rectángulos
   dorados de tamaño distinto superpuestos (efecto "colita" de burbuja).
   Lo dejamos como envoltura transparente; el botón visual es .info-bar-item. */
.navbar-area.nav-style-02 .nav-container .nav-right-content a {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
}


/* ----------------------------------------------------------
   05 BOTONES GLOBALES
   ---------------------------------------------------------- */

/* Primario — fondo dorado */
.boxed-btn,
.btn-primary,
button.boxed-btn {
    background: var(--obitus-gold) !important;
    color: #fff !important;
    border: 2px solid var(--obitus-gold) !important;
    border-radius: var(--obitus-radius-sm) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: opacity 0.2s, background 0.2s, color 0.2s !important;
}

.boxed-btn:hover,
.btn-primary:hover {
    opacity: 0.88 !important;
    color: #fff !important;
    background: var(--obitus-gold) !important;
}

/* Secundario — outline dorado */
.boxed-btn.reverse-color {
    background: transparent !important;
    color: var(--obitus-gold) !important;
    border: 2px solid var(--obitus-gold) !important;
}

.boxed-btn.reverse-color:hover {
    background: var(--obitus-gold) !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* Botón de texto (terciario) */
.btn-text-link {
    background: none !important;
    border: none !important;
    color: var(--obitus-gold) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    padding: 0 !important;
    text-decoration: none !important;
    transition: opacity 0.2s !important;
}

.btn-text-link:hover {
    opacity: 0.75 !important;
}


/* ----------------------------------------------------------
   06 INPUTS / FORMULARIOS
   ---------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="search"],
select,
textarea {
    border: 1.5px solid var(--obitus-gray) !important;
    border-radius: var(--obitus-radius-sm) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #222 !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--obitus-gold) !important;
    box-shadow: 0 0 0 3px rgba(200,170,80,0.15) !important;
    outline: none !important;
}

.is-invalid,
input.error,
.field-error {
    border-color: var(--obitus-red) !important;
}

.is-valid,
input.success {
    border-color: var(--obitus-green) !important;
}

label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #444;
}


/* ----------------------------------------------------------
   07 TARJETAS (CARDS)
   ---------------------------------------------------------- */

.cause-item,
.cause-wrap,
.single-cause-item,
.card {
    border-radius: var(--obitus-radius-md) !important;
    box-shadow: var(--obitus-shadow-light) !important;
    border: none !important;
    overflow: hidden;
}

.testamento-card {
    border-radius: var(--obitus-radius-md) !important;
    box-shadow: var(--obitus-shadow-medium) !important;
    border: none !important;
}


/* ----------------------------------------------------------
   08 BREADCRUMB / CABECERA INNER PAGES
   ---------------------------------------------------------- */

.breadcrumb-area {
    background-color: var(--obitus-blue) !important;
    background-image: none !important;
}

.breadcrumb-area:before {
    background: var(--obitus-blue) !important;
}

.breadcrumb-area .page-title h2,
.breadcrumb-area h2 {
    color: #fff !important;
    font-family: 'Playfair Display', serif !important;
}

.breadcrumb-area .breadcrumb {
    background: transparent !important;
}

.breadcrumb-area .breadcrumb-item a {
    color: rgba(255,255,255,0.65) !important;
}

.breadcrumb-area .breadcrumb-item.active,
.breadcrumb-area .breadcrumb-item {
    color: rgba(255,255,255,0.65) !important;
}

@media (max-width: 480px) {
    .breadcrumb-area .page-title {
        font-size: 26px !important;
        line-height: 34px !important;
        word-break: break-word;
    }
}

.breadcrumb-area .breadcrumb-item + .breadcrumb-item::before {
    color: var(--obitus-gold) !important;
}


/* ----------------------------------------------------------
   09 FOOTER
   ---------------------------------------------------------- */

.footer-area,
.footer-bg,
footer {
    background: var(--obitus-blue) !important;
}

.footer-area h4,
.footer-area h5,
.footer-area .widget-title {
    font-family: 'Playfair Display', serif !important;
    color: #fff !important;
}

.footer-area p,
.footer-area li,
.footer-area span {
    color: rgba(255,255,255,0.65) !important;
    font-family: 'Inter', sans-serif !important;
}

.footer-area a {
    color: rgba(255,255,255,0.65) !important;
    transition: color 0.2s !important;
}

.footer-area a:hover {
    color: var(--obitus-gold) !important;
}

.footer-area .copyright-area,
.copyright-area {
    background: rgba(0,0,0,0.2) !important;
    color: rgba(255,255,255,0.5) !important;
    border-top: 1px solid rgba(200,170,80,0.15) !important;
}


/* ----------------------------------------------------------
   10 LINKS GLOBALES
   ---------------------------------------------------------- */

a {
    transition: color 0.2s, opacity 0.2s;
}

a:hover {
    color: var(--obitus-gold);
}


/* ----------------------------------------------------------
   11 ALERTAS
   ---------------------------------------------------------- */

.alert-success {
    background: rgba(123,174,127,0.12) !important;
    border-color: var(--obitus-green) !important;
    color: #2d6a31 !important;
    border-radius: var(--obitus-radius-sm) !important;
    font-family: 'Inter', sans-serif !important;
}

.alert-danger {
    background: rgba(217,108,108,0.1) !important;
    border-color: var(--obitus-red) !important;
    color: #8b1a1a !important;
    border-radius: var(--obitus-radius-sm) !important;
    font-family: 'Inter', sans-serif !important;
}

.alert-info {
    background: rgba(15,39,68,0.07) !important;
    border-color: var(--obitus-blue) !important;
    color: var(--obitus-blue) !important;
    border-radius: var(--obitus-radius-sm) !important;
    font-family: 'Inter', sans-serif !important;
}


/* ----------------------------------------------------------
   12 BADGES / ESTADOS
   ---------------------------------------------------------- */

.badge-activo,
.status-activo   { background: var(--obitus-green); color: #fff; }
.badge-pendiente { background: #f0a500; color: #fff; }
.badge-finalizado { background: var(--obitus-blue); color: #fff; }
.badge-error      { background: var(--obitus-red); color: #fff; }

[class^="badge-"],
[class^="status-"] {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}


/* ----------------------------------------------------------
   13 UTILIDADES DE ESPACIADO (Spacing Scale)
   ---------------------------------------------------------- */

.ob-mt-1 { margin-top: 8px; }
.ob-mt-2 { margin-top: 16px; }
.ob-mt-3 { margin-top: 24px; }
.ob-mt-4 { margin-top: 32px; }
.ob-mt-5 { margin-top: 42px; }
.ob-mt-6 { margin-top: 48px; }

.ob-mb-1 { margin-bottom: 8px; }
.ob-mb-2 { margin-bottom: 16px; }
.ob-mb-3 { margin-bottom: 24px; }
.ob-mb-4 { margin-bottom: 32px; }
.ob-mb-5 { margin-bottom: 42px; }
.ob-mb-6 { margin-bottom: 48px; }


/* ----------------------------------------------------------
   14 PRELOADER — adaptar al nuevo color
   ---------------------------------------------------------- */

#preloader {
    background: var(--obitus-blue) !important;
}

#preloader .loader-ripple div {
    border-color: var(--obitus-gold) !important;
}


/* ----------------------------------------------------------
   15 NAV-RIGHT-CONTENT — el contenedor del CTA tiene
   clip-path diagonal + background: var(--main-color-one).
   Quitamos el clip-path y ponemos gold.
   ---------------------------------------------------------- */

.navbar-area.nav-style-02 .nav-container .nav-right-content {
    background-color: var(--obitus-gold) !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    border-radius: var(--obitus-radius-sm) !important;
    margin-left: 16px !important;
    padding: 0 4px !important;
}

.navbar-area.nav-style-02 .nav-container .nav-right-content:hover {
    opacity: 0.88;
}

.navbar-area.nav-style-02 .nav-container .nav-right-content::after,
.navbar-area.nav-style-02 .nav-container .nav-right-content::before {
    display: none !important;
    content: none !important;
}


/* ----------------------------------------------------------
   15b BOTÓN CTA NAVBAR (.info-bar-item)
   El componente front-donate-btn usa esta clase con
   --main-color-one como fondo (actualmente rosa en DB).
   Forzamos el color Obitus gold.
   ---------------------------------------------------------- */

.nav-right-content .info-bar-item,
.info-bar-item {
    background: var(--obitus-gold) !important;
    border-radius: var(--obitus-radius-sm) !important;
    padding: 10px 22px !important;
    align-items: center !important;
}

.info-bar-item .icon {
    font-size: 22px !important;
    color: #fff !important;
    margin-right: 8px !important;
}

.info-bar-item .content .title {
    font-size: 11px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.85) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.info-bar-item .content .details {
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.nav-right-content a:hover .info-bar-item,
.nav-right-content a:hover {
    opacity: 0.88 !important;
}


/* ----------------------------------------------------------
   16 BOTÓN "Crear Obituario" EN HOME
   Clase .btn-crear-obituario definida en obituary.blade.php
   con gradient azul hardcodeado. Overrideamos a gold.
   ---------------------------------------------------------- */

.btn-crear-obituario {
    background: var(--obitus-gold) !important;
    background-image: none !important;
    border-radius: var(--obitus-radius-sm) !important;
    animation: none !important;
    box-shadow: var(--obitus-shadow-medium) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 15px 40px !important;
    letter-spacing: 0.02em !important;
    color: #fff !important;
    transition: opacity 0.2s !important;
}

.btn-crear-obituario:hover {
    opacity: 0.88 !important;
    animation: none !important;
    color: #fff !important;
}

.btn-crear-obituario .icono-obit {
    animation: none !important;
}


/* ----------------------------------------------------------
   17 NAVBAR — evitar wrapping de ítems de menú
   "Testamento Digital" en segunda fila por overflow.
   Reducimos padding de links para que quepan en una fila.
   ---------------------------------------------------------- */

@media (min-width: 992px) {
    .navbar-area .navbar-nav > li > a {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }

    .navbar-area .navbar-nav {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
}


/* ----------------------------------------------------------
   18 ÍCONO DE CUENTA (Login / Mi Cuenta) EN NAVBAR
   ---------------------------------------------------------- */

.ob-account-wrap {
    display: flex !important;
    align-items: center;
    margin: 0 0 0 14px !important;
    padding: 0 !important;
    list-style: none;
}

.ob-account-item {
    position: relative;
    display: flex !important;
    align-items: center;
    list-style: none;
}

.ob-account-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(200,170,80,0.55);
    color: var(--obitus-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}

.ob-account-btn:hover {
    background: var(--obitus-gold);
    color: #fff;
    text-decoration: none;
}

.ob-account-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 170px;
    background: var(--obitus-blue);
    border: 1px solid rgba(200,170,80,0.2);
    border-radius: var(--obitus-radius-sm);
    box-shadow: var(--obitus-shadow-medium);
    padding: 6px 0;
    z-index: 200;
}

.ob-account-menu.is-open { display: block; }

.ob-account-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    white-space: nowrap;
}

.ob-account-menu-item i { color: var(--obitus-gold); font-size: 15px; width: 16px; }

.ob-account-menu-item:hover {
    background: rgba(200,170,80,0.1);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 991px) {
    .ob-account-item { margin-left: 8px; }
}


/* ----------------------------------------------------------
   19 PANEL DE USUARIO (sidebar + tarjetas + botones)
   Aplica a TODAS las páginas de /user-home/* por igual,
   ya que comparten estas mismas clases del theme base.
   ---------------------------------------------------------- */

/* Contenedor ancho (antes solo aplicaba a un par de páginas sueltas) */
.ob-container-wide { max-width: 100% !important; padding-left: 30px; padding-right: 30px; }
@media (max-width: 767px) { .ob-container-wide { padding-left: 15px; padding-right: 15px; } }

/* El theme base ya trae 80px de padding vertical pensado para cuando
   había breadcrumb encima; ahora que lo quitamos, ese padding se suma
   al de .ob-panel-wrap y deja un espacio enorme arriba. Lo anulamos
   aquí y dejamos que .ob-panel-wrap sea la única fuente del offset. */
.ob-panel-wrap .user-dashboard-wrapper {
    padding-top: 0 !important;
    padding-bottom: 40px !important;
}

/* Sidebar */
.user-dashboard-wrapper > ul {
    background: var(--obitus-blue) !important;
}

.user-dashboard-wrapper ul.nav-pills .nav-link {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    transition: background 0.2s, color 0.2s !important;
}

.user-dashboard-wrapper ul.nav-pills .nav-link:hover {
    background: rgba(200,170,80,0.15) !important;
    color: #fff !important;
}

.user-dashboard-wrapper ul.nav-pills .nav-link.active {
    background: var(--obitus-gold) !important;
    color: #fff !important;
}

.user-dashboard-wrapper ul.nav-pills .nav-item + .nav-item {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* Tarjetas KPI (Panel de Usuario, Dashboard Familiar legado, etc.) */
.user-dashboard-card {
    background: #fff !important;
    color: var(--obitus-blue) !important;
    border-radius: var(--obitus-radius-md) !important;
    border-top: 3px solid var(--obitus-gold) !important;
    box-shadow: var(--obitus-shadow-light) !important;
    align-items: center;
}

.user-dashboard-card.style-01 { background: #fff !important; }

.user-dashboard-card .icon { color: var(--obitus-gold) !important; }

.user-dashboard-card .title {
    color: #888 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.user-dashboard-card .number {
    color: var(--obitus-blue) !important;
    font-family: 'Playfair Display', serif !important;
}

/* Botones de acción del panel (Publicar Campaña, etc.) */
.submit-btn {
    background: var(--obitus-gold) !important;
    color: #fff !important;
    border-radius: var(--obitus-radius-sm) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}

.submit-btn:hover { opacity: 0.88 !important; }

/* Tablas dentro del panel */
.user-dashboard-wrapper .table thead th {
    font-family: 'Inter', sans-serif !important;
    color: var(--obitus-blue) !important;
    border-bottom: 2px solid var(--obitus-gold) !important;
}

.user-dashboard-wrapper .table td,
.user-dashboard-wrapper .table th {
    font-family: 'Inter', sans-serif !important;
    vertical-align: middle !important;
}


/* ----------------------------------------------------------
   20 PANEL DE USUARIO — SIN BREADCRUMB, PERFIL EN SIDEBAR
   Quitamos el hero genérico de todas las páginas /user-home/*
   y lo reemplazamos por una tarjeta de perfil en el sidebar
   + un encabezado propio dentro del contenido.
   ---------------------------------------------------------- */

.ob-panel-wrap { padding-top: 90px; }
@media (max-width: 767px) { .ob-panel-wrap { padding-top: 70px; } }

.user-dashboard-wrapper > ul {
    border-radius: var(--obitus-radius-md) 0 0 var(--obitus-radius-md);
    overflow: hidden;
}

.ob-panel-profile {
    position: relative;
    padding: 34px 18px 24px;
    text-align: center;
    overflow: hidden;
}

.ob-panel-profile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 25%;
}

.ob-panel-profile-bg:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,39,68,0.5) 0%, rgba(15,39,68,0.94) 100%);
}

.ob-panel-profile-inner { position: relative; z-index: 1; }

.ob-panel-avatar,
.ob-panel-avatar-ico {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 2px solid var(--obitus-gold);
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 24px;
}

.ob-panel-profile-name {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.ob-panel-profile-sub {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    color: var(--obitus-gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 3px;
}

.ob-panel-welcome { margin-bottom: 26px; }

.ob-panel-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--obitus-gold);
    margin-bottom: 6px;
}

.ob-panel-title {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--obitus-blue);
}

.ob-panel-home-wrap {
    background: #D4D9E0;
    border-radius: var(--obitus-radius-md);
    padding: 28px 28px 34px;
}
@media (max-width: 576px) { .ob-panel-home-wrap { padding: 20px 16px 26px; } }

.user-dashboard-wrapper .tab-content h2.title,
.user-dashboard-wrapper .tab-content h4.title {
    font-family: 'Playfair Display', serif !important;
    color: var(--obitus-blue) !important;
}

/* Botones sueltos que quedaban fuera de la paleta (Bootstrap por defecto) */
.user-dashboard-wrapper .btn-info {
    background: var(--obitus-gold) !important;
    border-color: var(--obitus-gold) !important;
    color: #fff !important;
}

.user-dashboard-wrapper .btn-danger,
.user-dashboard-wrapper .swal_delete_button {
    background: var(--obitus-red) !important;
    border-color: var(--obitus-red) !important;
}

/* ----------------------------------------------------------
   21 PANEL DE USUARIO — BOTÓN PARA ABRIR EL SIDEBAR EN MÓVIL
   El logo del navbar principal se pinta encima y lo tapaba,
   dejando el menú del panel inaccesible en celular.
   ---------------------------------------------------------- */

.user-dashboard-wrapper > ul .mobile_nav {
    display: none !important;
}

#ob-panel-toggle {
    display: none;
}

@media (max-width: 991px) {
    #ob-panel-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 96px;
        left: 14px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--obitus-gold);
        color: #fff;
        border: none;
        font-size: 19px;
        box-shadow: var(--obitus-shadow-medium);
        z-index: 998;
    }
}


/* ----------------------------------------------------------
   22 AVISO DE COOKIES (plugin jquery.ihavecookies)
   Traía el rosa/negro genérico del theme por defecto.
   ---------------------------------------------------------- */

#gdpr-cookie-message {
    background-color: var(--obitus-blue) !important;
    border: 1px solid rgba(200,170,80,0.25) !important;
}

#gdpr-cookie-message a:hover {
    border-bottom-color: var(--obitus-gold) !important;
}

#gdpr-cookie-message button,
button#ihavecookiesBtn,
button#gdpr-cookie-advanced {
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.5) !important;
}

#gdpr-cookie-message button:hover {
    border-color: var(--obitus-gold) !important;
    color: var(--obitus-gold) !important;
}

/* "Aceptar Cookies" es el primer botón — lo dejamos como acción principal */
#gdpr-cookie-message button:first-child {
    background-color: var(--obitus-gold) !important;
    color: #fff !important;
    border: none !important;
}

#gdpr-cookie-message button:first-child:hover {
    opacity: 0.88;
    color: #fff !important;
}
}