.elementor-2976 .elementor-element.elementor-element-52bcca6{--display:flex;--min-height:100vh;}.elementor-2976 .elementor-element.elementor-element-52bcca6:not(.elementor-motion-effects-element-type-background), .elementor-2976 .elementor-element.elementor-element-52bcca6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#141414;}@media(min-width:768px){.elementor-2976 .elementor-element.elementor-element-52bcca6{--content-width:100vw;}}/* Start custom CSS for html, class: .elementor-element-6d377d2 *//* ==============================
   ZIPNOVA ADMIN PANEL V4
================================*/


*{

box-sizing:border-box;

}

f
html{

scroll-behavior:smooth;

}


body{

margin:0;

min-height:100vh;


background:#030303;


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


color:white;


overflow-x:hidden;

}






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


.zipnova-admin{


--orange:#ff6500;

--orange-light:#ff7b22;


--bg:#050505;

--card:
rgba(255,255,255,.045);


--border:
rgba(255,255,255,.10);


--text:#ffffff;

--muted:#9b9b9b;



min-height:100vh;


display:flex;


background:

radial-gradient(
circle at top left,
rgba(255,101,0,.13),
transparent 28%
),

radial-gradient(
circle at top right,
rgba(255,255,255,.08),
transparent 25%
),

linear-gradient(
180deg,
#090909,
#000
);


}









/* ==============================
   MAIN CONTENT
================================*/


.admin-content{


flex:1;


padding:

46px 54px;



min-width:0;


animation:

panelFade .35s ease;


}





@keyframes panelFade{


from{


opacity:0;

transform:
translateY(10px);


}



to{


opacity:1;

transform:
translateY(0);


}


}









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


.admin-sidebar{


width:270px;


min-height:100vh;



padding:

34px 20px 26px;



background:

rgba(5,5,5,.72);



border-right:

1px solid var(--border);



backdrop-filter:

blur(30px);




display:flex;


flex-direction:column;



position:sticky;


top:0;


}




.admin-logo{


display:flex;


justify-content:center;


}




.admin-logo img{


width:160px;


margin-bottom:

58px;


}









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



.admin-menu{


display:flex;


flex-direction:column;


gap:10px;


flex:1;


}




.menu-item{


height:54px;



padding:

0 18px;




border:none;


border-radius:14px;



background:

transparent;



color:#aaa;



font-size:14px;


font-weight:500;




display:flex;


align-items:center;


gap:15px;




cursor:pointer;


position:relative;



transition:

all .25s ease;


}






.menu-item:hover{


background:

rgba(255,255,255,.07);



color:white;



transform:

translateX(3px);


}







.menu-item.active{


background:

linear-gradient(
90deg,
rgba(255,101,0,.28),
rgba(255,255,255,.05)
);



color:white;


}






.menu-item.active::before{


content:"";



position:absolute;


left:0;



width:4px;


height:70%;



border-radius:30px;



background:

var(--orange);


}






.menu-item .icon{


width:22px;


font-size:17px;


text-align:center;


}




.cerrar{


margin-top:30px;


color:#ff6b6b;


}









/* ==============================
   VERSION BOX
================================*/


.admin-version{


margin-top:auto;



padding:18px;



display:flex;


gap:14px;



background:

linear-gradient(
145deg,
rgba(255,255,255,.07),
rgba(255,255,255,.02)
);



border:

1px solid var(--border);



border-radius:18px;


}




.mini-logo{

width:34px;
height:34px;

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

flex-shrink:0;

}


.mini-logo img{

width:39px;
height:28px;

object-fit:contain;

display:block;

}




.admin-version strong{


font-size:12px;


}




.admin-version p{


margin:6px 0;


font-size:12px;


color:#aaa;


}




.admin-version small{


font-size:11px;


color:#777;


}









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


.admin-header{


display:flex;


justify-content:space-between;


align-items:center;



margin-bottom:32px;


}




.admin-header h1{


margin:0;



font-size:34px;


font-weight:600;



letter-spacing:-1px;


}




.admin-header p{


margin-top:10px;



color:var(--muted);



font-size:14px;


}






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


.perfil-wrapper{


position:relative;


}









.admin-user{


height:48px;



padding:

0 8px 0 16px;



display:flex;


align-items:center;


gap:12px;



background:

rgba(255,255,255,.045);



border:

1px solid var(--border);



border-radius:50px;



font-size:13px;



color:white;



cursor:pointer;



transition:.25s ease;


}









.admin-user:hover{


background:

rgba(255,255,255,.075);



border-color:

rgba(255,101,0,.35);



box-shadow:

0 0 25px rgba(255,101,0,.08);


}










.avatar{


width:34px;


height:34px;



border-radius:50%;



display:grid;


place-items:center;



background:

rgba(255,255,255,.08);



font-size:14px;


}










/* BURBUJA NOTIFICACION */


.perfil-notificacion{


min-width:22px;


height:22px;



display:none;



align-items:center;


justify-content:center;



border-radius:50%;



background:

var(--orange);



color:white;



font-size:11px;


font-weight:700;



box-shadow:

0 0 20px rgba(255,101,0,.35);


}









/* CUANDO EXISTAN NOTIFICACIONES */


.perfil-notificacion.active{


display:flex;


}


/* BURBUJA NOTIFICACION */


.perfil-notificacion{


min-width:22px;


height:22px;



display:flex;


align-items:center;


justify-content:center;



border-radius:50%;



background:

var(--orange);



color:white;



font-size:11px;


font-weight:700;



box-shadow:

0 0 20px rgba(255,101,0,.35);


}


/* ==============================
   DROPDOWN PERFIL
================================*/


.perfil-dropdown{


position:absolute;


top:58px;


right:0;


width:310px;


padding:14px;



display:none;



background:

linear-gradient(
145deg,
rgba(18,18,18,.98),
rgba(5,5,5,.98)
);



border:

1px solid rgba(255,255,255,.10);



border-radius:20px;



backdrop-filter:

blur(25px);



box-shadow:

0 25px 70px rgba(0,0,0,.65);



z-index:999;



animation:

perfilShow .22s ease;


}








.perfil-dropdown.active{


display:block;


}









@keyframes perfilShow{


from{


opacity:0;



transform:

translateY(-10px)
scale(.97);


}



to{


opacity:1;



transform:

translateY(0)
scale(1);


}


}









/* INFO USUARIO */


.perfil-info{


padding:

6px 6px 14px;



display:flex;


align-items:center;


gap:12px;



border-bottom:

1px solid rgba(255,255,255,.08);


}








.perfil-avatar{


width:36px;


height:36px;



border-radius:50%;



display:grid;


place-items:center;



background:

rgba(255,101,0,.13);



color:#ff6500;



font-size:15px;


}








.perfil-info strong{


font-size:13px;



font-weight:600;


}







.perfil-info p{


margin:

5px 0 0;



font-size:12px;



color:#888;


}










/* OPCIONES PERFIL */


.perfil-opcion{


width:100%;



margin-top:8px;



padding:

12px 10px;



display:flex;


align-items:center;



gap:12px;




background:

transparent;



border:none;



border-radius:13px;



color:white;



text-align:left;



cursor:pointer;



transition:.25s ease;


}









.perfil-opcion:hover{


background:

rgba(255,101,0,.10);


}









.perfil-icon{


width:32px;


height:32px;



display:grid;



place-items:center;



border-radius:10px;



background:

rgba(255,255,255,.06);



font-size:14px;


}









.perfil-opcion strong{


font-size:13px;



font-weight:600;


}









.perfil-opcion p{


margin:

5px 0 0;



font-size:12px;



color:#858585;


}









.perfil-arrow{


margin-left:auto;



color:#777;



font-size:22px;


}









.contador-dropdown{


margin-left:auto;



min-width:22px;


height:22px;



display:none;



align-items:center;


justify-content:center;



border-radius:50%;



background:

var(--orange);



font-size:11px;



font-weight:700;



box-shadow:

0 0 18px rgba(255,101,0,.35);


}





/* INFO ARRIBA */


.perfil-info{


padding:

8px 8px 18px;



display:flex;


align-items:center;


gap:14px;



border-bottom:

1px solid rgba(255,255,255,.08);


}








.perfil-avatar{


width:42px;


height:42px;



border-radius:50%;



display:grid;


place-items:center;



background:

rgba(255,101,0,.15);



color:#ff6500;


}








.perfil-info strong{


font-size:13px;


}






.perfil-info p{


margin:

5px 0 0;



font-size:12px;



color:#888;


}











/* OPCIONES */


.perfil-opcion{


width:100%;



margin-top:10px;



padding:14px 12px;



display:flex;


align-items:center;



gap:14px;




background:

transparent;




border:none;


border-radius:14px;



color:white;




text-align:left;



cursor:pointer;



transition:.25s ease;


}








.perfil-opcion:hover{


background:

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


}










.perfil-icon{


width:34px;


height:34px;



display:grid;


place-items:center;



border-radius:10px;



background:

rgba(255,255,255,.07);


}










.perfil-opcion strong{


font-size:13px;


}








.perfil-opcion p{


margin:

5px 0 0;



font-size:12px;



color:#888;


}









.perfil-arrow{


margin-left:auto;



color:#777;


font-size:22px;


}










.contador-dropdown{


margin-left:auto;



min-width:24px;



height:24px;



display:flex;


align-items:center;


justify-content:center;



border-radius:50%;



background:

var(--orange);



font-size:11px;



font-weight:700;


}









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



.orders-card,
.stat-card{



background:

linear-gradient(
145deg,
rgba(255,255,255,.075),
rgba(255,255,255,.025)
);



border:

1px solid var(--border);



backdrop-filter:

blur(20px);



box-shadow:

0 25px 60px rgba(0,0,0,.25);


}







.orders-card{


padding:26px;



border-radius:22px;



overflow:hidden;


}











/* ==============================
   STATS
================================*/



.stats-grid{


display:grid;



grid-template-columns:

repeat(5,1fr);



gap:20px;



margin-bottom:26px;


}






.stat-card{


height:112px;



padding:22px;



border-radius:18px;




display:flex;



justify-content:space-between;


align-items:center;



transition:.25s ease;


}





.stat-card:hover{


transform:

translateY(-4px);



border-color:

rgba(255,101,0,.25);


}







.stat-card p{


margin:0;



font-size:13px;



color:#aaa;


}





.stat-card h2{


margin:

10px 0 0;



font-size:30px;



font-weight:600;


}






.stat-icon{


width:48px;


height:48px;



border-radius:50%;




display:grid;


place-items:center;



font-size:18px;


}








/* COLORES ESTADISTICAS */


.orange{


color:#ff6500;


background:#ff650026;


}



.green{


color:#39e75f;


background:#39e75f25;


}



.yellow{


color:#ffd000;


background:#ffd00025;


}



.blue{


color:#00aaff;


background:#00aaff25;


}

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


.orders-top{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-bottom:28px;

}



.orders-top h2{

margin:0;

font-size:28px;

font-weight:600;

letter-spacing:-1px;

}








/* ==============================
   BOTON CREAR
================================*/


#crearPedido,
#btnNuevoCliente{


height:48px;


padding:

0 28px;


border:none;


border-radius:12px;



background:

linear-gradient(
135deg,
var(--orange),
var(--orange-light)
);



color:white;


font-size:14px;


font-weight:600;



cursor:pointer;



transition:.25s ease;



box-shadow:

0 14px 35px rgba(255,101,0,.22);


}





#crearPedido:hover,
#btnNuevoCliente:hover{


transform:

translateY(-3px);



box-shadow:

0 20px 45px rgba(255,101,0,.32);


}









/* ==============================
   FILTROS
================================*/


.orders-filter{


display:flex;


gap:14px;



margin-bottom:26px;


}





.orders-filter input,
.orders-filter select{



height:50px;



background:

rgba(0,0,0,.35);



border:

1px solid rgba(255,255,255,.11);



border-radius:12px;



padding:

0 18px;



color:white;



font-size:14px;



outline:none;



transition:.25s ease;


}






.orders-filter input{


width:340px;


}





.orders-filter input:focus,
.orders-filter select:focus{


border-color:

var(--orange);



box-shadow:

0 0 0 3px rgba(255,101,0,.12);


}



/* ==============================
   SELECT FILTRO ESTADO PREMIUM
================================*/


.orders-filter select{


appearance:none;

-webkit-appearance:none;

-moz-appearance:none;



background:

linear-gradient(
145deg,
rgba(20,20,20,.95),
rgba(5,5,5,.95)
);



border:

1px solid rgba(255,255,255,.12);



color:white;


font-weight:500;


cursor:pointer;


min-width:200px;


background-image:

linear-gradient(
45deg,
transparent 50%,
#ff6500 50%
),

linear-gradient(
135deg,
#ff6500 50%,
transparent 50%
);


background-position:

calc(100% - 20px) 22px,

calc(100% - 14px) 22px;


background-size:

6px 6px;


background-repeat:no-repeat;



}





.orders-filter select:hover{


border-color:

rgba(255,101,0,.6);


background-color:

rgba(255,101,0,.04);


}





.orders-filter select option{


background:

#111;


color:white;


font-size:14px;


padding:14px;


}





.orders-filter select option:hover,
.orders-filter select option:checked{


background:

#ff6500;


color:white;


}







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

