/* =============================================================================
   MaeloRO 25/09/2026 — foro: capa visual "3D"
   -----------------------------------------------------------------------------
   Se carga DESPUES de assets/style.css (inc/layout.php) y solo cambia aspecto:
   relieve en botones, luz superior y sombra en la barra de navegacion y las
   tarjetas, filas con profundidad al pasar, formularios hundidos, posts con
   sombra, menus y ventanas de acceso con mas profundidad. No toca clases,
   textos ni JS. Para desactivar: quitar el <link> de forum-3d.css en inc/layout.php.
   ============================================================================= */

:root {
    --f3d-edge: rgba(255,255,255,.07);
    --f3d-edge-strong: rgba(255,255,255,.12);
    --f3d-gold-glow: rgba(201,168,76,.22);
    --f3d-card: inset 0 1px 0 var(--f3d-edge), 0 1px 2px rgba(0,0,0,.5), 0 14px 32px -14px rgba(0,0,0,.9);
    --f3d-card-hover: inset 0 1px 0 var(--f3d-edge-strong), 0 2px 4px rgba(0,0,0,.5), 0 22px 44px -14px rgba(0,0,0,.95), 0 0 0 1px rgba(201,168,76,.22);
    --f3d-btn: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.5);
    --f3d-btn-hover: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 14px -4px rgba(0,0,0,.7);
    --f3d-gold: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(90,65,20,.35), 0 8px 18px -6px rgba(0,0,0,.75), 0 0 18px var(--f3d-gold-glow);
    --f3d-gold-hover: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(90,65,20,.35), 0 14px 28px -8px rgba(0,0,0,.85), 0 0 26px rgba(201,168,76,.34);
    --f3d-inset: inset 0 2px 4px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.2);
}

/* ---------- fondo y banner ---------- */
body {
    background-image:
        radial-gradient(900px 400px at 50% 0%, rgba(155,89,182,.10), transparent 60%),
        linear-gradient(rgba(10,10,20,0.87), rgba(10,10,20,0.93)), url('/forum/maelorofondo.webp');
}
.site-banner { box-shadow: 0 16px 40px -16px rgba(0,0,0,.95) }

/* ---------- navegacion: cristal con luz arriba ---------- */
.nav {
    background: linear-gradient(180deg, #17172c, #111122);
    box-shadow: inset 0 1px 0 var(--f3d-edge-strong), 0 12px 30px -12px rgba(0,0,0,.95), 0 1px 0 rgba(201,168,76,.18);
}
.nav-logo-icon { text-shadow: 0 0 14px var(--f3d-gold-glow), 0 1px 0 rgba(0,0,0,.6) }
.nav-link { transition: background .15s, color .15s, transform .15s, box-shadow .15s }
.nav-link:hover { box-shadow: inset 0 1px 0 var(--f3d-edge), 0 4px 10px -4px rgba(0,0,0,.7); transform: translateY(-1px) }
.dropdown-menu {
    background: linear-gradient(180deg, #1a1a30, #14142a);
    box-shadow: inset 0 1px 0 var(--f3d-edge-strong), 0 0 0 1px rgba(0,0,0,.6), 0 24px 50px -16px rgba(0,0,0,.95);
}
.pm-badge, .badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.5) }

