/* =====================================
   LOGIN IMEX INDUSTRIAL PREMIUM
===================================== */
 
:root{
    --imex-blue:#003c69;
    --imex-dark:#001b32;
    --imex-blue-light:#0066aa;
    --imex-yellow:#fcd900;
    --white:#ffffff;
}
 
 
/* CONTENEDOR PRINCIPAL */
 
.login-wrap {
 
    min-height: calc(100vh - 220px);
 
    display:flex;
    align-items:center;
    justify-content:center;
 
    position:relative;
    overflow:hidden;
 
    padding-top:120px;
    padding-bottom:60px;
 
    background:
    radial-gradient(circle at top left,#0066aa55,transparent 40%),
    radial-gradient(circle at bottom right,#fcd90033,transparent 30%),
    linear-gradient(
        135deg,
        #001b32,
        #003c69,
        #00111f
    );
 
}
 
 
/* GRID INDUSTRIAL */
 
.blueprint-grid{
 
    position:absolute;
    inset:0;
 
    background-image:
    linear-gradient(
        rgba(255,255,255,.05) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.05) 1px,
        transparent 1px
    );
 
    background-size:
    45px 45px;
 
    animation:gridMove 20s linear infinite;
 
}
 
 
@keyframes gridMove{
 
    from{
        transform:translate(0,0);
    }
 
    to{
        transform:translate(45px,45px);
    }
 
}
 
 
 
 
 
/* EFECTO LUZ CENTRAL */
 
.login-wrap::before{
 
    content:"";
 
    position:absolute;
 
    width:500px;
    height:500px;
 
    background:#0066aa;
 
    filter:blur(130px);
 
    opacity:.35;
 
    animation:pulseLight 5s infinite;
 
}
 
 
@keyframes pulseLight{
 
    50%{
        opacity:.55;
        transform:scale(1.15);
    }
 
}
 
 
 
 
 
/* TARJETA LOGIN */
 
.login-card{
 
 
    position:relative;
 
    z-index:5;
 
 
    width:420px;
 
    padding:45px 40px;
 
 
    background:
 
    linear-gradient(
        145deg,
        rgba(255,255,255,.95),
        rgba(255,255,255,.82)
    );
 
 
    backdrop-filter:blur(15px);
 
 
    border-radius:25px;
 
 
    border:
 
    1px solid rgba(255,255,255,.5);
 
 
 
    box-shadow:
 
    0 30px 80px rgba(0,0,0,.45),
 
    inset 0 0 30px rgba(255,255,255,.4);
 
 
 
    animation:
    loginAppear .8s ease;
 
}
 
 
 
@keyframes loginAppear{
 
from{
 
opacity:0;
 
transform:
translateY(40px)
scale(.95);
 
}
 
to{
 
opacity:1;
 
transform:
translateY(0)
scale(1);
 
}
 
}
 
 
 
 
 
/* LOGO */
 
.login-card .brand{
 
justify-content:center;
 
margin-bottom:25px;
 
}
 
 
 
.login-card .brand img{
 
 
height:75px;
 
 
filter:
drop-shadow(
0 10px 15px rgba(0,60,105,.35)
);
 
 
 
transition:.4s;
 
 
}
 
 
.login-card .brand img:hover{
 
 
transform:scale(1.08);
 
}
 
 
 
 
 
/* TITULO */
 
 
.login-card h1{
 
 
text-align:center;
 
 
font-size:25px;
 
 
font-weight:700;
 
 
color:#003c69;
 
 
margin-bottom:35px;
 
 
position:relative;
 
 
}
 
 
 
.login-card h1::after{
 
 
content:"";
 
 
display:block;
 
 
width:70px;
 
 
height:4px;
 
 
background:#fcd900;
 
 
border-radius:10px;
 
 
margin:15px auto;
 
 
}
 
 
 
 
 
/* CAMPOS */
 
 
.field{
 
 
margin-bottom:25px;
 
 
}
 
 
 
.field label{
 
 
font-size:13px;
 
font-weight:700;
 
color:#003c69;
 
margin-bottom:8px;
 
display:block;
 
 
text-transform:uppercase;
 
letter-spacing:1px;
 
 
}
 
 
 
 
.field input{
 
 
width:100%;
 
 
height:52px;
 
 
border-radius:14px;
 
 
border:
 
2px solid #dce8f2;
 
 
 
background:#fff;
 
 
padding:0 18px;
 
 
font-size:15px;
 
 
font-family:Montserrat;
 
 
transition:.3s;
 
 
}
 
 
 
.field input:hover{
 
 
border-color:#0066aa;
 
 
}
 
 
.field input:focus{
 
 
outline:none;
 
 
border-color:#003c69;
 
 
box-shadow:
 
 
0 0 0 5px rgba(0,60,105,.15);
 
 
}
 
 
 
 
 
/* BOTON */
 
.btn-primary{
 
 
height:55px;
 
 
width:100%;
 
 
border:none;
 
 
border-radius:15px;
 
 
margin-top:10px;
 
 
background:
 
linear-gradient(
135deg,
#fcd900,
#ffb700
);
 
 
color:#002a4a;
 
 
font-size:16px;
 
 
font-weight:800;
 
 
letter-spacing:1px;
 
 
cursor:pointer;
 
 
position:relative;
 
 
overflow:hidden;
 
 
 
box-shadow:
 
0 15px 30px rgba(252,217,0,.35);
 
 
 
transition:.35s;
 
 
}
 
 
 
.btn-primary:hover{
 
 
transform:
translateY(-4px);
 
 
box-shadow:
 
0 25px 40px rgba(252,217,0,.55);
 
 
}
 
 
 
.btn-primary::before{
 
 
content:"";
 
 
position:absolute;
 
 
top:0;
 
left:-100%;
 
 
width:100%;
 
 
height:100%;
 
 
background:
 
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.7),
transparent
);
 
 
transition:.6s;
 
 
}
 
 
 