table{

width:100%;

border-collapse:collapse;

}

thead{

background:

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

}

/* Encabezados centrados */
th{

padding:

16px 18px;

text-align:center;

font-size:12px;

font-weight:500;

color:#888;

text-transform:uppercase;

letter-spacing:.4px;

}

/* Datos alineados a la izquierda */
td{

padding:

18px;

border-top:

1px solid rgba(255,255,255,.07);

font-size:13.5px;

color:#e8e8e8;

text-align:left;

}

/* Pedidos centrado */
td:nth-child(6){

text-align:center;

}

/* Acciones centradas */
td:nth-child(7){

text-align:center;

}







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


.btn-editar,
.btn-eliminar,
.btn-editar-pedido,
.btn-eliminar-pedido{



width:40px;


height:40px;



border:none;



border-radius:10px;



cursor:pointer;



font-size:15px;



transition:.25s ease;


}






.btn-editar,
.btn-editar-pedido{


background:

rgba(255,255,255,.08);



color:white;


}





.btn-editar:hover,
.btn-editar-pedido:hover{


background:

rgba(255,255,255,.18);



transform:scale(1.08);


}







.btn-eliminar,
.btn-eliminar-pedido{


background:

rgba(255,0,0,.12);



color:#ff5555;


}






.btn-eliminar:hover,
.btn-eliminar-pedido:hover{


background:

rgba(255,0,0,.22);



transform:scale(1.08);


}









/* ==============================
   FORM NUEVO PEDIDO
================================*/


.nuevo-pedido-card{


padding:

34px;



border-radius:22px;


}





.form-section h2{


margin:

0 0 26px;



font-size:19px;



font-weight:600;


}






.nuevo-pedido-card hr{


height:1px;



border:none;



background:

rgba(255,255,255,.08);



margin:

38px 0;


}









.form-grid{


display:grid;


gap:

28px 34px;


}





.form-grid.tres{


grid-template-columns:

repeat(3,1fr);


}









/* CAMPOS */


.campo{


display:flex;


flex-direction:column;


}





.campo label{


margin-bottom:10px;



font-size:13px;



color:#ddd;


}






.campo input,
.campo select{



height:52px;



width:100%;




background:

rgba(0,0,0,.32);




border:

1px solid rgba(255,255,255,.12);




border-radius:12px;




padding:

0 18px;



color:white;



font-size:15px;




outline:none;




transition:.25s ease;


}







.campo input::placeholder{


color:#777;


}






.campo input:focus,
.campo select:focus{



border-color:

var(--orange);



box-shadow:

0 0 0 3px rgba(255,101,0,.12);


}






.campo small{


margin-top:9px;



font-size:12px;



color:#888;


}





/* ==============================
   SELECTS FORMULARIOS PREMIUM
================================*/


.campo select{


appearance:none;

-webkit-appearance:none;

-moz-appearance:none;



background:

linear-gradient(
145deg,
rgba(18,18,18,.95),
rgba(3,3,3,.95)
);



border:

1px solid rgba(255,255,255,.12);



color:white;


font-weight:500;


cursor:pointer;



background-image:

linear-gradient(
45deg,
transparent 50%,
#ff6500 50%
),

linear-gradient(
135deg,
#ff6500 50%,
transparent 50%
);



background-position:

calc(100% - 22px) 23px,

calc(100% - 15px) 23px;



background-size:

7px 7px;



background-repeat:no-repeat;


}






.campo select:hover{


border-color:

rgba(255,101,0,.55);


background-color:

rgba(255,101,0,.05);


}






.campo select:focus{


border-color:

var(--orange);



box-shadow:

0 0 0 3px rgba(255,101,0,.13);


}







.campo select option{


background:

#101010;


color:white;


font-size:14px;


padding:14px;


}






.campo select option:checked{


background:

#ff6500;


color:white;


}




/* ==============================
   PRODUCTOS DINÁMICOS
================================*/


.form-section-productos{


width:100%;


}





.lista-productos-pedido{


display:flex;


flex-direction:column;


gap:18px;


}





.producto-item{


width:100%;


padding:22px;


border:

1px solid rgba(255,255,255,.10);


border-radius:16px;


background:

linear-gradient(
145deg,
rgba(255,255,255,.055),
rgba(255,255,255,.018)
);


box-shadow:

0 14px 35px rgba(0,0,0,.18);


transition:

border-color .25s ease,
background .25s ease,
transform .25s ease,
opacity .25s ease;


animation:

productoEntrada .25s ease;


}





.producto-item:hover{


border-color:

rgba(255,101,0,.25);


background:

linear-gradient(
145deg,
rgba(255,255,255,.065),
rgba(255,101,0,.025)
);


}





@keyframes productoEntrada{


from{


opacity:0;


transform:

translateY(10px);


}


to{


opacity:1;


transform:

translateY(0);


}


}





.producto-item-header{


min-height:32px;


margin-bottom:18px;


display:flex;


align-items:center;


justify-content:space-between;


gap:20px;


}





.producto-titulo{


margin:0;


font-size:15px;


font-weight:600;


color:#ffffff;


letter-spacing:.1px;


}





.producto-grid{


display:grid;


grid-template-columns:

minmax(0,1fr) 260px;


gap:24px;


align-items:end;


}





.producto-nombre-box{


min-width:0;


}





.producto-nombre{


text-transform:none;


}





.producto-cantidad{


min-width:0;


}





/* ==============================
   CANTIDAD
================================*/


.cantidad-input{


width:100%;


height:52px;


display:flex;


overflow:hidden;


border-radius:12px;


border:

1px solid rgba(255,255,255,.12);


background:

rgba(0,0,0,.32);


transition:.25s ease;


}





.cantidad-input:focus-within{


border-color:

var(--orange);


box-shadow:

0 0 0 3px rgba(255,101,0,.12);


}





.cantidad-input input{


flex:1;


min-width:0;


height:100%;


border:none;


border-radius:0;


background:transparent;


box-shadow:none;


}





.cantidad-input input:focus{


border:none;


box-shadow:none;


}





.cantidad-input span{


width:72px;


flex-shrink:0;


display:grid;


place-items:center;


background:

rgba(255,255,255,.06);


border-left:

1px solid rgba(255,255,255,.08);


color:#aaa;


font-size:13px;


font-weight:500;


}





/* ==============================
   ELIMINAR PRODUCTO
================================*/


.btn-eliminar-producto{


height:34px;


padding:

0 14px;


display:inline-flex;


align-items:center;


justify-content:center;


gap:6px;


border:

1px solid rgba(255,80,80,.22);


border-radius:9px;


background:

rgba(255,70,70,.08);


color:#ff7777;


font-family:inherit;


font-size:12px;


font-weight:600;


cursor:pointer;


transition:.25s ease;


}





