@charset "UTF-8";

/* ============================================
   PUBLIC LAYOUT — Header / topbar y base del portal público
   Estilo: Hydro-Institutional Modern (Stitch)
   Solo se usa en el área Public mediante _PublicLayout.cshtml
   ============================================ */

.public-body {
    margin: 0;
    background: var(--hidro-surface);
    color: var(--hidro-text-main);
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Redefine el offset del mapa para el layout público liviano (solo topbar 72px).
       Todos los elementos fixed de Prestadoras e Infraestructura dependen de esta variable. */
    --public-map-top-offset: 72px;
}

.public-main {
    display: block;
}

.public-main--flush {
    min-height: calc(100vh - 72px);
    display: flex;
    flex-direction: column;
}

/* ===== PAGE HEADER BAND (dashboards) ===== */
.public-pagehead {
    background: linear-gradient(135deg, var(--hidro-primary) 0%, var(--hidro-water-deep) 100%);
    color: var(--text-light);
    padding: clamp(var(--spacing-5), 4vw, var(--spacing-8)) 0;
}

.public-pagehead__inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.public-pagehead__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--palette-cyan, #50B8D8);
}

.public-pagehead__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, var(--font-size-3xl, 2.25rem));
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-light);
}

.public-pagehead__desc {
    margin: var(--spacing-1) 0 0;
    max-width: 80ch;
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

/* ===== TOPBAR ===== */
.public-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--color-white);
    border-bottom: 1px solid var(--hidro-ui-border);
    transition: box-shadow var(--transition-base);
}

.public-topbar--scrolled {
    box-shadow: 0 4px 16px rgba(var(--hidro-primary-rgb), 0.06);
}

.public-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-6);
    min-height: 72px;
}

/* Brand */
.public-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    text-decoration: none;
    flex-shrink: 0;
}

.public-topbar__logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.public-topbar__brand-text {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hidro-primary);
}

/* Nav (desktop) */
.public-topbar__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    margin-left: auto;
    margin-right: var(--spacing-6);
}

.public-topbar__link {
    position: relative;
    padding: 6px 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--hidro-text-main);
    text-decoration: none;
    transition: color var(--transition-base);
    white-space: nowrap;
}

.public-topbar__link:hover {
    color: var(--hidro-primary);
}

.public-topbar__link.active {
    color: var(--hidro-secondary);
    font-weight: var(--font-weight-bold);
}

.public-topbar__link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--hidro-secondary);
}

/* Actions */
.public-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-shrink: 0;
}

.public-topbar__login {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 10px 22px;
    border-radius: var(--radius-lg);
    background: var(--hidro-primary);
    color: var(--text-light);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.public-topbar__login:hover {
    color: var(--text-light);
    opacity: 0.92;
    transform: translateY(-1px);
}

.public-topbar__burger {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hidro-ui-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--hidro-primary);
    font-size: var(--font-size-lg);
    cursor: pointer;
}

/* Mobile nav */
.public-topbar__mobile {
    display: none;
    flex-direction: column;
    gap: var(--spacing-1);
    padding: var(--spacing-2) 0 var(--spacing-4);
    border-top: 1px solid var(--hidro-ui-border);
}

.public-topbar__mobile a {
    padding: 12px var(--spacing-2);
    border-radius: var(--radius-md);
    color: var(--hidro-text-main);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.public-topbar__mobile a:hover {
    background: var(--hidro-blue-50);
    color: var(--hidro-primary);
}

@media (max-width: 991.98px) {
    .public-topbar__nav {
        display: none;
    }

    .public-topbar__burger {
        display: inline-flex;
    }

    .public-topbar__login span {
        display: none;
    }

    .public-topbar__login {
        padding: 10px 14px;
    }

    .public-topbar__mobile.open {
        display: flex;
    }
}