/* ==========================================================
   SECTIONS
========================================================== */

.section{

    margin-bottom:var(--space-7);

}

.section-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:var(--space-5);

    font-size:1.35rem;

    font-weight:700;

}
.section-header{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-bottom:var(--space-5);

}

.section-description{

    color:var(--text-light);

    font-size:.95rem;

    margin:0;

}


/* ==========================================================
   CARDS
========================================================== */

.card{

    background:var(--surface);

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

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

    padding:var(--space-5);

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

    transition:var(--transition);

    overflow: hidden;

}

.card:hover{

    transform:translateY(-3px);

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

}


/* ==========================================================
   GRID
========================================================== */

.grid{

    display:grid;

    gap:var(--space-5);

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}


/* ==========================================================
   BOTÕES
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px 22px;

    border:none;

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

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

    text-decoration: none;

    white-space: nowrap;

}

.btn:active{
    transform: scale(.98);
}


.btn:hover{

    transform:translateY(-2px);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-secondary{

    background:#fff;

    color:var(--text);

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

}

.btn-secondary:hover{

    background:#f3f4f6;

}

.btn-danger{

    background:var(--danger);

    color:#fff;

}

.btn-danger:hover{

    filter:brightness(.95);

}

.btn-success{

    background:var(--success);

    color:#fff;

}

.btn-success:hover{

    filter:brightness(.95);

}


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

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

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

    font-size:.82rem;

    font-weight:600;

}

.badge-success{

    background:#DCFCE7;

    color:#166534;

}

.badge-warning{

    background:#FEF3C7;

    color:#92400E;

}
.badge-info{

    background:#DBEAFE;

    color:#1D4ED8;

}

.badge-danger{

    background:#FEE2E2;

    color:#991B1B;

}


/* ==========================================================
   INFO CARD
========================================================== */

.info-card{

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:14px;

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

    transition:var(--transition);

}

.info-card:hover{

    background:#F8F7FC;;

    transform:translateY(-2px);

}

.info-label{

    color:var(--text-light);

    font-size:.85rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.info-value{

    font-size:1rem;

    font-weight:600;

    color:var(--text);

}


/* ==========================================================
   MÉTRICAS
========================================================== */

.metric-card{

    min-width:230px;

    min-height:150px;

    padding:22px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.metric-value{

    font-size:1.55rem;

    line-height:1.3;

    font-weight:700;

    color:var(--primary);

    margin-bottom:6px;

}

.metric-label{

    color:var(--text-light);

    font-size:.9rem;

}

.metric-icon{

    font-size:2rem;

    margin-bottom:12px;

}


/* ==========================================================
   FORMULÁRIOS
========================================================== */

.form-card{

    padding:32px;

}

.form-grid{

    display:grid;

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

    gap:24px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group > label{

    margin-bottom:8px;

    font-weight:600;

    color:var(--text);

}

.form-group input,
.form-group textarea,
.form-group select{

    width:100%;

    padding:14px 16px;

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

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

    background:#fff;

    transition:var(--transition);

}

.form-group textarea{

    resize:vertical;

    min-height:140px;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(103,80,164,.15);

}

.form-actions{

    display:flex;

    justify-content:flex-end;

    gap:16px;

    margin-top:32px;

}


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

.empty-state{

    text-align:center;

    padding:60px 30px;

    color:var(--text-light);

}

.empty-state h3{

    margin-top:16px;

}

.empty-state p{

    margin-top:8px;

}


/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:24px;

    padding-left:34px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:13px;

    top:8px;

    bottom:8px;

    width:2px;

    background:linear-gradient(
        to bottom,
        var(--primary-light),
        var(--border)
    );

}

.timeline-card{

    position:relative;

    transition:var(--transition);

}

.timeline-content{
    width: 100%;
}

.timeline-card:hover{

    transform:translateY(-2px);

}

.timeline-marker{

    position:absolute;

    left:-34px;

    top:26px;

    width:16px;

    height:16px;

    border-radius:50%;

    background:var(--primary);

    border:4px solid #fff;

    box-shadow:
        0 0 0 2px var(--primary-light);

}

/* ==========================================================
   Info Groups
========================================================== */
.info-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.info-group strong{

    color:var(--text);

}

/* ==========================================================
   ACTIONS
========================================================== */

.actions-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:var(--space-4);

}

.actions-grid .btn{

    width:100%;

    justify-content:center;

}


/* ==========================================================
   RESPONSIVIDADE
========================================================== */


@media(max-width:992px){

    .grid-4{

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

    }

}

@media(max-width:768px){

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

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

    .form-grid{

        grid-template-columns:1fr;

    }

    .form-actions{

        flex-direction:column;

        align-items:stretch;

    }

    .actions{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }
    .timeline-header{

    flex-direction:column;

    align-items:flex-start;
    }
}
/* ==========================================================
   CLIENTES
========================================================== */

.client-card{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.client-card-header{

    display:flex;

    align-items:center;

    gap:18px;

}

.client-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--primary-light);

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.5rem;

    font-weight:700;

    flex-shrink:0;

}

.client-card-header h3{

    margin-bottom:4px;

}

.client-card-body{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.client-card-actions{

    display:grid;

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

    gap:12px;

}

.client-card-actions .btn{

    width:100%;

}

@media(max-width:768px){

    .client-card-actions{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   CLIENT PAGE
========================================================== */

.client-page{

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

}

.client-content{

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

}

/* ==========================================================
   SUMMARY
========================================================== */

.summary-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));

    gap:18px;

    align-items:stretch;

}
/* ==========================================================
   RADIO OPTIONS
========================================================== */

.radio-group{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:8px;

}

.radio-option{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 16px;

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

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

    cursor:pointer;

    background:#fff;

    transition:var(--transition);

}

.radio-option:hover{

    border-color:var(--primary);

    background:var(--primary-light);

}

.radio-option input{

    margin:0;

    accent-color:var(--primary);

    flex-shrink:0;

}

.radio-option input[type="radio"] {
    width: auto;
    height: auto;
    flex:0 0 auto
}

.radio-option span{

    margin:0;

    color:var(--text);

    font-weight:500;

}

.radio-option:has(input:checked){

    background: var(--primary-light);

    border-color: var(--primary);

    box-shadow: inset 0 0 0 1px var(--primary);

}