.btn-eliminar-producto:hover{


border-color:

rgba(255,80,80,.45);


background:

rgba(255,70,70,.16);


color:#ff9999;


transform:

translateY(-1px);


}





.btn-eliminar-producto:active{


transform:

translateY(0);


}





.btn-eliminar-producto[hidden]{


display:none;


}





/* ==============================
   AGREGAR PRODUCTO
================================*/


.btn-agregar-producto{


height:48px;


margin-top:18px;


padding:

0 22px;


display:inline-flex;


align-items:center;


justify-content:center;


gap:10px;


border:

1px dashed rgba(255,101,0,.45);


border-radius:12px;


background:

rgba(255,101,0,.055);


color:#ffffff;


font-family:inherit;


font-size:14px;


font-weight:600;


cursor:pointer;


transition:.25s ease;


}





.btn-agregar-producto span{


width:24px;


height:24px;


display:grid;


place-items:center;


border-radius:50%;


background:

rgba(255,101,0,.18);


color:

var(--orange);


font-size:18px;


font-weight:400;


line-height:1;


}





.btn-agregar-producto:hover{


border-color:

var(--orange);


background:

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


transform:

translateY(-2px);


box-shadow:

0 12px 28px rgba(255,101,0,.12);


}





.btn-agregar-producto:active{


transform:

translateY(0);


}





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


@media(max-width:900px){


.producto-grid{


grid-template-columns:

minmax(0,1fr) 220px;


gap:18px;


}


}





@media(max-width:650px){


.producto-item{


padding:18px;


}





.producto-item-header{


margin-bottom:16px;


align-items:flex-start;


}





.producto-grid{


grid-template-columns:1fr;


gap:18px;


}





.btn-agregar-producto{


width:100%;


}





.btn-eliminar-producto{


height:32px;


padding:

0 11px;


}


}







/* ==============================
   ESTADOS
================================*/


.estado{


display:inline-flex;



padding:

7px 14px;



border-radius:30px;




font-size:12px;



font-weight:600;


}






.estado-.elementor-2976 .elementor-element.elementor-element-6d377d2{


display:flex;



gap:16px;



flex-wrap:wrap;


}






.estado-option{



width:170px;


height:50px;



background:

rgba(0,0,0,.28);




border:

1px solid rgba(255,255,255,.12);




border-radius:12px;




color:white;




font-size:14px;




cursor:pointer;




transition:.25s ease;


}






.estado-option:hover{


background:

rgba(255,255,255,.08);


}






.estado-option.activo{


border-color:

var(--orange);



background:

rgba(255,101,0,.15);


}







.recibido{

color:#39e75f;

}


.preparando{

color:#ff6500;

}


.listo{

color:#ffd000;

}


.camino{

color:#00aaff;

}









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


.form-actions{


margin-top:36px;



display:flex;



justify-content:flex-end;



gap:16px;


}







.btn-secundario,
.btn-principal{



height:50px;



padding:

0 34px;




border-radius:12px;



font-size:14px;



cursor:pointer;



transition:.25s ease;


}






.btn-secundario{


background:

rgba(255,255,255,.03);



border:

1px solid rgba(255,255,255,.14);



color:white;


}






.btn-secundario:hover{


background:

rgba(255,255,255,.08);


}






.btn-principal{


border:none;




background:

linear-gradient(
135deg,
var(--orange),
var(--orange-light)
);




color:white;




font-weight:600;



box-shadow:

0 15px 35px rgba(255,101,0,.22);


}






.btn-principal:hover{


transform:

translateY(-3px);


}

/* ==============================
   CLIENTES VIEW
================================*/


.clientes-card{

padding:0;

overflow:hidden;

}






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


.clientes-top{


padding:

30px 28px;



display:flex;


justify-content:space-between;


align-items:center;


gap:20px;




border-bottom:

1px solid rgba(255,255,255,.08);


}






.buscador-clientes{


height:54px;


width:560px;




display:flex;


align-items:center;


gap:15px;



padding:

0 18px;




background:

rgba(0,0,0,.35);




border:

1px solid rgba(255,255,255,.12);



border-radius:14px;



transition:.25s ease;


}







.buscador-clientes:focus-within{


border-color:

var(--orange);



box-shadow:

0 0 0 3px rgba(255,101,0,.12);


}







.buscador-clientes span{


font-size:22px;



color:#999;


}






.buscador-clientes input{


width:100%;



height:100%;



background:none;



border:none;



outline:none;




color:white;



font-size:14px;


}









/* ==============================
   TABLA CLIENTES
================================*/


.titulo-tabla{


margin:

30px 28px 20px;



font-size:20px;



font-weight:600;


}







.clientes-card table{


width:

calc(100% - 56px);



margin:

0 28px;


}








.badge-pedidos{


width:42px;



height:34px;



display:inline-flex;



align-items:center;


justify-content:center;



border-radius:10px;



background:

rgba(255,101,0,.16);



color:

var(--orange);




font-weight:700;


}










/* ==============================
   PAGINACION
================================*/


.pagination{


margin-top:26px;



padding:

0 28px 26px;



display:flex;



justify-content:space-between;



align-items:center;



gap:20px;


}






.pagination p{


font-size:14px;



color:#aaa;


}






#paginacion,
#paginacionClientes{


display:flex;



gap:10px;


}






#paginacion button,
#paginacionClientes button{



width:40px;



height:40px;



border-radius:10px;



background:

rgba(255,255,255,.06);




border:

1px solid rgba(255,255,255,.12);




color:white;



cursor:pointer;


}







#paginacion button.active,
#paginacionClientes button.active{


background:

var(--orange);



border-color:

var(--orange);


}









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

.modal-cliente{

position:fixed;
inset:0;

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

padding:24px;

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

backdrop-filter:blur(10px);

z-index:999;

}

.modal-cliente.active{

display:flex;

}

.modal-box{

width:min(1500px,96vw);

max-height:94vh;

display:flex;
flex-direction:column;

padding:30px;

overflow:hidden;

border-radius:24px;

background:
linear-gradient(
145deg,
#161616,
#050505
);

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

box-shadow:
0 40px 100px rgba(0,0,0,.75);

animation:
modalShow .25s ease;

}

@keyframes modalShow{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.modal-header{

display:grid;

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

align-items:center;

column-gap:24px;

margin-bottom:18px;

flex-shrink:0;

padding-left:0;

margin-left:-18px;

}

.modal-header h2{

margin:0;

font-size:24px;

font-weight:600;

}

#cerrarModalCliente{

width:42px;
height:42px;

border:none;

border-radius:50%;

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

color:white;

font-size:24px;

cursor:pointer;

transition:.25s;

}

