/* ═══════════════════════════════════════════════════════════════
   Shell compartido de los portales (autoasistidos, congresos, ...).
   Estructura de layout/sidebar/topbar — clases .portal-* fijas,
   consumidas por shared/components/portal/{layout.php,navbar.php}.
   Cada módulo define en su propio CSS solo lo que cambia por tema:
   --sidebar-bg, --sidebar-active-bg, --sidebar-active-border,
   --portal-avatar-bg, y su contenido de página (cards, vistas, etc).
   ═══════════════════════════════════════════════════════════════ */

:root {
    --sidebar-w:        240px;
    --sidebar-text:     rgba(255,255,255,.7);
    --sidebar-hover-bg: rgba(255,255,255,.07);
    --topbar-h:         54px;

    /* Token compartido entre modulos (autoasistidos, congresos) para el
       tamaño de fuente del titulo de card de curso/congreso — un solo
       cambio acá impacta a ambos. Ver .curso-card-title / .congreso-card-title. */
    --portal-card-title-size: .85rem;

    /* Canales RGB del color de pulso (ver .portal-cta-pulse abajo). Default
       tomado del primary de autoasistidos; cada módulo puede sobreescribir
       esta variable en su propio CSS si necesita otro color de acento. */
    --portal-pulse-rgb: 30,136,229;
}

* { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════
   Efectos compartidos
   ═══════════════════════════════════════════════════════════════ */

/* Pulso de invitación a la acción — anillo de box-shadow expandiéndose.
   Genérico para cualquier CTA de cualquier módulo (nació en el "guardar
   perfil" de autoasistidos, pensado para reusarse donde haga falta llamar
   la atención sobre una acción habilitada). Se pausa en :hover y no corre
   si el elemento está :disabled (típicamente durante un request en curso,
   ver convención de lock de UI en CLAUDE.md). Color vía --portal-pulse-rgb. */
@keyframes portal-cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--portal-pulse-rgb),.5); }
    70%  { box-shadow: 0 0 0 12px rgba(var(--portal-pulse-rgb),0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--portal-pulse-rgb),0); }
}
.portal-cta-pulse:not(:disabled) {
    animation: portal-cta-pulse 2s infinite;
}
.portal-cta-pulse:hover:not(:disabled) {
    animation-play-state: paused;
}

/* Toast container fijo esquina inf-derecha (id "{prefix}-toast-container",
   ver layout.php). Vacío ocupa igual su caja de padding (p-3) y con
   z-index:1100 queda por encima de cualquier overlay fullscreen (ej. visor
   mobile de autoasistidos, z-index 1040) — sin pointer-events:none acá
   ese hueco vacío se come los clicks/taps de lo que esté debajo, aunque
   no haya ningún toast visible. pointer-events vuelve a "auto" en el
   propio .toast para que sus botones (cerrar, etc.) sigan siendo clicables. */
[id$="-toast-container"] { pointer-events: none; }
[id$="-toast-container"] .toast { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════
   Layout: sidebar + content
   ═══════════════════════════════════════════════════════════════ */

.portal-layout {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.portal-sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 300;
    transition: transform .25s cubic-bezier(.4,0,.2,1), width .2s ease;
    overflow: hidden;
}

.portal-sidebar-header {
    padding: 1.375rem 1.25rem 1.125rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.portal-sidebar-brand img {
    max-height: 28px;
    width: auto;
}

/* Botón "colapsar menú" — solo desktop (≥1024px); en tablet/mobile el ancho
   de sidebar ya se resuelve por media query, no hace falta control manual. */
.portal-sidebar-collapse-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.65);
    font-size: .8rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.portal-sidebar-collapse-toggle:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}
@media (min-width: 1024px) {
    .portal-sidebar-collapse-toggle { display: flex; }
}

/* ── Nav items ───────────────────────────────────────────────── */
.portal-sidebar-nav {
    flex: 1;
    padding: .875rem .625rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
}

.portal-nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .875rem;
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: background .14s, color .14s, border-color .14s;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}
.portal-nav-item i {
    font-size: 1.05rem;
    width: 1.2rem;
    flex-shrink: 0;
    text-align: center;
}
.portal-nav-item:hover {
    background: var(--sidebar-hover-bg);
    color: rgba(255,255,255,.92);
}
.portal-nav-item.active {
    background: var(--sidebar-active-bg);
    color: #fff;
    border-left-color: var(--sidebar-active-border);
    font-weight: 600;
}

