/* --- CONTENEDOR PRINCIPAL DEL PESO --- */
/* (Ya no es position absolute ni fixed, ahora fluye con las demás tarjetas) */
.pesos-container { 
    background: #0b111e; /* Color oscuro igual a las otras tarjetas */
    border: 2px solid #1e293b;
    border-radius: 12px; 
    padding: 12px 15px; 
    color: white; 
    width: 100%; 
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(0, 224, 255, 0.05); /* Sombra cyan sutil */
    z-index: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

/* Fila 1: LISTA DE PESOS (En Grid de 4 columnas) */
#listaPesos { 
    list-style: none; 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 6px; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
}
#listaPesos li { 
    background: #1c2541; /* Un poco más claro que el fondo para que resalte */
    padding: 6px; 
    border-radius: 6px; 
    font-size: 11px; 
    white-space: nowrap; 
    text-align: center; 
    cursor: pointer; 
    border: 1px solid transparent; 
}
#listaPesos li.actual { 
    background: #00e0ff; 
    color: #000; 
    font-weight: bold; 
    box-shadow: 0 0 8px #00e0ff; 
}
#listaPesos li.superior { 
    background: linear-gradient(270deg, #6a5cff, #c77dff, #ff8fab, #80ffdb, #6a5cff); 
    background-size: 400%; 
    animation: rainbowMove 6s ease infinite; 
    color: white; 
}
@keyframes rainbowMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Fila 2: CONTROLES EN LÍNEA (Editar - Peso - Historial) */
.kg-controles-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 8px;
}

#editarBtnKg, #verHistorialKg { 
    flex: 1;
    background: transparent; 
    color: #cbd5e1; 
    border: 1px solid #334155; 
    padding: 8px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 11px; 
    font-weight: bold; 
    transition: all 0.2s ease; 
    text-align: center; 
}
#editarBtnKg:hover, #verHistorialKg:hover { 
    background: rgba(255, 255, 255, 0.05); 
    color: white;
    transform: scale(1.02); 
}

#pesoSeleccionado { 
    flex: 1.5; /* Se hace un poco más ancho que los botones */
    background: #00e0ff; 
    color: #000; 
    padding: 8px; 
    border-radius: 6px; 
    font-size: 14px; 
    font-weight: 900; 
    text-align: center; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 0 10px rgba(0, 224, 255, 0.4); 
}

