/* =====================================================
                COMPONENTES.CSS
    Tarjetas, botones, tablas, formularios y alertas
===================================================== */

/* ===========================
            TARJETAS
=========================== */

.card{
    background:var(--surface-elevated);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    padding:22px;
    margin-bottom:18px;
    box-shadow:var(--shadow-soft);

}


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

.btn-principal{

    width:100%;

    min-height:90px;

    border:none;

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

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

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    transition:.25s;

}

.btn-principal:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.btn-principal:disabled{

    opacity:.45;

    cursor:not-allowed;

}

.btn-principal:disabled:hover{

    transform:none;

    box-shadow:none;

}

.btn-principal.btn-accion-egreso{
    background:linear-gradient(135deg,#b42318,#7a160f);
}

.icono-boton{

    font-size:34px;

}

.btn-principal strong{

    display:block;

    font-size:24px;

    margin-bottom:4px;

}

.btn-principal small{

    color:#eef8ff;

    font-size:14px;

}
.btn-secundario{
    width:100%;
    min-height:54px;
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.04);
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:.2s;
}
.btn-secundario:hover{
    background:rgba(255,255,255,.08);
}
.flash-stack{
    display:grid;
    gap:10px;
    margin-bottom:18px;
}
.flash{
    border-radius:12px;
    padding:12px 14px;
    border:1px solid transparent;
    font-weight:700;
}
.flash-success{
    background:rgba(38,185,107,.16);
    border-color:rgba(38,185,107,.4);
    color:#bdf2cf;
}
.flash-error{
    background:rgba(223,81,81,.16);
    border-color:rgba(223,81,81,.4);
    color:#ffd1d1;
}
.flash-warning{
    background:rgba(228,169,49,.16);
    border-color:rgba(228,169,49,.4);
    color:#ffe9be;
}


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

input,
select,
textarea{

    width:100%;

    padding:11px 14px;

    border:1px solid var(--border-soft);
    border-radius:var(--radius-md);
    background:#eaf0f8;
    color:#1a2431;

}

input:focus,
select:focus,
textarea:focus{
    border-color:rgba(65,194,227,.6);
    box-shadow:0 0 0 3px rgba(65,194,227,.22);

}


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

.tabla{

    width:100%;

    border-collapse:collapse;

}

.tabla thead{
    background:linear-gradient(135deg,#2e8be9,#34b6dd);

}

.tabla th{

    padding:13px;

    font-size:14px;

    color:white;

}

.tabla td{

    padding:13px;

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

    text-align:center;

}

.tabla tbody tr:hover{

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

}


/* ===========================
            BUSCADOR
=========================== */

#resultadoBusqueda{

    margin-top:12px;

}

.item-persona{

    background:#3a4a66;

    border-radius:10px;

    padding:12px 15px;

    margin-bottom:8px;

    cursor:pointer;

    transition:.20s;

}

.item-persona:hover{

    background:#4c6796;

}

.item-persona strong{

    display:block;

    font-size:16px;

    margin-bottom:2px;

}

.item-persona small{

    color:#d9e5f3;

}


/* =====================================================
            NOTIFICACIONES SIGA
===================================================== */

.notificaciones{

    position:fixed;

    top:10px;
    left:50%;
    transform:translateX(-50%);

    width:min(420px, calc(100vw - 32px));

    z-index:99999;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.notificacion{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 18px;

    border-radius:14px;

    color:white;

    font-weight:600;

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

    animation:mostrarNotificacion .30s ease;

}

.notificacion-icono{

    font-size:28px;

}

.notificacion-success{
    background:linear-gradient(135deg,var(--success),#3ed78a);

}

.notificacion-error{
    background:linear-gradient(135deg,#c53a3a,var(--danger));

}

.notificacion-warning{
    background:linear-gradient(135deg,#cc8f11,var(--warning));

}

.notificacion-info{
    background:linear-gradient(135deg,var(--primary),var(--secondary));

}

@keyframes mostrarNotificacion{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes ocultarNotificacion{

    from{

        opacity:1;

        transform:translateX(0);

    }

    to{

        opacity:0;

        transform:translateX(60px);

    }

}
/* ==========================================
        TOAST SIGA
========================================== */

.toast-siga{

    position:fixed;

    top:10px;
    left:50%;
    right:auto;

    background:var(--success);

    color:white;

    padding:16px 24px;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

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

    opacity:0;

    transform:translateX(-50%) translateY(-25px);

    transition:.30s;

    z-index:99999;

    pointer-events:none;

}

.toast-siga.mostrar{

    opacity:1;

    transform:translateX(-50%);

}

.toast-error{
    background:var(--danger);

}

.modal{
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(9,14,22,.75);
    backdrop-filter:blur(1px);
}

.modal-contenido{
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
}

.badge{
    border-radius:999px;
    padding:5px 10px;
    font-size:.78rem;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.badge-activo{
    background:rgba(38,185,107,.2);
    color:#9af0c0;
}

.badge-inactivo{
    background:rgba(223,81,81,.2);
    color:#ffbcbc;
}

input[type="checkbox"]{
    accent-color:var(--primary);

}