.btn-primary:hover::before{
 
 
left:100%;
 
 
}
 
 
 
 
 
/* MENSAJES */
 
 
.form-msg{
 
 
border-radius:12px;
 
 
font-weight:600;
 
 
text-align:center;
 
 
}
 
 
 
/* RESPONSIVE */
 
 
@media(max-width:500px){
 
 
.login-card{
 
 
width:90%;
 
 
padding:35px 25px;
 
 
}
 
 
.login-card .brand img{
 
 
height:60px;
 
 
}
 
 
.login-card h1{
 
 
font-size:21px;
 
 
}
 
 
 
}
 
.footer {
 
    margin-top:0 !important;
 
}
 
.blueprint-grid{
 
position:absolute;
inset:0;
 
background:
 
radial-gradient(
circle at 20% 30%,
rgba(252,217,0,.35),
transparent 3px
),
 
radial-gradient(
circle at 80% 70%,
rgba(255,255,255,.25),
transparent 3px
),
 
linear-gradient(
120deg,
transparent 48%,
rgba(255,255,255,.08) 49%,
transparent 50%
);
 
background-size:
180px 180px,
250px 250px,
100% 100%;
 
 
opacity:.8;
 
 
animation:
networkMove 15s linear infinite;
 
}
 
 
 
@keyframes networkMove{
 
from{
transform:translate(0,0);
}
 
to{
transform:translate(-80px,-80px);
}
 
}
 
/* =========================================
   IMEX EMPLOYEE PANEL PREMIUM UI
========================================= */
 
:root{
 
--blue:#003c69;
--blue-dark:#002a4a;
--blue-light:#0066aa;
--yellow:#fcd900;
 
--bg:#f4f8fc;
 
--white:#fff;
 
--text:#263238;
 
--muted:#607080;
 
--border:#dce8f2;
 
--shadow:
0 20px 50px rgba(0,40,80,.12);
 
}
 
 
/* RESET */
 
*{
box-sizing:border-box;
}
 
 
body{
 
margin:0;
 
font-family:'Montserrat',sans-serif;
 
background:
 
radial-gradient(
circle at top left,
rgba(0,102,170,.12),
transparent 35%
),
 
linear-gradient(
135deg,
#f8fbff,
#eef5fa
);
 
color:var(--text);
 
}
 
 
 
