/* ===================================
   OTIUM 12.0 FUSION
   STYLE GLOBAL
   Versión ajustada 20260913
   ===================================

   OBJETIVOS:

   - Navbar global fijo.
   - Altura desktop: 90px.
   - Altura móvil: 78px.
   - Logo aumentado sin aumentar
     la altura de la barra.
   - Todas las páginas internas
     comienzan debajo del navbar.
   - Footer permanece en el flujo normal.
   - Home/index.html mantiene
     su diseño actual.
   - Compatible con navbar.html
     y footer.html.

   AJUSTE 20260913:

   - Corregida posición vertical
     del Home en smartphone.
   - El carrusel sube en móvil.
   - No se modifica la proporción
     de las imágenes.
=================================== */


/* ===================================
   VARIABLES
=================================== */

:root {

    --otium-header-height: 90px;

    --otium-orange: #ff7a45;
    --otium-orange-hover: #ff6630;

    --otium-dark: #010714;
    --otium-dark-2: #0f172a;

    --otium-border: #0B1F45;

    --otium-text: #1f2937;
    --otium-muted: #64748b;

    --otium-white: #ffffff;
}


/* ===================================
   RESET GLOBAL
=================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
}

body {

    width: 100%;
    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f5f7fb;

    color: var(--otium-text);
}


/* ===================================
   NAVBAR GLOBAL
=================================== */

header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: var(--otium-header-height);
    min-height: var(--otium-header-height);

    z-index: 10000;

    background: var(--otium-dark);

    border-bottom:
        1px solid
        var(--otium-border);

    box-shadow:
        0 4px 15px
        rgba(0, 0, 0, .25);
}


/* ===================================
   CONTENEDOR NAVBAR
=================================== */

.navbar {

    width: 100%;

    max-width: 1400px;

    height: var(--otium-header-height);
    min-height: var(--otium-header-height);

    margin: 0 auto;

    padding:
        5px 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


/* ===================================
   LOGO
=================================== */

.logo-container {

    display: flex;

    align-items: center;

    text-decoration: none;

    flex-shrink: 0;
}


.logo-container img {

    display: block;

    width: 80px;
    height: 80px;

    object-fit: contain;

    background: transparent;

    transition:
        transform .3s ease;
}


.logo-container img:hover {

    transform:
        scale(1.05);
}


/* ===================================
   BOTÓN MENÚ MÓVIL
   =================================== */

.otium-mobile-menu-button {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
    z-index: 20001;
    -webkit-tap-highlight-color: transparent;
}

.otium-mobile-menu-button:hover {
    background: rgba(255, 122, 69, .18);
    border-color: rgba(255, 122, 69, .55);
}

.otium-mobile-menu-button:active {
    transform: scale(.96);
}

.otium-mobile-menu-button:focus-visible {
    outline: 2px solid var(--otium-orange);
    outline-offset: 2px;
}

/* ===================================
   MENÚ PRINCIPAL
=================================== */

.menu {

    list-style: none;

    display: flex;

    align-items: center;

    gap: 32px;
}


.menu a {

    text-decoration: none;

    color: white;

    font-weight: 600;

    padding:
        10px 14px;

    border-radius: 8px;

    transition:
        all .3s ease;
}


.menu a:hover {

    color:
        var(--otium-orange);

    background:
        rgba(255, 122, 69, .12);
}


.menu a.active {

    color:
        var(--otium-orange);
}


/* ===================================
   PANEL USUARIO
=================================== */

#userPanel {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    margin-left: auto;

    min-width: 150px;

    flex-shrink: 0;
}


.user-panel {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    margin-left: auto;

    position: relative;

    min-width: 150px;

    flex-shrink: 0;
}


/* ===================================
   BOTÓN LOGIN
=================================== */

#googleLogin {

    padding:
        12px 22px;

    border: none;

    border-radius: 30px;

    background:
        var(--otium-orange);

    color: white;

    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;
}


#googleLogin:hover {

    background:
        var(--otium-orange-hover);

    transform:
        translateY(-1px);
}


.login-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    white-space: nowrap;

    min-width: 125px;

    padding:
        10px 16px;

    cursor: pointer;
}


/* ===================================
   MENÚ USUARIO
=================================== */