#cerrarModalCliente:hover{

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

}

.cliente-layout{

flex:1;

display:grid;

/* columnas un poco más angostas */
grid-template-columns:minmax(0,0.92fr) minmax(0,0.92fr);

justify-content:center;

/* menos espacio entre ambas */
gap:16px;

overflow:hidden;

align-items:start;

}

.cliente-columna{

display:flex;

flex-direction:column;

padding:16px;

border-radius:18px;

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

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

overflow-y:auto;

gap:6px;

}

.cliente-columna::-webkit-scrollbar{

width:6px;

}

.cliente-columna::-webkit-scrollbar-thumb{

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

border-radius:20px;

}

.titulo-seccion{

margin:0 0 18px;

padding-bottom:14px;

font-size:16px;

font-weight:600;

color:#ffffff;

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

letter-spacing:.2px;

}

.modal-box .campo{

display:grid;

grid-template-columns:150px 1fr;

align-items:center;

gap:12px;

margin-bottom:14px;

}

.modal-box .campo:last-child{

margin-bottom:0;

}

.modal-box .campo label{

margin:0;

font-size:13px;

font-weight:500;

line-height:1.2;

color:#cfcfcf;

letter-spacing:.2px;

}

.modal-box input{

height:42px;

padding:0 16px;

font-size:14px;

border-radius:10px;

}

.campo-pdf{

display:block !important;

margin-bottom:20px;

}

/* ===========================
   CONTENEDORES
=========================== */

#contenedorSeleccionConstancia{

width:100%;

}

#contenedorConstanciaPDF{

display:flex;

gap:12px;

width:100%;

}

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

.btn-subir-pdf{

width:100%;

height:48px;

display:flex;

align-items:center;

justify-content:center;

gap:8px;

padding:0 18px;

border:1px dashed rgba(255,101,0,.40);

border-radius:12px;

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

color:#f2f2f2;

font-size:14px;

font-weight:500;

cursor:pointer;

transition:.25s ease;

}

.btn-subir-pdf:hover{

border-color:var(--orange);

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

transform:translateY(-1px);

}

/* ===========================
   BOTÓN VER PDF
=========================== */

.btn-pdf-secundario{

flex:1;

height:48px;

display:flex;

align-items:center;

justify-content:center;

gap:8px;

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

border-radius:12px;

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

color:#ffffff;

font-size:14px;

font-weight:500;

cursor:pointer;

transition:.25s ease;

}

.btn-pdf-secundario:hover{

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

transform:translateY(-1px);

}

/* ===========================
   BOTÓN CAMBIAR PDF
=========================== */

.btn-pdf-principal{

flex:1;

height:48px;

display:flex;

align-items:center;

justify-content:center;

gap:8px;

border:none;

border-radius:12px;

background:linear-gradient(
135deg,
var(--orange),
var(--orange-light)
);

color:#fff;

font-size:14px;

font-weight:600;

cursor:pointer;

transition:.25s ease;

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

}

.btn-pdf-principal:hover{

transform:translateY(-2px);

box-shadow:
0 18px 36px rgba(255,101,0,.30);

}

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

@media(max-width:650px){

#contenedorConstanciaPDF{

flex-direction:column;

}

.btn-pdf-secundario,
.btn-pdf-principal{

width:100%;

}

}

.form-actions{

margin-top:18px;

display:flex;

justify-content:flex-end;

gap:16px;

flex-shrink:0;

}

@media(max-width:900px){

.modal-box{

width:100%;

max-height:94vh;

overflow-y:auto;

}

.cliente-layout{

grid-template-columns:1fr;

gap:18px;

overflow:visible;

}

.cliente-columna{

overflow:visible;

}

.modal-box .campo{

display:flex;

flex-direction:column;

align-items:stretch;

gap:8px;

}

}





/* ==============================
   CONTROL VISTAS
================================*/


.admin-view{


display:none;



animation:

viewFade .25s ease;


}







.admin-view.active{


display:block;


}








@keyframes viewFade{


from{


opacity:0;


transform:

translateY(12px);


}




to{


opacity:1;



transform:

translateY(0);


}



}

/* ==============================
   MODAL HISTORIAL ACTIVIDAD
================================*/


.modal-historial{


position:fixed;


inset:0;



display:none;



align-items:center;


justify-content:flex-end;



padding-right:70px;



background:

rgba(0,0,0,.58);



backdrop-filter:

blur(14px);



z-index:2000;


}









.modal-historial.active{


display:flex;


}









.historial-box{


width:900px;



height:82vh;



padding:30px;



display:flex;


flex-direction:column;



background:

linear-gradient(
145deg,
rgba(22,22,22,.98),
rgba(6,6,6,.98)
);



border:

1px solid rgba(255,255,255,.12);



border-radius:26px;



box-shadow:

0 40px 120px rgba(0,0,0,.85);



animation:

historialEntrada .28s ease;



overflow:hidden;


}









@keyframes historialEntrada{


from{


opacity:0;



transform:

translateX(45px)
scale(.98);


}




to{


opacity:1;



transform:

translateX(0)
scale(1);


}


}





/* HEADER */


.historial-header{


display:flex;


justify-content:space-between;


align-items:flex-start;



margin-bottom:22px;


}







.historial-title{


display:flex;


gap:14px;


align-items:center;


}








.historial-icon{


width:42px;


height:42px;



display:grid;


place-items:center;



border-radius:50%;



background:

rgba(255,101,0,.15);



color:var(--orange);



font-size:22px;


}








.historial-header h2{


margin:0;



font-size:22px;


font-weight:600;


}








.historial-header p{


margin-top:6px;



font-size:13px;



color:var(--muted);


}









.cerrar-historial{


background:none;



border:none;



color:white;



font-size:28px;



cursor:pointer;


}









/* ==============================
   FILTROS HISTORIAL
================================*/


.historial-filtros{


display:grid;


/* Buscador más grande + filtros equilibrados */

grid-template-columns:

1.8fr 1.15fr 180px;


gap:14px;


margin-bottom:22px;


}









.historial-buscador{


width:100%;


height:56px;


position:relative;


display:flex;


align-items:center;


}









.historial-buscador input{


width:100%;


height:100%;


padding:

0 48px 0 22px;


}









.historial-buscador span{


position:absolute;


right:18px;


top:50%;


transform:

translateY(-50%);


font-size:18px;


color:var(--muted);


pointer-events:none;


}







.historial-filtros input,
.historial-filtros select{


height:46px;



padding:

0 16px;



background:

linear-gradient(
145deg,
rgba(20,20,20,.95),
rgba(5,5,5,.95)
);



border:

1px solid rgba(255,255,255,.12);



border-radius:12px;



color:white;



font-size:14px;



outline:none;



transition:.25s ease;


}









.historial-filtros input:focus,
.historial-filtros select:focus{


border-color:

var(--orange);



box-shadow:

0 0 0 3px rgba(255,101,0,.12);


}









/* SELECT HISTORIAL */


.historial-filtros select{


appearance:none;

-webkit-appearance:none;

-moz-appearance:none;



cursor:pointer;


font-weight:500;



background-image:

linear-gradient(
45deg,
transparent 50%,
#ff6500 50%
),

linear-gradient(
135deg,
#ff6500 50%,
transparent 50%
);



background-position:

calc(100% - 20px) 20px,

calc(100% - 14px) 20px;



background-size:

6px 6px;



background-repeat:no-repeat;


}









.historial-filtros select:hover{


border-color:

rgba(255,101,0,.55);


}









.historial-filtros select option{


background:#111;



color:white;



font-size:14px;



padding:14px;


}









.historial-filtros select option:checked{


background:#ff6500;



color:white;


}











/* AVISO */


.historial-aviso{


padding:16px;



margin-bottom:20px;



display:flex;


justify-content:space-between;


align-items:center;



border:

1px solid rgba(255,255,255,.08);



border-radius:14px;



background:

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


}








.historial-aviso strong{


font-size:13px;


}







.historial-aviso p{


margin-top:6px;



font-size:12px;


color:#888;


}








.historial-aviso button{


padding:

12px 18px;



border-radius:10px;



border:

1px solid rgba(255,101,0,.5);



background:

transparent;



color:white;



cursor:pointer;


}









/* LISTA */


.lista-historial{


flex:1;



overflow-y:auto;



border-top:

1px solid rgba(255,255,255,.08);



border-bottom:

1px solid rgba(255,255,255,.08);


}








.historial-vacio{


height:180px;



display:flex;


align-items:center;


justify-content:center;



color:#777;



font-size:14px;


}




/* ==============================
   ITEMS HISTORIAL FIREBASE
================================*/


.historial-item{


display:grid;


grid-template-columns:

46px 1fr auto;



gap:18px;



align-items:flex-start;



padding:

18px 0;



border-bottom:

1px solid rgba(255,255,255,.08);



}






.historial-item:last-child{


border-bottom:none;


}









.historial-item-icon{


width:42px;


height:42px;



border-radius:50%;



display:grid;


place-items:center;



background:

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



color:

var(--orange);



font-size:17px;



}









.historial-item-info{


display:flex;


flex-direction:column;


gap:6px;


}









.historial-item-info strong{


font-size:15px;


font-weight:600;


color:white;


}









.historial-item-info p{


margin:0;



font-size:13px;



color:

rgba(255,255,255,.75);


}









.historial-item-info span{


display:inline-block;



width:max-content;



padding:

5px 10px;



border-radius:8px;



background:

rgba(255,255,255,.06);



font-size:12px;



color:

rgba(255,255,255,.65);


}









.historial-item-info small{


font-size:12px;



color:

rgba(255,255,255,.45);


}









.historial-fecha{


font-size:12px;



color:

rgba(255,255,255,.55);



white-space:nowrap;



padding-top:4px;


}









.historial-vacio{


height:260px;



display:flex;


align-items:center;


justify-content:center;



font-size:14px;



color:

rgba(255,255,255,.4);


}




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


.historial-footer{


padding-top:18px;



display:flex;


justify-content:space-between;


align-items:center;


gap:20px;


}









#contadorHistorial{


margin:0;



font-size:13px;



color:#888;


}











.btn-pdf{


height:46px;



padding:

0 22px;



display:flex;


align-items:center;


justify-content:center;


gap:12px;



border-radius:12px;



border:

1px solid rgba(255,101,0,.45);



background:

rgba(255,101,0,.04);



color:white;



cursor:pointer;



transition:.25s ease;


}










.btn-pdf:hover{


background:

rgba(255,101,0,.10);



border-color:

rgba(255,101,0,.8);


}











.btn-pdf span{


font-size:18px;



color:var(--orange);


}










.btn-pdf div{


display:flex;


align-items:center;


}











.btn-pdf strong{


font-size:14px;



font-weight:600;


}











.btn-pdf p{


display:none;


}


/* ==============================
   MODAL WHATSAPP
================================*/


.modal-whatsapp{


position:fixed;


inset:0;


display:none;


align-items:center;


justify-content:center;


background:

rgba(0,0,0,.60);


backdrop-filter:

blur(14px);


z-index:1000;


}






.modal-whatsapp.active{


display:flex;


}








.whatsapp-box{


width:430px;


padding:

38px 34px;



text-align:center;



border-radius:24px;



background:

linear-gradient(
145deg,
rgba(22,22,22,.96),
rgba(5,5,5,.96)
);



border:

1px solid rgba(255,255,255,.12);



box-shadow:

0 40px 100px rgba(0,0,0,.75);



animation:

whatsappShow .28s ease;


}








@keyframes whatsappShow{


from{


opacity:0;


transform:

scale(.92)
translateY(20px);


}



to{


opacity:1;


transform:

scale(1)
translateY(0);


}


}









.whatsapp-icon{


width:70px;


height:70px;


margin:

0 auto 22px;



display:grid;


place-items:center;



border-radius:50%;



background:

rgba(37,211,102,.15);



color:#25d366;



font-size:34px;


font-weight:700;



box-shadow:

0 0 35px rgba(37,211,102,.18);


}









.whatsapp-box h2{


margin:

0 0 14px;



font-size:26px;



font-weight:600;



letter-spacing:-.5px;


}









.whatsapp-box p{


margin:0;



font-size:14px;



line-height:1.7;



color:#aaa;


}











.whatsapp-info{


margin:

28px 0;



height:54px;



padding:

0 20px;



display:flex;


align-items:center;


justify-content:space-between;



border-radius:14px;



background:

rgba(255,255,255,.05);



border:

1px solid rgba(255,255,255,.10);


}








.whatsapp-info span{


font-size:13px;


color:#999;


}







.whatsapp-info strong{


font-size:16px;



color:#ff6500;


}











.whatsapp-actions{


display:flex;


gap:14px;


justify-content:center;


}








.whatsapp-actions button{


flex:1;


}



/* ==============================
   MODAL REPORTES GUARDADOS
================================*/


.modal-reportes{


position:fixed;

inset:0;


display:none;


align-items:center;

justify-content:center;


background:

rgba(0,0,0,.55);


backdrop-filter:

blur(14px);


z-index:3000;


}






.modal-reportes.active{


display:flex;


}








.reportes-box{


width:620px;


max-height:80vh;


padding:28px;


display:flex;

flex-direction:column;

gap:24px;


background:

linear-gradient(
145deg,
rgba(22,22,22,.98),
rgba(8,8,8,.98)
);


border:

1px solid rgba(255,255,255,.12);


border-radius:24px;


box-shadow:

0 40px 120px rgba(0,0,0,.8);


}









/* HEADER */


.reportes-header{


display:flex;


align-items:flex-start;


justify-content:space-between;


}








.reportes-title{


display:flex;


gap:16px;


align-items:center;


}







.reportes-icon{


width:46px;

height:46px;


display:grid;

place-items:center;


border-radius:50%;


background:

rgba(255,101,0,.16);


color:

var(--orange);


}







.reportes-header h2{


margin:0;


font-size:24px;


}








.reportes-header p{


margin-top:6px;


font-size:13px;


color:#888;


}









.cerrar-reportes{


background:none;


border:0;


font-size:28px;


color:white;


cursor:pointer;


}









/* FILTROS */


.reportes-filtros{


display:grid;


grid-template-columns:

1fr 180px;


gap:14px;


}








.buscar-reporte{


height:48px;


padding:

0 16px;


display:flex;


align-items:center;


background:

rgba(255,255,255,.04);


border:

1px solid rgba(255,255,255,.10);


border-radius:12px;


}








.buscar-reporte input{


flex:1;


background:none;


border:0;


outline:none;


color:white;


}








#filtroAnoReporte{


background:

rgba(255,255,255,.04);


border:

1px solid rgba(255,255,255,.10);


border-radius:12px;


padding:

0 14px;


color:white;


}











/* INFO */


.reportes-info{


padding:18px;


border:

1px solid rgba(255,255,255,.08);


border-radius:16px;


background:

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


}








.reportes-info strong{


font-size:14px;


}








.reportes-info p{


margin-top:6px;


font-size:13px;


color:#888;


}









/* LISTA */


.lista-reportes{


min-height:250px;


overflow:auto;


}









.reportes-vacio{


height:250px;


display:flex;


align-items:center;


justify-content:center;


color:#777;


font-size:14px;


}









/* FOOTER */


.reportes-footer{


border-top:

1px solid rgba(255,255,255,.08);


padding-top:16px;


}








.reportes-footer p{


margin:0;


font-size:13px;


color:#888;


}





/* MOBILE */


@media(max-width:650px){



.whatsapp-box{


width:100%;


padding:

32px 24px;


}




.whatsapp-actions{


flex-direction:column-reverse;


}



}







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


@media(max-width:1300px){



.admin-content{


padding:

38px 35px;


}



.stats-grid{


grid-template-columns:

repeat(3,1fr);


}



}



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


@media(max-width:950px){



.zipnova-admin{


flex-direction:column;


}




.admin-sidebar{


width:100%;



min-height:auto;



position:relative;


}






.admin-menu{


flex-direction:row;



overflow-x:auto;


}






.admin-version{


display:none;


}







.stats-grid,
.form-grid.tres{


grid-template-columns:

1fr 1fr;


}







.orders-filter{


flex-wrap:wrap;


}




.orders-filter input{


width:100%;


}



}









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


@media(max-width:650px){



.admin-content{


padding:

26px 18px;


}






.admin-header{


flex-direction:column;



align-items:flex-start;



gap:20px;


}






.admin-header h1{


font-size:28px;


}







.stats-grid,
.form-grid.tres{


grid-template-columns:

1fr;


}







.orders-top,
.clientes-top{


flex-direction:column;



align-items:stretch;


}







.buscador-clientes{


width:100%;


}







table{


display:block;



overflow-x:auto;



white-space:nowrap;


}








.form-actions{


flex-direction:column-reverse;


}







.btn-secundario,
.btn-principal{


width:100%;


}







.modal-cliente{


justify-content:center;



padding:20px;


}







.modal-box{


width:100%;


}







}









/* ==============================
   SCROLL PERSONALIZADO
================================*/


::-webkit-scrollbar{


width:8px;


height:8px;


}




::-webkit-scrollbar-thumb{


background:

rgba(255,101,0,.5);



border-radius:20px;


}





::-webkit-scrollbar-track{


background:

rgba(255,255,255,.05);


}

/* ==============================
   BUSCADOR CLIENTE PEDIDO
================================*/


.cliente-autocomplete{


position:relative;


width:100%;


}







#buscarClientePedido{


height:52px;


width:100%;



background:

rgba(0,0,0,.32);



border:

1px solid rgba(255,255,255,.12);



border-radius:12px;



padding:

0 18px;



color:white;



font-size:15px;



outline:none;



transition:.25s ease;


}









#buscarClientePedido:focus{


border-color:

var(--orange);



box-shadow:

0 0 0 3px rgba(255,101,0,.12);


}










.lista-clientes-pedido{


position:absolute;


top:56px;


left:0;


right:0;



display:flex;


flex-direction:column;



max-height:220px;



overflow-y:auto;



background:

linear-gradient(
145deg,
rgba(18,18,18,.98),
rgba(5,5,5,.98)
);



border:

1px solid rgba(255,101,0,.28);



border-top:

none;



border-radius:

0 0 14px 14px;



box-shadow:

0 25px 60px rgba(0,0,0,.55);



backdrop-filter:

blur(20px);



z-index:9999;


}









.cliente-item-pedido{


height:48px;



display:flex;


align-items:center;



padding:

0 18px;



font-size:14px;



font-weight:500;



color:#ddd;



background:

rgba(10,10,10,.95);



border-bottom:

1px solid rgba(255,255,255,.06);



cursor:pointer;



transition:.22s ease;


}









.cliente-item-pedido:hover{


background:

rgba(255,101,0,.16);



color:white;



padding-left:24px;


}









.cliente-item-pedido:last-child{


border-bottom:none;


}









/* OCULTAR LISTA VACÍA */


.lista-clientes-pedido:empty{


display:none;


}

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


.modal-notificaciones{


position:fixed;

inset:0;

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

display:none;

align-items:center;

justify-content:center;

z-index:9999;


}



.modal-notificaciones.active{


display:flex;


}






.notificaciones-box{


width:620px;

max-width:92%;

background:#111214;

border:1px solid #232323;

border-radius:24px;

padding:28px;


}








/* HEADER */


.notificaciones-header{


display:flex;

justify-content:space-between;

align-items:flex-start;

padding-bottom:18px;

border-bottom:1px solid #222;


}



.notificaciones-header h2{


margin:0;

font-size:26px;

font-weight:700;

color:#fff;


}



.notificaciones-header p{


margin-top:6px;

font-size:14px;

color:#8a8a8a;


}







#cerrarNotificaciones{


width:36px;

