/****************************************************
    LAYOUT DE LAS WEBS EPOD
    Copia del Site.Master de TransporteWeb (bootstrap/css/tms-layout.css), sin depender de bootstrap 3.
    Estado del menú (js/epod-layout.js), como clases en <html>:
      menu-horizontal    menú arriba en vez de a la izquierda
      menu-colapsado     menú lateral solo con íconos
      menu-movil-abierto menú lateral abierto sobre el contenido (pantallas < 992px)
*****************************************************/

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.tms-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* -------------------------------------------------------------
   1. BARRA SUPERIOR CON FONDO DEGRADADO
------------------------------------------------------------- */
.tms-header {
    height: 48px;
    background: linear-gradient(135deg, #07346e 0%, #0c4d96 45%, #1461c4 80%, #1e72e6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    flex-shrink: 0;
    z-index: 1000;
}

.tms-header .logo-area {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tms-header .logo-img {
    cursor: pointer;
    width: 100px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}

.tms-header .right-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tms-header .user-name-label {
    color: #ffffff;
    font-size: 13px;
    margin: 0 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}

.tms-header .version-label {
    color: #cfe3fb;
    font-size: 11px;
    margin: 0;
}

.btn-toggle-sidebar {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
}

.boton-salir {
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.boton-salir img {
    width: 16px;
    height: 24px;
}

/* Interruptor menú vertical / horizontal */
.menu-switch-container {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    font-size: 11px;
    user-select: none;
}

.switch-mode {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.slider-mode {
    position: absolute;
    inset: 0;
    background-color: #05234a;
    transition: .3s;
    border-radius: 20px;
    border: 1px solid #62b1f6;
}

.slider-mode:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

html.menu-horizontal .slider-mode {
    background-color: #62b1f6;
}

html.menu-horizontal .slider-mode:before {
    transform: translateX(16px);
}

/* -------------------------------------------------------------
   2. ESTRUCTURA BASE Y MENÚ LATERAL
------------------------------------------------------------- */
.tms-body-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

.tms-sidebar {
    width: 240px;
    background: linear-gradient(180deg, #07346e 0%, #0c4d96 50%, #1461c4 100%);
    color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.25s ease, transform 0.25s ease;
    flex-shrink: 0;
    padding-top: 10px;
    box-sizing: border-box;
    z-index: 999;
}

.tms-main-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 10px 15px 20px;
    background-color: #f4f6f9;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

/* Capa invisible que cierra el submenú horizontal al hacer clic fuera; en el menú vertical no se usa */
.menu-capa {
    position: fixed;
    inset: 0;
    z-index: 998;
}

html:not(.menu-horizontal) .menu-capa {
    display: none;
}

/* -------------------------------------------------------------
   3. MENÚS Y SUBMENÚS
------------------------------------------------------------- */
.tms-menu,
.tms-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tms-menu-item {
    position: relative;
}

.tms-menu-enlace {
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    text-transform: capitalize;
    text-align: left;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    border: none;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.2s ease;
}

.tms-menu-enlace:hover,
.tms-menu-enlace:focus,
.tms-menu-item.abierto > .tms-menu-enlace,
.tms-menu-item.activo > .tms-menu-enlace {
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-radius: 4px;
    outline: none;
}

.tms-menu-enlace > i:first-child {
    width: 20px;
    color: #ffffff;
    font-size: 14px;
    margin-right: 4px;
    text-align: center;
}

.tms-menu-enlace .caret {
    margin-left: auto;
    font-size: 11px;
}

.tms-submenu {
    display: none;
}

.tms-submenu > li > a {
    display: block;
    color: #e2f0fd;
    padding: 8px 15px 8px 30px;
    font-size: 12.5px;
    text-decoration: none;
    text-transform: capitalize;
}

.tms-submenu > li > a:hover {
    background-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.tms-submenu > li > a.activo {
    color: #ffffff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #62b1f6;
}

/* Menú vertical: el submenú se despliega debajo de su grupo */
html:not(.menu-horizontal) .tms-menu-item.abierto > .tms-submenu,
html:not(.menu-horizontal) .tms-menu-item.expandido > .tms-submenu {
    display: block;
    background-color: rgba(5, 30, 65, 0.4);
    padding: 5px 0;
}

/* -------------------------------------------------------------
   4. MENÚ COMPRIMIDO (SOLO ÍCONOS)
------------------------------------------------------------- */
@media (min-width: 992px) {
    html.menu-colapsado:not(.menu-horizontal) .tms-sidebar {
        width: 55px;
    }

    html.menu-colapsado:not(.menu-horizontal) .tms-menu-enlace {
        padding: 10px 0;
        justify-content: center;
    }

    html.menu-colapsado:not(.menu-horizontal) .tms-menu-texto,
    html.menu-colapsado:not(.menu-horizontal) .tms-menu-enlace .caret {
        display: none;
    }

    html.menu-colapsado:not(.menu-horizontal) .tms-menu-enlace > i:first-child {
        font-size: 16px;
        margin: 0 auto;
    }

    html.menu-colapsado:not(.menu-horizontal) .tms-submenu {
        display: none !important;
    }
}

/* -------------------------------------------------------------
   5. MENÚ HORIZONTAL CON DEGRADADO
------------------------------------------------------------- */
@media (min-width: 992px) {
    html.menu-horizontal .tms-body-container {
        flex-direction: column;
    }

    html.menu-horizontal .tms-sidebar {
        width: 100%;
        height: auto;
        min-height: 42px;
        padding-top: 0;
        overflow: visible;
        background: linear-gradient(90deg, #07346e 0%, #0c4d96 40%, #1461c4 75%, #1e72e6 100%);
        border-bottom: 2px solid #072a57;
        flex-shrink: 0;
    }

    html.menu-horizontal .btn-toggle-sidebar {
        display: none;
    }

    html.menu-horizontal .tms-menu {
        display: flex;
        flex-wrap: wrap;
    }

    html.menu-horizontal .tms-menu-enlace {
        padding: 8px 10px;
        width: auto;
        white-space: nowrap;
    }

    html.menu-horizontal .tms-menu-enlace .caret {
        margin-left: 4px;
    }

    html.menu-horizontal .tms-menu-item.abierto > .tms-submenu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 180px;
        padding: 5px 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        background-color: #0c4d96;
        z-index: 1100;
    }

    html.menu-horizontal .tms-submenu > li > a {
        padding: 8px 15px;
        white-space: nowrap;
    }
}

/* -------------------------------------------------------------
   6. MÓVIL Y TABLETS (< 992px): el menú se abre sobre el contenido
------------------------------------------------------------- */
@media (max-width: 991px) {
    .tms-header {
        padding: 0 8px;
    }

    .tms-header .user-name-label,
    .tms-header .version-label,
    .menu-switch-container {
        display: none;
    }

    .tms-header .logo-img {
        width: 75px;
        height: 20px;
    }

    .tms-sidebar {
        position: fixed;
        top: 48px;
        left: 0;
        bottom: 0;
        width: 270px;
        transform: translateX(-100%);
        z-index: 1050;
    }

    .tms-menu-item.abierto > .tms-submenu,
    .tms-menu-item.expandido > .tms-submenu {
        display: block;
        background-color: rgba(5, 30, 65, 0.4);
        padding: 5px 0;
    }

    html.menu-movil-abierto .tms-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.4);
    }

    html.menu-movil-abierto .sidebar-overlay {
        display: block;
    }

    .tms-main-content {
        padding: 10px 5px;
    }
}

/* -------------------------------------------------------------
   7. ACERCA DE
------------------------------------------------------------- */
.acerca-de {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.acerca-de img {
    width: 160px;
    padding: 8px 10px;
    border-radius: 6px;
    background: linear-gradient(135deg, #07346e 0%, #1461c4 100%);
}

.acerca-de p {
    margin: 0;
    color: #8a6d3b;
    line-height: 1.5;
}