/* Imports de archivos modulares */
@import "../facade/ecosystem.css";
@import "../facade/header.css";
@import "../facade/table.css";
@import "../facade/profile.css";
@import "../facade/profile_user.css";
@import "../facade/modal-form.css";
@import "../facade/form.css";
@import "../facade/guides.css";

/* Componentes específicos Revista */
@import "components/topbar.css";
@import "components/grid.css";
@import "components/post.css";
@import "components/sidebar.css";

/* ── Override Revista: solo valores, mismos nombres ── */
:root {
    --bg-dark:   #1a0a0e;
    --bg-darker: #080304;
    --bg-card:   rgba(45, 10, 18, 0.75);
    --bg-card-hover: rgba(65, 15, 28, 0.9);

    --accent-green:      #c0392b;
    --accent-green-soft: rgba(192, 57, 43, 0.18);
    --accent-green-glow: rgba(192, 57, 43, 0.35);

    --card-bg:     rgba(45, 10, 18, 0.75);
    --card-border: rgba(192, 57, 43, 0.2);

    --border-primary: rgba(192, 57, 43, 0.25);
    --border-hover:   rgba(192, 57, 43, 0.6);

    --glow-color:        rgba(192, 57, 43, 0.2);
    --glow-color-strong: rgba(192, 57, 43, 0.3);
    --glow-soft:         rgba(192, 57, 43, 0.15);
    --glow-medium:       rgba(192, 57, 43, 0.3);
    --glow-strong:       rgba(192, 57, 43, 0.5);

    --medical-primary:        #8b1a2a;
    --medical-primary-light:  #c0392b;
    --medical-primary-bright: #e05555;
    --medical-accent:         #a02030;

    --accent-blue: #e8a0a8;

    --medical-blue-primary: #8b1a2a;
    --medical-blue-light:   #c0392b;
    --medical-blue-lighter: #e05555;
    --medical-blue-dark:    #6b0f1a;
    --medical-blue-darker:  #3d0008;

    --medical-bg-dark:  rgba(15, 3, 6, 0.95);
    --medical-bg-light: rgba(25, 5, 10, 0.97);

    --medical-glow:        rgba(192, 57, 43, 0.4);
    --medical-glow-strong: rgba(192, 57, 43, 0.6);

    --medical-border:       rgba(192, 57, 43, 0.25);
    --medical-border-light: rgba(255, 255, 255, 0.15);
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-darker);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.ecosystem-page .bg-layer {
    background:
        radial-gradient(circle at 20% 30%, rgba(120, 10, 20, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(180, 30, 50, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(10, 2, 4, 0.85) 0%, transparent 70%);
}

.ecosystem-page .bg-gradient {
    background: linear-gradient(
        180deg,
        rgba(10, 2, 4, 0.02) 0%,
        rgba(20, 4, 8, 0.03) 25%,
        rgba(30, 5, 10, 0.05) 50%,
        rgba(40, 6, 12, 0.07) 75%,
        rgba(50, 8, 15, 0.09) 100%
    );
}

/* ── Override header/tabbar/subnav ── */
.logo-container {
    background: rgba(15, 3, 6, 0.85) !important;
    border-bottom-color: rgba(192, 57, 43, 0.2) !important;
}

.subnav {
    background: rgba(15, 3, 6, 0.9) !important;
    border-bottom-color: rgba(192, 57, 43, 0.15) !important;
}

.subnav-item.active {
    color: #c0392b !important;
    border-bottom-color: #c0392b !important;
}

.tab-bar {
    background: rgba(10, 2, 4, 0.95) !important;
    border-top-color: rgba(192, 57, 43, 0.2) !important;
}

.tab-item.active {
    color: #c0392b !important;
}

.revista-topbar {
    background: linear-gradient(90deg, #1a0408, #2d0810) !important;
    border-bottom-color: rgba(192, 57, 43, 0.2) !important;
}

.revista-topbar a {
    color: #c0392b !important;
}

.pu-btn-repronline {
    background: rgba(200, 0, 0, 0.1);
    border: 1px solid rgb(191, 6, 6);
    color: white;
}

.pu-btn-repronline:hover {
    background: rgba(200, 0, 0, 0.2);
    border-color: rgba(200, 0, 0, 0.6);
    box-shadow: 0 0 20px rgba(200, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* =========================
   HEADER — FIX MOBILE
   ========================= */
@media (max-width: 768px) {
    .logo-container {
        justify-content: space-between !important;
        padding: 10px 20px !important;
    }

    .logo {
        height: 38px;
        /* Sacar el drop-shadow pesado en mobile */
        filter: none;
        margin-top: 10px;
    }

    .user-session {
        position: static !important;  /* sacar el absolute que lo pisaba */
        right: auto !important;
        flex-shrink: 0;
    }

    .subnav{
        top: 110px;
    }
}