gerenciar.js/* ========================================
BOTÕES
======================================== */

.btn{

height:56px;

padding:
0 28px;

border:none;

border-radius:18px;

display:inline-flex;

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

gap:10px;

font-size:15px;

font-weight:700;

font-family:'Inter',sans-serif;

text-decoration:none;

cursor:pointer;

transition:0.25s ease;

white-space:nowrap;

}


/* ========================================
PRIMARY
======================================== */

.btn-primary{

background:linear-gradient(
90deg,
#22c55e,
#2563eb
);

color:#ffffff;

}

.btn-primary:hover{

transform:translateY(-2px);

filter:brightness(1.05);

}


/* ========================================
SECONDARY
======================================== */

.btn-secondary{

background:#f1f5f9;

color:#0f172a;

border:
1px solid #dbe3ec;

}


.btn-secondary:hover{

background:#e2e8f0;

}


/* ========================================
SUCCESS
======================================== */

.btn-success{

background:#16a34a;

color:rgb(255, 255, 255);

}


.btn-success:hover{

background:#15803d;

transform:translateY(-2px);

}


/* ========================================
DANGER
======================================== */

.btn-danger{

background:#fee2e2;

color:#dc2626;

}


.btn-danger:hover{

background:#fecaca;

}


/* ========================================
OUTLINE
======================================== */

.btn-outline{

background:transparent;

border:
1px solid #dbe3ec;

color:#0f172a;

}


.btn-outline:hover{

background:#f8fafc;

}


/* ========================================
FULL
======================================== */

.btn-full{

width:100%;

}


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

.card{

background:white;

border:
1px solid #e2e8f0;

border-radius:30px;

overflow:hidden;

box-shadow:
0 12px 30px rgba(15,23,42,0.04);

transition:0.3s ease;

}


.card:hover{

transform:
translateY(-6px);

box-shadow:
0 24px 60px rgba(15,23,42,0.08);

}


/* ========================================
CARD CONTENT
======================================== */

.card-content{

padding:30px;

}


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

.badge{

display:inline-flex;

align-items:center;

padding:
10px 18px;

border-radius:999px;

font-size:12px;

font-weight:700;

letter-spacing:0.5px;

}


/* ========================================
BADGE PRIMARY
======================================== */

.badge-primary{

background:#eff6ff;

color:#2563eb;

}


/* ========================================
BADGE SUCCESS
======================================== */

.badge-success{

background:#ecfdf5;

color:#16a34a;

}


/* ========================================
BADGE DANGER
======================================== */

.badge-danger{

background:#fee2e2;

color:#dc2626;

}


/* ========================================
INPUT GROUP
======================================== */

.input-group{

display:flex;

flex-direction:column;

gap:10px;

}


/* ========================================
LABEL
======================================== */

.input-group label{

font-size:14px;

font-weight:700;

color:#334155;

}


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

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

width:100%;

padding:
16px 18px;

border-radius:16px;

border:
1px solid #dbe3ec;

background:#f8fafc;

font-size:15px;

font-family:'Inter',sans-serif;

transition:0.25s ease;

resize:none;

}


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

outline:none;

background:white;

border-color:#2563eb;

box-shadow:
0 0 0 4px rgba(37,99,235,0.08);

}


/* ========================================
STATUS
======================================== */

.status{

display:inline-flex;

align-items:center;

padding:
10px 16px;

border-radius:999px;

font-size:12px;

font-weight:700;

}


/* ========================================
STATUS DISPONÍVEL
======================================== */

.status-disponivel{

background:#ecfdf5;

color:#16a34a;

}


/* ========================================
STATUS ENTREGUE
======================================== */

.status-entregue{

background:#eff6ff;

color:#2563eb;

}


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

.grid{

display:grid;

gap:24px;

}


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

.grid-2{

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

}


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

.grid-3{

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

}


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

.grid-4{

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

}


/* ========================================
SECTION
======================================== */

.section{

padding:
100px 30px;

}


/* ========================================
SECTION TITLE
======================================== */

.section-title{

margin-bottom:50px;

}


.section-title h2{

font-size:58px;

line-height:0.95;

letter-spacing:-3px;

margin-bottom:20px;

color:#0f172a;

}


.section-title p{

font-size:18px;

line-height:1.9;

color:#64748b;

max-width:760px;

}


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

.empty-state{

background:white;

border:
1px solid #e2e8f0;

border-radius:34px;

padding:70px 40px;

text-align:center;

box-shadow:
0 12px 30px rgba(15,23,42,0.04);

}


.empty-state h3{

font-size:40px;

line-height:1;

letter-spacing:-2px;

margin-bottom:24px;

color:#0f172a;

}


.empty-state p{

font-size:18px;

line-height:1.9;

color:#64748b;

max-width:700px;

margin:auto;

}


/* ========================================
TABLE
======================================== */

.table-wrapper{

background:white;

border:
1px solid #e2e8f0;

border-radius:30px;

overflow:hidden;

box-shadow:
0 12px 30px rgba(15,23,42,0.04);

overflow-x:auto;

}


.table{

width:100%;

border-collapse:collapse;

min-width:900px;

}


.table thead{

background:#f8fafc;

}


.table thead th{

padding:22px;

text-align:left;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:#64748b;

border-bottom:
1px solid #e2e8f0;

}


.table tbody td{

padding:22px;

font-size:15px;

line-height:1.8;

color:#334155;

border-bottom:
1px solid #f1f5f9;

}


/* ========================================
RESPONSIVO
======================================== */

@media(max-width:900px){

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

grid-template-columns:1fr;

}

.section{

padding:
80px 20px;

}

.section-title h2{

font-size:42px;

line-height:1;

}

.section-title p{

font-size:16px;

}

.empty-state{

padding:50px 24px;

}

.empty-state h3{

font-size:30px;

}

}