/* Fila 3: BARRA IMC */
#imc-info { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    background: rgba(0, 0, 0, 0.2); 
    border-radius: 8px; 
    padding: 10px 15px; 
    width: 100%;
    box-sizing: border-box;
}
#imc-lectura { display: flex; flex-direction: column; align-items: center; min-width: 45px; }
#val-imc { font-weight: bold; font-size: 18px; color: #ffcc00; }
#lbl-imc { font-size: 9px; opacity: 0.7; }
.imc-visual-group { flex-grow: 1; position: relative; padding-top: 15px; }
.imc-barra-container { position: relative; width: 100%; height: 10px; }
.imc-barra-fondo { display: flex; width: 100%; height: 100%; border-radius: 5px; overflow: hidden; }
.tramo { height: 100%; }
.bajo { width: 18.5%; background: #00e0ff; }
.normal { width: 25%; background: #00ff66; }
.sobrepeso { width: 20%; background: #ffcc00; }
.obesidad { width: 15%; background: #ff8c00; }
.extrema { width: 21.5%; background: #ff3c3c; }
#imc-indicador { position: absolute; top: -14px; left: 0%; font-size: 14px; transition: left 0.5s ease; color: white; }
.fases-labels { display: flex; justify-content: space-between; width: 100%; margin-top: 5px; font-size: 9px; font-weight: bold; opacity: 0.9; }
.fases-labels span { flex: 1; text-align: center; }
.fases-numbers { position: relative; width: 100%; height: 10px; margin-top: 2px; font-size: 8px; color: #888; }
.fases-numbers span { position: absolute; transform: translateX(-50%); }
.fases-numbers span:nth-child(1) { left: 18.5%; }
.fases-numbers span:nth-child(2) { left: 43.5%; }
.fases-numbers span:nth-child(3) { left: 63.5%; }
.fases-numbers span:nth-child(4) { left: 78.5%; }

/* RESPONSIVE MOBILE EXPRIMIDO */
@media (max-width: 600px) {
    .pesos-container { padding: 10px; gap: 10px; }
    #listaPesos { gap: 4px; }
    #listaPesos li { padding: 5px 4px; font-size: 10px; }
    
    .kg-controles-inline { gap: 6px; }
    #editarBtnKg, #verHistorialKg { font-size: 10px; padding: 6px; }
    #pesoSeleccionado { font-size: 13px; padding: 6px; }
    
    #imc-info { padding: 8px 10px; gap: 10px; }
    #val-imc { font-size: 16px; }
    .fases-labels { font-size: 8px; }
}

/* =========================================
   MODALES (VISOR E HISTORIAL)
   ========================================= */
#modalKg { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.75); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    z-index: 99999 !important; 
    display: none; justify-content: center; align-items: center; 
    padding: 20px; box-sizing: border-box; 
    overflow: hidden !important; 
}

.modal-content { 
    background: #1a1a2e; 
    padding: 20px 25px; 
    border-radius: 16px; 
    width: 95%; max-width: 500px; color: white; border: 1px solid #30475e; position: relative;
    max-height: 90vh; height: auto; 
    display: flex; flex-direction: column; justify-content: flex-start;
    overflow: hidden !important; 
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

.fila-linea-unica { 
    display: flex !important; justify-content: space-between !important; align-items: center !important; 
    width: 100% !important; margin: 8px 0 !important; padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    gap: 10px !important; flex-shrink: 0; 
}
.fila-linea-unica h3 { 
    margin: 0 !important; font-size: clamp(14px, 4vw, 18px) !important;
    white-space: nowrap; text-align: center; flex-grow: 1;
}
.btn-accion-lateral { 
    background: #252535; color: #00e0ff; border: 1px solid #00e0ff; 
    padding: 5px 10px; border-radius: 6px; font-size: 10px; 
    cursor: pointer; font-weight: bold; flex-shrink: 0;
}

.close { position: absolute; top: 15px; right: 20px; font-size: 24px; cursor: pointer; opacity: 0.7; z-index: 10;}
.grid-semanas-header { text-align: center; color: #00e0ff; margin-bottom: 5px; font-weight: bold; font-size: 16px; flex-shrink: 0; }

.grid-semanas { 
    display: grid !important; grid-template-columns: repeat(10, 1fr) !important; 
    gap: 3px; 
    padding: 5px; 
    background: rgba(0,0,0,0.3); 
    border-radius: 8px; margin-bottom: 5px; 
    flex: 1; min-height: 0; 
    overflow-y: auto; 
    align-content: start !important; 
}
.grid-semanas::-webkit-scrollbar { width: 0px; }

.semana-btn { 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    aspect-ratio: 1/1; border-radius: 3px; cursor: pointer; 
    font-size: clamp(6px, 1.2vh, 9px); 
    color: #555; background: #0f0f1e; border: 1px solid #333; 
}
.semana-btn.completada { background: #00e0ff; color: #000; font-weight: bold; border: none; box-shadow: 0 0 5px #00e0ff; }

#nuevoPeso { width: 100%; padding: 8px; background: #0f0f1e; border: 1px solid #333; color: white; border-radius: 8px; margin-bottom: 6px; text-align: center; font-size: 15px; box-sizing: border-box; flex-shrink: 0; }
.upload-grid-modern { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.upload-item-cool input[type="file"] { display: none !important; }
.upload-item-cool label { 
    display: flex; align-items: center; justify-content: space-between; 
    background: rgba(0, 224, 255, 0.05); border: 1px dashed rgba(0, 224, 255, 0.5); 
    padding: 6px 10px; border-radius: 8px; cursor: pointer; width: 100%; box-sizing: border-box;
}
.label-text { color: #00e0ff; font-weight: bold; font-size: 11px; flex-grow: 1; text-align: left; margin-left: 10px; }
.file-name { color: #888; font-size: 10px; }
#guardarPesoHistorial { width: 100%; padding: 10px; margin-top: 10px; background: #00e0ff; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; color: #022; font-size: 13px; text-transform: uppercase; flex-shrink: 0; }

.modal-fotos-visor { 
    position: fixed !important; top: 0 !important; left: 0 !important; 
    width: 100vw !important; height: 100vh !important; 
    background: rgba(0,0,0,0.95) !important; 
    z-index: 999999 !important; 
    display: none; justify-content: center; align-items: center; 
    backdrop-filter: blur(10px); 
    padding: 40px 10px; 
    box-sizing: border-box;
    overflow: hidden !important; 
}

.modal-content-visor { 
    background: #1a1a2e; 
    padding: 25px; 
    border-radius: 16px; 
    width: 95%; max-width: 650px; 
    border: 1px solid #00e0ff; 
    position: relative; 
    max-height: 100%; 
    overflow-y: auto !important; 
    display: flex;
    flex-direction: column;
}
.modal-content-visor img { max-width: 100%; height: auto; border-radius: 6px; margin-bottom: 10px; }
.galeria-modal-flex { display: flex; justify-content: space-around; gap: 10px; flex-wrap: wrap; }
.foto-container { flex: 1; min-width: 150px; text-align: center; background: rgba(0,0,0,0.2); padding: 5px; border-radius: 8px; }
.foto-container img { width: 100%; border-radius: 6px; border: 1px solid #333; margin-top: 5px; object-fit: cover; aspect-ratio: 3/4; }
.foto-container small { color: #00e0ff; text-transform: uppercase; font-size: 10px; }
.close-visor { position: absolute; top: 15px; right: 20px; font-size: 30px; color: #fff; cursor: pointer; }
#modalVerFotos { z-index: 200000 !important; }
.modal-content-visor::-webkit-scrollbar { width: 6px; }
.modal-content-visor::-webkit-scrollbar-thumb { background: #00e0ff; border-radius: 4px; }
.modal-content-visor::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }