/* ============================================================
   LIEN TV - MENU SUPERIOR
   ============================================================ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.05);
}

.topbar__contenedor {
    max-width: 1450px;

    margin: 0 auto;

    min-height: 68px;

    padding: 0 28px;

    display: flex;
    align-items: center;

    gap: 30px;
}


/* MARCA */

.topbar__marca {
    flex-shrink: 0;
}

.topbar__logo {
    text-decoration: none;

    font-size: 22px;
    font-weight: 800;

    color: #111827;

    letter-spacing: -0.5px;
}


/* MENU */

.topbar__menu {
    display: flex;
    align-items: center;

    gap: 8px;

    flex: 1;
}

.topbar__enlace {
    padding: 9px 13px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    color: #4b5563;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.topbar__enlace:hover {
    background: #f3f4f6;

    color: #111827;
}


/* USUARIO */

.topbar__usuario {
    display: flex;
    align-items: center;

    gap: 11px;
}

.topbar__avatar {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #2563eb;

    color: #ffffff;

    font-size: 15px;
    font-weight: 400;
}

.topbar__usuario-datos {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.topbar__usuario-datos strong {
    max-width: 170px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;

    color: #111827;
}

.topbar__usuario-datos span {
    max-width: 170px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 11px;

    color: #6b7280;
}

.topbar__logout {
    display: none;
    margin-left: 8px;

    padding: 8px 12px;

    border-radius: 8px;

    text-decoration: none;

    background: #f3f4f6;

    color: #374151;

    font-size: 13px;
    font-weight: 600;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.topbar__logout:hover {
    background: #fee2e2;

    color: #b91c1c;
}


/* RESPONSIVE */

@media (max-width: 850px) {

    .topbar__contenedor {
        padding: 0 16px;
    }

    .topbar__menu {
        display: none;
    }

    .topbar__usuario {
        margin-left: auto;
    }

    .topbar__usuario-datos {
        display: none;
    }
}
.topbar__logo-imagen{display:block;max-width:150px;height:42px;object-fit:contain;object-position:left center}

body.tema-radiodifusor{background:#f0fdfa}body.tema-radiodifusor .topbar{background:#0f766e;border-bottom-color:#115e59}body.tema-radiodifusor .topbar__logo,body.tema-radiodifusor .topbar__enlace,body.tema-radiodifusor .topbar__usuario-datos strong,body.tema-radiodifusor .topbar__usuario-datos span{color:#fff}body.tema-radiodifusor .topbar__enlace:hover,body.tema-radiodifusor .topbar__desplegable:focus-within>.topbar__enlace{background:#115e59;color:#fff}body.tema-radiodifusor .topbar__avatar{background:#f59e0b;color:#422006}body.tema-radiodifusor .topbar__logout{background:#ccfbf1;color:#115e59}body.tema-radiodifusor .btn-primary{background:#0f766e;border-color:#0f766e}body.tema-radiodifusor .pagina-cabecera h1{color:#115e59}

.topbar__alertas{position:relative}.topbar__alertas-boton{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid #dbe3ee;border-radius:50%;background:#fff;cursor:pointer;font-size:18px}.topbar__alertas-boton:hover,.topbar__alertas:focus-within .topbar__alertas-boton{background:#eff6ff;border-color:#93c5fd}.topbar__alertas-boton b{position:absolute;top:-6px;right:-7px;display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border:2px solid #fff;border-radius:999px;background:#dc2626;color:#fff;font-size:11px}.topbar__alertas-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:1200;display:none;width:310px;padding:10px;border:1px solid #dbe3ee;border-radius:12px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.2)}.topbar__alertas:hover .topbar__alertas-panel,.topbar__alertas:focus-within .topbar__alertas-panel{display:grid}.topbar__alertas-panel>strong{padding:8px 10px}.topbar__alertas-panel a{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px;border-radius:8px;color:#334155;text-decoration:none;font-size:13px}.topbar__alertas-panel a:hover{background:#f1f5f9}.topbar__alertas-panel a b{display:grid;place-items:center;min-width:25px;height:25px;border-radius:999px;background:#e0e7ff;color:#3730a3}
.topbar__alertas--personal .topbar__alertas-boton b{background:#16a34a}.topbar__alertas--personal .topbar__alertas-panel a b{background:#dcfce7;color:#166534}

@media(max-width:650px){.submenu-radio{align-items:flex-start;flex-direction:column}.submenu-radio__enlaces{width:100%}}

.topbar__desplegable{position:relative}.topbar__desplegable-boton{display:flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;font-family:inherit}.topbar__submenu{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;display:none;min-width:205px;padding:7px;border:1px solid #dfe5ee;border-radius:11px;background:#fff;box-shadow:0 16px 40px rgba(15,23,42,.16)}.topbar__desplegable:hover .topbar__submenu,.topbar__desplegable:focus-within .topbar__submenu{display:grid}.topbar__submenu a{padding:10px 12px;border-radius:8px;color:#334155;text-decoration:none;font-size:14px;font-weight:600}.topbar__submenu a:hover{background:#f1f5f9;color:#111827}.submenu-radio{max-width:1460px;margin:0 auto 18px;padding:10px 12px;display:flex;align-items:center;gap:14px;border:1px solid #dbe3ee;border-radius:12px;background:#fff}.submenu-radio__titulo{color:#64748b;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.submenu-radio__enlaces{display:flex;gap:7px;flex-wrap:wrap}.submenu-radio__enlace{padding:8px 11px;border-radius:8px;color:#475569;text-decoration:none;font-size:13px;font-weight:700}.submenu-radio__enlace:hover{background:#f1f5f9;color:#1e293b}.submenu-radio__enlace.activo{background:#e8efff;color:#1d4ed8}
.topbar__cuenta-usuario>.topbar__desplegable-boton{padding:4px 7px 4px 4px}.topbar__cuenta-usuario>.topbar__submenu{right:0;left:auto}.topbar__cuenta-nombre{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}

body.tema-rol .topbar{background:var(--rol-color-principal);border-bottom-color:var(--rol-color-principal)}body.tema-rol .topbar__logo,body.tema-rol .topbar__enlace,body.tema-rol .topbar__usuario-datos strong,body.tema-rol .topbar__usuario-datos span{color:var(--rol-color-secundario)}body.tema-rol .topbar__avatar{background:var(--rol-color-secundario);color:var(--rol-color-principal)}body.tema-rol .topbar__enlace:hover,body.tema-rol .topbar__desplegable:focus-within>.topbar__enlace{background:color-mix(in srgb,var(--rol-color-secundario) 18%,transparent);color:var(--rol-color-secundario)}.topbar__rol-indicador{position:relative;display:grid;place-items:center;width:25px;height:25px;border:1px solid color-mix(in srgb,var(--rol-color-secundario,#fff) 60%,transparent);border-radius:50%;color:var(--rol-color-secundario,#334155);font-size:12px;font-weight:800;cursor:help}.topbar__rol-indicador>span{position:absolute;right:0;top:calc(100% + 9px);z-index:1300;display:none;width:max-content;max-width:220px;padding:8px 10px;border-radius:8px;background:#111827;color:#fff;font-size:12px;font-weight:600;box-shadow:0 8px 22px rgba(15,23,42,.25)}.topbar__rol-indicador:hover>span,.topbar__rol-indicador:focus>span{display:block}

.topbar__movil-boton{display:none;width:42px;height:42px;padding:9px;border:1px solid #dbe3ee;border-radius:10px;background:#fff;cursor:pointer}.topbar__movil-boton span{display:block;height:2px;margin:4px 0;border-radius:2px;background:#334155}
@media(max-width:850px){.topbar__movil-boton{display:block;margin-left:auto}.topbar__menu{position:absolute;top:calc(100% + 1px);left:12px;right:12px;display:none;max-height:calc(100vh - 90px);padding:10px;overflow:auto;flex-direction:column;align-items:stretch;gap:5px;border:1px solid #dbe3ee;border-radius:0 0 14px 14px;background:#fff;box-shadow:0 18px 36px rgba(15,23,42,.2)}.topbar__menu.topbar__menu--abierto{display:flex}.topbar__menu>.topbar__desplegable{width:100%}.topbar__menu .topbar__desplegable-boton{width:100%;justify-content:space-between;padding:12px;color:#334155!important}.topbar__menu .topbar__submenu{position:static;display:none;width:auto;min-width:0;margin:3px 0 7px;padding:5px;box-shadow:none;background:#f8fafc}.topbar__menu .topbar__desplegable--abierto>.topbar__submenu{display:grid}.topbar__usuario{margin-left:0}.topbar__cuenta-nombre{display:none}}
body.tema-rol .topbar__movil-boton,body.tema-radiodifusor .topbar__movil-boton{border-color:rgba(255,255,255,.5);background:transparent}body.tema-rol .topbar__movil-boton span,body.tema-radiodifusor .topbar__movil-boton span{background:var(--rol-color-secundario,#fff)}