#userMenu {

    position: relative;

    display: none;
}


.user-menu {

    position: relative;

    display: none;
}


/* ===================================
   BOTÓN USUARIO
=================================== */

#userDropdown {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-width: 140px;

    min-height: 40px;

    padding:
        10px 20px;

    border: 0;

    border-radius: 24px;

    background:
        var(--otium-orange);

    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    white-space: nowrap;
}


#userDropdown:hover {

    background:
        var(--otium-orange-hover);

    transform:
        translateY(-1px);
}


.user-dropdown {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-width: 140px;

    padding:
        10px 14px;

    white-space: nowrap;

    cursor: pointer;
}


/* ===================================
   NOMBRE USUARIO
=================================== */

#userName {

    display: inline-block;

    max-width: 150px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ===================================
   FLECHA USUARIO
=================================== */

.user-arrow {

    display: inline-block;

    font-size: 9px;

    margin-left: 3px;

    transition:
        transform .2s ease;
}


#userDropdown[aria-expanded="true"]
.user-arrow {

    transform:
        rotate(180deg);
}


/* ===================================
   DROPDOWN USUARIO
=================================== */

#dropdownMenu {

    display: none;

    position: absolute;

    top:
        calc(100% + 10px);

    right: 0;

    width: 210px;

    min-width: 210px;

    padding: 8px;

    margin: 0;

    background: #fff;

    border:
        1px solid #dbe3ef;

    border-radius: 16px;

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, .20);

    overflow: hidden;

    z-index: 20000;
}


#dropdownMenu.show {

    display: block;
}


/* ===================================
   OPCIONES DROPDOWN
=================================== */

#dropdownMenu a,
#dropdownMenu button {

    display: block;

    width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding:
        12px 14px;

    border: 0;

    border-radius: 9px;

    background: #fff;

    color: #18324d;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.3;

    text-align: left;

    text-decoration: none;

    cursor: pointer;

    white-space: nowrap;
}


#dropdownMenu a:hover,
#dropdownMenu button:hover {

    background:
        #eef5ff;

    color:
        #1267e8;
}


/* ===================================
   LOGOUT
=================================== */

#dropdownMenu #logoutButton {

    color:
        #d93025;
}


#dropdownMenu #logoutButton:hover {

    background:
        #fff1f0;

    color:
        #b42318;
}


/* ===================================
   NOTIFICACIONES
=================================== */

.notification-toggle,
.notifications-toggle,
#notificationToggle {

    flex-shrink: 0;
}


/* ===================================
   CONTENIDO PRINCIPAL
=================================== */

main {

    padding-top:
        var(--otium-header-height);

    min-height:
        calc(
            100vh -
            var(--otium-header-height)
        );
}


/* ===================================
   HOME
   NO MODIFICAR DISEÑO DESKTOP
=================================== */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding:
        140px 60px 80px;

    background-image:
        url("../assets/fondo_home.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


.hero-content {

    width: 100%;

    max-width: 1400px;

    margin: auto;
}


.hero-slogan {

    display: block;

    text-align: center;

    color: white;

    font-size: 28px;

    font-weight: 600;

    margin-bottom: 50px;

    text-shadow:
        0 2px 10px
        rgba(0, 0, 0, .5);
}


.hero-tools {

    display: grid;

    grid-template-columns:
        30% 70%;

    gap: 40px;

    align-items: center;

    margin-top: 180px;
}


/* ===================================
   SEARCH / SPONSOR
=================================== */

.search-panel,
.carousel-panel {

    position: relative;

    height: 420px;

    padding: 0;

    border-radius: 30px;

    overflow: hidden;

    background: transparent;

    border: none;
}


.search-panel {

    padding: 30px;

    border-radius: 25px;

    background:
        rgba(15, 23, 42, .85);

    border:
        1px solid
        rgba(255, 255, 255, .1);
}


.search-box {

    display: flex;

    flex-direction: column;

    gap: 15px;
}


.search-box input {

    padding: 18px;

    border: none;

    border-radius: 14px;

    font-size: 16px;
}


.search-box button {

    padding: 18px;

    border: none;

    border-radius: 14px;

    font-weight: 700;

    cursor: pointer;
}


/* ===================================
   SPONSOR CAROUSEL
=================================== */

.sponsor-slide {

    display: none;

    position: relative;

    width: 100%;

    height: 100%;
}


.sponsor-slide.active {

    display: block;
}


.sponsor-slide::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 45%;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .85),
            transparent
        );

    border-radius: 20px;
}