/* =========================
   TOP BAR
========================= */
 
 
.topbar{
 
 
height:80px;
 
 
padding:0 40px;
 
 
background:
 
linear-gradient(
135deg,
#002a4a,
#003c69
);
 
 
display:flex;
 
 
align-items:center;
 
 
justify-content:space-between;
 
 
 
color:white;
 
 
 
box-shadow:
 
0 10px 30px rgba(0,0,0,.25);
 
 
 
position:sticky;
 
top:0;
 
z-index:20;
 
 
}
 
 
 
/* LOGO */
 
 
.topbar .brand{
 
 
display:flex;
 
align-items:center;
 
gap:18px;
 
 
font-size:20px;
 
 
font-weight:700;
 
 
letter-spacing:.3px;
 
 
}
 
 
.topbar .brand img{
 
 
height:45px;
 
 
filter:
 
drop-shadow(
0 5px 12px rgba(0,0,0,.4)
);
 
 
}
 
 
 
/* USER AREA */
 
 
.user-box{
 
 
display:flex;
 
align-items:center;
 
gap:18px;
 
 
font-size:14px;
 
 
}
 
 
.user-box button{
 
 
background:
 
var(--yellow);
 
 
border:none;
 
 
padding:
 
10px 22px;
 
 
border-radius:12px;
 
 
font-weight:700;
 
 
color:var(--blue-dark);
 
 
cursor:pointer;
 
 
transition:.3s;
 
 
}
 
 
 
.user-box button:hover{
 
 
transform:translateY(-3px);
 
 
box-shadow:
 
0 10px 25px rgba(252,217,0,.4);
 
 
}
 
 
 
/* =========================
 DASHBOARD
========================= */
 
 
.dash-container{
 
 
max-width:1200px;
 
 
margin:40px auto;
 
 
padding:0 25px;
 
 
}
 
 
 
.dash-header{
 
 
display:flex;
 
 
align-items:center;
 
 
justify-content:space-between;
 
 
gap:20px;
 
 
margin-bottom:25px;
 
 
}
 
 
 
.dash-header h2{
 
 
margin:0;
 
 
color:var(--blue);
 
 
font-size:28px;
 
 
font-weight:700;
 
 
}
 
 
 
/* SEARCH */
 
 
.search-box input{
 
 
height:45px;
 
 
width:330px;
 
 
border-radius:12px;
 
 
border:
 
1px solid var(--border);
 
 
 
padding:
 
0 18px;
 
 
 
font-family:inherit;
 
 
 
transition:.3s;
 
 
}
 
 
 
.search-box input:focus{
 
 
outline:none;
 
 
border-color:var(--blue);
 
 
box-shadow:
 
0 0 0 4px rgba(0,60,105,.12);
 
 
}
 
 
 
/* BUTTON ADD */
 
 
.btn-add{
 
 
height:45px;
 
 
padding:
 
0 22px;
 
 
border:none;
 
 
border-radius:12px;
 
 
background:
 
 
linear-gradient(
135deg,
#fcd900,
#ffb700
);
 
 
 
font-weight:700;
 
 
color:#002a4a;
 
 
cursor:pointer;
 
 
transition:.3s;
 
 
}
 
 
 
.btn-add:hover{
 
 
transform:translateY(-3px);
 
 
box-shadow:
 
0 12px 25px rgba(252,217,0,.4);
 
 
}
 
 
 
 
/* =========================
 TABLE CARD
========================= */
 
 
.card-table{
 
 
background:white;
 
 
border-radius:22px;
 
 
box-shadow:var(--shadow);
 
 
border:
 
1px solid rgba(0,60,105,.08);
 
 
overflow-x:auto;
 
overflow-y:hidden;
 
-webkit-overflow-scrolling:touch;
 
 
}
 
 
 
table{
 
 
width:100%;
 
 
min-width:820px;
 
border-collapse:collapse;
 
 
}
 
 
 
thead{
 
 
background:
 
 
linear-gradient(
135deg,
#003c69,
#002a4a
);
 
 
color:white;
 
 
}
 
 
 
th{
 
 
padding:18px;
 
 
text-align:left;
 
 
font-size:13px;
 
 
text-transform:uppercase;
 
 
letter-spacing:1px;
 
 
}
 
 
 
td{
 
 
padding:16px 18px;
 
 
border-bottom:
 
1px solid #edf2f7;
 
 
font-size:14px;
 
 
}
 
 
 
tbody tr{
 
 
transition:.25s;
 
 
}
 
 
 
tbody tr:hover{
 
 
background:#f8fcff;
 
 
transform:scale(1.005);
 
 
}
 
 
 
 
 
/* =========================
 TABLE ACTIONS
========================= */
 
td.actions{
 
white-space:nowrap;
 
text-align:right;
 
width:1%;
 
}
 
td.actions button{
 
height:36px;
 
padding:0 16px;
 
border:none;
 
border-radius:10px;
 
font-weight:700;
 
font-size:13px;
 
cursor:pointer;
 
transition:.25s;
 
margin-left:8px;
 
}
 
td.actions button.edit{
 
background:#eaf2fb;
 
color:var(--blue);
 
}
 
td.actions button.edit:hover{
 
background:#dbe9fa;
 
transform:translateY(-2px);
 
}
 
td.actions button.del{
 
background:#fdeaea;
 
color:#a02525;
 
}
 
td.actions button.del:hover{
 
background:#fbdada;
 
transform:translateY(-2px);
 
}
 
 
/* =========================
 PAGINATION
========================= */
 
.pagination{
 
display:flex;
 
align-items:center;
 
justify-content:center;
 
flex-wrap:wrap;
 
gap:8px;
 
margin:22px 0 10px;
 
}
 
.pagination .page-btn{
 
min-width:40px;
 
height:40px;
 
padding:0 12px;
 
border:1px solid var(--border);
 
background:#fff;
 
border-radius:10px;
 
font-weight:700;
 
font-size:13px;
 
color:var(--blue);
 
cursor:pointer;
 
transition:.2s;
 
}
 
.pagination .page-btn:hover:not(:disabled){
 
border-color:var(--blue);
 
transform:translateY(-2px);
 
}
 
.pagination .page-btn.active{
 
background:var(--blue);
 
color:#fff;
 
border-color:var(--blue);
 
}
 
.pagination .page-btn:disabled{
 
opacity:.4;
 
cursor:not-allowed;
 
}
 
.pagination .page-dots{
 
color:var(--muted);
 
padding:0 4px;
 
font-weight:700;
 
}
 
.pagination-info{
 
text-align:center;
 
font-size:.8rem;
 
color:var(--muted);
 
margin-top:-6px;
 
margin-bottom:14px;
 
}
 
 
/* =========================
 MODAL
========================= */
 
 
.modal-overlay{
 
 
position:fixed;
 
 
inset:0;
 
 
background:
 
rgba(0,20,40,.65);
 
 
 
backdrop-filter:blur(8px);
 
 
 
display:none;
 
 
align-items:center;
 
 
justify-content:center;
 
 
z-index:100;
 
 
}
 
 
 
.modal-overlay.show{
 
 
display:flex;
 
 
}
 
 
 
.modal-box{
 
 
width:430px;
 
 
background:white;
 
 
border-radius:25px;
 
 
padding:35px;
 
 
 
box-shadow:
 
0 30px 80px rgba(0,0,0,.4);
 
 
 
animation:
 
modalShow .3s ease;
 
 
}
 
 
 
@keyframes modalShow{
 
 
from{
 
opacity:0;
 
transform:
translateY(30px)
scale(.95);
 
}
 
 
to{
 
opacity:1;
 
transform:none;
 
}
 
 
}
 
 
 
 
.modal-box h3{
 
 
margin-top:0;
 
 
color:var(--blue);
 
 
font-size:24px;
 
 
}
 
 
 
 
.field{
 
 
margin-bottom:18px;
 
 
}
 
 
 
.field label{
 
 
display:block;
 
 
font-size:12px;
 
 
font-weight:700;
 
 
color:var(--blue);
 
 
text-transform:uppercase;
 
 
margin-bottom:7px;
 
 
}
 
 
 
.field input{
 
 
width:100%;
 
 
height:45px;
 
 
border-radius:12px;
 
 
border:
 
1px solid var(--border);
 
 
padding:0 15px;
 
 
font-family:inherit;
 
 
}
 
 
 
.field input:focus{
 
 
outline:none;
 
 
border-color:var(--blue);
 
 
box-shadow:
 
0 0 0 4px rgba(0,60,105,.1);
 
 
}
 
 
 
 
.modal-actions{
 
 
display:flex;
 
 
gap:15px;
 
 
margin-top:25px;
 
 
}
 
 
 
.modal-actions button{
 
 
flex:1;
 
 
height:45px;
 
 
border-radius:12px;
 
 
border:none;
 
 
font-weight:700;
 
 
cursor:pointer;
 
 
}
 
 
 
.cancel{
 
 
background:#edf2f7;
 
 
color:#607080;
 
 
}
 
 
 
.save{
 
 
background:var(--yellow);
 
 
color:#002a4a;
 
 
}
 
 
 
 
/* =========================
 MOBILE
========================= */
 
 
@media(max-width:700px){
 
 
.topbar{
 
 
padding:0 15px;
 
 
height:auto;
 
 
min-height:75px;
 
 
flex-direction:column;
 
 
gap:15px;
 
 
padding-top:15px;
 
 
padding-bottom:15px;
 
 
}
 
 
 
.dash-header{
 
 
flex-direction:column;
 
 
align-items:stretch;
 
 
}
 
 
 
.search-box input{
 
 
width:100%;
 
 
}
 
 
.dash-header > div{
 
 
width:100%;
 
 
}
 
 
.dash-header > div button,
.dash-header > div .search-box{
 
 
flex:1 1 100%;
 
 
}
 
 
}
 
 
/* Stacked "card" table for phones */
 
@media(max-width:640px){
 
 
.card-table{
 
 
overflow:visible;
 
 
background:transparent;
 
 
box-shadow:none;
 
 
border:none;
 
 
}
 
 
table, thead, tbody, tr, td, th{
 
 
display:block;
 
 
width:100%;
 
 
}
 
 
table{
 
 
min-width:0;
 
 
}
 
 
thead{
 
 
display:none;
 
 
}
 
 
tbody tr{
 
 
background:white;
 
 
border-radius:16px;
 
 
border:1px solid rgba(0,60,105,.08);
 
 
box-shadow:var(--shadow);
 
 
padding:14px 16px;
 
 
margin-bottom:14px;
 
 
}
 
 
tbody tr:hover{
 
 
transform:none;
 
 
}
 
 
td{
 
 
display:flex;
 
 
justify-content:space-between;
 
 
align-items:center;
 
 
gap:12px;
 
 
padding:9px 0;
 
 
border-bottom:1px dashed #edf2f7;
 
 
text-align:right;
 
 
white-space:normal;
 
 
}
 
 
td:last-child{
 
 
border-bottom:none;
 
 
}
 
 
td::before{
 
 
content:attr(data-label);
 
 
font-weight:700;
 
 
font-size:12px;
 
 
text-transform:uppercase;
 
 
letter-spacing:.4px;
 
 
color:var(--blue);
 
 
text-align:left;
 
 
flex:0 0 auto;
 
 
}
 
 
td[data-label="Notas"]{
 
 
max-width:none !important;
 
white-space:normal !important;
 
overflow:visible !important;
 
text-overflow:clip !important;
 
}
 
 
td.actions{
 
 
justify-content:flex-end;
 
 
width:auto;
 
 
}
 
 
td.actions::before{
 
 
content:"";
 
 
}
 
 
.pagination .page-btn{
 
 
min-width:36px;
 
 
height:36px;
 
 
padding:0 8px;
 
 
}
 
 
}