/* =========================================================
   GESTIÓN BULLCOC
   INTERFAZ SUPERIOR SIN BARRA LATERAL
========================================================= */


* {
    box-sizing: border-box;
}


:root {

    --bullcoc-red:
        #d6001c;

    --bullcoc-red-dark:
        #b00018;

    --black:
        #171717;

    --text:
        #202020;

    --muted:
        #717171;

    --border:
        #e0e0e0;

    --surface:
        #ffffff;

    --workspace:
        #f5f5f6;

}


html,
body {

    margin:
        0;

    width:
        100%;

    min-height:
        100%;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--workspace);

    color:
        var(--text);

}


body {

    overflow-x:
        hidden;

}



/* =========================================================
   SISTEMA
========================================================= */

.system-shell {

    min-height:
        100vh;

    display:
        flex;

    flex-direction:
        column;

}



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

.topbar {

    height:
        55px;

    flex-shrink:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(240px, 1fr)
        auto
        minmax(240px, 1fr);

    align-items:
        center;

    gap:
        20px;

    padding:
        0 18px;

    background:
        var(--black);

    color:
        #ffffff;

}


.topbar-brand {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.topbar-logo {

    width:
        142px;

    height:
        41px;

    object-fit:
        contain;

    object-position:
        left center;

}


.brand-divider {

    width:
        1px;

    height:
        22px;

    background:
        #3d3d3d;

}


.system-name {

    color:
        #a9a9a9;

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .03em;

}



/* =========================================================
   SUCURSAL
========================================================= */

.topbar-center {

    display:
        flex;

    justify-content:
        center;

}


.branch-box {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.branch-label {

    color:
        #818181;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


#locationSelector {

    width:
        230px;

    height:
        33px;

    padding:
        0 30px 0 10px;

    border:
        1px solid #3c3c3c;

    border-radius:
        4px;

    outline:
        none;

    background:
        #262626;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        10px;

}



/* =========================================================
   ACCIONES HEADER
========================================================= */

.topbar-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        7px;

}


.current-user {

    max-width:
        160px;

    margin-right:
        7px;

    overflow:
        hidden;

    color:
        #b8b8b8;

    font-size:
        10px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.header-icon-button {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid #3b3b3b;

    border-radius:
        4px;

    background:
        #242424;

    color:
        #dddddd;

    cursor:
        pointer;

}


.header-icon-button svg {

    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.header-icon-button:hover {

    background:
        #303030;

}


.logout-button {

    height:
        34px;

    padding:
        0 12px;

    border:
        1px solid #3b3b3b;

    border-radius:
        4px;

    background:
        #242424;

    color:
        #dddddd;

    font-family:
        inherit;

    font-size:
        10px;

    cursor:
        pointer;

}


.logout-button:hover {

    background:
        #303030;

}



/* =========================================================
   PESTAÑAS
========================================================= */

.main-tabs {

    height:
        36px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        stretch;

    gap:
        2px;

    padding:
        0 15px;

    background:
        #ffffff;

    border-bottom:
        1px solid #dedede;

}


.main-tab {

    position:
        relative;

    min-width:
        76px;

    padding:
        0 13px;

    border:
        none;

    background:
        transparent;

    color:
        #555555;

    font-family:
        inherit;

    font-size:
        10px;

    cursor:
        pointer;

}


.main-tab:hover {

    color:
        #111111;

    background:
        #fafafa;

}


.main-tab.active {

    color:
        var(--bullcoc-red);

    font-weight:
        600;

}


.main-tab.active::after {

    content:
        "";

    position:
        absolute;

    right:
        10px;

    bottom:
        -1px;

    left:
        10px;

    height:
        2px;

    background:
        var(--bullcoc-red);

}



/* =========================================================
   CINTA
========================================================= */

.command-bar {

    min-height:
        83px;

    flex-shrink:
        0;

    background:
        #ffffff;

    border-bottom:
        1px solid #d6d6d6;

    box-shadow:
        0 1px 2px rgba(0,0,0,.025);

}


.command-panel {

    display:
        none;

    min-height:
        83px;

    padding:
        6px 15px;

}


.command-panel.active {

    display:
        flex;

}


.command-group {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        3px;

}



/* =========================================================
   BOTONES CINTA
========================================================= */

.command-button {

    width:
        82px;

    min-height:
        69px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        7px 4px 5px;

    border:
        1px solid transparent;

    border-radius:
        5px;

    background:
        transparent;

    color:
        #444444;

    font-family:
        inherit;

    font-size:
        9px;

    line-height:
        1.1;

    text-align:
        center;

    cursor:
        pointer;

    transition:
        background .12s ease,
        border-color .12s ease;

}


.command-button:hover {

    background:
        #f6f6f7;

    border-color:
        #e5e5e5;

}


.command-button.active {

    background:
        #f0f0f1;

    border-color:
        #dddddd;

}


.command-icon {

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #555555;

}


.command-icon svg {

    width:
        25px;

    height:
        25px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.command-button:hover .command-icon {

    color:
        var(--bullcoc-red);

}


.command-text {

    max-width:
        76px;

}



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

main {

    width:
        100%;

    min-width:
        0;

    flex:
        1;

    padding:
        30px 34px 48px;

    background:
        var(--workspace);

}



/* =========================================================
   TÍTULOS
========================================================= */

h1 {

    margin:
        0;

    color:
        #171717;

    font-size:
        29px;

    line-height:
        1.12;

    font-weight:
        650;

    letter-spacing:
        -.025em;

}


h3 {

    margin:
        0 0 16px;

    color:
        #292929;

    font-size:
        15px;

    font-weight:
        600;

}


.sub {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin:
        7px 0 22px;

    color:
        #777777;

    font-size:
        12px;

}


.location-chip {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        23px;

    padding:
        3px 9px;

    border:
        1px solid #dddddf;

    border-radius:
        20px;

    background:
        #ffffff;

    color:
        #444444;

    font-size:
        9px;

    font-weight:
        600;

}



/* =========================================================
   KPI
========================================================= */

.grid {

    display:
        grid;

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

    gap:
        12px;

}


.card {

    min-width:
        0;

    padding:
        19px;

    background:
        #ffffff;

    border:
        1px solid #e0e0e2;

    border-radius:
        7px;

    box-shadow:
        0 1px 3px rgba(0,0,0,.025);

}


.grid .card {

    min-height:
        114px;

    display:
        flex;

    justify-content:
        center;

    flex-direction:
        column;

}


.label {

    margin-bottom:
        10px;

    color:
        #777777;

    font-size:
        9px;

    font-weight:
        650;

    letter-spacing:
        .035em;

}


.value {

    color:
        #171717;

    font-size:
        clamp(27px, 2.2vw, 34px);

    font-weight:
        650;

    letter-spacing:
        -.03em;

}



/* =========================================================
   DOS COLUMNAS
========================================================= */

.two {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, .85fr);

    gap:
        12px;

    margin-top:
        12px;

}



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

.scroll {

    width:
        100%;

    overflow-x:
        auto;

}


table {

    width:
        100%;

    border-collapse:
        collapse;

}


th {

    padding:
        11px 10px;

    border-bottom:
        1px solid #d9d9db;

    color:
        #555555;

    font-size:
        10px;

    font-weight:
        650;

    text-align:
        left;

    white-space:
        nowrap;

}


td {

    padding:
        13px 10px;

    border-bottom:
        1px solid #eeeeef;

    color:
        #2e2e2e;

    font-size:
        12px;

    text-align:
        left;

    white-space:
        nowrap;

}


tbody tr:last-child td {

    border-bottom:
        none;

}


tbody tr:hover {

    background:
        #fafafa;

}



/* =========================================================
   INPUTS
========================================================= */

input,
.form-select {

    display:
        block;

    width:
        100%;

    height:
        40px;

    margin:
        0 0 9px;

    padding:
        0 11px;

    border:
        1px solid #d2d2d4;

    border-radius:
        5px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #292929;

    font-family:
        inherit;

    font-size:
        11px;

}


input:focus,
.form-select:focus {

    border-color:
        #999999;

}



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

.primary-button {

    min-height:
        38px;

    padding:
        0 13px;

    border:
        1px solid #292929;

    border-radius:
        5px;

    background:
        #292929;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        600;

    cursor:
        pointer;

}


.primary-button:hover {

    background:
        #383838;

}



/* =========================================================
   ADMINISTRACIÓN
========================================================= */

.management-row {

    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        11px 0;

    border-bottom:
        1px solid #ececee;

}


.management-row:last-child {

    border-bottom:
        none;

}


.management-info {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.management-info strong {

    color:
        #252525;

    font-size:
        12px;

}


.management-info span {

    color:
        #666666;

    font-size:
        10px;

}


.management-info small {

    color:
        #999999;

    font-size:
        9px;

}


.management-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        6px;

}


.management-actions button {

    min-height:
        32px;

    padding:
        0 10px;

    border:
        1px solid #d5d5d7;

    border-radius:
        5px;

    background:
        #ffffff;

    color:
        #353535;

    font-family:
        inherit;

    font-size:
        9px;

    cursor:
        pointer;

}


.management-actions button:hover {

    background:
        #f4f4f5;

}


.danger-button {

    color:
        #ac2424 !important;

}



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

.login-screen {

    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        #eeeeef;

    overflow:
        hidden;

}


.login-background-image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    display:
        none;

    object-fit:
        cover;

    object-position:
        center;

    z-index:
        0;

}


.login-screen::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

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

    opacity:
        0;

}


.login-screen:has(.login-background-image[src])::after {

    opacity:
        1;

}


.login-box {

    position:
        relative;

    z-index:
        2;

    width:
        365px;

    max-width:
        100%;

    padding:
        31px;

    background:
        #ffffff;

    border:
        1px solid #dedee0;

    border-radius:
        9px;

    box-shadow:
        0 18px 55px rgba(0,0,0,.09);

}


.login-logo {

    display:
        block;

    width:
        215px;

    height:
        82px;

    margin:
        0 auto 20px;

    object-fit:
        contain;

}


.login-box h2 {

    margin:
        0;

    color:
        #1d1d1d;

    font-size:
        20px;

    font-weight:
        650;

}


.login-box p {

    margin:
        6px 0 21px;

    color:
        #858585;

    font-size:
        11px;

}


.login-button {

    width:
        100%;

    height:
        40px;

    border:
        none;

    border-radius:
        5px;

    background:
        var(--bullcoc-red);

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        600;

    cursor:
        pointer;

}


.login-button:hover {

    background:
        var(--bullcoc-red-dark);

}


#loginError {

    min-height:
        17px;

    margin-top:
        9px;

    color:
        #ad2020;

    font-size:
        10px;

}



