.elementor-4686 .elementor-element.elementor-element-5e170de{--display:flex;--min-height:100vh;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4686 .elementor-element.elementor-element-5e170de:not(.elementor-motion-effects-element-type-background), .elementor-4686 .elementor-element.elementor-element-5e170de > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}@media(min-width:768px){.elementor-4686 .elementor-element.elementor-element-5e170de{--content-width:100vw;}}/* Start custom CSS for html, class: .elementor-element-07344cc *//* =========================================
   CONTENEDOR DEL WIDGET ELEMENTOR
========================================= */

.elementor-4686 .elementor-element.elementor-element-07344cc{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
}

.elementor-4686 .elementor-element.elementor-element-07344cc .elementor-widget-container{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
}


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

#znCotizacionesAuth{

    --zn-orange:#ff6500;
    --zn-orange-hover:#e95c00;
    --zn-orange-light:#ff8533;

    --zn-black:#070707;
    --zn-black-soft:#0d0d0d;
    --zn-card:#151515;
    --zn-card-light:#1a1a1a;

    --zn-gray-dark:#252525;
    --zn-gray:#696969;
    --zn-gray-light:#a9a9a9;

    --zn-white:#ffffff;

    --zn-border:rgba(255,255,255,.09);
    --zn-border-orange:rgba(255,101,0,.35);

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

    margin:0;
    padding:0;

    position:relative;
    overflow:hidden;

    color:var(--zn-white);

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255,101,0,.18),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #090909 0%,
            #101010 100%
        );

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

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}


/* =========================================
   REINICIO LOCAL
========================================= */

#znCotizacionesAuth *,
#znCotizacionesAuth *::before,
#znCotizacionesAuth *::after{
    box-sizing:border-box;
}

#znCotizacionesAuth [hidden]{
    display:none !important;
}

#znCotizacionesAuth button,
#znCotizacionesAuth input{
    font:inherit;
}

#znCotizacionesAuth button{
    -webkit-tap-highlight-color:transparent;
}

#znCotizacionesAuth input{
    appearance:none;
    -webkit-appearance:none;
}


/* =========================================
   COMPROBANDO SESIÓN
========================================= */

.zn-auth-loader{

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

    padding:
        max(24px,env(safe-area-inset-top))
        20px
        max(24px,env(safe-area-inset-bottom));

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

    gap:16px;

    color:#a8a8a8;

    font-size:14px;
    font-weight:500;
}

.zn-auth-spinner{

    width:40px;
    height:40px;

    border:3px solid rgba(255,255,255,.1);
    border-top-color:var(--zn-orange);

    border-radius:50%;

    animation:znAuthRotate .8s linear infinite;
}

@keyframes znAuthRotate{

    to{
        transform:rotate(360deg);
    }

}


/* =========================================
   LOGIN MOBILE FIRST
========================================= */

.zn-login-shell{

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

    padding:
        max(20px,env(safe-area-inset-top))
        16px
        max(20px,env(safe-area-inset-bottom));

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


/* =========================================
   PANEL IZQUIERDO
   OCULTO EN CELULAR
========================================= */

.zn-login-brand{
    display:none;
}


/* =========================================
   PANEL DEL FORMULARIO
========================================= */

.zn-login-panel{

    width:100%;
    min-width:0;

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

.zn-login-card{

    width:100%;
    max-width:460px;

    padding:28px 20px;

    position:relative;

    border:1px solid rgba(255,255,255,.075);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(27,27,27,.98),
            rgba(14,14,14,.99)
        );

    box-shadow:
        0 24px 60px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.035);
}


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

.zn-brand-logo{

    width:100%;

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

.zn-mobile-brand{

    width:100%;

    margin-bottom:32px;

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

.zn-logo-image{

    display:block;

    width:auto;
    max-width:100%;
    height:auto;

    object-fit:contain;
}


/* =========================================
   LOGO EN CELULAR
========================================= */

.zn-logo-mobile{

    width:190px;
    max-width:70vw;
    max-height:74px;
}


/* =========================================
   LOGO EN ESCRITORIO
========================================= */

.zn-logo-desktop{

    width:310px;
    max-width:72%;
    max-height:115px;

    object-position:left center;
}


/* =========================================
   LOGO EN VISTA PRIVADA
========================================= */

.zn-private-logo{

    width:100%;

    margin-bottom:25px;

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

.zn-logo-private{

    width:185px;
    max-width:65vw;
    max-height:72px;
}

/* =========================================
   ENCABEZADO DEL LOGIN
========================================= */

.zn-login-header{
    margin-bottom:30px;
}

.zn-login-eyebrow,
.zn-brand-label,
.zn-private-label{

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

    color:var(--zn-orange);

    font-size:10px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.zn-login-eyebrow::before,
.zn-brand-label::before,
.zn-private-label::before{

    content:"";

    width:22px;
    height:2px;

    margin-right:9px;

    background:var(--zn-orange);

    border-radius:20px;
}

.zn-login-header h2{

    margin:13px 0 9px;

    color:#fff;

    font-size:30px;
    font-weight:760;
    line-height:1.12;
    letter-spacing:-.8px;
}

.zn-login-header p{

    margin:0;

    color:#969696;

    font-size:14px;
    line-height:1.6;
}


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

.zn-login-form{
    width:100%;
}

.zn-form-group{
    margin-bottom:20px;
}

.zn-form-group label{

    display:block;

    margin-bottom:9px;

    color:#d7d7d7;

    font-size:13px;
    font-weight:650;
}

.zn-input-container{

    width:100%;
    min-width:0;
    height:58px;

    display:flex;
    align-items:center;

    position:relative;

    border:1px solid rgba(255,255,255,.11);
    border-radius:12px;

    background:#0d0d0d;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.zn-input-container:focus-within{

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

    background:#111;

    box-shadow:
        0 0 0 4px rgba(255,101,0,.1);
}


/* =========================================
   ICONOS DE LOS CAMPOS
========================================= */

.zn-input-icon{

    width:50px;
    height:100%;

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

    flex:0 0 50px;

    color:#696969;
}

.zn-input-icon svg{

    width:20px;
    height:20px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}


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

.zn-input-container input{

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

    padding:0 14px 0 0;

    border:0;
    outline:0;

    background:transparent;

    color:#fff;

    /*
    16 px evita que iPhone amplíe
    automáticamente la pantalla.
    */

    font-size:16px;
    font-weight:450;
}

.zn-input-container input::placeholder{
    color:#555;
}

.zn-input-container input:-webkit-autofill,
.zn-input-container input:-webkit-autofill:hover,
.zn-input-container input:-webkit-autofill:focus{

    -webkit-text-fill-color:#fff;

    box-shadow:
        0 0 0 1000px #0d0d0d inset;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* =========================================
   MOSTRAR CONTRASEÑA
========================================= */

.zn-toggle-password{

    width:54px;
    height:100%;

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

    flex:0 0 54px;

    padding:0;

    border:0;
    outline:0;

    background:transparent;

    color:#747474;

    cursor:pointer;

    touch-action:manipulation;

    transition:
        color .2s ease,
        background .2s ease;
}

.zn-toggle-password:active{

    background:rgba(255,101,0,.08);

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

.zn-toggle-password:focus-visible{

    outline:2px solid var(--zn-orange);
    outline-offset:-5px;

    border-radius:10px;
}

.zn-toggle-password svg{

    width:21px;
    height:21px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================
   RECORDAR SESIÓN
========================================= */

.zn-login-options{

    min-height:44px;

    margin:1px 0 21px;

    display:flex;
    align-items:center;
}

.zn-checkbox-label{

    min-height:44px;

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

    gap:11px;

    position:relative;

    color:#aaa;

    font-size:13px;
    font-weight:500;

    cursor:pointer;
    user-select:none;

    touch-action:manipulation;
}

.zn-checkbox-label input{

    width:1px;
    height:1px;

    position:absolute;

    opacity:0;
    pointer-events:none;
}

.zn-custom-checkbox{

    width:20px;
    height:20px;

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

    flex:0 0 20px;

    border:1px solid #555;
    border-radius:5px;

    background:#0d0d0d;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.zn-checkbox-label input:checked + .zn-custom-checkbox{

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

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

.zn-checkbox-label input:checked + .zn-custom-checkbox::after{

    content:"";

    width:5px;
    height:9px;

    border:solid #fff;
    border-width:0 2px 2px 0;

    transform:
        translateY(-1px)
        rotate(45deg);
}

.zn-checkbox-label input:focus-visible + .zn-custom-checkbox{

    box-shadow:
        0 0 0 4px rgba(255,101,0,.14);
}


/* =========================================
   MENSAJES DEL LOGIN
========================================= */

.zn-login-message{

    margin-bottom:18px;
    padding:14px 15px;

    border-radius:10px;

    font-size:13px;
    font-weight:550;
    line-height:1.5;
}

.zn-login-message.error{

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

    background:rgba(255,75,75,.09);

    color:#ff9a9a;
}

.zn-login-message.info{

    border:1px solid rgba(255,101,0,.27);

    background:rgba(255,101,0,.09);

    color:#ffb07d;
}

.zn-login-message.success{

    border:1px solid rgba(66,201,114,.25);

    background:rgba(66,201,114,.09);

    color:#90e0ab;
}


/* =========================================
   BOTÓN INICIAR SESIÓN
========================================= */

.zn-login-button{

    width:100%;
    min-height:58px;

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

    gap:10px;

    padding:0 24px;

    border:0;
    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            var(--zn-orange),
            #ff7900
        );

    color:#fff;

    font-size:15px;
    font-weight:750;

    cursor:pointer;

    touch-action:manipulation;

    box-shadow:
        0 14px 32px rgba(255,101,0,.21);

    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease;
}

.zn-login-button:active{

    transform:scale(.985);

    filter:brightness(.96);
}

.zn-login-button:focus-visible{

    outline:3px solid rgba(255,101,0,.35);
    outline-offset:3px;
}

.zn-login-button:disabled{

    opacity:.7;

    cursor:not-allowed;

    transform:none;
}

.zn-button-loader{

    width:21px;
    height:21px;

    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;

    border-radius:50%;

    animation:znAuthRotate .7s linear infinite;
}


/* =========================================
   PIE DEL LOGIN
========================================= */

.zn-login-footer{

    margin-top:28px;
    padding-top:22px;

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

    text-align:center;
}

.zn-security-indicator{

    min-height:28px;

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

    gap:9px;

    color:#838383;

    font-size:11px;
    font-weight:550;
}

.zn-security-indicator span{

    width:8px;
    height:8px;

    flex:0 0 8px;

    border-radius:50%;

    background:#42c972;

    box-shadow:
        0 0 0 4px rgba(66,201,114,.09);
}

.zn-login-footer p{

    margin:7px 0 0;

    color:#595959;

    font-size:10px;
    line-height:1.4;
}


/* =========================================
   CONTENIDO DEL PANEL IZQUIERDO
   SE UTILIZA EN ESCRITORIO
========================================= */

.zn-brand-content{

    width:100%;
    max-width:670px;

    position:relative;
    z-index:2;
}

.zn-brand-message{
    margin-top:72px;
}

.zn-brand-message h1{

    max-width:640px;

    margin:22px 0 24px;

    color:#fff;

    font-size:clamp(42px,4.2vw,68px);
    font-weight:760;
    line-height:1.06;
    letter-spacing:-2.5px;
}

.zn-brand-message p{

    max-width:530px;

    margin:0;

    color:#a4a4a4;

    font-size:16px;
    line-height:1.7;
}

.zn-brand-features{

    margin-top:64px;

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

    gap:15px;
}

.zn-brand-feature{

    min-width:0;

    padding:20px;

    border:1px solid var(--zn-border);
    border-radius:14px;

    background:rgba(255,255,255,.025);
}

.zn-brand-feature span{

    display:block;

    margin-bottom:14px;

    color:var(--zn-orange);

    font-size:11px;
    font-weight:800;
    letter-spacing:1.4px;
}

.zn-brand-feature p{

    margin:0;

    color:#b3b3b3;

    font-size:12px;
    line-height:1.55;
}


/* =========================================
   DECORACIÓN DE ESCRITORIO
========================================= */

.zn-brand-decoration{

    position:absolute;

    right:-130px;
    bottom:-150px;

    width:430px;
    height:430px;

    border:1px solid rgba(255,101,0,.15);
    border-radius:50%;

    pointer-events:none;
}

.zn-decoration-circle{

    position:absolute;

    inset:75px;

    border:1px solid rgba(255,101,0,.1);
    border-radius:50%;
}

.zn-decoration-line{

    width:520px;
    height:1px;

    position:absolute;
    top:110px;
    left:-130px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,101,0,.25),
            transparent
        );

    transform:rotate(-35deg);
}


/* =========================================
   VISTA PRIVADA TEMPORAL
========================================= */

.zn-private-view{

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

    padding:
        max(20px,env(safe-area-inset-top))
        16px
        max(20px,env(safe-area-inset-bottom));

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

.zn-private-card{

    width:100%;
    max-width:520px;

    padding:36px 22px;

    border:1px solid var(--zn-border);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(27,27,27,.98),
            rgba(13,13,13,.99)
        );

    box-shadow:
        0 25px 65px rgba(0,0,0,.48);

    text-align:center;
}

.zn-private-check{

    width:66px;
    height:66px;

    margin:0 auto 26px;

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

    border-radius:50%;

    background:rgba(255,101,0,.12);

    color:var(--zn-orange);

    box-shadow:
        0 0 0 9px rgba(255,101,0,.035);
}

.zn-private-check svg{

    width:32px;
    height:32px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.zn-private-label{

    justify-content:center;
}

.zn-private-label::before{
    display:none;
}

.zn-private-card h2{

    margin:14px 0 12px;

    color:#fff;

    font-size:29px;
    font-weight:750;
    letter-spacing:-.8px;
}

.zn-private-card > p{

    max-width:410px;

    margin:0 auto;

    color:#999;

    font-size:14px;
    line-height:1.65;
}

.zn-user-session{

    margin:28px 0 22px;
    padding:17px 14px;

    display:flex;
    flex-direction:column;

    gap:6px;

    border:1px solid var(--zn-border);
    border-radius:11px;

    background:#0c0c0c;
}

.zn-user-session span{

    color:#747474;

    font-size:10px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.zn-user-session strong{

    color:#ddd;

    font-size:14px;
    font-weight:650;

    overflow-wrap:anywhere;
}

.zn-logout-button{

    width:100%;
    min-height:54px;

    padding:0 22px;

    border:1px solid rgba(255,101,0,.45);
    border-radius:11px;

    background:rgba(255,101,0,.08);

    color:var(--zn-orange);

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

    cursor:pointer;

    touch-action:manipulation;

    transition:
        background .2s ease,
        color .2s ease,
        transform .16s ease;
}

.zn-logout-button:active{

    transform:scale(.985);

    background:var(--zn-orange);

    color:#fff;
}


/* =========================================
   CELULARES MUY PEQUEÑOS
========================================= */

@media(max-width:360px){

    .zn-login-shell{
        padding-left:12px;
        padding-right:12px;
    }

    .zn-login-card{
        padding:25px 17px;
    }

    .zn-brand-symbol{

        width:43px;
        height:43px;

        font-size:23px;
    }

    .zn-brand-name strong{
        font-size:19px;
    }

    .zn-login-header h2{
        font-size:28px;
    }

}


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

@media(min-width:600px){

    .zn-login-shell{

        padding:
            max(34px,env(safe-area-inset-top))
            30px
            max(34px,env(safe-area-inset-bottom));
    }

    .zn-login-card{

        padding:42px;

        border-radius:22px;
    }

    .zn-mobile-brand{
        margin-bottom:40px;
    }

    .zn-login-header h2{
        font-size:34px;
    }

    .zn-private-card{
        padding:48px;
    }

    .zn-logout-button{

        width:auto;
        min-width:180px;
    }

}


/* =========================================
   TABLET HORIZONTAL Y ESCRITORIO
========================================= */

@media(min-width:900px){

    #znCotizacionesAuth{

        background:
            radial-gradient(
                circle at 12% 15%,
                rgba(255,101,0,.16),
                transparent 30%
            ),
            radial-gradient(
                circle at 92% 90%,
                rgba(255,101,0,.07),
                transparent 30%
            ),
            linear-gradient(
                135deg,
                #070707 0%,
                #0d0d0d 50%,
                #111 100%
            );
    }

    .zn-login-shell{

        padding:0;

        display:grid;
        grid-template-columns:
            minmax(0,1fr)
            minmax(420px,470px);
    }

    .zn-login-brand{

        min-height:100vh;
        min-height:100dvh;

        padding:54px 48px;

        display:flex;
        align-items:center;

        position:relative;
        overflow:hidden;

        border-right:1px solid var(--zn-border);
    }

    .zn-login-panel{

        min-height:100vh;
        min-height:100dvh;

        padding:36px;

        background:rgba(7,7,7,.42);
    }

    .zn-login-card{

        max-width:460px;

        padding:42px;

        border-radius:22px;
    }

    .zn-mobile-brand{
        display:none;
    }

}


/* =========================================
   ESCRITORIO AMPLIO
========================================= */

@media(min-width:1200px){

    .zn-login-shell{

        grid-template-columns:
            minmax(0,1.18fr)
            minmax(470px,.82fr);
    }

    .zn-login-brand{

        padding:
            64px
            clamp(65px,7vw,115px);
    }

    .zn-login-panel{
        padding:48px;
    }

    .zn-login-card{
        padding:48px;
    }

    .zn-brand-message{
        margin-top:88px;
    }

    .zn-brand-features{
        margin-top:82px;
    }

}


/* =========================================
   DISPOSITIVOS CON MOUSE
========================================= */

@media(hover:hover) and (pointer:fine){

    .zn-toggle-password:hover{
        color:var(--zn-orange);
    }

    .zn-login-button:hover{

        transform:translateY(-2px);

        filter:brightness(1.05);

        box-shadow:
            0 18px 40px rgba(255,101,0,.28);
    }

    .zn-checkbox-label:hover .zn-custom-checkbox{
        border-color:var(--zn-orange);
    }

    .zn-brand-feature{

        transition:
            transform .2s ease,
            border-color .2s ease,
            background .2s ease;
    }

    .zn-brand-feature:hover{

        transform:translateY(-3px);

        border-color:rgba(255,101,0,.25);

        background:rgba(255,101,0,.035);
    }

    .zn-logout-button:hover{

        background:var(--zn-orange);

        color:#fff;
    }

}


/* =========================================
   REDUCIR MOVIMIENTOS
========================================= */

@media(prefers-reduced-motion:reduce){

    #znCotizacionesAuth *,
    #znCotizacionesAuth *::before,
    #znCotizacionesAuth *::after{

        scroll-behavior:auto !important;

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
    }

}

/* =========================================
   SISTEMA PRIVADO DE COTIZACIONES
   DISEÑO MOBILE FIRST
========================================= */

.zn-app-view{

    --zn-app-orange:#ff6500;
    --zn-app-orange-dark:#df5900;
    --zn-app-orange-soft:rgba(255,101,0,.12);

    --zn-app-white:#ffffff;
    --zn-app-text:#e8e8e8;
    --zn-app-muted:#929292;

    --zn-app-card:#151515;
    --zn-app-card-dark:#101010;
    --zn-app-input:#0d0d0d;

    --zn-app-border:rgba(255,255,255,.09);
    --zn-app-border-strong:rgba(255,255,255,.14);

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

    position:relative;

    color:var(--zn-app-text);

    background:transparent;

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


/* =========================================
   REINICIO LOCAL
========================================= */

.zn-app-view *,
.zn-app-view *::before,
.zn-app-view *::after{
    box-sizing:border-box;
}

.zn-app-view button,
.zn-app-view input,
.zn-app-view select,
.zn-app-view textarea{
    font:inherit;
}

.zn-app-view button{
    -webkit-tap-highlight-color:transparent;
}

.zn-app-view svg{

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================
   ESTRUCTURA PRINCIPAL
========================================= */

.zn-app-shell{

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

    position:relative;
}

.zn-app-main{

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

    padding-bottom:
        calc(
            110px +
            env(safe-area-inset-bottom)
        );
}


/* =========================================
   SIDEBAR
   OCULTO EN CELULAR
========================================= */

.zn-app-sidebar{
    display:none;
}


/* =========================================
   BARRA SUPERIOR MOBILE
========================================= */

.zn-app-topbar{

    width:100%;
    min-height:68px;

    padding:
        max(10px,env(safe-area-inset-top))
        16px
        10px;

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

    gap:14px;

    position:sticky;
    top:0;
    z-index:50;

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

    background:rgba(12,12,12,.88);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}


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

.zn-mobile-logo{

    min-width:0;

    display:flex;
    align-items:center;
}

.zn-mobile-logo img{

    display:block;

    width:145px;
    max-width:44vw;
    height:auto;
    max-height:44px;

    object-fit:contain;
    object-position:left center;
}


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

.zn-topbar-user{

    min-width:0;

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

    gap:10px;
}

.zn-topbar-user-info{

    min-width:0;

    display:none;
    flex-direction:column;
    align-items:flex-end;

    gap:3px;
}

.zn-topbar-user-info span{

    color:#696969;

    font-size:9px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.zn-topbar-user-info strong{

    max-width:240px;

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

    color:#d8d8d8;

    font-size:12px;
    font-weight:600;
}


/* =========================================
   CERRAR SESIÓN
========================================= */

.zn-topbar-logout{

    width:46px;
    height:46px;

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

    flex:0 0 46px;

    padding:0;

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

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

    color:#a4a4a4;

    cursor:pointer;
    touch-action:manipulation;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.zn-topbar-logout svg{

    width:21px;
    height:21px;
}

.zn-topbar-logout:active{

    transform:scale(.95);

    border-color:rgba(255,101,0,.45);

    background:var(--zn-app-orange-soft);

    color:var(--zn-app-orange);
}

.zn-topbar-logout:disabled{

    opacity:.55;
    cursor:not-allowed;
}


/* =========================================
   VISTAS DEL SISTEMA
========================================= */

.zn-system-view{

    width:100%;

    padding:
        24px
        16px
        28px;
}

.zn-system-view.activo{
    animation:znViewEnter .22s ease;
}

@keyframes znViewEnter{

    from{
        opacity:0;
        transform:translateY(5px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =========================================
   ENCABEZADO DE CADA VISTA
========================================= */

.zn-view-header{

    margin-bottom:24px;

    display:flex;
    flex-direction:column;

    gap:18px;
}

.zn-view-header > div{
    min-width:0;
}

.zn-view-eyebrow{

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

    color:var(--zn-app-orange);

    font-size:10px;
    font-weight:800;
    letter-spacing:1.7px;
    text-transform:uppercase;
}

.zn-view-eyebrow::before{

    content:"";

    width:22px;
    height:2px;

    margin-right:9px;

    border-radius:20px;

    background:var(--zn-app-orange);
}

.zn-view-header h1{

    margin:11px 0 7px;

    color:var(--zn-app-white);

    font-size:31px;
    font-weight:780;
    line-height:1.08;
    letter-spacing:-1px;
}

.zn-view-header p{

    margin:0;

    max-width:560px;

    color:var(--zn-app-muted);

    font-size:14px;
    line-height:1.55;
}


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

.zn-primary-button,
.zn-secondary-button,
.zn-text-button{

    border:0;
    outline:0;

    cursor:pointer;
    touch-action:manipulation;
}


/* =========================================
   BOTÓN PRINCIPAL
========================================= */

.zn-primary-button{

    width:100%;
    min-height:54px;

    padding:0 20px;

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

    gap:9px;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            var(--zn-app-orange),
            #ff7a00
        );

    color:#fff;

    font-size:14px;
    font-weight:750;

    box-shadow:
        0 12px 28px rgba(255,101,0,.19);

    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease;
}

.zn-primary-button > span:first-child{

    font-size:22px;
    font-weight:400;
    line-height:1;
}

.zn-primary-button:active{

    transform:scale(.985);

    filter:brightness(.95);
}

.zn-primary-button:focus-visible{

    outline:3px solid rgba(255,101,0,.3);
    outline-offset:3px;
}

.zn-desktop-action{
    display:none;
}


/* =========================================
   BOTÓN SECUNDARIO
========================================= */

.zn-secondary-button{

    min-height:48px;

    padding:0 18px;

    border:1px solid rgba(255,101,0,.36);
    border-radius:10px;

    background:rgba(255,101,0,.08);

    color:var(--zn-app-orange);

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

    transition:
        background .18s ease,
        color .18s ease,
        transform .16s ease;
}

.zn-secondary-button:active{

    transform:scale(.98);

    background:var(--zn-app-orange);

    color:#fff;
}


/* =========================================
   BOTÓN DE TEXTO
========================================= */

.zn-text-button{

    min-height:44px;

    padding:0 5px;

    background:transparent;

    color:var(--zn-app-orange);

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


/* =========================================
   ACCIONES PRINCIPALES DEL DASHBOARD
========================================= */

.zn-main-actions{

    margin-bottom:22px;

    display:grid;
    grid-template-columns:1fr;

    gap:12px;
}

.zn-main-action{

    width:100%;
    min-height:96px;

    padding:17px;

    display:grid;
    grid-template-columns:48px minmax(0,1fr) 24px;
    align-items:center;

    gap:13px;

    border:1px solid var(--zn-app-border);
    border-radius:15px;

    background:
        linear-gradient(
            145deg,
            rgba(27,27,27,.96),
            rgba(16,16,16,.98)
        );

    color:var(--zn-app-text);

    text-align:left;

    cursor:pointer;
    touch-action:manipulation;

    box-shadow:
        0 12px 30px rgba(0,0,0,.2);

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.zn-main-action:active{

    transform:scale(.988);

    border-color:rgba(255,101,0,.42);

    background:
        linear-gradient(
            145deg,
            rgba(38,25,17,.98),
            rgba(19,16,14,.98)
        );
}

.zn-main-action-primary{

    border-color:rgba(255,101,0,.32);

    background:
        linear-gradient(
            145deg,
            rgba(255,101,0,.13),
            rgba(20,17,15,.98)
        );
}

.zn-main-action-icon{

    width:48px;
    height:48px;

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

    border-radius:13px;

    background:rgba(255,101,0,.11);

    color:var(--zn-app-orange);
}

.zn-main-action-icon svg{

    width:24px;
    height:24px;
}

.zn-main-action-text{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:5px;
}

.zn-main-action-text strong{

    color:#f3f3f3;

    font-size:15px;
    font-weight:720;
    line-height:1.25;
}

.zn-main-action-text small{

    color:#898989;

    font-size:11px;
    line-height:1.45;
}

.zn-main-action-arrow{

    color:#6e6e6e;

    font-size:21px;
    line-height:1;
}


/* =========================================
   ESTADÍSTICAS
========================================= */

.zn-dashboard-stats{

    margin-bottom:22px;

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

    gap:11px;
}

.zn-stat-card{

    min-width:0;
    min-height:104px;

    padding:15px;

    display:flex;
    align-items:center;

    gap:12px;

    border:1px solid var(--zn-app-border);
    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(25,25,25,.95),
            rgba(15,15,15,.98)
        );

    box-shadow:
        0 10px 25px rgba(0,0,0,.16);
}

.zn-stat-card:last-child{
    grid-column:1 / -1;
}

.zn-stat-icon{

    width:42px;
    height:42px;

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

    flex:0 0 42px;

    border-radius:12px;

    background:var(--zn-app-orange-soft);

    color:var(--zn-app-orange);
}

.zn-stat-icon svg{

    width:21px;
    height:21px;
}

.zn-stat-card > div:last-child{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:5px;
}

.zn-stat-card span{

    color:#858585;

    font-size:10px;
    font-weight:600;
    line-height:1.3;
}

.zn-stat-card strong{

    color:#fff;

    font-size:25px;
    font-weight:770;
    line-height:1;
}


/* =========================================
   TARJETAS DE CONTENIDO
========================================= */

.zn-content-card{

    width:100%;

    overflow:hidden;

    border:1px solid var(--zn-app-border);
    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(24,24,24,.96),
            rgba(14,14,14,.98)
        );

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

.zn-card-header{

    min-height:82px;

    padding:17px;

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

    gap:14px;

    border-bottom:1px solid var(--zn-app-border);
}

.zn-card-header > div{
    min-width:0;
}

.zn-card-header h2{

    margin:0 0 5px;

    color:#f3f3f3;

    font-size:16px;
    font-weight:720;
    line-height:1.25;
}

.zn-card-header p{

    margin:0;

    color:#797979;

    font-size:11px;
    line-height:1.45;
}


/* =========================================
   CONTADOR
========================================= */

.zn-counter{

    min-width:38px;
    height:30px;

    padding:0 11px;

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

    flex-shrink:0;

    border:1px solid rgba(255,101,0,.25);
    border-radius:20px;

    background:rgba(255,101,0,.08);

    color:var(--zn-app-orange);

    font-size:12px;
    font-weight:750;
}


/* =========================================
   LISTAS DE REGISTROS
========================================= */

.zn-record-list{

    width:100%;
    min-height:245px;

    padding:12px;
}


/* =========================================
   ESTADO VACÍO
========================================= */

.zn-empty-state{

    min-height:220px;

    padding:30px 18px;

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

    text-align:center;
}

.zn-empty-icon{

    width:60px;
    height:60px;

    margin-bottom:19px;

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

    border-radius:17px;

    background:rgba(255,101,0,.09);

    color:var(--zn-app-orange);
}

.zn-empty-icon svg{

    width:29px;
    height:29px;
}

.zn-empty-state strong{

    color:#e8e8e8;

    font-size:15px;
    font-weight:700;
}

.zn-empty-state p{

    max-width:300px;

    margin:8px auto 19px;

    color:#777;

    font-size:12px;
    line-height:1.55;
}


/* =========================================
   BÚSQUEDA Y FILTROS
========================================= */

.zn-search-toolbar{

    margin-bottom:17px;

    display:grid;
    grid-template-columns:1fr;

    gap:10px;
}

.zn-search-field{

    width:100%;
    height:54px;

    display:flex;
    align-items:center;

    position:relative;

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

    background:var(--zn-app-input);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.zn-search-field:focus-within{

    border-color:rgba(255,101,0,.65);

    box-shadow:
        0 0 0 4px rgba(255,101,0,.08);
}

.zn-search-field svg{

    width:20px;
    height:20px;

    margin-left:16px;

    flex:0 0 20px;

    color:#666;
}

.zn-search-field input{

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

    padding:0 15px 0 12px;

    border:0;
    outline:0;

    background:transparent;

    color:#fff;

    font-size:16px;
}

.zn-search-field input::placeholder{
    color:#5f5f5f;
}

.zn-search-toolbar select{

    width:100%;
    height:54px;

    padding:0 42px 0 15px;

    border:1px solid var(--zn-app-border);
    border-radius:12px;
    outline:0;

    appearance:none;
    -webkit-appearance:none;

    background-color:var(--zn-app-input);

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #777 50%
        ),
        linear-gradient(
            135deg,
            #777 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 19px) 23px,
        calc(100% - 14px) 23px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:no-repeat;

    color:#d4d4d4;

    font-size:16px;
}

.zn-search-toolbar select:focus{

    border-color:rgba(255,101,0,.65);

    box-shadow:
        0 0 0 4px rgba(255,101,0,.08);
}


/* =========================================
   TARJETAS DINÁMICAS FUTURAS
   CLIENTES Y COTIZACIONES
========================================= */

.zn-record-item{

    width:100%;

    padding:15px;

    display:flex;
    flex-direction:column;

    gap:13px;

    border:1px solid var(--zn-app-border);
    border-radius:13px;

    background:rgba(255,255,255,.024);
}

.zn-record-item + .zn-record-item{
    margin-top:10px;
}

.zn-record-main{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:5px;
}

.zn-record-title{

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

    color:#f2f2f2;

    font-size:14px;
    font-weight:700;
}

.zn-record-subtitle{

    color:#818181;

    font-size:11px;
    line-height:1.45;
}

.zn-record-meta{

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:7px 12px;

    color:#858585;

    font-size:11px;
}

.zn-record-total{

    color:#fff;

    font-size:16px;
    font-weight:750;
}

.zn-record-actions{

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

    gap:8px;
}

.zn-record-action{

    min-width:44px;
    min-height:44px;

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

    padding:0;

    border:1px solid var(--zn-app-border);
    border-radius:10px;

    background:#101010;

    color:#929292;

    cursor:pointer;
    touch-action:manipulation;
}

.zn-record-action svg{

    width:19px;
    height:19px;
}

.zn-record-action:active{

    border-color:rgba(255,101,0,.42);

    background:var(--zn-app-orange-soft);

    color:var(--zn-app-orange);
}

.zn-record-action.danger:active{

    border-color:rgba(255,74,74,.4);

    background:rgba(255,74,74,.09);

    color:#ff7474;
}


/* =========================================
   ESTADOS DE COTIZACIÓN
========================================= */

.zn-status{

    min-height:25px;

    padding:0 9px;

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

    border-radius:20px;

    font-size:9px;
    font-weight:750;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.zn-status.borrador{

    background:rgba(155,155,155,.12);

    color:#aaa;
}

.zn-status.generada{

    background:rgba(255,101,0,.12);

    color:#ff8c43;
}

.zn-status.enviada{

    background:rgba(68,137,255,.12);

    color:#7dabff;
}

.zn-status.aceptada{

    background:rgba(51,190,102,.12);

    color:#75d89a;
}

.zn-status.rechazada{

    background:rgba(255,74,74,.12);

    color:#ff8585;
}


/* =========================================
   NAVEGACIÓN INFERIOR MOBILE
========================================= */

.zn-mobile-navigation{

    width:calc(100% - 20px);
    max-width:500px;
    min-height:72px;

    padding:
        8px
        8px
        max(8px,env(safe-area-inset-bottom));

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

    gap:4px;

    position:fixed;
    left:50%;
    bottom:10px;
    z-index:100;

    transform:translateX(-50%);

    border:1px solid rgba(255,255,255,.1);
    border-radius:19px;

    background:rgba(15,15,15,.94);

    box-shadow:
        0 18px 45px rgba(0,0,0,.5);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.zn-mobile-nav-button{

    min-width:0;
    min-height:55px;

    padding:7px 4px;

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

    gap:4px;

    border:0;
    border-radius:13px;

    background:transparent;

    color:#6f6f6f;

    cursor:pointer;
    touch-action:manipulation;

    transition:
        color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.zn-mobile-nav-button svg{

    width:21px;
    height:21px;
}

.zn-mobile-nav-button span{

    max-width:100%;

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

    font-size:9px;
    font-weight:650;
}

.zn-mobile-nav-button.activo{

    background:rgba(255,101,0,.1);

    color:var(--zn-app-orange);
}

.zn-mobile-nav-button:active{
    transform:scale(.95);
}


/* =========================================
   BOTÓN FLOTANTE MOBILE
========================================= */

.zn-floating-new-quote{

    width:58px;
    height:58px;

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

    padding:0;

    position:fixed;
    right:18px;
    bottom:
        calc(
            91px +
            env(safe-area-inset-bottom)
        );
    z-index:95;

    border:0;
    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            var(--zn-app-orange),
            #ff7900
        );

    color:#fff;

    font-size:31px;
    font-weight:300;
    line-height:1;

    cursor:pointer;
    touch-action:manipulation;

    box-shadow:
        0 14px 35px rgba(255,101,0,.32);

    transition:
        transform .16s ease,
        filter .16s ease;
}

.zn-floating-new-quote:active{

    transform:scale(.93);

    filter:brightness(.94);
}


/* =========================================
   MODAL GENERAL
========================================= */

.zn-modal-overlay{

    width:100%;
    height:100%;

    padding:
        18px
        12px
        0;

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

    position:fixed;
    inset:0;
    z-index:500;

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

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);

    animation:znOverlayEnter .18s ease;
}

@keyframes znOverlayEnter{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.zn-modal{

    width:100%;
    max-width:650px;
    max-height:
        calc(
            100dvh -
            18px
        );

    padding:
        22px
        17px
        max(22px,env(safe-area-inset-bottom));

    overflow-y:auto;
    overscroll-behavior:contain;

    border:1px solid var(--zn-app-border-strong);
    border-bottom:0;
    border-radius:22px 22px 0 0;

    background:
        linear-gradient(
            145deg,
            #1c1c1c,
            #101010
        );

    box-shadow:
        0 -20px 55px rgba(0,0,0,.48);

    animation:znModalMobileEnter .22s ease;
}

@keyframes znModalMobileEnter{

    from{
        opacity:0;
        transform:translateY(35px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =========================================
   ENCABEZADO DEL MODAL
========================================= */

.zn-modal-header{

    margin-bottom:21px;

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

    gap:14px;
}

.zn-modal-header > div{
    min-width:0;
}

.zn-modal-header h2{

    margin:11px 0 7px;

    color:#fff;

    font-size:23px;
    font-weight:750;
    line-height:1.2;
    letter-spacing:-.6px;
}

.zn-modal-header p{

    margin:0;

    color:#858585;

    font-size:12px;
    line-height:1.5;
}

.zn-modal-close{

    width:46px;
    height:46px;

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

    flex:0 0 46px;

    padding:0;

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

    background:#111;

    color:#999;

    font-size:27px;
    font-weight:300;
    line-height:1;

    cursor:pointer;
    touch-action:manipulation;
}

.zn-modal-close:active{

    border-color:rgba(255,101,0,.4);

    background:var(--zn-app-orange-soft);

    color:var(--zn-app-orange);
}


/* =========================================
   MÉTODOS DE COTIZACIÓN
========================================= */

.zn-quote-methods{

    display:grid;
    grid-template-columns:1fr;

    gap:10px;
}

.zn-quote-method{

    width:100%;
    min-height:88px;

    padding:15px;

    display:grid;
    grid-template-columns:47px minmax(0,1fr);
    align-items:center;

    gap:13px;

    border:1px solid var(--zn-app-border);
    border-radius:13px;

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

    color:#e9e9e9;

    text-align:left;

    cursor:pointer;
    touch-action:manipulation;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.zn-quote-method:active{

    transform:scale(.988);

    border-color:rgba(255,101,0,.4);

    background:rgba(255,101,0,.07);
}

.zn-quote-method-icon{

    width:47px;
    height:47px;

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

    border-radius:13px;

    background:var(--zn-app-orange-soft);

    color:var(--zn-app-orange);
}

.zn-quote-method-icon svg{

    width:23px;
    height:23px;
}

.zn-quote-method > span:last-child{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:5px;
}

.zn-quote-method strong{

    color:#f2f2f2;

    font-size:14px;
    font-weight:700;
}

.zn-quote-method small{

    color:#7f7f7f;

    font-size:11px;
    line-height:1.45;
}


/* =========================================
   CELULARES MUY PEQUEÑOS
========================================= */

@media(max-width:359px){

    .zn-system-view{

        padding-left:12px;
        padding-right:12px;
    }

    .zn-app-topbar{

        padding-left:12px;
        padding-right:12px;
    }

    .zn-mobile-logo img{
        width:130px;
    }

    .zn-view-header h1{
        font-size:28px;
    }

    .zn-main-action{

        grid-template-columns:44px minmax(0,1fr) 18px;

        padding:14px;

        gap:10px;
    }

    .zn-main-action-icon{

        width:44px;
        height:44px;
    }

    .zn-dashboard-stats{
        grid-template-columns:1fr;
    }

    .zn-stat-card:last-child{
        grid-column:auto;
    }

}


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

@media(min-width:600px){

    .zn-app-topbar{

        min-height:76px;

        padding-left:24px;
        padding-right:24px;
    }

    .zn-mobile-logo img{
        width:170px;
    }

    .zn-topbar-user-info{
        display:flex;
    }

    .zn-system-view{

        padding:
            30px
            24px
            36px;
    }

    .zn-view-header h1{
        font-size:36px;
    }

    .zn-main-actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .zn-dashboard-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .zn-stat-card:last-child{
        grid-column:auto;
    }

    .zn-search-toolbar{

        grid-template-columns:
            minmax(0,1fr)
            minmax(190px,240px);
    }

    #znViewClients .zn-search-toolbar{
        grid-template-columns:minmax(0,1fr);
    }

    .zn-primary-button{

        width:auto;
        min-width:190px;
    }

    .zn-view-header{

        flex-direction:row;
        align-items:flex-end;
        justify-content:space-between;
    }

    .zn-modal{

        padding:
            27px
            24px
            max(27px,env(safe-area-inset-bottom));
    }

    .zn-quote-methods{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* =========================================
   ESCRITORIO
========================================= */

@media(min-width:1024px){

    .zn-app-shell{

        display:grid;
        grid-template-columns:250px minmax(0,1fr);
    }

    .zn-app-main{

        min-height:100vh;

        padding-bottom:0;
    }


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

    .zn-app-sidebar{

        width:250px;
        height:100vh;
        height:100dvh;

        padding:30px 18px 22px;

        display:flex;
        flex-direction:column;

        position:sticky;
        top:0;
        z-index:60;

        border-right:1px solid var(--zn-app-border);

        background:rgba(12,12,12,.86);

        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
    }

    .zn-sidebar-logo{

        min-height:72px;

        padding:0 10px 24px;

        display:flex;
        align-items:center;

        border-bottom:1px solid var(--zn-app-border);
    }

    .zn-sidebar-logo img{

        display:block;

        width:185px;
        max-width:100%;
        max-height:65px;

        object-fit:contain;
        object-position:left center;
    }

    .zn-sidebar-navigation{

        margin-top:25px;

        display:flex;
        flex-direction:column;

        gap:7px;
    }

    .zn-nav-button{

        width:100%;
        min-height:52px;

        padding:0 14px;

        display:flex;
        align-items:center;

        gap:13px;

        border:1px solid transparent;
        border-radius:11px;

        background:transparent;

        color:#818181;

        font-size:13px;
        font-weight:650;

        text-align:left;

        cursor:pointer;

        transition:
            color .18s ease,
            border-color .18s ease,
            background .18s ease;
    }

    .zn-nav-icon{

        width:23px;
        height:23px;

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

        flex:0 0 23px;
    }

    .zn-nav-icon svg{

        width:21px;
        height:21px;
    }

    .zn-nav-button.activo{

        border-color:rgba(255,101,0,.22);

        background:rgba(255,101,0,.09);

        color:var(--zn-app-orange);
    }

    .zn-sidebar-footer{

        margin-top:auto;
        padding:20px 10px 0;

        display:flex;
        flex-direction:column;

        gap:6px;

        border-top:1px solid var(--zn-app-border);
    }

    .zn-sidebar-footer span{

        color:var(--zn-app-orange);

        font-size:9px;
        font-weight:800;
        letter-spacing:1.3px;
        text-transform:uppercase;
    }

    .zn-sidebar-footer strong{

        color:#dcdcdc;

        font-size:12px;
        font-weight:650;
    }

    .zn-sidebar-footer small{

        color:#626262;

        font-size:10px;
        line-height:1.4;
    }


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

    .zn-app-topbar{

        min-height:76px;

        padding:
            12px
            34px;

        justify-content:flex-end;
    }

    .zn-mobile-logo{
        display:none;
    }

    .zn-topbar-user-info{
        display:flex;
    }


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

    .zn-system-view{

        width:100%;
        max-width:1350px;

        margin:0 auto;

        padding:
            36px
            34px
            50px;
    }

    .zn-view-header{
        margin-bottom:29px;
    }

    .zn-view-header h1{
        font-size:40px;
    }

    .zn-desktop-action{
        display:flex;
    }

    .zn-main-actions{
        gap:15px;
    }

    .zn-dashboard-stats{
        gap:15px;
    }

    .zn-content-card{
        border-radius:17px;
    }

    .zn-card-header{
        padding:21px 23px;
    }

    .zn-record-list{
        padding:15px;
    }

    .zn-record-item{

        display:grid;
        grid-template-columns:minmax(0,1fr) auto auto;
        align-items:center;

        gap:20px;
    }

    .zn-record-actions{

        display:flex;

        gap:8px;
    }

    .zn-record-action{

        width:42px;
        min-width:42px;
        min-height:42px;
    }


    /* =====================================
       OCULTAR NAVEGACIÓN MOBILE
    ====================================== */

    .zn-mobile-navigation,
    .zn-floating-new-quote{
        display:none;
    }


    /* =====================================
       MODAL ESCRITORIO
    ====================================== */

    .zn-modal-overlay{

        padding:30px;

        align-items:center;
    }

    .zn-modal{

        max-height:calc(100dvh - 60px);

        padding:30px;

        border:1px solid var(--zn-app-border-strong);
        border-radius:20px;

        box-shadow:
            0 30px 90px rgba(0,0,0,.62);

        animation:znModalDesktopEnter .2s ease;
    }

    @keyframes znModalDesktopEnter{

        from{
            opacity:0;
            transform:translateY(10px) scale(.985);
        }

        to{
            opacity:1;
            transform:translateY(0) scale(1);
        }

    }

}


/* =========================================
   ESCRITORIO AMPLIO
========================================= */

@media(min-width:1400px){

    .zn-app-shell{
        grid-template-columns:275px minmax(0,1fr);
    }

    .zn-app-sidebar{
        width:275px;
    }

    .zn-system-view{

        padding-left:44px;
        padding-right:44px;
    }

}


/* =========================================
   DISPOSITIVOS CON MOUSE
========================================= */

@media(hover:hover) and (pointer:fine){

    .zn-topbar-logout:hover{

        border-color:rgba(255,101,0,.4);

        background:var(--zn-app-orange-soft);

        color:var(--zn-app-orange);
    }

    .zn-primary-button:hover{

        transform:translateY(-2px);

        filter:brightness(1.04);

        box-shadow:
            0 17px 36px rgba(255,101,0,.27);
    }

    .zn-secondary-button:hover{

        background:var(--zn-app-orange);

        color:#fff;
    }

    .zn-main-action:hover{

        transform:translateY(-2px);

        border-color:rgba(255,101,0,.32);
    }

    .zn-record-action:hover{

        border-color:rgba(255,101,0,.38);

        color:var(--zn-app-orange);
    }

    .zn-record-action.danger:hover{

        border-color:rgba(255,74,74,.36);

        background:rgba(255,74,74,.08);

        color:#ff7474;
    }

    .zn-mobile-nav-button:hover,
    .zn-nav-button:hover{

        color:var(--zn-app-orange);
    }

    .zn-quote-method:hover{

        transform:translateY(-2px);

        border-color:rgba(255,101,0,.36);

        background:rgba(255,101,0,.06);
    }

    .zn-modal-close:hover{

        border-color:rgba(255,101,0,.4);

        color:var(--zn-app-orange);
    }

}


/* =========================================
   REDUCCIÓN DE MOVIMIENTO
========================================= */

@media(prefers-reduced-motion:reduce){

    .zn-app-view *,
    .zn-app-view *::before,
    .zn-app-view *::after{

        scroll-behavior:auto !important;

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
    }

}

/* =========================================
   FORMULARIO DE CLIENTES
   DISEÑO MOBILE FIRST
========================================= */


/* =========================================
   MODAL DEL CLIENTE
========================================= */

.zn-client-modal-overlay{

    padding:
        16px
        10px
        0;

    align-items:flex-end;
}


/* =========================================
   CONTENEDOR DEL FORMULARIO
========================================= */

.zn-client-modal{

    width:100%;
    max-width:720px;
    max-height:calc(100dvh - 16px);

    padding:0;

    overflow:hidden;

    border-radius:22px 22px 0 0;

    background:
        linear-gradient(
            145deg,
            #1b1b1b,
            #101010
        );
}


/* =========================================
   FORMULARIO GENERAL
========================================= */

.zn-client-form{

    width:100%;
    max-height:calc(100dvh - 16px);

    display:flex;
    flex-direction:column;

    overflow:hidden;
}


/* =========================================
   ENCABEZADO DEL FORMULARIO
========================================= */

.zn-client-modal-header{

    flex:0 0 auto;

    margin:0;
    padding:
        22px
        17px
        18px;

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

    background:rgba(20,20,20,.96);
}

.zn-client-modal-header h2{

    margin-top:10px;

    font-size:23px;
}

.zn-client-modal-header p{

    max-width:430px;
}


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

.zn-client-form-content{

    width:100%;

    padding:
        18px
        16px
        24px;

    overflow-y:auto;
    overflow-x:hidden;

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}


/* =========================================
   SECCIÓN DEL FORMULARIO
========================================= */

.zn-form-section{

    width:100%;
}

.zn-form-section-header{

    margin-bottom:20px;

    display:flex;
    align-items:flex-start;

    gap:12px;
}

.zn-form-section-number{

    width:36px;
    height:36px;

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

    flex:0 0 36px;

    border:1px solid rgba(255,101,0,.28);
    border-radius:11px;

    background:rgba(255,101,0,.09);

    color:var(--zn-app-orange);

    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
}

.zn-form-section-header > div{

    min-width:0;
}

.zn-form-section-header h3{

    margin:0 0 5px;

    color:#f0f0f0;

    font-size:15px;
    font-weight:720;
    line-height:1.3;
}

.zn-form-section-header p{

    margin:0;

    color:#777;

    font-size:11px;
    line-height:1.45;
}


/* =========================================
   CUADRÍCULA DEL FORMULARIO
========================================= */

.zn-form-grid{

    display:grid;
    grid-template-columns:1fr;

    gap:18px;
}


/* =========================================
   CAMPOS
========================================= */

.zn-form-field{

    min-width:0;

    display:flex;
    flex-direction:column;
}

.zn-form-field label{

    margin-bottom:8px;

    color:#d4d4d4;

    font-size:12px;
    font-weight:650;
    line-height:1.4;
}

.zn-form-field label span{

    margin-left:3px;

    color:var(--zn-app-orange);
}


/* =========================================
   CONTENEDOR DE INPUT
========================================= */

.zn-form-input{

    width:100%;
    min-height:56px;

    display:flex;
    align-items:center;

    position:relative;

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

    background:#0d0d0d;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.zn-form-input:focus-within{

    border-color:rgba(255,101,0,.72);

    background:#111;

    box-shadow:
        0 0 0 4px rgba(255,101,0,.09);
}


/* =========================================
   ICONOS DE INPUT
========================================= */

.zn-form-input-icon{

    width:49px;
    height:100%;
    min-height:54px;

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

    flex:0 0 49px;

    color:#646464;
}

.zn-form-input-icon svg{

    width:20px;
    height:20px;
}


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

.zn-form-input input{

    width:100%;
    min-width:0;
    height:54px;

    padding:0 14px;

    border:0;
    outline:0;

    background:transparent;

    color:#fff;

    /*
    16px evita el zoom automático
    en Safari de iPhone.
    */

    font-size:16px;
    font-weight:450;
}

.zn-form-input-icon + input{

    padding-left:0;
}

.zn-form-input input::placeholder{

    color:#555;
}

.zn-form-input input:-webkit-autofill,
.zn-form-input input:-webkit-autofill:hover,
.zn-form-input input:-webkit-autofill:focus{

    -webkit-text-fill-color:#fff;

    box-shadow:
        0 0 0 1000px #0d0d0d inset;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* =========================================
   TEXTAREA
========================================= */

.zn-form-textarea{

    width:100%;

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

    background:#0d0d0d;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.zn-form-textarea:focus-within{

    border-color:rgba(255,101,0,.72);

    background:#111;

    box-shadow:
        0 0 0 4px rgba(255,101,0,.09);
}

.zn-form-textarea textarea{

    width:100%;
    min-height:104px;

    padding:14px;

    display:block;

    resize:vertical;

    border:0;
    outline:0;

    background:transparent;

    color:#fff;

    font-size:16px;
    line-height:1.5;
}

.zn-form-textarea textarea::placeholder{

    color:#555;
}


/* =========================================
   MENSAJES DE CAMPO
========================================= */

.zn-field-error{

    min-height:0;

    margin-top:7px;

    display:none;

    color:#ff8686;

    font-size:11px;
    font-weight:550;
    line-height:1.4;
}

.zn-field-help{

    margin-top:7px;

    color:#696969;

    font-size:10px;
    line-height:1.45;
}


/* =========================================
   CAMPO CON ERROR
========================================= */

.zn-form-field.tiene-error .zn-form-input,
.zn-form-field.tiene-error .zn-form-textarea{

    border-color:rgba(255,78,78,.68);

    background:rgba(255,78,78,.035);

    box-shadow:
        0 0 0 4px rgba(255,78,78,.07);
}

.zn-form-field.tiene-error .zn-field-error{

    display:block;
}


/* =========================================
   ACORDEÓN DE INFORMACIÓN ADICIONAL
========================================= */

.zn-form-accordion{

    width:100%;

    margin-top:22px;

    overflow:hidden;

    border:1px solid var(--zn-app-border);
    border-radius:14px;

    background:rgba(255,255,255,.018);
}

.zn-form-accordion summary{

    min-height:78px;

    padding:14px;

    display:grid;
    grid-template-columns:42px minmax(0,1fr) 28px;
    align-items:center;

    gap:12px;

    list-style:none;

    cursor:pointer;
    touch-action:manipulation;

    -webkit-tap-highlight-color:transparent;
}

.zn-form-accordion summary::-webkit-details-marker{

    display:none;
}

.zn-form-accordion-icon{

    width:42px;
    height:42px;

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

    border-radius:12px;

    background:rgba(255,101,0,.1);

    color:var(--zn-app-orange);
}

.zn-form-accordion-icon svg{

    width:21px;
    height:21px;

    transition:transform .2s ease;
}

.zn-form-accordion summary > span:nth-child(2){

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:4px;
}

.zn-form-accordion summary strong{

    color:#e8e8e8;

    font-size:13px;
    font-weight:700;
    line-height:1.3;
}

.zn-form-accordion summary small{

    color:#737373;

    font-size:10px;
    line-height:1.4;
}

.zn-form-accordion-arrow{

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

    color:#6d6d6d;

    font-size:27px;
    font-weight:300;

    transform:rotate(90deg);

    transition:
        transform .2s ease,
        color .2s ease;
}

.zn-form-accordion[open]{

    border-color:rgba(255,101,0,.21);
}

.zn-form-accordion[open] .zn-form-accordion-icon svg{

    transform:rotate(45deg);
}

.zn-form-accordion[open] .zn-form-accordion-arrow{

    transform:rotate(-90deg);

    color:var(--zn-app-orange);
}


/* =========================================
   CONTENIDO DEL ACORDEÓN
========================================= */

.zn-form-accordion-content{

    padding:
        4px
        14px
        18px;

    border-top:1px solid var(--zn-app-border);
}

.zn-form-accordion-content .zn-form-grid{

    padding-top:18px;
}


/* =========================================
   MENSAJE GENERAL DEL FORMULARIO
========================================= */

.zn-form-message{

    margin-top:18px;
    padding:13px 14px;

    border-radius:10px;

    font-size:12px;
    font-weight:550;
    line-height:1.5;
}

.zn-form-message.error{

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

    background:rgba(255,78,78,.08);

    color:#ff9a9a;
}

.zn-form-message.success{

    border:1px solid rgba(66,201,114,.26);

    background:rgba(66,201,114,.08);

    color:#8fdfa9;
}

.zn-form-message.info{

    border:1px solid rgba(255,101,0,.27);

    background:rgba(255,101,0,.08);

    color:#ffad78;
}


/* =========================================
   ACCIONES FIJAS INFERIORES
========================================= */

.zn-client-form-actions{

    flex:0 0 auto;

    padding:
        12px
        16px
        max(12px,env(safe-area-inset-bottom));

    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);

    gap:10px;

    border-top:1px solid var(--zn-app-border);

    background:rgba(16,16,16,.97);

    box-shadow:
        0 -12px 30px rgba(0,0,0,.24);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}


/* =========================================
   BOTÓN CANCELAR
========================================= */

.zn-form-cancel-button{

    width:100%;
    min-height:54px;

    padding:0 16px;

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

    background:#151515;

    color:#a4a4a4;

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

    cursor:pointer;
    touch-action:manipulation;

    transition:
        border-color .18s ease,
        color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.zn-form-cancel-button:active{

    transform:scale(.98);

    border-color:rgba(255,255,255,.18);

    background:#1b1b1b;

    color:#fff;
}


/* =========================================
   BOTÓN GUARDAR
========================================= */

.zn-form-save-button{

    width:100%;
    min-height:54px;

    padding:0 17px;

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

    gap:9px;

    border:0;
    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            var(--zn-app-orange),
            #ff7900
        );

    color:#fff;

    font-size:13px;
    font-weight:750;

    cursor:pointer;
    touch-action:manipulation;

    box-shadow:
        0 12px 28px rgba(255,101,0,.2);

    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease;
}

.zn-form-save-button:active{

    transform:scale(.98);

    filter:brightness(.95);
}

.zn-form-save-button:disabled{

    opacity:.68;

    cursor:not-allowed;

    transform:none;
}


/* =========================================
   CARGADOR DEL BOTÓN
========================================= */

.zn-form-save-loader{

    width:20px;
    height:20px;

    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;

    border-radius:50%;

    animation:znClientFormRotate .7s linear infinite;
}

@keyframes znClientFormRotate{

    to{
        transform:rotate(360deg);
    }

}


/* =========================================
   CELULARES MUY PEQUEÑOS
========================================= */

@media(max-width:359px){

    .zn-client-modal-overlay{

        padding-left:6px;
        padding-right:6px;
    }

    .zn-client-form-content{

        padding-left:13px;
        padding-right:13px;
    }

    .zn-client-modal-header{

        padding-left:14px;
        padding-right:14px;
    }

    .zn-client-form-actions{

        padding-left:12px;
        padding-right:12px;

        grid-template-columns:1fr;
    }

    .zn-form-cancel-button{

        order:2;
    }

    .zn-form-save-button{

        order:1;
    }

}


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

@media(min-width:600px){

    .zn-client-modal-overlay{

        padding:
            28px
            22px;

        align-items:center;
    }

    .zn-client-modal{

        max-height:calc(100dvh - 56px);

        border:1px solid var(--zn-app-border-strong);
        border-radius:21px;
    }

    .zn-client-form{

        max-height:calc(100dvh - 56px);
    }

    .zn-client-modal-header{

        padding:
            25px
            25px
            20px;
    }

    .zn-client-form-content{

        padding:
            23px
            25px
            30px;
    }

    .zn-form-grid{

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

        gap:
            19px
            16px;
    }

    .zn-form-field-full{

        grid-column:1 / -1;
    }

    .zn-form-accordion-content{

        padding:
            5px
            18px
            22px;
    }

    .zn-client-form-actions{

        padding:
            14px
            24px;

        display:flex;
        justify-content:flex-end;

        gap:11px;
    }

    .zn-form-cancel-button{

        width:auto;
        min-width:130px;
    }

    .zn-form-save-button{

        width:auto;
        min-width:190px;
    }

}


/* =========================================
   ESCRITORIO
========================================= */

@media(min-width:1024px){

    .zn-client-modal-overlay{

        padding:34px;
    }

    .zn-client-modal{

        max-width:790px;
        max-height:calc(100dvh - 68px);
    }

    .zn-client-form{

        max-height:calc(100dvh - 68px);
    }

    .zn-client-modal-header{

        padding:
            28px
            30px
            22px;
    }

    .zn-client-modal-header h2{

        font-size:26px;
    }

    .zn-client-form-content{

        padding:
            26px
            30px
            34px;
    }

    .zn-form-section-header{

        margin-bottom:24px;
    }

    .zn-form-accordion{

        margin-top:26px;
    }

    .zn-client-form-actions{

        padding:
            15px
            30px;
    }

}


/* =========================================
   DISPOSITIVOS CON MOUSE
========================================= */

@media(hover:hover) and (pointer:fine){

    .zn-form-input:hover,
    .zn-form-textarea:hover{

        border-color:rgba(255,255,255,.15);
    }

    .zn-form-accordion summary:hover{

        background:rgba(255,101,0,.035);
    }

    .zn-form-cancel-button:hover{

        border-color:rgba(255,255,255,.18);

        background:#1b1b1b;

        color:#fff;
    }

    .zn-form-save-button:hover{

        transform:translateY(-2px);

        filter:brightness(1.04);

        box-shadow:
            0 16px 34px rgba(255,101,0,.27);
    }

}

/* =========================================
   FORMULARIO MANUAL DE COTIZACIÓN
   Y MÓDULO DE CÁMARA
   DISEÑO MOBILE FIRST
========================================= */


/* =========================================
   CAPAS DE MODALES
========================================= */

.zn-quote-editor-overlay{
    z-index:620;
    padding:
        10px
        6px
        0;
    align-items:flex-end;
}

.zn-camera-overlay{
    z-index:680;
    padding:
        10px
        6px
        0;
    align-items:flex-end;
}

/*
Permite que el formulario de cliente pueda
mostrarse por encima del editor de cotización.
*/

.zn-client-modal-overlay{
    z-index:720;
}


/* =========================================
   EDITOR DE COTIZACIÓN
========================================= */

.zn-quote-editor-modal{

    width:100%;
    max-width:980px;
    max-height:calc(100dvh - 10px);

    padding:0;
    overflow:hidden;

    border-radius:22px 22px 0 0;

    background:
        linear-gradient(
            145deg,
            #1b1b1b,
            #0f0f0f
        );
}

.zn-quote-form{

    width:100%;
    max-height:calc(100dvh - 10px);

    display:flex;
    flex-direction:column;

    overflow:hidden;
}


/* =========================================
   ENCABEZADO DEL EDITOR
========================================= */

.zn-quote-modal-header{

    flex:0 0 auto;

    margin:0;
    padding:
        20px
        16px
        17px;

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

    background:rgba(18,18,18,.97);
}

.zn-quote-modal-header h2{

    margin-top:10px;

    font-size:23px;
}

.zn-quote-modal-header p{

    max-width:620px;
}


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

.zn-quote-form-content{

    width:100%;

    padding:
        16px
        14px
        28px;

    overflow-y:auto;
    overflow-x:hidden;

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;
    scrollbar-color:
        rgba(255,101,0,.48)
        rgba(255,255,255,.035);
}

.zn-quote-form-content::-webkit-scrollbar{
    width:8px;
}

.zn-quote-form-content::-webkit-scrollbar-track{
    background:rgba(255,255,255,.025);
}

.zn-quote-form-content::-webkit-scrollbar-thumb{

    border:2px solid transparent;
    border-radius:20px;

    background:
        rgba(255,101,0,.46)
        content-box;
}


/* =========================================
   SECCIONES DEL EDITOR
========================================= */

.zn-quote-section{

    width:100%;

    padding:17px;

    border:1px solid var(--zn-app-border);
    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(25,25,25,.96),
            rgba(14,14,14,.98)
        );

    box-shadow:
        0 12px 28px rgba(0,0,0,.16);
}

.zn-quote-section + .zn-quote-section{
    margin-top:14px;
}

.zn-quote-section-header{

    width:100%;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-direction:column;

    gap:14px;
}

.zn-quote-section-heading{

    min-width:0;

    display:flex;
    align-items:flex-start;

    gap:12px;
}

.zn-quote-section-heading > div{
    min-width:0;
}


/* =========================================
   SELECT GENERAL DEL FORMULARIO
========================================= */

.zn-form-select{

    width:100%;
    min-height:56px;

    display:flex;
    align-items:center;

    position:relative;

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

    background:#0d0d0d;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.zn-form-select::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;
    right:17px;
    top:50%;

    border-right:1.8px solid #777;
    border-bottom:1.8px solid #777;

    pointer-events:none;

    transform:
        translateY(-70%)
        rotate(45deg);
}

.zn-form-select:focus-within{

    border-color:rgba(255,101,0,.72);

    background:#111;

    box-shadow:
        0 0 0 4px rgba(255,101,0,.09);
}

.zn-form-select select{

    width:100%;
    min-width:0;
    height:54px;

    padding:
        0
        43px
        0
        14px;

    border:0;
    outline:0;

    appearance:none;
    -webkit-appearance:none;

    background:transparent;

    color:#fff;

    font-size:16px;
    font-weight:450;

    cursor:pointer;
}

.zn-form-select select option{

    background:#151515;

    color:#fff;
}


/* =========================================
   FECHA Y CAMPOS DE SOLO LECTURA
========================================= */

.zn-form-input input[type="date"]{

    color-scheme:dark;
}

.zn-form-input input[type="date"]::-webkit-calendar-picker-indicator{

    opacity:.7;

    cursor:pointer;

    filter:
        invert(54%)
        sepia(95%)
        saturate(3383%)
        hue-rotate(359deg)
        brightness(101%)
        contrast(103%);
}

.zn-form-input input[readonly]{

    color:#a6a6a6;

    cursor:default;
}

.zn-readonly-input{

    background:#121212;
}

.zn-readonly-input input{

    color:#d9d9d9;

    font-weight:700;
}


/* =========================================
   BOTÓN SECUNDARIO INTERNO
========================================= */

.zn-quote-inline-button{

    width:100%;
    min-height:46px;

    padding:0 14px;

    border:1px solid rgba(255,101,0,.32);
    border-radius:11px;

    background:rgba(255,101,0,.075);

    color:var(--zn-app-orange);

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

    cursor:pointer;
    touch-action:manipulation;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.zn-quote-inline-button:active{

    transform:scale(.98);

    background:var(--zn-app-orange);

    color:#fff;
}


/* =========================================
   RESUMEN DEL CLIENTE
========================================= */

.zn-quote-client-summary{

    width:100%;

    margin-top:14px;
    padding:14px;

    display:grid;
    grid-template-columns:46px minmax(0,1fr) 44px;
    align-items:center;

    gap:12px;

    border:1px solid rgba(255,101,0,.19);
    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            rgba(255,101,0,.075),
            rgba(255,255,255,.018)
        );
}

.zn-quote-client-icon{

    width:46px;
    height:46px;

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

    border-radius:13px;

    background:rgba(255,101,0,.12);

    color:var(--zn-app-orange);
}

.zn-quote-client-icon svg{

    width:22px;
    height:22px;
}

.zn-quote-client-data{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:4px;
}

.zn-quote-client-data strong{

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

    color:#f1f1f1;

    font-size:13px;
    font-weight:720;
}

.zn-quote-client-data span{

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

    color:#a5a5a5;

    font-size:11px;
    font-weight:600;
}

.zn-quote-client-data small{

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

    color:#707070;

    font-size:10px;
}

.zn-quote-client-edit{

    width:44px;
    height:44px;

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

    padding:0;

    border:1px solid var(--zn-app-border);
    border-radius:11px;

    background:#111;

    color:#8c8c8c;

    cursor:pointer;
    touch-action:manipulation;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.zn-quote-client-edit svg{

    width:19px;
    height:19px;
}

.zn-quote-client-edit:active{

    transform:scale(.95);

    border-color:rgba(255,101,0,.4);

    background:rgba(255,101,0,.08);

    color:var(--zn-app-orange);
}


/* =========================================
   LISTA DE PRODUCTOS
========================================= */

.zn-quote-products-list{

    width:100%;

    display:flex;
    flex-direction:column;

    gap:12px;
}

.zn-quote-product{

    width:100%;

    padding:14px;

    border:1px solid var(--zn-app-border);
    border-radius:14px;

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

    transition:
        border-color .18s ease,
        background .18s ease;
}

.zn-quote-product-header{

    margin-bottom:16px;

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

    gap:12px;
}

.zn-quote-product-header > div{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:4px;
}

.zn-quote-product-number{

    color:#f0f0f0;

    font-size:13px;
    font-weight:720;
}

.zn-quote-product-header small{

    color:#6f6f6f;

    font-size:10px;
    line-height:1.4;
}

.zn-quote-remove-product{

    width:44px;
    height:44px;

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

    flex:0 0 44px;

    padding:0;

    border:1px solid rgba(255,89,89,.18);
    border-radius:11px;

    background:rgba(255,89,89,.04);

    color:#9b7070;

    cursor:pointer;
    touch-action:manipulation;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.zn-quote-remove-product svg{

    width:19px;
    height:19px;
}

.zn-quote-remove-product:active{

    transform:scale(.95);

    border-color:rgba(255,89,89,.45);

    background:rgba(255,89,89,.1);

    color:#ff8585;
}

.zn-quote-product-description textarea{

    min-height:86px;
}


/* =========================================
   CAMPOS DE MONEDA Y SUFIJO
========================================= */

.zn-money-prefix{

    height:54px;

    padding-left:14px;

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

    flex:0 0 auto;

    color:var(--zn-app-orange);

    font-size:15px;
    font-weight:750;
}

.zn-money-input input{

    padding-left:8px;
}

.zn-input-suffix{

    height:54px;

    padding-right:14px;

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

    flex:0 0 auto;

    color:#777;

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

.zn-suffix-input input{

    padding-right:8px;
}


/* =========================================
   TOTALES
========================================= */

.zn-quote-totals-layout{

    width:100%;

    display:grid;
    grid-template-columns:1fr;

    gap:14px;
}

.zn-quote-totals-controls{

    align-content:start;
}

.zn-quote-summary{

    width:100%;

    padding:16px;

    border:1px solid rgba(255,101,0,.22);
    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,101,0,.075),
            rgba(11,11,11,.98)
        );
}

.zn-quote-summary-row{

    min-height:42px;

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

    gap:16px;

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

.zn-quote-summary-row:last-child{
    border-bottom:0;
}

.zn-quote-summary-row span{

    color:#929292;

    font-size:11px;
    font-weight:600;
}

.zn-quote-summary-row strong{

    color:#e3e3e3;

    font-size:13px;
    font-weight:720;

    text-align:right;
}

.zn-quote-summary-total{

    min-height:58px;

    margin-top:3px;
    padding-top:4px;
}

.zn-quote-summary-total span{

    color:#e4e4e4;

    font-size:13px;
    font-weight:720;
}

.zn-quote-summary-total strong{

    color:var(--zn-app-orange);

    font-size:24px;
    font-weight:800;
    letter-spacing:-.5px;
}


/* =========================================
   INTERRUPTOR DE IVA
========================================= */

.zn-quote-tax-toggle{

    width:100%;
    min-height:72px;

    margin:0;
    padding:13px;

    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    align-items:center;

    gap:12px;

    position:relative;

    border:1px solid var(--zn-app-border);
    border-radius:13px;

    background:#0d0d0d;

    cursor:pointer;
    user-select:none;
    touch-action:manipulation;
}

.zn-quote-tax-toggle input{

    width:1px;
    height:1px;

    position:absolute;

    opacity:0;
    pointer-events:none;
}

.zn-quote-tax-switch{

    width:46px;
    height:26px;

    display:block;

    position:relative;

    border:1px solid #444;
    border-radius:30px;

    background:#202020;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.zn-quote-tax-switch::after{

    content:"";

    width:20px;
    height:20px;

    position:absolute;
    left:2px;
    top:2px;

    border-radius:50%;

    background:#858585;

    box-shadow:
        0 2px 8px rgba(0,0,0,.35);

    transition:
        transform .18s ease,
        background .18s ease;
}

.zn-quote-tax-toggle input:checked + .zn-quote-tax-switch{

    border-color:var(--zn-app-orange);

    background:rgba(255,101,0,.22);
}

.zn-quote-tax-toggle input:checked + .zn-quote-tax-switch::after{

    transform:translateX(20px);

    background:var(--zn-app-orange);
}

.zn-quote-tax-toggle input:focus-visible + .zn-quote-tax-switch{

    box-shadow:
        0 0 0 4px rgba(255,101,0,.13);
}

.zn-quote-tax-toggle > span:last-child{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:4px;
}

.zn-quote-tax-toggle strong{

    color:#e6e6e6;

    font-size:12px;
    font-weight:720;
}

.zn-quote-tax-toggle small{

    color:#707070;

    font-size:10px;
    line-height:1.4;
}


/* =========================================
   ACCIONES FIJAS DEL EDITOR
========================================= */

.zn-quote-form-actions{

    flex:0 0 auto;

    padding:
        11px
        12px
        max(11px,env(safe-area-inset-bottom));

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

    gap:9px;

    border-top:1px solid var(--zn-app-border);

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

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

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.zn-quote-form-actions .zn-form-save-button{

    grid-column:1 / -1;
    grid-row:1;

    min-height:54px;
}

.zn-quote-form-actions .zn-form-cancel-button{

    grid-column:1;
    grid-row:2;

    min-height:52px;
}

.zn-quote-draft-button{

    grid-column:2;
    grid-row:2;

    width:100%;
    min-height:52px;

    padding:0 13px;

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

    gap:9px;

    border:1px solid rgba(255,101,0,.34);
    border-radius:12px;

    background:rgba(255,101,0,.075);

    color:var(--zn-app-orange);

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

    cursor:pointer;
    touch-action:manipulation;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        transform .16s ease;
}

.zn-quote-draft-button:active{

    transform:scale(.98);

    background:var(--zn-app-orange);

    color:#fff;
}

.zn-quote-draft-button:disabled,
.zn-quote-form-actions button:disabled{

    opacity:.62;

    cursor:not-allowed;

    transform:none;
}

.zn-quote-draft-loader,
.zn-quote-generate-loader{

    width:20px;
    height:20px;

    border:2px solid rgba(255,255,255,.34);
    border-top-color:currentColor;
    border-radius:50%;

    animation:znQuoteLoaderRotate .7s linear infinite;
}

@keyframes znQuoteLoaderRotate{

    to{
        transform:rotate(360deg);
    }

}


/* =========================================
   MÓDULO DE CÁMARA
========================================= */

.zn-camera-modal{

    width:100%;
    max-width:680px;
    max-height:calc(100dvh - 10px);

    padding:0;
    overflow:hidden;

    border-radius:22px 22px 0 0;

    background:
        linear-gradient(
            145deg,
            #1b1b1b,
            #0d0d0d
        );
}

.zn-camera-header{

    margin:0;
    padding:
        20px
        16px
        17px;

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

    background:rgba(18,18,18,.97);
}

.zn-camera-content{

    width:100%;
    max-height:calc(100dvh - 112px);

    padding:
        16px
        14px
        max(18px,env(safe-area-inset-bottom));

    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.zn-camera-state{

    width:100%;
}


/* =========================================
   ESTADO INICIAL DE CÁMARA
========================================= */

.zn-camera-start{

    min-height:390px;

    padding:32px 18px;

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

    text-align:center;
}

.zn-camera-start-icon{

    width:78px;
    height:78px;

    margin-bottom:22px;

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

    border-radius:22px;

    background:rgba(255,101,0,.1);

    color:var(--zn-app-orange);

    box-shadow:
        0 0 0 10px rgba(255,101,0,.03);
}

.zn-camera-start-icon svg{

    width:35px;
    height:35px;
}

.zn-camera-start > strong{

    color:#f1f1f1;

    font-size:17px;
    font-weight:750;
}

.zn-camera-start > p{

    max-width:410px;

    margin:9px auto 22px;

    color:#7f7f7f;

    font-size:12px;
    line-height:1.55;
}

.zn-camera-start-actions{

    width:100%;
    max-width:420px;

    display:grid;
    grid-template-columns:1fr;

    gap:10px;
}

.zn-camera-start-actions button{

    width:100%;
}


/* =========================================
   CÁMARA EN VIVO
========================================= */

.zn-camera-live{

    text-align:center;
}

.zn-camera-frame{

    width:100%;
    max-width:500px;

    margin:0 auto;

    position:relative;
    overflow:hidden;

    aspect-ratio:3 / 4;

    border:1px solid rgba(255,101,0,.32);
    border-radius:17px;

    background:#050505;

    box-shadow:
        0 18px 45px rgba(0,0,0,.42);
}

.zn-camera-frame video{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    background:#050505;
}

.zn-camera-guide{

    position:absolute;
    inset:16px;

    pointer-events:none;
}

.zn-camera-guide span{

    width:42px;
    height:42px;

    position:absolute;

    border-color:var(--zn-app-orange);
    border-style:solid;

    filter:
        drop-shadow(
            0 1px 2px rgba(0,0,0,.65)
        );
}

.zn-camera-guide span:nth-child(1){

    left:0;
    top:0;

    border-width:3px 0 0 3px;

    border-radius:8px 0 0 0;
}

.zn-camera-guide span:nth-child(2){

    right:0;
    top:0;

    border-width:3px 3px 0 0;

    border-radius:0 8px 0 0;
}

.zn-camera-guide span:nth-child(3){

    left:0;
    bottom:0;

    border-width:0 0 3px 3px;

    border-radius:0 0 0 8px;
}

.zn-camera-guide span:nth-child(4){

    right:0;
    bottom:0;

    border-width:0 3px 3px 0;

    border-radius:0 0 8px 0;
}

.zn-camera-help{

    max-width:480px;

    margin:13px auto 18px;

    color:#777;

    font-size:11px;
    line-height:1.5;
}

.zn-camera-capture-button{

    width:72px;
    height:72px;

    margin:0 auto;

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

    padding:0;

    border:4px solid rgba(255,255,255,.82);
    border-radius:50%;

    background:transparent;

    cursor:pointer;
    touch-action:manipulation;

    box-shadow:
        0 8px 25px rgba(0,0,0,.38);

    transition:
        transform .15s ease,
        border-color .18s ease;
}

.zn-camera-capture-button span{

    width:54px;
    height:54px;

    display:block;

    border-radius:50%;

    background:#fff;

    transition:
        transform .15s ease,
        background .18s ease;
}

.zn-camera-capture-button:active{

    transform:scale(.92);

    border-color:var(--zn-app-orange);
}

.zn-camera-capture-button:active span{

    transform:scale(.88);

    background:var(--zn-app-orange);
}


/* =========================================
   VISTA PREVIA DE CÁMARA
========================================= */

.zn-camera-preview-frame{

    width:100%;
    max-width:500px;

    margin:0 auto;

    overflow:hidden;

    aspect-ratio:3 / 4;

    border:1px solid rgba(255,101,0,.28);
    border-radius:17px;

    background:#050505;

    box-shadow:
        0 18px 45px rgba(0,0,0,.42);
}

.zn-camera-preview-frame img{

    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    background:#050505;
}

.zn-camera-preview-actions{

    width:100%;
    max-width:500px;

    margin:14px auto 0;

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

    gap:10px;
}

.zn-camera-preview-actions button{

    width:100%;
}


/* =========================================
   MENSAJE DE CÁMARA
========================================= */

#znCameraMessage{
    margin-top:14px;
}


/* =========================================
   ESTADOS DESHABILITADOS
========================================= */

.zn-quote-form.is-loading,
.zn-camera-modal.is-loading{

    cursor:progress;
}

.zn-quote-form.is-loading .zn-quote-form-content,
.zn-camera-modal.is-loading .zn-camera-content{

    pointer-events:none;

    opacity:.72;
}


/* =========================================
   CELULARES MUY PEQUEÑOS
========================================= */

@media(max-width:359px){

    .zn-quote-editor-overlay,
    .zn-camera-overlay{

        padding-left:3px;
        padding-right:3px;
    }

    .zn-quote-modal-header,
    .zn-camera-header{

        padding-left:13px;
        padding-right:13px;
    }

    .zn-quote-form-content,
    .zn-camera-content{

        padding-left:10px;
        padding-right:10px;
    }

    .zn-quote-section{
        padding:13px;
    }

    .zn-quote-client-summary{

        grid-template-columns:
            42px
            minmax(0,1fr)
            40px;

        padding:11px;
        gap:9px;
    }

    .zn-quote-client-icon{

        width:42px;
        height:42px;
    }

    .zn-quote-client-edit{

        width:40px;
        height:40px;
    }

    .zn-quote-form-actions{

        grid-template-columns:1fr;
    }

    .zn-quote-form-actions .zn-form-save-button,
    .zn-quote-form-actions .zn-form-cancel-button,
    .zn-quote-draft-button{

        grid-column:1;
    }

    .zn-quote-form-actions .zn-form-save-button{
        grid-row:1;
    }

    .zn-quote-draft-button{
        grid-row:2;
    }

    .zn-quote-form-actions .zn-form-cancel-button{
        grid-row:3;
    }

    .zn-camera-start{
        padding-left:10px;
        padding-right:10px;
    }

}


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

@media(min-width:600px){

    .zn-quote-editor-overlay,
    .zn-camera-overlay{

        padding:
            24px
            18px;

        align-items:center;
    }

    .zn-quote-editor-modal{

        max-height:calc(100dvh - 48px);

        border:1px solid var(--zn-app-border-strong);
        border-radius:21px;
    }

    .zn-quote-form{
        max-height:calc(100dvh - 48px);
    }

    .zn-quote-modal-header{

        padding:
            24px
            24px
            20px;
    }

    .zn-quote-modal-header h2{
        font-size:26px;
    }

    .zn-quote-form-content{

        padding:
            22px
            22px
            32px;
    }

    .zn-quote-section{
        padding:20px;
    }

    .zn-quote-section-header{

        flex-direction:row;
        align-items:flex-start;
    }

    .zn-quote-inline-button{

        width:auto;
        min-width:155px;

        flex:0 0 auto;
    }

    .zn-quote-meta-grid{

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

    .zn-quote-product-grid{

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

    .zn-quote-totals-layout{

        grid-template-columns:
            minmax(0,1.05fr)
            minmax(260px,.95fr);

        align-items:start;

        gap:18px;
    }

    .zn-quote-summary{

        position:sticky;
        top:0;
    }

    .zn-quote-form-actions{

        padding:
            13px
            22px;

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

        gap:10px;
    }

    .zn-quote-form-actions .zn-form-save-button,
    .zn-quote-form-actions .zn-form-cancel-button,
    .zn-quote-draft-button{

        width:auto;
        grid-column:auto;
        grid-row:auto;
    }

    .zn-quote-form-actions .zn-form-cancel-button{
        min-width:125px;
    }

    .zn-quote-draft-button{
        min-width:160px;
    }

    .zn-quote-form-actions .zn-form-save-button{
        min-width:190px;
    }

    .zn-camera-modal{

        max-height:calc(100dvh - 48px);

        border:1px solid var(--zn-app-border-strong);
        border-radius:21px;
    }

    .zn-camera-header{

        padding:
            24px
            24px
            20px;
    }

    .zn-camera-content{

        max-height:calc(100dvh - 165px);

        padding:
            22px
            22px
            24px;
    }

    .zn-camera-start-actions{

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

}


/* =========================================
   ESCRITORIO
========================================= */

@media(min-width:1024px){

    .zn-quote-editor-overlay,
    .zn-camera-overlay{

        padding:30px;
    }

    .zn-quote-editor-modal{

        max-width:1080px;
        max-height:calc(100dvh - 60px);
    }

    .zn-quote-form{
        max-height:calc(100dvh - 60px);
    }

    .zn-quote-modal-header{

        padding:
            26px
            30px
            22px;
    }

    .zn-quote-modal-header h2{
        font-size:28px;
    }

    .zn-quote-form-content{

        padding:
            25px
            30px
            36px;
    }

    .zn-quote-section{

        padding:23px;

        border-radius:17px;
    }

    .zn-quote-section + .zn-quote-section{
        margin-top:17px;
    }

    .zn-quote-meta-grid{

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr)
            minmax(0,.8fr);
    }

    .zn-quote-meta-grid .zn-form-field-full{
        grid-column:auto;
    }

    .zn-quote-product-grid{

        grid-template-columns:
            minmax(115px,.65fr)
            minmax(145px,.75fr)
            minmax(160px,.9fr)
            minmax(160px,.9fr);
    }

    .zn-quote-product-grid .zn-form-field-full{
        grid-column:1 / -1;
    }

    .zn-quote-form-actions{

        padding:
            14px
            30px;
    }

    .zn-camera-modal{

        max-width:760px;
        max-height:calc(100dvh - 60px);
    }

    .zn-camera-header{

        padding:
            26px
            30px
            22px;
    }

    .zn-camera-content{

        max-height:calc(100dvh - 175px);

        padding:
            24px
            30px
            28px;
    }

    .zn-camera-frame,
    .zn-camera-preview-frame{

        max-width:520px;

        aspect-ratio:4 / 3;
    }

}


/* =========================================
   DISPOSITIVOS CON MOUSE
========================================= */

@media(hover:hover) and (pointer:fine){

    .zn-form-select:hover,
    .zn-quote-product:hover{

        border-color:rgba(255,255,255,.15);
    }

    .zn-quote-inline-button:hover{

        border-color:var(--zn-app-orange);

        background:var(--zn-app-orange);

        color:#fff;
    }

    .zn-quote-client-edit:hover{

        border-color:rgba(255,101,0,.4);

        background:rgba(255,101,0,.08);

        color:var(--zn-app-orange);
    }

    .zn-quote-remove-product:hover{

        border-color:rgba(255,89,89,.45);

        background:rgba(255,89,89,.1);

        color:#ff8585;
    }

    .zn-quote-draft-button:hover{

        border-color:var(--zn-app-orange);

        background:var(--zn-app-orange);

        color:#fff;
    }

    .zn-camera-capture-button:hover{

        border-color:var(--zn-app-orange);
    }

    .zn-camera-capture-button:hover span{

        background:var(--zn-app-orange);
    }

}


/* =========================================
   REDUCCIÓN DE MOVIMIENTO
========================================= */

@media(prefers-reduced-motion:reduce){

    .zn-quote-editor-overlay *,
    .zn-quote-editor-overlay *::before,
    .zn-quote-editor-overlay *::after,
    .zn-camera-overlay *,
    .zn-camera-overlay *::before,
    .zn-camera-overlay *::after{

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
    }

}

/* =========================================
   FORMULARIO MANUAL DE COTIZACIÓN
   Y MÓDULO DE CÁMARA
   DISEÑO MOBILE FIRST
========================================= */


/* =========================================
   CAPAS DE MODALES
========================================= */

.zn-quote-editor-overlay{
    z-index:620;
    padding:
        10px
        6px
        0;
    align-items:flex-end;
}

.zn-camera-overlay{
    z-index:680;
    padding:
        10px
        6px
        0;
    align-items:flex-end;
}

/*
Permite que el formulario de cliente pueda
mostrarse por encima del editor de cotización.
*/

.zn-client-modal-overlay{
    z-index:720;
}


/* =========================================
   EDITOR DE COTIZACIÓN
========================================= */

.zn-quote-editor-modal{

    width:100%;
    max-width:980px;
    max-height:calc(100dvh - 10px);

    padding:0;
    overflow:hidden;

    border-radius:22px 22px 0 0;

    background:
        linear-gradient(
            145deg,
            #1b1b1b,
            #0f0f0f
        );
}

.zn-quote-form{

    width:100%;
    max-height:calc(100dvh - 10px);

    display:flex;
    flex-direction:column;

    overflow:hidden;
}


/* =========================================
   ENCABEZADO DEL EDITOR
========================================= */

.zn-quote-modal-header{

    flex:0 0 auto;

    margin:0;
    padding:
        20px
        16px
        17px;

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

    background:rgba(18,18,18,.97);
}

.zn-quote-modal-header h2{

    margin-top:10px;

    font-size:23px;
}

.zn-quote-modal-header p{

    max-width:620px;
}


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

.zn-quote-form-content{

    width:100%;

    padding:
        16px
        14px
        28px;

    overflow-y:auto;
    overflow-x:hidden;

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;
    scrollbar-color:
        rgba(255,101,0,.48)
        rgba(255,255,255,.035);
}

.zn-quote-form-content::-webkit-scrollbar{
    width:8px;
}

.zn-quote-form-content::-webkit-scrollbar-track{
    background:rgba(255,255,255,.025);
}

.zn-quote-form-content::-webkit-scrollbar-thumb{

    border:2px solid transparent;
    border-radius:20px;

    background:
        rgba(255,101,0,.46)
        content-box;
}


/* =========================================
   SECCIONES DEL EDITOR
========================================= */

.zn-quote-section{

    width:100%;

    padding:17px;

    border:1px solid var(--zn-app-border);
    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(25,25,25,.96),
            rgba(14,14,14,.98)
        );

    box-shadow:
        0 12px 28px rgba(0,0,0,.16);
}

.zn-quote-section + .zn-quote-section{
    margin-top:14px;
}

.zn-quote-section-header{

    width:100%;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-direction:column;

    gap:14px;
}

.zn-quote-section-heading{

    min-width:0;

    display:flex;
    align-items:flex-start;

    gap:12px;
}

.zn-quote-section-heading > div{
    min-width:0;
}


/* =========================================
   SELECT GENERAL DEL FORMULARIO
========================================= */

.zn-form-select{

    width:100%;
    min-height:56px;

    display:flex;
    align-items:center;

    position:relative;

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

    background:#0d0d0d;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.zn-form-select::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;
    right:17px;
    top:50%;

    border-right:1.8px solid #777;
    border-bottom:1.8px solid #777;

    pointer-events:none;

    transform:
        translateY(-70%)
        rotate(45deg);
}

.zn-form-select:focus-within{

    border-color:rgba(255,101,0,.72);

    background:#111;

    box-shadow:
        0 0 0 4px rgba(255,101,0,.09);
}

.zn-form-select select{

    width:100%;
    min-width:0;
    height:54px;

    padding:
        0
        43px
        0
        14px;

    border:0;
    outline:0;

    appearance:none;
    -webkit-appearance:none;

    background:transparent;

    color:#fff;

    font-size:16px;
    font-weight:450;

    cursor:pointer;
}

.zn-form-select select option{

    background:#151515;

    color:#fff;
}


/* =========================================
   FECHA Y CAMPOS DE SOLO LECTURA
========================================= */

.zn-form-input input[type="date"]{

    color-scheme:dark;
}

.zn-form-input input[type="date"]::-webkit-calendar-picker-indicator{

    opacity:.7;

    cursor:pointer;

    filter:
        invert(54%)
        sepia(95%)
        saturate(3383%)
        hue-rotate(359deg)
        brightness(101%)
        contrast(103%);
}

.zn-form-input input[readonly]{

    color:#a6a6a6;

    cursor:default;
}

.zn-readonly-input{

    background:#121212;
}

.zn-readonly-input input{

    color:#d9d9d9;

    font-weight:700;
}


/* =========================================
   BOTÓN SECUNDARIO INTERNO
========================================= */

.zn-quote-inline-button{

    width:100%;
    min-height:46px;

    padding:0 14px;

    border:1px solid rgba(255,101,0,.32);
    border-radius:11px;

    background:rgba(255,101,0,.075);

    color:var(--zn-app-orange);

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

    cursor:pointer;
    touch-action:manipulation;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.zn-quote-inline-button:active{

    transform:scale(.98);

    background:var(--zn-app-orange);

    color:#fff;
}


/* =========================================
   RESUMEN DEL CLIENTE
========================================= */

.zn-quote-client-summary{

    width:100%;

    margin-top:14px;
    padding:14px;

    display:grid;
    grid-template-columns:46px minmax(0,1fr) 44px;
    align-items:center;

    gap:12px;

    border:1px solid rgba(255,101,0,.19);
    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            rgba(255,101,0,.075),
            rgba(255,255,255,.018)
        );
}

.zn-quote-client-icon{

    width:46px;
    height:46px;

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

    border-radius:13px;

    background:rgba(255,101,0,.12);

    color:var(--zn-app-orange);
}

.zn-quote-client-icon svg{

    width:22px;
    height:22px;
}

.zn-quote-client-data{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:4px;
}

.zn-quote-client-data strong{

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

    color:#f1f1f1;

    font-size:13px;
    font-weight:720;
}

.zn-quote-client-data span{

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

    color:#a5a5a5;

    font-size:11px;
    font-weight:600;
}

.zn-quote-client-data small{

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

    color:#707070;

    font-size:10px;
}

.zn-quote-client-edit{

    width:44px;
    height:44px;

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

    padding:0;

    border:1px solid var(--zn-app-border);
    border-radius:11px;

    background:#111;

    color:#8c8c8c;

    cursor:pointer;
    touch-action:manipulation;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.zn-quote-client-edit svg{

    width:19px;
    height:19px;
}

.zn-quote-client-edit:active{

    transform:scale(.95);

    border-color:rgba(255,101,0,.4);

    background:rgba(255,101,0,.08);

    color:var(--zn-app-orange);
}


/* =========================================
   LISTA DE PRODUCTOS
========================================= */

.zn-quote-products-list{

    width:100%;

    display:flex;
    flex-direction:column;

    gap:12px;
}

.zn-quote-product{

    width:100%;

    padding:14px;

    border:1px solid var(--zn-app-border);
    border-radius:14px;

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

    transition:
        border-color .18s ease,
        background .18s ease;
}

.zn-quote-product-header{

    margin-bottom:16px;

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

    gap:12px;
}

.zn-quote-product-header > div{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:4px;
}

.zn-quote-product-number{

    color:#f0f0f0;

    font-size:13px;
    font-weight:720;
}

.zn-quote-product-header small{

    color:#6f6f6f;

    font-size:10px;
    line-height:1.4;
}

.zn-quote-remove-product{

    width:44px;
    height:44px;

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

    flex:0 0 44px;

    padding:0;

    border:1px solid rgba(255,89,89,.18);
    border-radius:11px;

    background:rgba(255,89,89,.04);

    color:#9b7070;

    cursor:pointer;
    touch-action:manipulation;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.zn-quote-remove-product svg{

    width:19px;
    height:19px;
}

.zn-quote-remove-product:active{

    transform:scale(.95);

    border-color:rgba(255,89,89,.45);

    background:rgba(255,89,89,.1);

    color:#ff8585;
}

.zn-quote-product-description textarea{

    min-height:86px;
}


/* =========================================
   CAMPOS DE MONEDA Y SUFIJO
========================================= */

.zn-money-prefix{

    height:54px;

    padding-left:14px;

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

    flex:0 0 auto;

    color:var(--zn-app-orange);

    font-size:15px;
    font-weight:750;
}

.zn-money-input input{

    padding-left:8px;
}

.zn-input-suffix{

    height:54px;

    padding-right:14px;

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

    flex:0 0 auto;

    color:#777;

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

.zn-suffix-input input{

    padding-right:8px;
}


/* =========================================
   TOTALES
========================================= */

.zn-quote-totals-layout{

    width:100%;

    display:grid;
    grid-template-columns:1fr;

    gap:14px;
}

.zn-quote-totals-controls{

    align-content:start;
}

.zn-quote-summary{

    width:100%;

    padding:16px;

    border:1px solid rgba(255,101,0,.22);
    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,101,0,.075),
            rgba(11,11,11,.98)
        );
}

.zn-quote-summary-row{

    min-height:42px;

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

    gap:16px;

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

.zn-quote-summary-row:last-child{
    border-bottom:0;
}

.zn-quote-summary-row span{

    color:#929292;

    font-size:11px;
    font-weight:600;
}

.zn-quote-summary-row strong{

    color:#e3e3e3;

    font-size:13px;
    font-weight:720;

    text-align:right;
}

.zn-quote-summary-total{

    min-height:58px;

    margin-top:3px;
    padding-top:4px;
}

.zn-quote-summary-total span{

    color:#e4e4e4;

    font-size:13px;
    font-weight:720;
}

.zn-quote-summary-total strong{

    color:var(--zn-app-orange);

    font-size:24px;
    font-weight:800;
    letter-spacing:-.5px;
}


/* =========================================
   INTERRUPTOR DE IVA
========================================= */

.zn-quote-tax-toggle{

    width:100%;
    min-height:72px;

    margin:0;
    padding:13px;

    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    align-items:center;

    gap:12px;

    position:relative;

    border:1px solid var(--zn-app-border);
    border-radius:13px;

    background:#0d0d0d;

    cursor:pointer;
    user-select:none;
    touch-action:manipulation;
}

.zn-quote-tax-toggle input{

    width:1px;
    height:1px;

    position:absolute;

    opacity:0;
    pointer-events:none;
}

.zn-quote-tax-switch{

    width:46px;
    height:26px;

    display:block;

    position:relative;

    border:1px solid #444;
    border-radius:30px;

    background:#202020;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.zn-quote-tax-switch::after{

    content:"";

    width:20px;
    height:20px;

    position:absolute;
    left:2px;
    top:2px;

    border-radius:50%;

    background:#858585;

    box-shadow:
        0 2px 8px rgba(0,0,0,.35);

    transition:
        transform .18s ease,
        background .18s ease;
}

.zn-quote-tax-toggle input:checked + .zn-quote-tax-switch{

    border-color:var(--zn-app-orange);

    background:rgba(255,101,0,.22);
}

.zn-quote-tax-toggle input:checked + .zn-quote-tax-switch::after{

    transform:translateX(20px);

    background:var(--zn-app-orange);
}

.zn-quote-tax-toggle input:focus-visible + .zn-quote-tax-switch{

    box-shadow:
        0 0 0 4px rgba(255,101,0,.13);
}

.zn-quote-tax-toggle > span:last-child{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:4px;
}

.zn-quote-tax-toggle strong{

    color:#e6e6e6;

    font-size:12px;
    font-weight:720;
}

.zn-quote-tax-toggle small{

    color:#707070;

    font-size:10px;
    line-height:1.4;
}


/* =========================================
   ACCIONES FIJAS DEL EDITOR
========================================= */

.zn-quote-form-actions{

    flex:0 0 auto;

    padding:
        11px
        12px
        max(11px,env(safe-area-inset-bottom));

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

    gap:9px;

    border-top:1px solid var(--zn-app-border);

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

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

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.zn-quote-form-actions .zn-form-save-button{

    grid-column:1 / -1;
    grid-row:1;

    min-height:54px;
}

.zn-quote-form-actions .zn-form-cancel-button{

    grid-column:1;
    grid-row:2;

    min-height:52px;
}

.zn-quote-draft-button{

    grid-column:2;
    grid-row:2;

    width:100%;
    min-height:52px;

    padding:0 13px;

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

    gap:9px;

    border:1px solid rgba(255,101,0,.34);
    border-radius:12px;

    background:rgba(255,101,0,.075);

    color:var(--zn-app-orange);

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

    cursor:pointer;
    touch-action:manipulation;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        transform .16s ease;
}

.zn-quote-draft-button:active{

    transform:scale(.98);

    background:var(--zn-app-orange);

    color:#fff;
}

.zn-quote-draft-button:disabled,
.zn-quote-form-actions button:disabled{

    opacity:.62;

    cursor:not-allowed;

    transform:none;
}

.zn-quote-draft-loader,
.zn-quote-generate-loader{

    width:20px;
    height:20px;

    border:2px solid rgba(255,255,255,.34);
    border-top-color:currentColor;
    border-radius:50%;

    animation:znQuoteLoaderRotate .7s linear infinite;
}

@keyframes znQuoteLoaderRotate{

    to{
        transform:rotate(360deg);
    }

}


/* =========================================
   MÓDULO DE CÁMARA
========================================= */

.zn-camera-modal{

    width:100%;
    max-width:680px;
    max-height:calc(100dvh - 10px);

    padding:0;
    overflow:hidden;

    border-radius:22px 22px 0 0;

    background:
        linear-gradient(
            145deg,
            #1b1b1b,
            #0d0d0d
        );
}

.zn-camera-header{

    margin:0;
    padding:
        20px
        16px
        17px;

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

    background:rgba(18,18,18,.97);
}

.zn-camera-content{

    width:100%;
    max-height:calc(100dvh - 112px);

    padding:
        16px
        14px
        max(18px,env(safe-area-inset-bottom));

    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.zn-camera-state{

    width:100%;
}


/* =========================================
   ESTADO INICIAL DE CÁMARA
========================================= */

.zn-camera-start{

    min-height:390px;

    padding:32px 18px;

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

    text-align:center;
}

.zn-camera-start-icon{

    width:78px;
    height:78px;

    margin-bottom:22px;

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

    border-radius:22px;

    background:rgba(255,101,0,.1);

    color:var(--zn-app-orange);

    box-shadow:
        0 0 0 10px rgba(255,101,0,.03);
}

.zn-camera-start-icon svg{

    width:35px;
    height:35px;
}

.zn-camera-start > strong{

    color:#f1f1f1;

    font-size:17px;
    font-weight:750;
}

.zn-camera-start > p{

    max-width:410px;

    margin:9px auto 22px;

    color:#7f7f7f;

    font-size:12px;
    line-height:1.55;
}

.zn-camera-start-actions{

    width:100%;
    max-width:420px;

    display:grid;
    grid-template-columns:1fr;

    gap:10px;
}

.zn-camera-start-actions button{

    width:100%;
}


/* =========================================
   CÁMARA EN VIVO
========================================= */

.zn-camera-live{

    text-align:center;
}

.zn-camera-frame{

    width:100%;
    max-width:500px;

    margin:0 auto;

    position:relative;
    overflow:hidden;

    aspect-ratio:3 / 4;

    border:1px solid rgba(255,101,0,.32);
    border-radius:17px;

    background:#050505;

    box-shadow:
        0 18px 45px rgba(0,0,0,.42);
}

.zn-camera-frame video{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    background:#050505;
}

.zn-camera-guide{

    position:absolute;
    inset:16px;

    pointer-events:none;
}

.zn-camera-guide span{

    width:42px;
    height:42px;

    position:absolute;

    border-color:var(--zn-app-orange);
    border-style:solid;

    filter:
        drop-shadow(
            0 1px 2px rgba(0,0,0,.65)
        );
}

.zn-camera-guide span:nth-child(1){

    left:0;
    top:0;

    border-width:3px 0 0 3px;

    border-radius:8px 0 0 0;
}

.zn-camera-guide span:nth-child(2){

    right:0;
    top:0;

    border-width:3px 3px 0 0;

    border-radius:0 8px 0 0;
}

.zn-camera-guide span:nth-child(3){

    left:0;
    bottom:0;

    border-width:0 0 3px 3px;

    border-radius:0 0 0 8px;
}

.zn-camera-guide span:nth-child(4){

    right:0;
    bottom:0;

    border-width:0 3px 3px 0;

    border-radius:0 0 8px 0;
}

.zn-camera-help{

    max-width:480px;

    margin:13px auto 18px;

    color:#777;

    font-size:11px;
    line-height:1.5;
}

.zn-camera-capture-button{

    width:72px;
    height:72px;

    margin:0 auto;

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

    padding:0;

    border:4px solid rgba(255,255,255,.82);
    border-radius:50%;

    background:transparent;

    cursor:pointer;
    touch-action:manipulation;

    box-shadow:
        0 8px 25px rgba(0,0,0,.38);

    transition:
        transform .15s ease,
        border-color .18s ease;
}

.zn-camera-capture-button span{

    width:54px;
    height:54px;

    display:block;

    border-radius:50%;

    background:#fff;

    transition:
        transform .15s ease,
        background .18s ease;
}

.zn-camera-capture-button:active{

    transform:scale(.92);

    border-color:var(--zn-app-orange);
}

.zn-camera-capture-button:active span{

    transform:scale(.88);

    background:var(--zn-app-orange);
}


/* =========================================
   VISTA PREVIA DE CÁMARA
========================================= */

.zn-camera-preview-frame{

    width:100%;
    max-width:500px;

    margin:0 auto;

    overflow:hidden;

    aspect-ratio:3 / 4;

    border:1px solid rgba(255,101,0,.28);
    border-radius:17px;

    background:#050505;

    box-shadow:
        0 18px 45px rgba(0,0,0,.42);
}

.zn-camera-preview-frame img{

    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    background:#050505;
}

.zn-camera-preview-actions{

    width:100%;
    max-width:500px;

    margin:14px auto 0;

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

    gap:10px;
}

.zn-camera-preview-actions button{

    width:100%;
}


/* =========================================
   MENSAJE DE CÁMARA
========================================= */

#znCameraMessage{
    margin-top:14px;
}


/* =========================================
   ESTADOS DESHABILITADOS
========================================= */

.zn-quote-form.is-loading,
.zn-camera-modal.is-loading{

    cursor:progress;
}

.zn-quote-form.is-loading .zn-quote-form-content,
.zn-camera-modal.is-loading .zn-camera-content{

    pointer-events:none;

    opacity:.72;
}


/* =========================================
   CELULARES MUY PEQUEÑOS
========================================= */

@media(max-width:359px){

    .zn-quote-editor-overlay,
    .zn-camera-overlay{

        padding-left:3px;
        padding-right:3px;
    }

    .zn-quote-modal-header,
    .zn-camera-header{

        padding-left:13px;
        padding-right:13px;
    }

    .zn-quote-form-content,
    .zn-camera-content{

        padding-left:10px;
        padding-right:10px;
    }

    .zn-quote-section{
        padding:13px;
    }

    .zn-quote-client-summary{

        grid-template-columns:
            42px
            minmax(0,1fr)
            40px;

        padding:11px;
        gap:9px;
    }

    .zn-quote-client-icon{

        width:42px;
        height:42px;
    }

    .zn-quote-client-edit{

        width:40px;
        height:40px;
    }

    .zn-quote-form-actions{

        grid-template-columns:1fr;
    }

    .zn-quote-form-actions .zn-form-save-button,
    .zn-quote-form-actions .zn-form-cancel-button,
    .zn-quote-draft-button{

        grid-column:1;
    }

    .zn-quote-form-actions .zn-form-save-button{
        grid-row:1;
    }

    .zn-quote-draft-button{
        grid-row:2;
    }

    .zn-quote-form-actions .zn-form-cancel-button{
        grid-row:3;
    }

    .zn-camera-start{
        padding-left:10px;
        padding-right:10px;
    }

}


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

@media(min-width:600px){

    .zn-quote-editor-overlay,
    .zn-camera-overlay{

        padding:
            24px
            18px;

        align-items:center;
    }

    .zn-quote-editor-modal{

        max-height:calc(100dvh - 48px);

        border:1px solid var(--zn-app-border-strong);
        border-radius:21px;
    }

    .zn-quote-form{
        max-height:calc(100dvh - 48px);
    }

    .zn-quote-modal-header{

        padding:
            24px
            24px
            20px;
    }

    .zn-quote-modal-header h2{
        font-size:26px;
    }

    .zn-quote-form-content{

        padding:
            22px
            22px
            32px;
    }

    .zn-quote-section{
        padding:20px;
    }

    .zn-quote-section-header{

        flex-direction:row;
        align-items:flex-start;
    }

    .zn-quote-inline-button{

        width:auto;
        min-width:155px;

        flex:0 0 auto;
    }

    .zn-quote-meta-grid{

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

    .zn-quote-product-grid{

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

    .zn-quote-totals-layout{

        grid-template-columns:
            minmax(0,1.05fr)
            minmax(260px,.95fr);

        align-items:start;

        gap:18px;
    }

    .zn-quote-summary{

        position:sticky;
        top:0;
    }

    .zn-quote-form-actions{

        padding:
            13px
            22px;

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

        gap:10px;
    }

    .zn-quote-form-actions .zn-form-save-button,
    .zn-quote-form-actions .zn-form-cancel-button,
    .zn-quote-draft-button{

        width:auto;
        grid-column:auto;
        grid-row:auto;
    }

    .zn-quote-form-actions .zn-form-cancel-button{
        min-width:125px;
    }

    .zn-quote-draft-button{
        min-width:160px;
    }

    .zn-quote-form-actions .zn-form-save-button{
        min-width:190px;
    }

    .zn-camera-modal{

        max-height:calc(100dvh - 48px);

        border:1px solid var(--zn-app-border-strong);
        border-radius:21px;
    }

    .zn-camera-header{

        padding:
            24px
            24px
            20px;
    }

    .zn-camera-content{

        max-height:calc(100dvh - 165px);

        padding:
            22px
            22px
            24px;
    }

    .zn-camera-start-actions{

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

}


/* =========================================
   ESCRITORIO
========================================= */

@media(min-width:1024px){

    .zn-quote-editor-overlay,
    .zn-camera-overlay{

        padding:30px;
    }

    .zn-quote-editor-modal{

        max-width:1080px;
        max-height:calc(100dvh - 60px);
    }

    .zn-quote-form{
        max-height:calc(100dvh - 60px);
    }

    .zn-quote-modal-header{

        padding:
            26px
            30px
            22px;
    }

    .zn-quote-modal-header h2{
        font-size:28px;
    }

    .zn-quote-form-content{

        padding:
            25px
            30px
            36px;
    }

    .zn-quote-section{

        padding:23px;

        border-radius:17px;
    }

    .zn-quote-section + .zn-quote-section{
        margin-top:17px;
    }

    .zn-quote-meta-grid{

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr)
            minmax(0,.8fr);
    }

    .zn-quote-meta-grid .zn-form-field-full{
        grid-column:auto;
    }

    .zn-quote-product-grid{

        grid-template-columns:
            minmax(115px,.65fr)
            minmax(145px,.75fr)
            minmax(160px,.9fr)
            minmax(160px,.9fr);
    }

    .zn-quote-product-grid .zn-form-field-full{
        grid-column:1 / -1;
    }

    .zn-quote-form-actions{

        padding:
            14px
            30px;
    }

    .zn-camera-modal{

        max-width:760px;
        max-height:calc(100dvh - 60px);
    }

    .zn-camera-header{

        padding:
            26px
            30px
            22px;
    }

    .zn-camera-content{

        max-height:calc(100dvh - 175px);

        padding:
            24px
            30px
            28px;
    }

    .zn-camera-frame,
    .zn-camera-preview-frame{

        max-width:520px;

        aspect-ratio:4 / 3;
    }

}


/* =========================================
   DISPOSITIVOS CON MOUSE
========================================= */

@media(hover:hover) and (pointer:fine){

    .zn-form-select:hover,
    .zn-quote-product:hover{

        border-color:rgba(255,255,255,.15);
    }

    .zn-quote-inline-button:hover{

        border-color:var(--zn-app-orange);

        background:var(--zn-app-orange);

        color:#fff;
    }

    .zn-quote-client-edit:hover{

        border-color:rgba(255,101,0,.4);

        background:rgba(255,101,0,.08);

        color:var(--zn-app-orange);
    }

    .zn-quote-remove-product:hover{

        border-color:rgba(255,89,89,.45);

        background:rgba(255,89,89,.1);

        color:#ff8585;
    }

    .zn-quote-draft-button:hover{

        border-color:var(--zn-app-orange);

        background:var(--zn-app-orange);

        color:#fff;
    }

    .zn-camera-capture-button:hover{

        border-color:var(--zn-app-orange);
    }

    .zn-camera-capture-button:hover span{

        background:var(--zn-app-orange);
    }

}


/* =========================================
   REDUCCIÓN DE MOVIMIENTO
========================================= */

@media(prefers-reduced-motion:reduce){

    .zn-quote-editor-overlay *,
    .zn-quote-editor-overlay *::before,
    .zn-quote-editor-overlay *::after,
    .zn-camera-overlay *,
    .zn-camera-overlay *::before,
    .zn-camera-overlay *::after{

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
    }

}/* End custom CSS */