.carousel-info {

    position: absolute;

    bottom: 30px;

    left: 30px;
    right: 30px;

    z-index: 2;

    color: white;
}


.carousel-info h3 {

    font-size: 32px;

    margin-bottom: 10px;

    font-weight: 700;
}


.carousel-info p {

    font-size: 18px;

    margin-bottom: 20px;

    opacity: 1;
}


.carousel-button {

    display: inline-block;

    margin-top: 15px;

    padding:
        12px 25px;

    border-radius: 30px;

    background:
        var(--otium-orange);

    color: white;

    text-decoration: none;

    font-weight: 700;
}


/* ===================================
   FLECHAS CAROUSEL
=================================== */

.carousel-arrow {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, .6);

    color: white;

    font-size: 22px;

    cursor: pointer;

    z-index: 5;
}


.carousel-arrow.left {

    left: 15px;
}


.carousel-arrow.right {

    right: 15px;
}


.carousel-arrow:hover {

    background:
        var(--otium-orange);
}


/* ===================================
   CATEGORÍAS
=================================== */

.categories {

    max-width: 1400px;

    margin: auto;

    padding:
        80px 40px;
}


.categories h2 {

    font-size: 38px;

    margin-bottom: 40px;
}


.category-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;
}


.category-card {

    position: relative;

    height: 220px;

    overflow: hidden;

    border-radius: 25px;

    text-decoration: none;

    transition: .4s;
}


.category-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .4s;
}


.category-card span {

    position: absolute;

    bottom: 20px;

    left: 20px;

    color: white;

    font-size: 24px;

    font-weight: 700;

    text-shadow:
        0 2px 10px
        rgba(0, 0, 0, .8);

    z-index: 2;
}


.category-card::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 50%;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .8),
            transparent
        );
}


.category-card:hover {

    transform:
        translateY(-8px);
}


.category-card:hover img {

    transform:
        scale(1.1);
}


/* ===================================
   DESTACADOS
=================================== */

#destacadosContainer {

    margin-top: 40px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;
}


.card,
.evento-card {

    background: white;

    padding: 25px;

    border-radius: 20px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .08);
}


.card h3,
.evento-card h3 {

    margin-bottom: 15px;
}


.see-all {

    text-align: center;

    margin-top: 40px;
}


.btn-mostrar-mas {

    display: inline-block;

    padding:
        16px 35px;

    border-radius: 30px;

    background:
        var(--otium-orange);

    color: white;

    font-weight: 700;

    text-decoration: none;
}


/* ===================================
   MAPA
=================================== */

.map-section {

    max-width: 1400px;

    margin: auto;

    padding:
        80px 40px;
}


.map-section h2 {

    margin-bottom: 30px;
}


#map {

    height: 500px;

    border-radius: 25px;

    overflow: hidden;
}


/* ===================================
   DETALLE EVENTO
=================================== */

.event-detail-page {

    max-width: 900px;

    margin:
        60px auto;

    padding:
        0 30px;
}


.event-detail-card {

    background: white;

    padding: 40px;

    border-radius: 24px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .08);
}


.event-detail-card h1 {

    margin-bottom: 25px;
}


.event-detail-card p {

    margin-bottom: 15px;

    font-size: 18px;
}


/* ===================================
   ACCIONES EVENTO
=================================== */

.event-actions {

    display: flex;

    gap: 15px;

    margin-top: 30px;

    flex-wrap: wrap;
}


.event-actions button {

    padding:
        14px 24px;

    border: none;

    border-radius: 30px;

    cursor: pointer;

    background:
        var(--otium-orange);

    color: white;

    font-weight: 700;
}


/* ===================================
   CONTENEDOR EVENTOS
=================================== */

.event-container {

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

    padding:
        50px 30px 80px;
}


.event-container h1 {

    margin-bottom: 35px;

    font-size: 38px;

    color: #0f172a;
}


/* ===================================
   HEADER DE PÁGINA
=================================== */

.page-header {

    margin-bottom: 30px;
}


