* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo); color: var(--texto);
  font: 400 16px/1.6 var(--f-texto);
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--lavanda); }
main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }

.barra { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--linea); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--oro); font: 400 20px var(--f-marca); letter-spacing: .12em; }
.acciones { display: flex; align-items: center; gap: 14px; }
.boton-tema { background: none; border: 1px solid var(--linea); color: var(--texto); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; }
.boton-tema:hover { border-color: var(--oro); }
.enlace-tenue { color: var(--tenue); text-decoration: none; font: 400 13px var(--f-dato); }
.enlace-tenue:hover { color: var(--texto); }
.etiqueta { font: 500 11px var(--f-dato); text-transform: uppercase; letter-spacing: .1em; color: var(--sobre-oro); background: var(--oro); padding: 2px 8px; border-radius: 6px; }

.saludo { padding: 40px 0 28px; }
.fecha { margin: 0; font: 400 13px var(--f-dato); color: var(--oro); letter-spacing: .08em; text-transform: uppercase; }
.saludo h1 { margin: 8px 0 6px; font: 400 clamp(28px, 5vw, 44px)/1.15 var(--f-marca); }
.linea { margin: 0; color: var(--tenue); max-width: 60ch; }

.pilares { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pilar { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; }
.pilar h2 { margin: 0 0 4px; font: 500 12px var(--f-dato); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.pilar p { margin: 0 0 12px; font-size: 14px; }
.estado { font: 400 11px var(--f-dato); color: var(--tenue); }
.estado.proximo { color: var(--positivo); }
.estado.proximo::before { content: "● "; }

.centro { text-align: center; padding: 12vh 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.centro h1 { margin: 12px 0 0; font: 400 34px var(--f-marca); letter-spacing: .1em; }
.tenue { color: var(--tenue); margin: 0 0 18px; }
.boton { display: inline-block; margin-top: 12px; background: var(--oro); color: var(--sobre-oro); text-decoration: none; font: 600 15px var(--f-texto); padding: 10px 22px; border-radius: 999px; }
.boton:hover { filter: brightness(1.08); }
.dato { display: block; margin: 8px auto; padding: 8px 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; font: 400 13px var(--f-dato); word-break: break-all; max-width: 100%; }

.pie { text-align: center; padding: 18px; font: 400 12px var(--f-dato); color: var(--tenue); border-top: 1px solid var(--linea); }

/* Menú */
.menu { display: flex; gap: 4px; }
.menu a { color: var(--tenue); text-decoration: none; font: 500 13px var(--f-dato); letter-spacing: .06em; padding: 6px 12px; border-radius: 999px; }
.menu a:hover { color: var(--texto); }
.menu a[aria-current="page"] { color: var(--sobre-oro); background: var(--oro); }
.estado.proximo { text-decoration: none; }
a.estado.proximo:hover { text-decoration: underline; }

/* Salud */
.salud-cabecera { padding: 28px 0 8px; }
.salud-cabecera h1 { margin: 6px 0 8px; font: 400 clamp(22px, 3.6vw, 34px)/1.3 var(--f-marca); max-width: 28ch; }
.salud-cabecera[data-tono="logro"] h1 { color: var(--positivo); }
.salud-cabecera[data-tono="atento"] h1 { color: var(--oro); }
.progreso { display: flex; gap: 6px; margin-top: 18px; max-width: 420px; }
.tramo { flex: 1; height: 8px; border-radius: 4px; background: var(--linea); }
.tramo.ok { background: var(--positivo); }
.tramo.omitida { background: var(--tenue); }
.seccion { font: 500 12px var(--f-dato); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin: 30px 0 12px; }
.aviso-error { border: 1px solid var(--critico); color: var(--critico); border-radius: 10px; padding: 10px 14px; margin: 14px 0; }

.tomas { display: grid; gap: 10px; }
.toma { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 16px; }
.toma-hora { font: 500 18px var(--f-dato); color: var(--oro); }
.toma-med { font-weight: 600; }
.toma-dosis { font-size: 13px; color: var(--tenue); }
.toma.hecha { opacity: .72; }
.toma.hecha .toma-hora { color: var(--positivo); }
.toma.omitida { opacity: .6; }
.toma-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.toma-estado { font: 400 13px var(--f-dato); color: var(--tenue); }
.btn { font: 500 13px var(--f-texto); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: var(--texto); cursor: pointer; min-height: 38px; }
.btn:hover { border-color: var(--oro); }
.btn.primario { background: var(--oro); color: var(--sobre-oro); border-color: var(--oro); font-weight: 600; }
.btn.suave { color: var(--tenue); }
.btn:disabled { opacity: .5; cursor: wait; }

.metricas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.dato-card { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; }
.dato-rotulo { font: 500 11px var(--f-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.dato-valor { font: 500 26px var(--f-dato); margin: 4px 0 2px; }
.dato-detalle { font-size: 12px; color: var(--tenue); }
.barra-meta { height: 6px; border-radius: 3px; background: var(--linea); margin-top: 10px; overflow: hidden; }
.barra-meta span { display: block; height: 100%; background: var(--oro); }

@media (max-width: 640px) {
  .toma { grid-template-columns: 52px 1fr; }
  .toma-acciones { grid-column: 1 / -1; justify-content: flex-start; }
  .barra { flex-wrap: wrap; gap: 8px; }
}

/* Rumbo */
.rumbo-cabecera { padding: 28px 0 4px; }
.rumbo-cabecera h1 { margin: 6px 0 8px; font: 400 clamp(24px, 4vw, 36px)/1.25 var(--f-marca); }
.aviso-suave { border: 1px solid var(--linea); background: var(--superficie); color: var(--tenue); border-radius: 10px; padding: 10px 14px; margin: 14px 0; font-size: 14px; }
.vacio { color: var(--tenue); font-size: 14px; }
.metas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.meta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.meta.en-vista { border-color: var(--oro); }
.meta-cab { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.meta-titulo { margin: 0; font: 600 16px var(--f-texto); }
.meta-etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 400 11px var(--f-dato); padding: 2px 8px; border-radius: 999px; background: var(--linea); color: var(--texto); }
.chip.suave { background: transparent; border: 1px solid var(--linea); color: var(--tenue); }
.meta-motivo { margin: 0; font-size: 13px; color: var(--tenue); }
.meta-vasbien { margin: 0; font-size: 14px; color: var(--lavanda); }
.meta-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.meta-registrar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.meta-registrar .valor { width: 110px; }
.meta-mas { display: flex; gap: 6px; flex-wrap: wrap; }
.meta .btn { text-decoration: none; display: inline-flex; align-items: center; }
.btn.chico { min-width: 34px; padding: 6px 10px; justify-content: center; }
.hecho { color: var(--positivo); font: 500 13px var(--f-dato); }
.tenue { color: var(--tenue); font-size: 13px; }
.grupo { margin: 10px 0; }
.grupo > summary, .agregar > summary { cursor: pointer; font: 500 13px var(--f-dato); color: var(--oro); padding: 8px 0; letter-spacing: .06em; }
.grupo .metas { margin-top: 8px; }
.agregar { margin: 22px 0 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 4px 16px 6px; }
#form-meta { display: grid; gap: 12px; padding: 8px 0 14px; }
#form-meta label { display: grid; gap: 4px; font: 400 12px var(--f-dato); color: var(--tenue); }
.fila { display: flex; gap: 12px; flex-wrap: wrap; }
.fila > label { flex: 1 1 160px; }
.fila.botones { gap: 8px; }
input[name], select, textarea, .valor { background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); border-radius: 8px; padding: 9px 10px; font: 400 15px var(--f-texto); }
input[name]:focus, select:focus, textarea:focus, .valor:focus { outline: 2px solid var(--oro); outline-offset: 1px; }
label.casilla { display: flex; align-items: center; gap: 8px; align-self: end; color: var(--texto); font-size: 14px; }
label.casilla input { width: 18px; height: 18px; accent-color: var(--oro); }