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

:root {

    --primary: #0b4f71;
    --primary2: #08384f;

    --bg: #f5f7fb;
    --card: #ffffff;

    --text: #223;
    --muted: #758195;

    --border: #e8edf3;

}

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

*{
    box-sizing:border-box;
}

body{

    margin:0;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        Segoe UI,
        Arial,
        sans-serif;

    background:var(--bg);
    color:var(--text);
    font-size:14px;

}

/* ==========================================================
   LAYOUT
========================================================== */

.layout{

    display:flex;
    min-height:100vh;

}

.main{

    margin-left:78px;
    width:calc(100% - 78px);

}

.content{

    padding:26px 28px;

}

/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar{

    width:78px;

    background:#08384f;

    color:#fff;

    position:fixed;

    left:0;
    top:0;
    bottom:0;

    padding:16px 10px;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:16px;

}

.brand{

    width:42px;
    height:42px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #ffab2e,
        #ff6b00
    );

    display:grid;
    place-items:center;

    font-weight:800;

}

/* ==========================================================
   MENU
========================================================== */

.nav{

    display:flex;
    flex-direction:column;

    gap:10px;

    width:100%;

    align-items:center;

}

.nav a{

    width:44px;
    height:44px;

    border-radius:14px;

    display:grid;
    place-items:center;

    color:#491528;

    text-decoration:none;

    font-size:18px;

}

.nav a.active,
.nav a:hover{

    /*background:rgba(255,255,255,.14);*/
    background: #db8ca0 !important;
    color:#ffffff;

}

/* ==========================================================
   TOPBAR
========================================================== */

.topbar{

    height:66px;

    background:#ffffff;

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

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 28px;

    position:sticky;
    top:0;

    z-index:5;

}

.search{

    width:360px;
    max-width:45vw;

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

    border-radius:12px;

    padding:11px 14px;

    color:var(--muted);

}

/* ==========================================================
   PAGE HEADER
========================================================== */

.page-head{

    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-bottom:18px;

}

.page-head h1{

    margin:0;

    font-size:22px;

}

/* ==========================================================
   CARDS
========================================================== */

.card{

    background:var(--card);

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

    border-radius:18px;

    box-shadow:0 12px 32px rgba(22,36,55,.05);

    padding:20px;

}

/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;
    gap:8px;

    border:0;
    border-radius:12px;

    padding:11px 16px;

    text-decoration:none;

    font-weight:700;

    cursor:pointer;

}

.btn-primary{

    background:var(--primary);
    color:#ffffff;

}

.btn-light{

    background:#eef4f8;
    color:var(--primary);

}

.btn-danger{

    background:#fff1f1;
    color:#d62828;

}

/* ==========================================================
   GRID
========================================================== */

.grid{

    display:grid;

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

    gap:18px;

}

/* ==========================================================
   PRODUCTOS
========================================================== */

.product{

    overflow:hidden;

    padding:0;

}

.product-img{

    height:180px;

    background:#eef2f6;

    display:flex;
    align-items:center;
    justify-content:center;

}

.product-img img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.product-body{

    padding:16px;

}

.badge{

    display:inline-block;

    background:#eaf4ff;

    color:#0b4f71;

    border-radius:999px;

    padding:5px 10px;

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

}

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

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

}

.field{

    display:flex;
    flex-direction:column;

    gap:7px;

}

.field.full{

    grid-column:1/-1;

}

input,
select,
textarea{

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

    border-radius:12px;

    padding:12px 13px;

    background:#ffffff;

    font:inherit;

}

textarea{

    min-height:110px;

    resize:vertical;

}

/* ==========================================================
   ALERTAS
========================================================== */

.alert{

    padding:12px 14px;

    border-radius:12px;

    margin-bottom:14px;

}

.alert-error{

    background:#fff1f1;

    color:#b42318;

}

.alert-ok{

    background:#ecfdf3;

    color:#027a48;

}

/* ==========================================================
   LOGIN
========================================================== */

.auth{

    min-height:100vh;

    display:grid;
    place-items:center;

    background:linear-gradient(
        135deg,
        #08384f,
        #0b4f71
    );

}

.auth-card{

    width:430px;
    max-width:92vw;

    background:#ffffff;

    border-radius:24px;

    padding:28px;

    box-shadow:0 22px 60px rgba(0,0,0,.22);

}

.auth-card h1{

    margin:0 0 8px;

}

/* ==========================================================
   TABLAS
========================================================== */

.table{

    width:100%;

    border-collapse:collapse;

}