/* =========================================================
   MÓVIL
========================================================= */

.mobile-nav {

    display:
        none;

}



/* =========================================================
   TABLET
========================================================= */

@media (
    max-width:
    1050px
) {

    .topbar {

        grid-template-columns:
            1fr auto;

    }


    .topbar-center {

        display:
            none;

    }


    .command-bar {

        overflow-x:
            auto;

    }


    .command-panel.active {

        width:
            max-content;

        min-width:
            100%;

    }


    .grid {

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

    }


    .two {

        grid-template-columns:
            1fr;

    }


    main {

        padding:
            24px 21px 40px;

    }

}



/* =========================================================
   CELULAR
========================================================= */

@media (
    max-width:
    720px
) {

    .topbar {

        height:
            52px;

        padding:
            0 9px;

    }


    .topbar-logo {

        width:
            102px;

        height:
            35px;

    }


    .brand-divider,
    .system-name,
    .current-user {

        display:
            none;

    }


    .topbar-actions {

        gap:
            4px;

    }


    .main-tabs {

        height:
            36px;

        overflow-x:
            auto;

        padding:
            0 3px;

    }


    .main-tab {

        min-width:
            78px;

        flex-shrink:
            0;

    }


    .command-bar {

        min-height:
            78px;

        overflow-x:
            auto;

    }


    .command-panel {

        min-height:
            78px;

        padding:
            5px;

    }


    .command-button {

        width:
            70px;

        min-height:
            65px;

    }


    main {

        padding:
            19px 12px 74px;

    }


    h1 {

        font-size:
            24px;

    }


    .grid {

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

        gap:
            8px;

    }


    .card {

        padding:
            14px;

    }


    .grid .card {

        min-height:
            100px;

    }


    .value {

        font-size:
            23px;

    }


    .two {

        gap:
            9px;

        margin-top:
            9px;

    }


    .management-row {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .mobile-nav {

        position:
            fixed;

        right:
            0;

        bottom:
            0;

        left:
            0;

        z-index:
            1000;

        display:
            grid;

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

        height:
            55px;

        background:
            rgba(255,255,255,.98);

        border-top:
            1px solid #d6d6d8;

    }


    .mobile-nav button {

        border:
            none;

        background:
            transparent;

        color:
            #666666;

        font-family:
            inherit;

        font-size:
            9px;

    }


    .mobile-nav button.active {

        color:
            var(--bullcoc-red);

        background:
            #f6f6f7;

        font-weight:
            600;

    }

}



/* =========================================================
   CELULAR CHICO
========================================================= */

@media (
    max-width:
    430px
) {

    .grid {

        grid-template-columns:
            1fr;

    }

}   

/* =========================================================
   PERSONALIZACIÓN DE EMPRESA
========================================================= */

.branding-card {
    display: grid;
    grid-template-columns: minmax(250px, .75fr) minmax(320px, 1.25fr);
    gap: 28px;
    max-width: 900px;
}

.branding-preview-column,
.branding-form-column {
    min-width: 0;
}

.branding-preview-box {
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    margin-bottom: 10px;
    border: 1px dashed #d3d3d5;
    border-radius: 7px;
    background: #fafafa;
}

.branding-preview-box img {
    display: block;
    max-width: 100%;
    max-height: 130px;
    object-fit: contain;
}

.branding-form-column label {
    display: block;
    margin: 0 0 7px;
    color: #444444;
    font-size: 11px;
    font-weight: 650;
}

.branding-form-column input[type="text"],
.branding-form-column input[type="file"] {
    width: 100%;
    min-height: 39px;
    margin: 0 0 18px;
    padding: 8px 10px;
    border: 1px solid #d5d5d7;
    border-radius: 5px;
    background: #ffffff;
    color: #222222;
    font-family: inherit;
    font-size: 11px;
}

.branding-form-column input[type="file"] {
    padding: 7px;
}

.branding-help {
    display: block;
    margin: -10px 0 18px;
    color: #808080;
    font-size: 10px;
    line-height: 1.4;
}

.branding-preview-column .branding-help {
    margin: 0;
    text-align: center;
}

.branding-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.branding-actions .primary-button,
.branding-actions .secondary-button {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
}

.branding-actions .primary-button {
    border: 1px solid var(--bullcoc-red-dark);
    background: var(--bullcoc-red);
    color: #ffffff;
}

.branding-actions .secondary-button {
    border: 1px solid #d6d6d8;
    background: #ffffff;
    color: #444444;
}

.management-message {
    min-height: 18px;
    margin-top: 12px;
    color: #555555;
    font-size: 10px;
}

@media (max-width: 760px) {
    .branding-card {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   FOTO DE PORTADA DEL LOGIN
========================================================= */

.login-background-preview {
    width: 100%;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    border: 1px solid #dddddf;
    border-radius: 7px;
    background: #f4f4f5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #777777;
    font-size: 11px;
    overflow: hidden;
}


/* =========================================================
   ICONOS PNG DEL SISTEMA
   Archivos fuente: 100 x 100 px
========================================================= */

.command-icon {
    width: 38px;
    height: 38px;
}

.command-icon img {
    width: 36px;
    height: 36px;
    display: block;
    object-fit: contain;
    object-position: center;
    user-select: none;
    pointer-events: none;
}

.command-icon svg {
    display: none;
}

.header-png-icon {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.logout-png-icon {
    width: 18px;
    height: 18px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.main-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.main-tab-icon {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.mobile-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.mobile-nav-icon {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}


/* =========================================================
   ESTÉTICA TIPO FACTURASION
   Interfaz clara de escritorio + iconos 3D
========================================================= */

:root {
    --erp-blue: #2f74b5;
    --erp-blue-dark: #245f99;
    --erp-blue-soft: #eaf3fb;
    --erp-line: #c8d2dc;
    --erp-line-soft: #dce4eb;
    --erp-panel: #f7f9fb;
    --erp-panel-2: #edf2f6;
    --erp-title: #263b50;
    --erp-text: #25313d;
    --erp-muted: #6e7d8b;
}

html,
body {
    background: #e8edf2;
    color: var(--erp-text);
}

.system-shell {
    background: #e8edf2;
}

/* ----- Cabecera tipo software de escritorio ----- */
.topbar {
    height: 60px;
    grid-template-columns: minmax(250px, 1fr) auto minmax(280px, 1fr);
    gap: 18px;
    padding: 0 15px;
    background: linear-gradient(#ffffff, #eef3f7);
    color: var(--erp-text);
    border-bottom: 1px solid #b8c5d1;
    box-shadow: 0 1px 3px rgba(45, 70, 92, .15);
}

.topbar-logo {
    width: 150px;
    height: 45px;
}

.brand-divider {
    height: 28px;
    background: #cbd5de;
}

.system-name {
    color: #53687a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.branch-label {
    color: #4f6477;
    font-size: 9px;
    font-weight: 800;
}

#locationSelector {
    width: 245px;
    height: 34px;
    border: 1px solid #aebdca;
    border-radius: 4px;
    background: linear-gradient(#ffffff, #edf3f7);
    color: #26394b;
    box-shadow: inset 0 1px 0 #ffffff;
    font-size: 10px;
    font-weight: 600;
}

.current-user {
    color: #4c6173;
    font-size: 10px;
    font-weight: 600;
}

.header-icon-button,
.logout-button {
    height: 36px;
    border: 1px solid #b9c6d1;
    border-radius: 5px;
    background: linear-gradient(#ffffff, #e7edf2);
    color: #33495c;
    box-shadow: 0 1px 1px rgba(0,0,0,.05), inset 0 1px 0 #fff;
}

.header-icon-button:hover,
.logout-button:hover {
    border-color: #8facbf;
    background: linear-gradient(#ffffff, #dce9f3);
}

.header-png-icon {
    width: 25px;
    height: 25px;
}

.logout-png-icon {
    width: 23px;
    height: 23px;
}

.logout-button span {
    font-weight: 700;
}

/* ----- Pestañas tipo ribbon ----- */
.main-tabs {
    height: 39px;
    padding: 3px 12px 0;
    gap: 3px;
    background: linear-gradient(#f7fafc, #e8eef3);
    border-bottom: 1px solid #b9c6d1;
}

.main-tab {
    min-width: 105px;
    height: 35px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #405469;
    font-size: 10px;
    font-weight: 700;
}

.main-tab-icon {
    width: 22px;
    height: 22px;
}

.main-tab:hover {
    color: #204f78;
    background: rgba(255,255,255,.7);
    border-color: #c9d5df;
}

.main-tab.active {
    color: #184f7f;
    background: #ffffff;
    border-color: #91b4d0;
    box-shadow: inset 0 3px 0 var(--erp-blue);
}

.main-tab.active::after {
    display: none;
}

/* ----- Cinta de accesos con botones grandes ----- */
.command-bar {
    min-height: 103px;
    background: linear-gradient(#ffffff, #f1f5f8);
    border-bottom: 1px solid #b8c5d1;
    box-shadow: 0 2px 4px rgba(35,58,79,.10);
}

.command-panel {
    min-height: 103px;
    padding: 8px 13px 9px;
}

.command-group {
    gap: 6px;
}

.command-button {
    width: 96px;
    min-height: 84px;
    gap: 5px;
    padding: 6px 4px 5px;
    border: 1px solid #c5d0da;
    border-radius: 6px;
    background: linear-gradient(#ffffff 0%, #f8fafc 50%, #e9eef3 100%);
    color: #2d4357;
    font-size: 9px;
    font-weight: 650;
    box-shadow: 0 1px 2px rgba(32,54,73,.08), inset 0 1px 0 #ffffff;
}

.command-button:hover {
    background: linear-gradient(#ffffff, #edf6fd);
    border-color: #83add0;
    box-shadow: 0 0 0 1px rgba(47,116,181,.08), 0 2px 4px rgba(32,54,73,.10);
}

.command-button.active {
    background: linear-gradient(#f7fbff, #dfeffc);
    border-color: var(--erp-blue);
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px rgba(47,116,181,.08);
    color: #164f80;
}

.command-icon {
    width: 49px;
    height: 49px;
}

.command-icon img {
    width: 47px;
    height: 47px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.13));
}

.command-text {
    max-width: 88px;
    color: inherit;
    line-height: 1.08;
}

/* ----- Área de trabajo ----- */
main {
    padding: 24px 28px 44px;
    background: #edf1f5;
}

h1 {
    color: var(--erp-title);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.018em;
    text-shadow: 0 1px 0 #fff;
}

h3 {
    color: #30475a;
}

.sub {
    color: #71808e;
}

.location-chip {
    border-color: #bfcbd5;
    background: linear-gradient(#ffffff, #edf2f6);
    color: #486074;
    box-shadow: inset 0 1px 0 #fff;
}

/* ----- Tarjetas / paneles ----- */
.card {
    padding: 18px;
    background: linear-gradient(#ffffff, #f9fbfc);
    border: 1px solid #cbd5de;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(37,58,77,.08), inset 0 1px 0 #ffffff;
}

.grid {
    gap: 10px;
}

.grid .card {
    min-height: 106px;
    border-top: 3px solid #8eb5d5;
}

.label {
    color: #667b8d;
    font-weight: 750;
}

.value {
    color: #20394f;
    font-weight: 700;
}

.two {
    gap: 10px;
}

/* ----- Tablas tipo ERP ----- */
.scroll {
    border: 1px solid #cbd5de;
    border-radius: 5px;
    background: #ffffff;
}

table {
    background: #ffffff;
}

th {
    padding: 10px 9px;
    border-bottom: 1px solid #aebdca;
    background: linear-gradient(#f7fafc, #e2eaf0);
    color: #385064;
    font-size: 10px;
    font-weight: 750;
    text-shadow: 0 1px 0 #fff;
}

td {
    padding: 11px 9px;
    border-bottom: 1px solid #e0e6eb;
    color: #2c3945;
}

tbody tr:nth-child(even) {
    background: #fbfcfd;
}

tbody tr:hover {
    background: #eef6fc;
}

/* ----- Formularios ----- */
input,
.form-select {
    height: 38px;
    border: 1px solid #b8c5d0;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(35,58,79,.05);
}

input:focus,
.form-select:focus {
    border-color: #699bc4;
    box-shadow: 0 0 0 2px rgba(47,116,181,.10);
}

/* ----- Botones de acciones ----- */
.primary-button {
    border: 1px solid #235e93;
    border-radius: 5px;
    background: linear-gradient(#4d91ca, #2f74b5);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.08);
}

.primary-button:hover {
    background: linear-gradient(#5b9bd0, #286aa7);
}

.secondary-button,
.management-actions button {
    border: 1px solid #bdc9d3;
    background: linear-gradient(#ffffff, #e9eef3);
    color: #344b5f;
    box-shadow: inset 0 1px 0 #ffffff;
}

.secondary-button:hover,
.management-actions button:hover {
    background: linear-gradient(#ffffff, #dfe9f1);
    border-color: #9bb2c5;
}

.management-row {
    border-bottom-color: #dce4ea;
}

/* ----- Personalización ----- */
.branding-card {
    border-top: 3px solid #7ca9cd;
}

.branding-preview-box,
.login-background-preview {
    border-color: #bac8d3;
    background-color: #eef3f7;
}

.branding-actions .primary-button {
    border-color: #235e93;
    background: linear-gradient(#4d91ca, #2f74b5);
}

.branding-actions .secondary-button {
    border-color: #bdc9d3;
    background: linear-gradient(#ffffff, #e9eef3);
    color: #344b5f;
}

/* ----- Login, conservando la foto elegida ----- */
.login-screen {
    background: linear-gradient(135deg, #dce5ed, #f4f7f9);
}

.login-box {
    width: 375px;
    padding: 30px;
    border: 1px solid #b8c6d1;
    border-radius: 7px;
    background: linear-gradient(#ffffff, #f7f9fb);
    box-shadow: 0 18px 50px rgba(30,49,66,.20), inset 0 1px 0 #fff;
}

.login-box h2 {
    color: #263f55;
}

.login-box p {
    color: #6f7e8b;
}

.login-button {
    border: 1px solid #235e93;
    background: linear-gradient(#4d91ca, #2f74b5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

.login-button:hover {
    background: linear-gradient(#5b9bd0, #286aa7);
}

/* ----- Móvil ----- */
@media (max-width: 760px) {
    .topbar {
        background: linear-gradient(#ffffff, #eef3f7);
    }

    .command-bar {
        background: #f6f9fb;
    }

    .command-button {
        width: 88px;
        min-height: 79px;
    }

    .command-icon {
        width: 44px;
        height: 44px;
    }

    .command-icon img {
        width: 42px;
        height: 42px;
    }

    .mobile-nav {
        background: linear-gradient(#ffffff, #e8eef3);
        border-top-color: #bac7d2;
    }

    .mobile-nav button.active {
        color: #1f5e91;
        background: #e6f1fa;
    }
}
/* =========================================================
   APLICACIÓN INSTALABLE / ESTADO DE CONEXIÓN
========================================================= */

.connection-notice {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 10000;
    max-width: calc(100vw - 32px);
    padding: 11px 18px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    transform: translateX(-50%);
    transition: opacity .25s ease, transform .25s ease;
}

.connection-notice--offline {
    background: #9a3412;
}

.connection-notice--online {
    background: #166534;
}

.connection-notice--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
}

.install-app-button {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    padding: 11px 16px;
    border: 0;
    border-radius: 10px;
    background: #0f4c5c;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15, 76, 92, .28);
}

.install-app-button[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .install-app-button {
        right: 12px;
        bottom: 12px;
    }

    .connection-notice {
        bottom: 68px;
    }
}