/* ---------- botones ---------- */
.btn { box-shadow: var(--f3d-btn); transition: background .15s, color .15s, transform .15s, box-shadow .15s }
.btn:hover { transform: translateY(-1px); box-shadow: var(--f3d-btn-hover) }
.btn:active { transform: translateY(0) scale(.98); box-shadow: var(--f3d-inset) }
.btn-primary { background: linear-gradient(180deg, #e8c56e 0%, #c9a84c 55%, #a8873a 100%); box-shadow: var(--f3d-gold); text-shadow: 0 1px 0 rgba(255,255,255,.25) }
.btn-primary:hover { background: linear-gradient(180deg, #f2d27f, #d4b258 55%, #b5934a); box-shadow: var(--f3d-gold-hover) }
.btn-outline { box-shadow: var(--f3d-btn), inset 0 0 0 1px rgba(201,168,76,.10) }
.btn-danger, .btn-blue, .btn-success { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.25), 0 8px 18px -6px rgba(0,0,0,.75) }
.btn-ghost { box-shadow: none }
.btn-ghost:hover { transform: none; box-shadow: inset 0 1px 0 var(--f3d-edge) }
.bb-btn, .pager-btn, .thread-new-btn { box-shadow: var(--f3d-btn); transition: transform .15s, box-shadow .15s, background .15s, color .15s }
.bb-btn:hover, .pager-btn:hover { transform: translateY(-1px); box-shadow: var(--f3d-btn-hover) }
.pager-btn.active { box-shadow: var(--f3d-gold) }

/* ---------- tarjetas, categorias y filas ---------- */
.card, .sidebar-card, .announcement, .auth-card, .member-card, .member-mini, .search-box, .search-result, .admin-stat-box, .reply-box, .usercp-nav, .admin-nav, .usercp-content, .admin-content, .pm-view, .newthread-wrap, .forum-info-header, .empty-state {
    background-image: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 50%);
    box-shadow: var(--f3d-card);
}
.card-header, .sidebar-card-title, .threads-header, .thread-list th, th, .admin-table th, .pm-view-header {
    background-image: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
    box-shadow: inset 0 1px 0 var(--f3d-edge);
}
.category-title {
    box-shadow: inset 0 1px 0 var(--f3d-edge-strong), 0 8px 20px -10px rgba(0,0,0,.9);
    text-shadow: 0 1px 0 rgba(0,0,0,.7);
}
.category-block { border-radius: var(--radius); box-shadow: 0 18px 40px -16px rgba(0,0,0,.95) }
.forum-list { box-shadow: inset 0 1px 0 var(--f3d-edge) }
.forum-row { transition: background .12s, box-shadow .12s, transform .12s }
.forum-row:hover { box-shadow: inset 3px 0 0 var(--gold), inset 0 1px 0 var(--f3d-edge); background: linear-gradient(90deg, rgba(201,168,76,.10), var(--card2) 40%) }
.forum-icon { filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)) }
.forum-stat-num, .thread-stat-num, .member-stat-num, .admin-stat-num, .stat-val { text-shadow: 0 2px 10px rgba(0,0,0,.6) }
.thread-row:hover td, .admin-table tr:hover td, .pm-row:hover, .search-result:hover, .member-mini:hover { background: linear-gradient(90deg, rgba(201,168,76,.08), var(--card2) 40%) }
.thread-row:hover td:first-child, .pm-row:hover { box-shadow: inset 3px 0 0 var(--gold) }
.member-mini:hover, .search-result:hover { transform: translateY(-2px); box-shadow: var(--f3d-card-hover) }
.announcement { box-shadow: var(--f3d-card), 0 0 30px -10px var(--f3d-gold-glow) }
.announcement-icon, .fih-icon, .empty-state-icon { filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)) }
.alert { box-shadow: inset 0 1px 0 var(--f3d-edge), 0 8px 20px -10px rgba(0,0,0,.8) }

/* ---------- posts ---------- */
.posts-wrap, .threads-wrap { box-shadow: var(--f3d-card); border-radius: var(--radius) }
.post { box-shadow: inset 0 1px 0 var(--f3d-edge) }
.user-sidebar { background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); box-shadow: inset -1px 0 0 var(--f3d-edge) }
.avatar-img, .member-avatar-wrap img { box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 6px 14px -4px rgba(0,0,0,.8), 0 0 0 3px rgba(201,168,76,.18) }
.post-content blockquote.bbquote, blockquote.bbquote, pre.bbcode, .post-content pre.bbcode { box-shadow: var(--f3d-inset) }
.post-signature { box-shadow: inset 0 1px 0 var(--f3d-edge) }

/* ---------- formularios: hundidos ---------- */
.form-control, .search-row .form-control { box-shadow: var(--f3d-inset); background-image: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0)) }
.form-control:focus { box-shadow: var(--f3d-inset), 0 0 0 3px rgba(201,168,76,.16) }
.bbcode-toolbar { box-shadow: inset 0 1px 0 var(--f3d-edge) }

/* ---------- acceso / registro y perfil ---------- */
.auth-card { box-shadow: inset 0 1px 0 var(--f3d-edge-strong), 0 0 0 1px rgba(0,0,0,.6), 0 40px 90px -24px rgba(0,0,0,.95), 0 14px 40px -12px var(--f3d-gold-glow) }
.auth-header { box-shadow: inset 0 1px 0 var(--f3d-edge) }
.member-banner { box-shadow: inset 0 -20px 30px -20px rgba(0,0,0,.8) }
.usercp-nav a.active, .admin-nav a.active { box-shadow: inset 3px 0 0 var(--gold), inset 0 1px 0 var(--f3d-edge) }

/* ---------- pie ---------- */
.footer { background: linear-gradient(180deg, #13132a, #0e0e1c); box-shadow: inset 0 1px 0 var(--f3d-edge), 0 -18px 40px -24px rgba(0,0,0,.95) }
.footer-logo { text-shadow: 0 0 12px var(--f3d-gold-glow) }

/* ---------- movil / accesibilidad ---------- */
@media (max-width: 700px) {
    .member-mini:hover, .search-result:hover, .btn:hover, .nav-link:hover { transform: none }
}
@media (prefers-reduced-motion: reduce) {
    .btn, .nav-link, .forum-row, .bb-btn, .pager-btn, .member-mini, .search-result { transition: none }
}