/* ============================= */
/* CONTENEDOR */
/* ============================= */

.admin-container{
max-width:1150px;
margin:50px auto;
padding:0 20px;
}

/* ============================= */
/* TITULO */
/* ============================= */

.admin-container h1{
font-size:34px;
font-weight:700;

color:var(--accent);

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

margin-bottom:15px;

/* 🔥 glow más elegante */
text-shadow:0 0 12px var(--accent);
}

.admin-container p{
color:var(--text-secondary);
line-height:1.7;
max-width:750px;
margin:0 auto;
text-align:center;
}

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

.panel-box{
margin-top:35px;

background:var(--bg-card);
backdrop-filter:blur(12px);

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

padding:32px;

/* 🔥 sombra más limpia (mejor en claro) */
box-shadow:0 10px 30px rgba(0,0,0,.15);

transition:.3s;
}

.panel-box:hover{
transform:translateY(-4px);
border-color:var(--accent);

box-shadow:
0 10px 35px rgba(0,0,0,.2),
0 0 20px rgba(0,255,255,.15);
}

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

.panel-box h2{
display:flex;
align-items:center;
gap:10px;

font-size:20px;
font-weight:600;
margin-bottom:22px;

color:var(--text-main);
}

.panel-box h2 i{
color:var(--accent);
}

/* ============================= */
/* LISTA */
/* ============================= */

.licencias-list{
display:flex;
flex-direction:column;
gap:12px;
}

/* ============================= */
/* ITEMS */
/* ============================= */

.info-item{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;

background:var(--bg-header);
border:1px solid var(--border-color);

border-radius:12px;
padding:14px 16px;

transition:.25s;
}

.info-item:hover{
border-color:var(--accent);
transform:translateX(3px);
}

/* ============================= */
/* INFO LICENCIA */
/* ============================= */

.licencia-info{
display:flex;
flex-direction:column;
gap:4px;
}

.licencia-info span{
color:var(--text-main);
font-weight:600;
font-size:15px;
}

.licencia-info small{
color:var(--text-secondary);
font-size:13px;
}

/* ============================= */
/* ESTADO */
/* ============================= */

.info-item strong{
font-size:14px;
font-weight:600;
white-space:nowrap;
color:var(--text-main);
}

/* ============================= */
/* LOADER */
/* ============================= */

.loader{
width:32px;
height:32px;

border:3px solid var(--border-color);
border-top:3px solid var(--accent);

border-radius:50%;
animation:spin 1s linear infinite;

margin:30px auto;
}

@keyframes spin{
to{
transform:rotate(360deg);
}
}

/* ============================= */
/* TEXTO FINAL */
/* ============================= */

.fecha-desarollo{
text-align:center;
margin-top:70px;
padding-top:25px;

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

font-size:14px;
color:var(--text-secondary);
}

/* ============================= */
/* ANIMACION */
/* ============================= */

.fade-in{
opacity:0;
animation:fadeInItem .4s ease forwards;
}

@keyframes fadeInItem{
from{
opacity:0;
transform:translateY(6px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* ============================= */
/* PROGRESS BAR */
/* ============================= */

.licencia-progress{
width:100%;
height:6px;

background:var(--border-color);
border-radius:4px;

margin-top:6px;
overflow:hidden;
}

.licencia-bar{
height:100%;

/* 🔥 color dinámico */
background:var(--accent);

transition:width .6s ease;

/* glow */
box-shadow:0 0 8px var(--accent);
}

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

@media(max-width:768px){

.admin-container{
margin:30px auto;
}

.panel-box{
padding:25px;
}

.admin-container h1{
font-size:26px;
}

.info-item{
flex-direction:column;
align-items:flex-start;
}

}