:root {
  --ice: #e8f7fb;
  --turq: #39c5bb;
  --turq-dark: #1f9d96;
  --blue: #5b8fd6;
  --ink: #1d3b4f;
  --c-none: #26b6a4;
  --c-headache: #f0a63a;
  --c-migraine: #e5566d;
  --c-pending: #9aa9b8;
  --bs-body-color: var(--ink);
}

body {
  min-height: 100vh;
  color: var(--ink);
  background: var(--ice) url("../Miku/bg.jpg") center top / cover fixed no-repeat;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(232, 247, 251, .72), rgba(255, 255, 255, .58));
}

.app-header {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(57, 197, 187, .25);
  z-index: 1020;
}
.brand-icon { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--turq); }
.brand-title { font-weight: 800; font-size: 1.25rem; color: var(--turq-dark); letter-spacing: .02em; }

.auth-card { max-width: 420px; }

/* Miku hablando dentro de un globo (la imagen trae el globo; el texto va encima) */
.miku-say {
  container-type: inline-size;
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 614 / 669;
  margin: 0 auto .75rem 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 4px 8px rgba(52, 110, 150, .25));
  animation: pop .35s ease-out both;
}
.miku-say.sm { width: min(100%, 230px); margin: 0 auto .5rem; }
.auth-card .miku-say { margin-inline: auto; }
.miku-say.m-happy { background-image: url("../Miku/msg_happy.png"); }
.miku-say.m-sad { background-image: url("../Miku/msg_sad.png"); }
.miku-say.m-angry { background-image: url("../Miku/msg_angry.png"); }
.miku-say .say-text {
  position: absolute; left: 46%; top: 6.5%; width: 46%; height: 25%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 4.6cqw; line-height: 1.2; font-weight: 700; color: #1d4a78; overflow: hidden;
}
.miku-say .say-text > span { max-height: 100%; }

.trigger-alert { border-radius: 1rem; padding: .7rem .9rem; font-size: .9rem; background: #fff6e0; border: 2px solid var(--c-headache); }
.trigger-alert.calm { background: #e6f8f4; border-color: var(--c-none); }
.badge-trigger { background: #fff1d0; color: #8a5a00; border: 1px solid var(--c-headache); font-weight: 600; }
.kw-chip { display: inline-block; font-size: .75rem; background: #e4f2f7; border-radius: 1rem; padding: .1rem .55rem; margin: .1rem; }
.trigger-card { border-radius: 1.1rem; padding: 1rem; height: 100%; animation: pop .3s ease-out both; }
.trigger-card.off { opacity: .55; }

.nav-pills .nav-link { color: var(--turq-dark); border-radius: 2rem; font-weight: 600; transition: all .2s; }
.nav-pills .nav-link:hover { background: rgba(57, 197, 187, .15); }
.nav-pills .nav-link.active { background: linear-gradient(135deg, var(--turq), var(--blue)); color: #fff; }

.glass, .glass-modal {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 1.25rem;
  box-shadow: 0 6px 22px rgba(52, 110, 150, .14);
}
.glass-modal { background: rgba(255, 255, 255, .96); }

.btn-miku {
  background: linear-gradient(135deg, var(--turq), var(--blue));
  color: #fff; border: 0; border-radius: 2rem; font-weight: 700; padding-inline: 1.25rem;
  transition: transform .15s, box-shadow .15s;
}
.btn-miku:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(57, 197, 187, .45); }
.btn-outline-miku { color: var(--turq-dark); border: 2px solid var(--turq); border-radius: 2rem; font-weight: 600; background: #fff; }
.btn-group > .btn-outline-miku { border-radius: 0; }
.btn-group > .btn-outline-miku:first-child { border-radius: 2rem 0 0 2rem; }
.btn-group > .btn-outline-miku:last-child { border-radius: 0 2rem 2rem 0; }
.btn-outline-miku:hover, .btn-outline-miku.active { background: var(--turq); color: #fff; border-color: var(--turq); }

.search-input { border-radius: 2rem; border: 2px solid var(--turq); padding-inline: 1.25rem; }
.search-input:focus, .form-control:focus, .form-select:focus { border-color: var(--turq); box-shadow: 0 0 0 .25rem rgba(57, 197, 187, .25); }
.form-control, .form-select { border-radius: .75rem; }

/* Tarjetas de alimento */
.food-card { border-radius: 1.25rem; padding: 1rem; height: 100%; display: flex; flex-direction: column; gap: .5rem; animation: pop .3s ease-out both; transition: transform .2s, box-shadow .2s; }
.food-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(52, 110, 150, .22); }
.food-emoji { font-size: 2.2rem; line-height: 1; }
.food-name { font-weight: 700; font-size: 1.2rem; }
.miku-icon { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--turq); flex: none; }
.miku-icon.sm { width: 44px; height: 44px; border-width: 2px; }
.miku-icon.o-none { border-color: var(--c-none); }
.miku-icon.o-headache { border-color: var(--c-headache); }
.miku-icon.o-migraine { border-color: var(--c-migraine); }
.pending-icon { width: 64px; height: 64px; border-radius: 50%; background: #eef2f6; border: 3px dashed var(--c-pending); display: grid; place-items: center; font-size: 1.8rem; flex: none; }
.pending-icon.sm { width: 44px; height: 44px; font-size: 1.2rem; border-width: 2px; }

.count-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { font-size: .8rem; font-weight: 600; border-radius: 1rem; padding: .15rem .6rem; color: #fff; }
.chip.none { background: var(--c-none); }
.chip.headache { background: var(--c-headache); }
.chip.migraine { background: var(--c-migraine); }
.chip.pending { background: var(--c-pending); }
.chip.zero { opacity: .45; }

/* Historial */
.hist-item { display: flex; gap: .85rem; align-items: center; padding: .75rem 1rem; border-radius: 1rem; animation: pop .25s ease-out both; }
.hist-item .meta { min-width: 0; flex: 1; }

/* Selector de resultado */
.outcome-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (max-width: 420px) { .outcome-picker { grid-template-columns: repeat(2, 1fr); } }
.outcome-picker input { position: absolute; opacity: 0; pointer-events: none; }
.outcome-picker label {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center;
  padding: .6rem .3rem; border: 3px solid transparent; border-radius: 1rem; background: #f1f7fa;
  font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.outcome-picker label:hover { transform: translateY(-2px); background: #e4f2f7; }
.outcome-picker input:focus-visible + label { outline: 3px solid var(--blue); }
.outcome-picker input:checked + label.o-none { border-color: var(--c-none); background: rgba(38, 182, 164, .14); }
.outcome-picker input:checked + label.o-headache { border-color: var(--c-headache); background: rgba(240, 166, 58, .16); }
.outcome-picker input:checked + label.o-migraine { border-color: var(--c-migraine); background: rgba(229, 86, 109, .14); }
.outcome-picker input:checked + label.o-pending { border-color: var(--c-pending); background: rgba(154, 169, 184, .22); }

.suggest { position: absolute; z-index: 5; left: 0; right: 0; max-height: 220px; overflow: auto; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); }

/* Estadisticas */
.kpi { text-align: center; padding: .9rem .5rem; border-radius: 1.1rem; }
.kpi .num { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.kpi .lbl { font-size: .8rem; color: #587; }
.chart-wrap { position: relative; height: 300px; }
.rank-row { padding: .5rem 0; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.rank-row:last-child { border: 0; }
.rank-bar { height: 8px; border-radius: 4px; background: #e6eef2; overflow: hidden; display: flex; }
.rank-bar > span { display: block; height: 100%; }

@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }