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

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-height:42px;
    padding:0 18px;

    border:none;
    border-radius:var(--radius-sm);

    font-family:var(--font-family);
    font-size:var(--font-sm);
    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

    text-decoration:none;

    user-select:none;

}

.btn:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow-sm);

}

.btn:active{

    transform:scale(.98);

}

.btn:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

}

/* ===========================
   COLORES
=========================== */

.btn-primary{

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

    color:#fff;

}

.btn-primary:hover{

    background:linear-gradient(
        135deg,
        var(--primary-dark),
        var(--primary)
    );

}

.btn-success{

    background:linear-gradient(
        135deg,
        #16A34A,
        #22C55E
    );

    color:#fff;

}

.btn-success:hover{

    filter:brightness(.95);

}

.btn-danger{

    background:linear-gradient(
        135deg,
        #DC2626,
        #EF4444
    );

    color:#fff;

}

.btn-danger:hover{

    filter:brightness(.95);

}

.btn-secondary{

    background:#fff;

    color:var(--text-primary);

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

}

.btn-secondary:hover{

    background:var(--gray-100);

}

/* ===========================
   TAMAÑOS
=========================== */

.btn-sm{

    min-height:34px;

    padding:0 12px;

    font-size:12px;

}

.btn-lg{

    min-height:50px;

    padding:0 24px;

    font-size:15px;

}

/* ==========================================================
   MÓDULOS
========================================================== */

.modulo{

    background:var(--surface);

    border-radius:var(--radius-lg);

    padding:28px;

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

    box-shadow:var(--shadow-sm);

    animation:fadeIn .25s ease;

}

.modulo-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:28px;

}

.modulo-header h2{

    margin:0;

    font-size:26px;

    color:var(--text-primary);

    font-weight:700;

}

.subtitulo-modulo{

    margin-top:6px;

    color:var(--text-secondary);

    font-size:14px;

}

.acciones-modulo{

    display:flex;

    align-items:center;

    gap:12px;

}

.modulo-footer{

    margin-top:20px;

    padding-top:16px;

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

    color:var(--text-secondary);

    font-size:14px;

}

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

.tabla-container{

    width:100%;

    overflow-x:auto;

    background:var(--surface);

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

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-xs);

}

.tabla{

    width:100%;

    border-collapse:collapse;

    min-width:850px;

    background:var(--surface);

}

.tabla thead{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

}

.tabla thead th{

    padding:16px 18px;

    color:#fff;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    white-space:nowrap;

    border:none;

}

.tabla tbody td{

    padding:15px 18px;

    font-size:14px;

    color:var(--text-primary);

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

    white-space:nowrap;

    vertical-align:middle;

}

.tabla tbody tr{

    transition:all .20s ease;

}

.tabla tbody tr:nth-child(even){

    background:var(--gray-50);

}

.tabla tbody tr:hover{

    background:#EEF6FF;

}

.tabla tbody tr:last-child td{

    border-bottom:none;

}

/* Acciones */

.tabla .acciones{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}

/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    white-space:nowrap;

}

.badge-success{

    background:#DCFCE7;

    color:#166534;

}

.badge-danger{

    background:#FEE2E2;

    color:#991B1B;

}

.badge-warning{

    background:#FEF3C7;

    color:#92400E;

}

.badge-info{

    background:#DBEAFE;

    color:#1E40AF;

}

/* ==========================================================
   FORMULARIOS
========================================================== */

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:var(--text-primary);

}

.form-control{

    width:100%;

    height:44px;

    padding:0 14px;

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

    border-radius:var(--radius-sm);

    background:#fff;

    color:var(--text-primary);

    font-size:14px;

    transition:all .20s ease;

}

.form-control::placeholder{

    color:var(--gray-400);

}

.form-control:hover{

    border-color:var(--gray-400);

}

.form-control:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(15,76,129,.12);

}

select.form-control{

    cursor:pointer;

}

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

@media(max-width:992px){

    .modulo-header{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

}

@media(max-width:768px){

    .tabla-container{

        border-radius:var(--radius-sm);

    }

    .tabla{

        min-width:700px;

    }

}
/* ==========================================================
   MODAL
========================================================== */

.modal{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    display:none;

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

    padding:30px;

    background:rgba(15,23,42,.45);

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

    z-index:9999;

    overflow:auto;

}

.modal.activo{

    display:flex;

}

.modal-contenido{

    width:100%;

    max-width:650px;

    max-height:90vh;

    display:flex;

    flex-direction:column;

    background:var(--surface);

    border-radius:var(--radius-lg);

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

    box-shadow:var(--shadow-lg);

    overflow:hidden;

    animation:modalEntrada .25s ease;

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 24px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

}

.modal-header h2{

    margin:0;

    font-size:20px;

    font-weight:700;

}

.btn-cerrar{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#fff;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

}

.btn-cerrar:hover{

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

    transform:rotate(90deg);

}

.modal-body{

    flex:1;

    overflow-y:auto;

    padding:24px;

    display:grid;

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

    gap:18px;

}

.modal-body .form-group{

    margin:0;

}

.modal-body .form-group:last-child{

    grid-column:1 / -1;

}

.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:18px 24px;

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

    background:var(--gray-50);

}

.modal-footer .btn{

    min-width:150px;

}

@keyframes modalEntrada{

    from{

        opacity:0;

        transform:translateY(-30px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

@media (max-width:768px){

    .modal{

        padding:15px;

        align-items:flex-start;

    }

    .modal-contenido{

        margin-top:20px;

        max-width:100%;

    }

    .modal-body{

        grid-template-columns:1fr;

    }

    .modal-footer{

        flex-direction:column-reverse;

    }

    .modal-footer .btn{

        width:100%;

    }

}