.page-header h1 {

    margin-top: 10px;

    margin-bottom: 0;
}


.back-button {

    display: inline-block;

    color:
        var(--otium-orange);

    text-decoration: none;

    font-weight: 700;

    margin-bottom: 10px;
}


.back-button:hover {

    text-decoration: underline;
}


/* ===================================
   FORMULARIOS
=================================== */

#eventForm,
.event-container form {

    background: white;

    padding: 35px;

    border-radius: 25px;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, .08);

    display: flex;

    flex-direction: column;

    gap: 18px;
}


#eventForm {

    gap: 16px;
}


#eventForm input,
#eventForm select,
#eventForm textarea,
.event-container input,
.event-container select,
.event-container textarea {

    width: 100%;

    padding:
        16px 18px;

    border:
        1px solid #d1d5db;

    border-radius: 12px;

    background: white;

    color:
        var(--otium-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

    outline: none;

    transition: .2s;
}


#eventForm input:focus,
#eventForm select:focus,
#eventForm textarea:focus,
.event-container input:focus,
.event-container select:focus,
.event-container textarea:focus {

    border-color:
        var(--otium-orange);

    box-shadow:
        0 0 0 3px
        rgba(255, 122, 69, .15);
}


#eventForm textarea,
.event-container textarea {

    min-height: 150px;

    resize: vertical;
}


#eventForm p {

    margin:
        5px 0;

    color:
        var(--otium-muted);

    font-size: 14px;
}


/* ===================================
   MAPA FORMULARIO
=================================== */

#eventMap {

    width: 100%;

    height: 420px;

    border-radius: 20px;

    overflow: hidden;

    border:
        1px solid #d1d5db;

    margin:
        5px 0 10px;
}


/* ===================================
   BOTONES FORMULARIOS
=================================== */

#eventForm button,
.event-container button {

    padding:
        15px 22px;

    border: none;

    border-radius: 30px;

    background:
        var(--otium-orange);

    color: white;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;
}


#eventForm button:hover,
.event-container button:hover {

    transform:
        translateY(-2px);

    opacity: .9;
}


#eventForm button[type="button"] {

    background:
        #334155;
}


#eventForm button[type="button"]:hover {

    background:
        #1e293b;
}


/* ===================================
   ACCIONES FORMULARIOS
=================================== */

.event-actions {

    display: flex;

    gap: 15px;

    margin-top: 10px;

    flex-wrap: wrap;
}


.event-actions button {

    min-width: 150px;
}


/* ===================================
   MIS EVENTOS
=================================== */

#myEventsContainer {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 25px;
}


#myEventsContainer .event-card {

    background: white;

    padding: 25px;

    border-radius: 20px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .08);
}


#myEventsContainer .event-card h3 {

    margin-bottom: 15px;

    color: #0f172a;
}


#myEventsContainer .event-card p {

    margin-bottom: 8px;

    color: #475569;
}


/* ===================================
   BOTONES MIS EVENTOS
=================================== */

#myEventsContainer .edit-btn,
#myEventsContainer .delete-btn {

    margin-top: 15px;

    margin-right: 8px;

    padding:
        10px 18px;

    border: none;

    border-radius: 20px;

    cursor: pointer;

    font-weight: 700;
}


#myEventsContainer .edit-btn {

    background:
        var(--otium-orange);

    color: white;
}


#myEventsContainer .delete-btn {

    background:
        #334155;

    color: white;
}


/* ===================================
   CALENDARIO
=================================== */

.calendar-page {

    max-width: 1200px;

    margin: 0 auto;

    padding:
        50px 30px 80px;
}


.calendar-page h1 {

    margin-bottom: 35px;

    font-size: 38px;
}


.calendar-grid {

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 8px;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


.calendar-weekday {

    padding:
        14px 8px;

    text-align: center;

    font-weight: 700;

    border-radius: 8px;
}


.calendar-day {

    min-height: 120px;

    padding: 10px;

    border:
        1px solid #ddd;

    border-radius: 8px;

    background: #fff;

    overflow: visible;
}


.calendar-day.empty {

    background: transparent;

    border: none;
}


.calendar-day-number {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 8px;
}


.calendar-day.today {

    border:
        2px solid #333;
}


.calendar-day.has-events {

    background:
        #f8f8f8;
}


.calendar-events {

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.calendar-event {

    display: block;

    padding: 6px;

    border-radius: 6px;

    text-decoration: none;

    overflow: hidden;
}


.calendar-event strong {

    display: block;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.calendar-event span {

    display: block;

    font-size: 12px;

    margin-top: 3px;
}

.calendar-more {
    display: block;
    width: 100%;

    margin-top: 2px;
    padding: 5px 6px;

    border: none;
    border-radius: 5px;

    background: transparent;

    color: #173b68;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.2;
    text-align: left;

    cursor: pointer;
}

.calendar-more:hover {
    background: #e9eef5;
}
/* ===================================
   ADVERTENCIA PUBLICACIÓN
=================================== */

.publication-warning {

    margin-top: 24px;

    padding:
        18px 20px;

    border-radius: 12px;

    background:
        #fff7ed;

    border:
        1px solid #fed7aa;

    color:
        #9a3412;

    font-size: 13px;

    line-height: 1.6;
}


.publication-warning-title {

    margin-bottom: 8px;

    font-size: 15px;

    font-weight: 700;

    color:
        #9a3412;
}


.publication-warning p {

    margin:
        7px 0;
}


.publication-warning strong {

    color:
        #7c2d12;
}


/* ===================================
   FOOTER
=================================== */

footer {

    margin-top: 80px;

    padding: 40px;

    text-align: center;

    background:
        var(--otium-dark-2);

    color: white;
}


footer strong {

    display: inline-block;

    margin-bottom: 8px;
}


footer p {

    margin:
        0 0 12px;

    color:
        rgba(255, 255, 255, .85);
}


footer small {

    display: block;

    margin-top: 10px;

    color:
        rgba(255, 255, 255, .65);
}


/* ===================================
   HEADER ESPECIAL CREAR EVENTO
=================================== */

.create-event-header {

    position: static !important;

    top: auto !important;

    left: auto !important;

    width: auto !important;

    min-height: auto !important;

    z-index: auto !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* ===================================
   TABLET / PANTALLAS MEDIANAS
=================================== */

@media (max-width: 1100px) {

    .hero-tools {

        grid-template-columns: 1fr;
    }


    .carousel-panel {

        width: 100%;
    }


    .category-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }


    #destacadosContainer {

        grid-template-columns:
            repeat(2, 1fr);
    }
}


/* ===================================
   PANTALLAS HASTA 900px
=================================== */

@media (max-width: 900px) {

    .navbar {

        height: var(--otium-header-height);

        min-height:
            var(--otium-header-height);

        padding:
            5px 18px;
    }


    .menu {

        gap: 8px;
    }


    .menu a {

        padding:
            8px 9px;

        font-size: 12px;
    }
}


/* ===================================
   MÓVIL
   HASTA 768px
=================================== */

@media (max-width: 768px) {

    :root {

        --otium-header-height: 78px;
    }


    .navbar {

        flex-direction: row;

        gap: 10px;

        height:
            var(--otium-header-height);

        min-height:
            var(--otium-header-height);

        padding:
            5px 18px;
    }


    /*
       Logo de 68px.

       68px + 10px de padding vertical
       = 78px exactos.
    */

    .logo-container img {

        width: 68px;

        height: 68px;
    }


    /* ===================================
       MENÚ MÓVIL
       =================================== */

    .otium-mobile-menu-button {
        display: flex;
    }

    .menu {
        display: none;
        position: absolute;
        top: var(--otium-header-height);
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        padding: 12px 18px 18px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        background: var(--otium-dark);
        border-top: 1px solid rgba(255, 255, 255, .08);
        border-bottom: 1px solid var(--otium-border);
        box-shadow: 0 12px 25px rgba(0, 0, 0, .30);
        z-index: 20000;
    }

    .menu.otium-mobile-open {
        display: flex;
    }

    .menu li {
        width: 100%;
        list-style: none;
    }

    .menu a {
        display: block;
        width: 100%;
        padding: 13px 14px;
        border-radius: 10px;
        font-size: 15px;
        text-align: left;
    }

    .menu a:hover,
    .menu a:focus-visible {
        background: rgba(255, 122, 69, .12);
        color: var(--otium-orange);
    }


    #userPanel {

        min-width: auto;
    }


    #googleLogin,
    #userDropdown {

        min-height: 40px;

        padding:
            10px 14px;

        font-size: 12px;
    }


    #dropdownMenu {

        right: 0;

        width: 200px;

        min-width: 200px;
    }


    main {

        padding-top:
            var(--otium-header-height);

        min-height:
            calc(
                100vh -
                var(--otium-header-height)
            );
    }


    /* ===================================
       HOME - CORRECCIÓN POSICIÓN MÓVIL
       ===================================

       Se elimina min-height: 100vh
       solamente en móvil para evitar
       que el Home fuerce una altura
       innecesaria.

       El padding superior se reduce
       para subir el carrusel.

       NO se modifica la proporción
       de las imágenes del carrusel.
    */

    .hero {

        min-height: auto;

        padding:
            25px 15px 40px;

        align-items: flex-start;
    }


    .hero-tools {

        margin-top: 20px;
    }


    /* ===================================
       RESTO DEL MÓVIL
    =================================== */

    .category-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    #destacadosContainer {

        grid-template-columns: 1fr;
    }


    .search-box {

        flex-direction: column;
    }


    .hero h1 {

        font-size: 36px;
    }


    .event-container {

        padding:
            30px 20px 60px;
    }


    .event-container h1 {

        font-size: 30px;
    }


    .event-container form {

        padding: 25px;
    }


    #myEventsContainer {

        grid-template-columns: 1fr;
    }


    .event-actions {

        flex-direction: column;
    }


    .event-actions button {

        width: 100%;
    }


    #eventMap {

        height: 350px;
    }


    .calendar-grid {

        gap: 4px;
    }


    .calendar-weekday {

        font-size: 12px;

        padding:
            8px 3px;
    }


    .calendar-day {

        min-height: 90px;

        padding: 5px;
    }


    .calendar-day-number {

        font-size: 15px;
    }


    .calendar-event {

        font-size: 11px;

        padding: 4px;
    }
}


