/* ================================
🌟 CONTENEDOR GENERAL
================================ */



#avatar-enviando {
border: 6px solid #ffc107 !important;
background-color: #fff3cd !important;
transition: all 0.3s ease;
}

#avatar-enviado {
border: 6px solid #28a745 !important;
background-color: #d4edda !important;
}

#avatar-error {
border: 6px solid #dc3545 !important;
background-color: #f8d7da !important;
}

.enviando {
animation: pulse 0.4s ease;
}

.enviado {
animation: pulse-green 0.4s ease;
}

.error {
animation: shake 0.4s ease;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

@keyframes pulse-green {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}



/* ================================
🌟 LISTA DE REGISTROS
================================ */
.listaCotidiano {
display: flex;
flex-direction: column;
gap: 12px;
padding: 10px 0;
align-items: center;
}


/* ================================
🌟 ÍTEM DE COTIDIANO
================================ */
.cotidiano-item {
position: relative;
padding: 10px;
background: rgba(255, 255, 255, 0.06);
border-radius: 6px;
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
/* z-index: -1; */ /* ❌ elimina esto */
}


/* ================================
🌟 BOTÓN ELIMINAR (ICONO)
================================ */
.btn-eliminar-cotidiano {
position: absolute;
top: -7px;
right: -2px;
background: #cc0037;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
font-weight: bold;
}

.btn-editar-cotidiano {
position: absolute;
top: -7px;
right: -2px;
background: #cc0037;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
font-weight: bold;
border-radius: 8px;
}



.btn-eliminar-cotidiano:hover {
color: #cc0037;
}


/* ================================
🌟 TEXTO DE LOS ÍTEMS
================================ */
.cotidiano-nombre {
font-weight: bold;
color: white;
}

.cotidiano-detalle {
color: #bbb;
}

.cotidiano-fecha {
color: #ccc;
font-size: 0.9rem;
}


/* ================================
🌟 INPUT NUMÉRICO
================================ */
.cotidiano-item input[type="number"] {
padding: 4px 6px;
border-radius: 4px;
border: none;
width: 80px;
font-weight: bold;
background: #555;
color: white;
text-align: center;
}

.cotidiano-item input[type="number"]:focus {
background: #666;
}


/* ================================
🌟 BOTÓN ACTUALIZAR
================================ */
.btn-actualizar-cotidiano {
background: #c800ff;
color: white;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-weight: bold;
cursor: pointer;
transition: .2s;
}

.btn-actualizar-cotidiano:hover {
opacity: 0.85;
}


/* ================================
🌟 MENSAJE "SIN REGISTROS"
================================ */
.noCotidiano {
color: #bbb;
padding: 10px;
}


/* ================================
🌟 AVATARES
================================ */

/* Contenedor */
.contenedor-avatares {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
gap: 10px;
}
.btn-cerrar-flotante {
position: fixed;
left: 0; /* 👈 totalmente pegado */
top: 50%;
transform: translateY(-50%);
z-index: 9999;

background: #6a1b9a;
color: #fff;
border: none;
padding: 12px 16px;
border-radius: 0 50px 50px 0; /* solo lado derecho redondeado */
font-size: 14px;
cursor: pointer;

box-shadow: 4px 0 12px rgba(0,0,0,.3);
}

.btn-cerrar-flotante:hover {
background: #4a148c;
}



button.cuantoPuntosRegistraras {
    position: static;
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%, 0);

    font-size: 22px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);

    padding: 20%;

    background: transparent;          /* 🔴 fondo transparente */
    border: 3px solid #FB2C36;         /* 🔴 solo el borde */
    border-radius: 16px;

    cursor: pointer;
    transition: all 0.25s ease-in-out;
}


/* Hover → más brillo */
button.cuantoPuntosRegistraras:hover {
transform: translate(-50%, -4px) scale(1.05);


}

/* Click */
button.cuantoPuntosRegistraras:active {
transform: translate(-50%, 2px) scale(0.97);

box-shadow:
inset 0 4px 10px rgba(0, 0, 0, 0.6),
0 0 15px #00ff00;
}
span.spanAvatarCotidiano {
    padding-left: 6px;
     top: 2px;
    position: absolute;
    font-size: 11px;
    /* background-color: red; */
    /* margin-bottom: 23px; */
}

.nuevoPorcenjeAsistencia {
    position: absolute;
    border-radius: 8px;
    border: none;              
    padding: 6px 6px;
    background-color: #323131;
   color: white;       
    right: 15px;
    font-size: 14px;
    font-weight: 900;
}