.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.card { background: var(--panel); padding: 16px; border-radius: var(--radius); border: 1px solid var(--card-border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); text-decoration: none; color: inherit; }
.card.card-action { cursor: pointer; transition: all 0.2s ease-in-out; }
.card.card-action:hover { transform: translateY(-3px); border-color: var(--neon); box-shadow: 0 4px 20px rgba(0, 255, 204, 0.1); }
.card.card-action.active { transform: translateY(-3px); border-color: var(--neon); background-color: rgba(0, 255, 204, 0.1); }
.card .title { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.card .value { font-size: 22px; font-weight: 700; color: var(--neon); }
.card .value.action-text { font-size: 18px; color: var(--muted); }
.peso-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "main imc" "history history"; gap: 24px; }
.peso-main-content { grid-area: main; display: flex; flex-direction: column; gap: 20px; }
.imc-status-card { grid-area: imc; }
.history-log { grid-area: history; }
.imc-status-card, .info-card-grid { background: var(--bg); padding: 20px; border-radius: var(--radius); }
.imc-status-card h3 { font-size: 1em; color: var(--muted); font-weight: 500; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; text-align: center; }
.imc-score { font-size: 4em; font-weight: 700; color: var(--neon); line-height: 1; text-align: center; }
.imc-status-text { font-size: 1.2em; font-weight: 500; margin-bottom: 20px; min-height: 22px; text-align: center; }
.imc-legend { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.imc-legend li { padding: 10px 14px; border-radius: 8px; display: flex; justify-content: space-between; font-size: .9em; color: #fff; font-weight: 500; opacity: .7; transition: all .3s; }
.imc-legend li.highlight { opacity: 1; transform: scale(1.03); font-weight: 700; }
.status-underweight { background-color: var(--purple); }
.status-normal { background-color: var(--green-normal); }
.status-overweight { background-color: var(--orange-over); }
.status-obese { background-color: var(--error); }
.info-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.info-card-grid div { background-color: var(--panel); padding: 15px; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 5px; }
.info-card-grid span { color: var(--muted); font-weight: 500; font-size: 0.9em; }
.info-card-grid strong { font-size: 1.1em; color: #fff; }
.history-log h3 { margin-top: 0; margin-bottom: 20px; font-weight: 500; color: var(--muted); }
.diario-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.diario-list-item { background-color: var(--panel); padding: 12px 15px; border-radius: var(--radius); display: flex; gap: 15px; align-items: center; margin-bottom: 0; border: 1px solid var(--card-border); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); }
.diario-list-item .item-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1em; color: #fff; }
.diario-list-item .item-content { flex-grow: 1; }
.diario-list-item .item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
.item-header .item-title { font-size: 1.1em; font-weight: 600; color: #fff; }
.item-header .item-time, .diario-list-item .item-time { font-size: 0.9em; color: var(--muted); }
.diario-list-item .item-details { font-size: 0.95em; color: var(--muted); }
.diario-list-item .item-path { font-size: 0.8em; color: var(--muted); opacity: 0.7; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--card-border); }
.diario-list-item .item-notes { font-size: 0.9em; color: #fff; opacity: 0.9; margin-top: 5px; font-style: italic; }
.peso-card .metric-group { flex: 1; display: flex; flex-direction: column; text-align: center; }
.peso-card .metric-label { font-size: 0.8em; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; }
.peso-card .metric-value { font-size: 1.3em; font-weight: 600; color: #fff; }
.item-actions { padding-left: 15px; }
.item-actions i { color: var(--muted); cursor: pointer; font-size: 1.2rem; transition: color 0.2s; }
.item-actions i:hover { color: var(--neon); }
.item-actions .btn-organizar { background-color: var(--bg); color: var(--neon); border: 1px solid var(--neon); padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }