/* =========================
   RESET
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}

a{
    text-decoration: none;
}

/* =========================
   LAYOUT
========================= */
.layout{
    display:flex;
    height:100vh;
}

/* OVERLAY */
.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    display:none;
    z-index:900;
}

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

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

.sidebar{
    width:250px;
    background:var(--card);
    height:100vh;
    /*position:fixed;*/
    left:0;
    top:0;
    display:flex;
    flex-direction:column;
    border-right:1px solid var(--border);
    transition:0.3s;
    z-index:100;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    padding:20px;
    border-bottom:1px solid var(--border);
}

.logo img{
    width:40px;
    height:40px;
    border-radius:10px;
}

/* MENU */
.menu{
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.menu-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border-radius:var(--radius);
    cursor:pointer;
    transition:0.3s;
    color:var(--text);
}

.menu-item i{
    width:20px;
    text-align:center;
}

.menu-item:hover{
    background:rgba(255,255,255,0.05);
}

/* SUBMENU */
.menu-group .submenu{
    max-height:0;
    overflow:hidden;
    transition:0.3s;
    display:flex;
    flex-direction:column;
    margin-left:25px;
}

.menu-group.open .submenu{
    max-height:200px;
}

.submenu a{
    padding:8px;
    font-size:13px;
    display:flex;
    gap:10px;
    color:var(--text);
    opacity:0.8;
}

.submenu a:hover{
    opacity:1;
    color:var(--primary);
}

/* FLECHA */
.arrow{
    margin-left:auto;
    transition:0.3s;
}

.menu-group.open .arrow{
    transform:rotate(180deg);
}

/* ACTIVE */
.menu a.active,
.menu-item.active{
    background:var(--primary);
    color:#fff;
}

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

@media(max-width:768px){

    .sidebar{
        transform:translateX(-100%);
    }

    .sidebar.active{
        transform:translateX(0);
    }

}

.user-dropdown{
    position: relative;
}

.dropdown-menu{
    position: absolute;
    right: 0;
    top: 55px;
    background: var(--card);
    border-radius: var(--radius);
    width: 220px;
    display: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    overflow: hidden;
}

.dropdown-menu a{
    display: block;
    padding: 10px;
    color: var(--text);
    text-decoration: none;
}

.dropdown-menu a:hover{
    background: rgba(255,255,255,0.05);
}

.user-info{
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dropdown-menu.show{
    display: block;
}
/*.sidebar{
    width:240px;
    background: linear-gradient(180deg,var(--card),rgba(0,0,0,0.4));
    border-right:1px solid var(--border);
    padding:20px;
    transition:0.3s;
    z-index:1000;
    overflow-y:auto;
}

.sidebar.collapsed{
    width:70px;
}

.sidebar .logo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:30px;
}

.sidebar .logo img{
    width:40px;
}

.sidebar a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border-radius:var(--radius);
    text-decoration:none;
    color:var(--text);
    transition:0.25s;
}

.sidebar a:hover{
    background:var(--primary);
    color:#fff;
}

.sidebar .icon{
    font-size:18px;
}

.sidebar.collapsed .text{
    display:none;
}*/

/* =========================
   MAIN
========================= */
.main{
    flex:1;
    display:flex;
    flex-direction:column;
}

/* =========================
   HEADER
========================= */
.header{
    height:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(10px);
    background:rgba(0,0,0,0.2);
}

.menu-btn{
    background:none;
    border:none;
    font-size:20px;
    color:var(--text);
    cursor:pointer;
}

.avatar{
    width:35px;
    height:35px;
    border-radius:50%;
}

/* =========================
   CONTENT
========================= */
.content{
    flex:1;
    overflow-y:auto;
    padding:25px;
}

/* SCROLL */
.content::-webkit-scrollbar{
    width:8px;
}
.content::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:10px;
}

/* =========================
   CARDS
========================= */
.card{
    background: linear-gradient(145deg,var(--card),rgba(255,255,255,0.02));
    border-radius:var(--radius);
    padding:20px;
    border:1px solid var(--border);
    transition:0.3s;
}

.card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

/* KPI */
.kpi{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.kpi .value{
    font-size:28px;
    font-weight:bold;
}

/* =========================
   BOTONES
========================= */
/*.btn{
    padding:10px 15px;
    border-radius:var(--radius);
    border:none;
    cursor:pointer;
    transition:0.25s;
}

.btn-primary{
    background:linear-gradient(45deg,var(--primary),var(--secondary));
    color:#fff;
}

.btn:hover{
    transform:scale(1.05);
}*/

/* =========================
   BASE BOTÓN
========================= */
.btn{
    padding:10px 15px;
    border-radius:var(--radius);
    border:none;
    cursor:pointer;
    transition:0.25s;
    font-weight:500;
    display:inline-block;
}

.btn:hover{
    transform:scale(1.05);
    opacity:0.9;
}

/* =========================
   BOTONES PRINCIPALES (DINÁMICOS)
========================= */
.btn-primary{
    background:linear-gradient(45deg,var(--primary),var(--secondary));
    color:#fff;
}

/* Usa solo secondary (útil para acciones menos importantes del tema) */
.btn-secondary{
    background:var(--secondary);
    color:#fff;
}

/* =========================
   BOTONES FIJOS (SEMÁNTICOS)
========================= */
.btn-success{
    background:var(--success);
    color:#fff;
}

.btn-danger{
    background:var(--danger);
    color:#fff;
}

.btn-warning{
    background:var(--warning);
    color:#000;
}

.btn-info{
    background:var(--info);
    color:#fff;
}

.btn-light{
    background:var(--light);
    color:#000;
}

.btn-dark{
    background:var(--dark);
    color:#fff;
}

/* =========================
   OUTLINE (MEZCLA DINÁMICO + FIJO)
========================= */
.btn-outline-primary{
    background:transparent;
    border:2px solid var(--primary);
    color:var(--primary);
}

.btn-outline-primary:hover{
    background:var(--primary);
    color:#fff;
}

.btn-outline-secondary{
    background:transparent;
    border:2px solid var(--secondary);
    color:var(--secondary);
}

.btn-outline-secondary:hover{
    background:var(--secondary);
    color:#fff;
}

.btn-outline-danger{
    background:transparent;
    border:2px solid var(--danger);
    color:var(--danger);
}

.btn-outline-danger:hover{
    background:var(--danger);
    color:#fff;
}

/* =========================
   TAMAÑOS
========================= */
.btn-sm{
    padding:5px 10px;
    font-size:12px;
}

.btn-lg{
    padding:14px 20px;
    font-size:16px;
}

/* =========================
   DESHABILITADO
========================= */
.btn:disabled{
    opacity:0.6;
    cursor:not-allowed;
    transform:none;
}

.content-buttons-form{
    display: flex;
    justify-content: space-between;
}


/* =========================
   ACTION CARD
========================= */

.action-card{
    display:flex;
    align-items:center;
    gap:15px;
    padding:15px;
    border-radius:var(--radius);
    background:var(--card);
    border:1px solid var(--border);
    cursor:pointer;
    transition:0.3s;
    max-width:280px;
    margin-top: 35px;
    margin-bottom: 45px;
}

.action-card:hover{
    transform:translateY(-3px);
    border-color:var(--primary);
    box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

.action-icon{
    width:45px;
    height:45px;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    font-size:18px;
}

.action-text{
    display:flex;
    flex-direction:column;
}

.action-text span{
    font-size:12px;
    opacity:0.7;
}


/* =========================
   FORMULARIOS
========================= */
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.form-grid .full{
    grid-column:1/-1;
}



input,select,textarea{
    width:100%;
    padding:10px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:rgba(0,0,0,0.3);
    color:var(--text);
}

input:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 10px var(--primary);
}


.form-grid > div{
    display:flex;
    flex-direction:column;
    gap:6px; /* 🔥 separación label-input */
}

/* LABEL */
.form-grid label{
    font-size:13px;
    font-weight:500;
    opacity:0.8;
}

/* INPUTS */
.form-grid input,
.form-grid select{
    padding:10px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    /*background:transparent;*/
    color:var(--text);
    transition:0.2s;
}

/* FOCUS PRO */
.form-grid input:focus,
.form-grid select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(0,114,255,0.2);
    outline:none;
}

/*.search-bar{
    display:flex;
    gap:10px;
    margin-bottom:15px;
}

.search-bar input{
    flex:1;
}*/

.search-container {
    display: flex;
    justify-content: flex-end; /* lo manda a la derecha */
    margin-bottom: 15px; /* espacio entre buscador y tabla */
}

.search-bar {
    width: 30vw;
    max-width: 100%; /* opcional para evitar overflow */
    display: flex;
    gap: 5px;
}

.search-bar input {
    flex: 1;
}

.pagination{
    display:flex;
    gap:5px;
    margin-top:15px;
    justify-content: center;
}

.pagination a{
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    text-decoration:none;
}

.pagination a.active{
    background:var(--primary);
    color:#fff;
}

/* =========================
   TABLAS
========================= */
/*.table-container{
    overflow:auto;
}*/
.table-container{
    width: 100%;
    overflow-x: auto;
}

.table{
    width:100%;
    border-collapse:collapse;
    min-width: 900px;
}

/*.table th{
    text-align:left;
    padding:12px;
    opacity:0.7;
}*/
.table th{
    text-align: center;
    padding: 12px;
    font-weight: 500;
    color: #9aa4b2;
}

.table td{
    padding:12px;
    border-top:1px solid var(--border);

}

.table tr:hover{
    background:rgba(255,255,255,0.05);
}

/* BADGES */
.badge{
    padding:5px 10px;
    border-radius:20px;
    font-size:12px;
}

.badge-success{background:#10b981;}
.badge-warning{background:#f59e0b;}
.badge-danger{background:#ef4444;}

/* =========================
   ALERTS
========================= */
.alert{
    padding:12px;
    border-radius:var(--radius);
    margin-bottom:10px;
}

.alert-success{background:#10b981;}
.alert-error{background:#ef4444;}

/* =========================
   MODAL
========================= */
.modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.5);
}

.modal-content{
    background:var(--card);
    padding:20px;
    border-radius:var(--radius);
    width:400px;
}

/* =========================
   MOBILE
========================= */
@media(max-width:900px){

    .sidebar{
        position:fixed;
        /*left:-240px;*/
        top:0;
        height:100%;
    }

    .sidebar.open{
        left:0;
    }

    .overlay.show{
        display:block;
    }

    .form-grid{
        grid-template-columns:1fr;
    }
}

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

.footer{
    height:50px;
    background:rgba(0,0,0,0.2);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    font-size:13px;
}

.footer-left{
    display:flex;
    flex-direction:column;
}

.footer-desc{
    font-size:11px;
    opacity:0.7;
}

.footer-center{
    text-align:center;
    opacity:0.7;
}

.footer-right{
    display:flex;
    align-items:center;
}

/* MOBILE */
@media(max-width:768px){
    .footer{
        flex-direction:column;
        height:auto;
        padding:10px;
        gap:5px;
        text-align:center;
    }
}

input[type="color"] {
  padding: 0;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch {
  border-radius: 6px;
  border: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.avatar-table{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
}

.toast{
    position:fixed;
    top:20px;
    right:20px;
    padding:12px 18px;
    border-radius:var(--radius);
    color:#fff;
    z-index:999;
    animation:fadeIn 0.3s ease;
}

/* TIPOS */
.toast.saved{
    background:#28a745;
}

.toast.deleted{
    background:#dc3545;
}

.toast.duplicate{
    background:orange;
}

/* ANIMACIÓN */
@keyframes fadeIn{
    from{opacity:0; transform:translateY(-10px);}
    to{opacity:1; transform:translateY(0);}
}

/* OVERLAY */
.modal-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(6px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
}

/* MODAL */
.modal-box{
    background:var(--card);
    padding:20px;
    border-radius:var(--radius);
    width:400px;
    animation:scaleIn 0.3s ease;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px;
}

@keyframes scaleIn{
    from{transform:scale(0.8); opacity:0;}
    to{transform:scale(1); opacity:1;}
}

.badge{
    padding:5px 10px;
    border-radius:10px;
    font-size:12px;
}

.badge.presente{ background:#28a745; color:#fff; }
.badge.retardo{ background:#ffc107; color:#000; }
.badge.falta{ background:#dc3545; color:#fff; }
.badge.vacaciones{ background:#17a2b8; color:#fff; }
.badge.permiso{ background:#6f42c1; color:#fff; }
.badge.incapacidad{ background:#fd7e14; color:#fff; }
.badge.home\ office{ background:#20c997; color:#000; }


.scanner-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}

#reader{
    width:100%;
    max-width:400px;
    border-radius:var(--radius);
    overflow:hidden;
    border:2px solid var(--primary);
}

/* RESULTADO */
.scan-result{
    width:100%;
    max-width:400px;
    padding:15px;
    border-radius:var(--radius);
    text-align:center;
    background:var(--card);
}

.scan-result.success{
    background:#28a745;
    color:#fff;
}

.scan-result.error{
    background:#dc3545;
    color:#fff;
}

.auth-container{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    /*background:linear-gradient(135deg, var(--primary), var(--secondary));*/
}

/* CARD */
.auth-card{
    width:100%;
    max-width:380px;
    padding:25px;
    border-radius:var(--radius);
}

/* HEADER */
.auth-header{
    text-align:center;
    margin-bottom:20px;
}

.auth-logo{
    width:80px;
    margin-bottom:10px;
}

/* FORM */
.form-group{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-bottom:15px;
}

/* OPTIONS */
.auth-options{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-bottom:10px;
}

/* CHECKBOX */
.checkbox{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
}

.terms{
    margin:10px 0;
}

/* ALERT */
.alert{
    margin-top:10px;
    padding:10px;
    border-radius:var(--radius);
    text-align:center;
}

.alert.error{
    background:#dc3545;
    color:#fff;
}

/* RESPONSIVE */
@media(max-width:600px){
    .auth-card{
        margin:10px;
    }
}

/* KPIs */
.kpi-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap:15px;
    margin-bottom:20px;
}

.kpi-card{
    padding:20px;
    border-radius:var(--radius);
    background:var(--card);
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.kpi-card h3{
    font-size:24px;
}

.kpi-card.success{ border-left:5px solid #28a745; }
.kpi-card.danger{ border-left:5px solid #dc3545; }
.kpi-card.info{ border-left:5px solid #17a2b8; }

/* GRID */
.dashboard-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
}

@media(max-width:768px){
    .dashboard-grid{
        grid-template-columns:1fr;
    }
}


.loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.loader.hidden{
    display:none;
}

.spinner{
    margin-bottom: 25px;
    width:120px;
    height:120px;
    border:4px solid rgba(255,255,255,0.2);
    border-top:4px solid var(--primary);
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}


.profile-grid{
    display:grid;
    grid-template-columns: 300px 1fr 1fr;
    gap:20px;
}

.profile-card{
    text-align:center;
}

.upload-box{
    cursor:pointer;
}

.upload-box img{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
}

@media(max-width:768px){
    .profile-grid{
        grid-template-columns:1fr;
    }
}

.toast-perfil{
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 18px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    animation: fadeIn .3s ease;
}

.toast-perfil.success{ background: #28a745; }
.toast-perfil.error{ background: #dc3545; }
.toast-perfil.warning{ background: #ffc107; color:#000; }

.toast-perfil.hidden{
    display: none;
}

@keyframes fadeIn{
    from{ opacity:0; transform:translateY(-10px); }
    to{ opacity:1; transform:translateY(0); }
}