height:36px;

border:none;

border-radius:50%;

background:#1b1b1b;

color:#fff;

font-size:24px;

cursor:pointer;


}



#cerrarNotificaciones:hover{


background:#242424;


}








/* LISTA */


.lista-notificaciones{


margin-top:20px;

display:flex;

flex-direction:column;

gap:14px;

max-height:420px;

overflow-y:auto;

padding-right:6px;


}





.lista-notificaciones::-webkit-scrollbar{


width:6px;


}



.lista-notificaciones::-webkit-scrollbar-thumb{


background:#ff6b00;

border-radius:20px;


}









/* ITEM */


.notificacion-item{


display:flex;

align-items:center;

justify-content:space-between;

gap:18px;

padding:18px;

border-radius:18px;

background:#161616;

border:1px solid #242424;


}




.notificacion-info{


flex:1;


}





.notificacion-info strong{


display:block;

font-size:18px;

font-weight:700;

color:#fff;


}





.notificacion-info p{


margin:8px 0;

font-size:14px;

line-height:1.5;

color:#a5a5a5;


}







.notificacion-info span{


display:inline-block;

padding:6px 12px;

border-radius:16px;

font-size:12px;

font-weight:600;

background:#1d1d1d;

color:#ff7b00;


}









/* BOTON WHATSAPP */


.btn-notificacion-whatsapp{


border:none;

background:#25D366;

color:#fff;

padding:13px 18px;

border-radius:14px;

font-size:14px;

font-weight:700;

cursor:pointer;

white-space:nowrap;


}



.btn-notificacion-whatsapp:hover{


background:#20c45a;


}









.notificaciones-vacio{


padding:50px 20px;

text-align:center;

color:#7a7a7a;

font-size:14px;


}








@media(max-width:650px){



.notificacion-item{


flex-direction:column;

align-items:flex-start;


}



.btn-notificacion-whatsapp{


width:100%;


}



}

/* ==============================
   CALENDARIO INPUT DATE
================================*/


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

filter:
invert(48%)
sepia(93%)
saturate(1954%)
hue-rotate(1deg)
brightness(105%)
contrast(105%);

cursor:pointer;

opacity:1;

}

/* ==============================
   ZIPNOVA RESPONSIVE FINAL
   SOLO MOBILE / TABLET
================================*/


/* ==============================
   LAPTOP CHICA / TABLET
================================*/

@media(max-width:1200px){


.admin-content{

padding:
36px 32px;

}


.stats-grid{

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

}


.form-grid.tres{

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

}


.orders-filter{

flex-wrap:wrap;

}


.orders-filter input,
.orders-filter select{

width:100%;

}


}




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

@media(max-width:900px){


.zipnova-admin{

flex-direction:column;

}



/* SIDEBAR ARRIBA */


.admin-sidebar{


width:100%;

min-height:auto;


position:relative;


padding:
22px;


border-right:none;

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


}


.admin-logo img{

width:145px;

margin-bottom:25px;

}


.admin-menu{

flex-direction:row;

overflow-x:auto;

gap:12px;

}


.menu-item{


min-width:max-content;

height:48px;

padding:
0 18px;


}



.cerrar{

margin-top:0;

margin-left:auto;

}



.admin-version{

display:none;

}




.admin-header{

gap:20px;

align-items:flex-start;

}



}





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

@media(max-width:650px){


.admin-content{

padding:
26px 18px;

}



/* HEADER */


.admin-header{

flex-direction:column;

}


.admin-header h1{

font-size:28px;

}



/* PERFIL */


.perfil-wrapper{

width:100%;

}


.admin-user{

width:100%;

justify-content:space-between;

}


.perfil-dropdown{

width:100%;

right:auto;

left:0;

}



/* CARDS */


.stats-grid{

grid-template-columns:1fr;

gap:14px;

}


.stat-card{

height:auto;

min-height:100px;

}



/* PEDIDOS */


.orders-card{

padding:20px;

overflow-x:auto;

}


.orders-top{

flex-direction:column;

align-items:flex-start;

}


#crearPedido,
#btnNuevoCliente{

width:100%;

}



/* FILTROS */


.orders-filter{

flex-direction:column;

}


.orders-filter input,
.orders-filter select{

width:100%;

}



/* TABLAS */


table{

min-width:800px;

}


.pagination{

flex-direction:column;

align-items:flex-start;

}




/* FORMULARIO */


.form-grid.tres{

grid-template-columns:1fr;

}


.nuevo-pedido-card{

padding:22px;

}


.estado-.elementor-2976 .elementor-element.elementor-element-6d377d2{

display:grid;

grid-template-columns:1fr;

}


.estado-option{

width:100%;

}



/* BOTONES */


.form-actions{

flex-direction:column-reverse;

}


.btn-secundario,
.btn-principal{

width:100%;

}



/* CLIENTES */


.clientes-top{

flex-direction:column;

align-items:stretch;

}


.buscador-clientes{

width:100%;

}



/* MODALES */


.modal-cliente,
.modal-historial{

justify-content:center;

padding:

20px;

}


.modal-box{

width:100%;

}


.historial-box{

width:100%;

height:90vh;

}



/* HISTORIAL */


.historial-filtros{

grid-template-columns:1fr;

}


}






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

@media(max-width:430px){


.admin-logo img{

width:125px;

}


.menu-item{

font-size:13px;

}


.admin-content{

padding:

22px 14px;

}


.orders-card{

border-radius:18px;

}


}

/* ==============================
   ESTADO CLIENTE
================================*/

.acciones-cliente{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

}

.cliente-status{

display:flex;

align-items:center;

justify-content:center;

width:44px;

height:44px;

border-radius:12px;

background:#3b260d;

cursor:default;

transition:.25s;

}

.cliente-status svg{

width:18px;

height:18px;

display:block;

}

.cliente-status.pendiente{

background:#4a2a0d;

}

.cliente-status.completo{

background:#173b24;

}

.cliente-status:hover{

transform:translateY(-2px);

}

/* ==========================================
   IMPORTAR PEDIDO
========================================== */

.admin-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
}

.importar-pedido{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex-shrink:0;
}

.titulo-importar{
    font-size:18px;
    font-weight:700;
    color:#ffffff;
    margin-bottom:14px;
}

.btn-importar-pdf{
    display:flex;
    align-items:center;
    justify-content:center;

    width:210px;
    height:52px;

    background:#ff6b00;
    color:#ffffff;

    border-radius:12px;

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

    cursor:pointer;

    transition:.25s;
}

.btn-importar-pdf:hover{
    background:#ff7f22;
    transform:translateY(-2px);
}

.btn-importar-pdf:active{
    transform:translateY(0);
}/* End custom CSS */