.table th,
.table td{

    padding:13px;

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

    text-align:left;

}

/* ==========================================================
   IMÁGENES
========================================================== */

.thumb{

    width:58px;
    height:46px;

    border-radius:10px;

    background:#eef2f6;

    object-fit:cover;

}

/* ==========================================================
   HELPERS
========================================================== */

.muted{

    color:var(--muted);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:900px){

    .grid{

        grid-template-columns:1fr;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .search{

        display:none;

    }

    .content{

        padding:18px;

    }

    .topbar{

        padding:0 18px;

    }

}







/* ==========================================================
   MENÚ RESPONSIVE KOSK
   No modifica el diseño original de escritorio
========================================================== */

.kosk-mobile-menu-button {
    display: none;
}

.kosk-mobile-overlay {
    display: none;
}

/* ==========================================================
   MÓVIL Y TABLET
========================================================== */

@media (max-width: 900px) {

    body.kosk-mobile-menu-open {
        overflow: hidden;
    }

    /*
    ----------------------------------------------------------
    Contenido principal
    ----------------------------------------------------------
    */

    .main {
        width: 100%;
        margin-left: 0;
    }

    /*
    ----------------------------------------------------------
    Sidebar original
    ----------------------------------------------------------
    */

    #koskSidebar {
        width: 78px;

        z-index: 1001;

        transform: translateX(-100%);

        transition:
            transform 0.28s ease,
            box-shadow 0.28s ease;

        box-shadow: none;
    }

    #koskSidebar.kosk-sidebar-visible {
        transform: translateX(0);

        box-shadow:
            12px 0 32px rgba(38, 20, 28, 0.18);
    }

    /*
    ----------------------------------------------------------
    Overlay
    ----------------------------------------------------------
    */

    .kosk-mobile-overlay {
        display: block;

        position: fixed;
        inset: 0;

        z-index: 1000;

        background: rgba(30, 20, 25, 0.38);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity 0.28s ease,
            visibility 0.28s ease;
    }

    .kosk-mobile-overlay.kosk-mobile-overlay-visible {
        opacity: 1;
        visibility: visible;
    }

    /*
    ----------------------------------------------------------
    Botón hamburguesa
    ----------------------------------------------------------
    */

    .kosk-mobile-menu-button {
        width: 42px;
        height: 42px;

        flex: 0 0 42px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border: 1px solid var(--border);
        border-radius: 12px;

        background: #ffffff;
        color: #491528;

        padding: 0;

        font-size: 22px;

        cursor: pointer;

        transition:
            background 0.2s ease,
            border-color 0.2s ease;
    }

    .kosk-mobile-menu-button:hover {
        background: #fff3f6;
        border-color: #f7becc;
    }

    /*
    ----------------------------------------------------------
    Topbar
    ----------------------------------------------------------
    */

    .topbar {
        min-height: 66px;
        height: auto;

        justify-content: flex-start;

        padding: 8px 18px;

        gap: 14px;
    }

    .topbar > img {
        width: auto !important;
        height: 42px !important;
        max-width: 120px !important;

        flex: 0 0 auto;

        object-fit: contain !important;
    }

    .topbar .search {
        display: none;
    }

    .kosk-topbar-user {
        margin-left: auto;

        max-width: 180px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
    ----------------------------------------------------------
    Contenido
    ----------------------------------------------------------
    */

    .content {
        padding: 18px;
    }
}

/* ==========================================================
   TELÉFONOS PEQUEÑOS
========================================================== */

@media (max-width: 480px) {

    .topbar {
        padding: 8px 12px;
        gap: 10px;
    }

    .kosk-mobile-menu-button {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 21px;
    }

    .topbar > img {
        width: auto !important;
        height: 36px !important;
        max-width: 95px !important;
    }

    .kosk-topbar-user {
        max-width: 105px;

        font-size: 12px;
    }

    .content {
        padding: 15px 12px;
    }
}

/* ==========================================================
   CONTROL DEFINITIVO DEL BOTÓN MÓVIL
========================================================== */

/* Escritorio: completamente oculto */
@media (min-width: 901px) {

    #koskMobileMenuButton {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

}

/* Móvil y tablet: visible */
@media (max-width: 900px) {

    #koskMobileMenuButton {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        width: 42px !important;
        height: 42px !important;

        flex: 0 0 42px;

        align-items: center;
        justify-content: center;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid var(--border);
        border-radius: 12px;

        background: #ffffff;
        color: #491528;

        font-size: 22px;
        cursor: pointer;
        overflow: visible !important;
    }

}