/* ===================================
   MÓVILES PEQUEÑOS
   HASTA 500px
=================================== */

@media (max-width: 500px) {

    .calendar-grid {

        gap: 2px;
    }


    .calendar-day {

        min-height: 70px;

        padding: 3px;
    }


    .calendar-weekday {

        font-size: 10px;
    }


    .calendar-day-number {

        font-size: 13px;
    }


    .calendar-event {

        font-size: 9px;
    }


    /*
       Mantenemos el logo en 68px.
       La barra continúa en 78px.
    */

    .logo-container img {

        width: 68px;

        height: 68px;
    }
}

/* ==========================================
   OTIUM — AJUSTE DE CABECERA EN MÓVILES
   Hamburguesa izquierda, logo centrado,
   sesión a la derecha.
   ========================================== */

@media (max-width: 768px) {
    .navbar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        column-gap: 8px;
        align-items: center;
        padding: 3px 12px;
    }

    /* Hamburguesa a la izquierda */
    .otium-mobile-menu-button {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: 42px;
        height: 42px;
        position: relative;
        z-index: 20001;
    }

    /* Logo centrado entre ambos extremos */
    .navbar > .logo-container {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        align-self: center;
        min-width: 0;
        margin: 0;
    }

    .navbar > .logo-container img {
        width: 72px;
        height: 72px;
        max-width: 100%;
        object-fit: contain;
    }

    /* Sesión y usuario a la derecha */
    .navbar > .otium-header-right {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        min-width: 0;
        margin-left: 0;
    }

    #userPanel,
    .user-panel {
        min-width: 0;
        margin-left: 0;
        flex-shrink: 0;
    }

    #googleLogin,
    #userDropdown {
        min-width: 0;
        min-height: 38px;
        padding: 9px 10px;
        font-size: 11px;
        border-radius: 22px;
    }

    #userName {
        max-width: 75px;
    }
}

/* Ajuste adicional para teléfonos estrechos */
@media (max-width: 360px) {
    .navbar {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        column-gap: 4px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .otium-mobile-menu-button {
        width: 38px;
        height: 40px;
    }

    .navbar > .logo-container img {
        width: 66px;
        height: 66px;
    }

    #googleLogin,
    #userDropdown {
        padding: 8px 7px;
        font-size: 10px;
    }
}