/* ── Sidebar footer: usuario ─────────────────────────────────── */
.portal-sidebar-footer {
    padding: .875rem .875rem 1rem;
    border-top: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.portal-user-info {
    display: flex;
    align-items: center;
    gap: .6875rem;
    min-width: 0;
}
.portal-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--portal-avatar-bg);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .03em;
}
.portal-user-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.portal-user-name {
    font-size: .8rem;
    color: rgba(255,255,255,.88);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 148px;
    display: block;
}
.portal-logout-link {
    font-size: .73rem;
    color: rgba(255,255,255,.4);
    text-decoration: none;
    transition: color .15s;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.portal-logout-link:hover { color: rgba(255,255,255,.75); }

.portal-back-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    padding: .45rem .5rem;
    border-radius: 8px;
    margin-bottom: .6rem;
    transition: background .15s, color .15s;
}
.portal-back-link:hover {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.85);
}

/* ── Backdrop (mobile) ───────────────────────────────────────── */
.portal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 299;
    backdrop-filter: blur(2px);
}
.portal-backdrop.active { display: block; }

/* ── Content wrap ────────────────────────────────────────────── */
.portal-content-wrap {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease;
}

/* ── Topbar (solo mobile) ────────────────────────────────────── */
.portal-topbar {
    display: none;
    height: var(--topbar-h);
    background: var(--sidebar-bg);
    align-items: center;
    padding: 0 1rem;
    gap: .875rem;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.portal-hamburger {
    background: none;
    border: none;
    color: rgba(255,255,255,.8);
    font-size: 1.5rem;
    padding: .2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color .15s;
}
.portal-hamburger:hover { color: #fff; }
.portal-topbar-brand img {
    max-height: 26px;
    width: auto;
}

/* ── Main content ────────────────────────────────────────────── */
.portal-main {
    flex: 1;
    padding: 1.75rem 2rem;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive — portal sidebar
   ═══════════════════════════════════════════════════════════════ */

/* Tablet: sidebar más angosta con solo iconos */
@media (max-width: 1023px) and (min-width: 768px) {
    :root { --sidebar-w: 64px; }

    .portal-sidebar-header { padding: 1.25rem .75rem; justify-content: center; }
    /* Logo horizontal (icon+texto, aspect ratio ancho) no entra en 64px —
       se reemplaza por la versión cuadrada de solo ícono. */
    .portal-sidebar-brand img { display: none; }
    .portal-sidebar-brand {
        width: 32px;
        height: 32px;
        background: url('../../img/guaculogo_64x64.png') center/contain no-repeat;
    }

    .portal-nav-item { padding: .625rem; justify-content: center; border-left-width: 0; border-radius: 8px; }
    .portal-nav-item span { display: none; }
    .portal-nav-item i { width: auto; font-size: 1.2rem; }
    .portal-nav-item.active { border-bottom: 2px solid var(--sidebar-active-border); }

    .portal-sidebar-footer { padding: .75rem .5rem; }
    .portal-user-avatar { margin: 0 auto; }
    .portal-user-details { display: none; }
    .portal-user-info { justify-content: center; }
    .portal-back-link { justify-content: center; padding: .45rem; }
    .portal-back-link span { display: none; }
}

/* Desktop: sidebar colapsable a mano (botón en el header), estado persistido
   en localStorage vía clase en <html> — ver script inline en layout.php.
   Mismas reglas visuales que el modo tablet de arriba, pero opt-in. */
@media (min-width: 1024px) {
    html.sidebar-collapsed { --sidebar-w: 64px; }

    html.sidebar-collapsed .portal-sidebar-header { padding: 1.25rem .5rem; justify-content: center; }
    html.sidebar-collapsed .portal-sidebar-brand { display: none; }

    html.sidebar-collapsed .portal-nav-item { padding: .625rem; justify-content: center; border-left-width: 0; border-radius: 8px; }
    html.sidebar-collapsed .portal-nav-item span { display: none; }
    html.sidebar-collapsed .portal-nav-item i { width: auto; font-size: 1.2rem; }
    html.sidebar-collapsed .portal-nav-item.active { border-bottom: 2px solid var(--sidebar-active-border); }

    html.sidebar-collapsed .portal-sidebar-footer { padding: .75rem .5rem; }
    html.sidebar-collapsed .portal-user-avatar { margin: 0 auto; }
    html.sidebar-collapsed .portal-user-details { display: none; }
    html.sidebar-collapsed .portal-user-info { justify-content: center; }
    html.sidebar-collapsed .portal-back-link { justify-content: center; padding: .45rem; }
    html.sidebar-collapsed .portal-back-link span { display: none; }
}

/* Mobile: sidebar oculta, topbar visible */
@media (max-width: 767px) {
    .portal-sidebar {
        transform: translateX(-100%);
        width: 260px;
        box-shadow: 4px 0 24px rgba(0,0,0,.35);
    }
    .portal-sidebar.open { transform: translateX(0); }

    .portal-content-wrap { margin-left: 0; }

    .portal-topbar { display: flex; }

    .portal-main { padding: 1.25rem 1rem; }
}