/* ==========================================================
   APD DESIGN SYSTEM v1
========================================================== */

:root{

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

    --apd-primary:#0D2B6C;
    --apd-primary-dark:#081D4A;

    --apd-green:#8BC400;
    --apd-orange:#FF7A00;

    --apd-white:#FFFFFF;

    --apd-bg:#F4F7FB;

    --apd-text:#1F2937;
    --apd-text-light:#6B7280;

    --apd-border:#E4E9F2;

    /* ========= BORDES ========= */

    --apd-radius-xs:8px;
    --apd-radius-sm:12px;
    --apd-radius-md:18px;
    --apd-radius-lg:24px;
    --apd-radius-xl:32px;

    /* ========= SOMBRAS ========= */

    --apd-shadow-sm:
        0 3px 10px rgba(13,43,108,.06);

    --apd-shadow-md:
        0 10px 25px rgba(13,43,108,.08);

    --apd-shadow-lg:
        0 20px 45px rgba(13,43,108,.12);

    /* ========= TRANSICIONES ========= */

    --apd-speed:.25s;

}
/* ==========================================================
   CARD
========================================================== */

.apd-card{

    background:var(--apd-white);

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

    box-shadow:var(--apd-shadow-md);

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

    padding:20px;

    transition:all var(--apd-speed);

}

.apd-card:hover{

    transform:translateY(-2px);

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

}

/* ==========================================================
   BUTTONS
========================================================== */

.apd-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border:none;

    cursor:pointer;

    border-radius:16px;

    padding:14px 20px;

    font-size:15px;

    font-weight:700;

    transition:all var(--apd-speed);

}

.apd-btn-primary{

    background:var(--apd-primary);

    color:white;

}

.apd-btn-primary:hover{

    background:var(--apd-primary-dark);

}

.apd-btn-success{

    background:var(--apd-green);

    color:white;

}

.apd-btn-success:hover{

    filter:brightness(.95);

}

.apd-btn-orange{

    background:var(--apd-orange);

    color:white;

}

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

.apd-input,
.apd-select{

    width:100%;

    height:52px;

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

    border-radius:16px;

    background:white;

    padding:0 16px;

    font-size:15px;

    color:var(--apd-text);

    transition:all var(--apd-speed);

}

.apd-input:focus,
.apd-select:focus{

    outline:none;

    border-color:var(--apd-primary);

    box-shadow:0 0 0 4px rgba(13,43,108,.08);

}
/* ==========================================================
   CARD COMPONENTS
========================================================== */

.apd-card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin:-20px -20px 20px -20px;

    padding:20px;

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

}

.apd-card-title{

    margin:0;

    color:var(--apd-primary);

    font-size:18px;

    font-weight:700;

}

.apd-card-body{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.apd-card-footer{

    margin-top:20px;

    padding-top:20px;

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

}

/* ==========================================================
   EMPTY STATE
========================================================== */

.apd-empty-state{

    margin:0;

    padding:16px;

    text-align:center;

    color:var(--apd-text-light);

    font-size:14px;

    line-height:1.5;

    background:#F8FAFC;

    border:1px dashed var(--apd-border);

    border-radius:16px;

}