@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Atkinson+Hyperlegible+Mono:wght@400;500;600&family=Atkinson+Hyperlegible+Next:wght@400;600;700&display=swap");

body { margin: 0; font-family: var(--font-text); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.bs-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.bs-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); max-width: 420px; }

/* Button */
.bs-btn { font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 600; min-height: 44px; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.bs-btn-lg { min-height: 52px; font-size: 17px; padding: var(--space-3) var(--space-8); }
.bs-btn-primary { background: var(--amanecer); color: var(--on-amanecer); }
.bs-btn-primary:hover { filter: brightness(1.05); }
.bs-btn-secondary { background: var(--noche); color: var(--on-noche); }
.bs-btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.bs-btn-quiet:hover { background: var(--surface-sunken); }
.bs-btn:focus-visible, .bs-badge:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bs-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Semaforo */
.bs-sem { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-size: 14px; line-height: 20px; font-weight: 600; }
.bs-sem svg { width: 16px; height: 16px; flex: none; }
.bs-sem-verde { background: var(--verde-soft); color: var(--verde); }
.bs-sem-amarillo { background: var(--amarillo-soft); color: var(--amarillo-ink); }
.bs-sem-rojo { background: var(--rojo-soft); color: var(--rojo); }
.bs-sem-detalle { font-family: var(--font-data); font-weight: 500; opacity: .9; }
.bs-sem-amarillo .bs-sem-fill { fill: var(--amarillo); }

/* Notificacion */
.bs-noti { display: grid; grid-template-columns: 38px 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); max-width: 380px; }
.bs-noti-icon { width: 38px; height: 38px; border-radius: 9px; display: block; }
.bs-noti-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.bs-noti-app { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 12px; }
.bs-noti-title { margin: 2px 0 0; font-weight: 700; font-size: 15px; line-height: 20px; color: var(--ink); }
.bs-noti-body { margin: 2px 0 0; font-size: 15px; line-height: 21px; color: var(--ink); }
.bs-noti-body .bs-num { font-family: var(--font-data); font-weight: 500; }
.bs-noti-actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.bs-noti-actions button { flex: 1 1 auto; font-family: var(--font-text); font-size: 14px; font-weight: 600; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 0; background: var(--surface-sunken); color: var(--ink); cursor: pointer; }
.bs-noti-actions button:first-child { background: var(--noche); color: var(--on-noche); }
.bs-noti-actions button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Sugerencia */
.bs-sug { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); max-width: 420px; }
.bs-sug-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.bs-sug-eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); }
.bs-sug-accion { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 34px; letter-spacing: -.015em; margin: 0; }
.bs-sug-mantener .bs-sug-accion { color: var(--verde); }
.bs-sug-bajar .bs-sug-accion, .bs-sug-acortar .bs-sug-accion { color: var(--amarillo-ink); }
.bs-sug-mover .bs-sug-accion, .bs-sug-saltar .bs-sug-accion { color: var(--cielo); }
.bs-sug-salud { background: var(--rojo-soft); border-color: transparent; }
.bs-sug-salud .bs-sug-accion { color: var(--rojo); }
.bs-sug-sesion { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.bs-sug-data { font-family: var(--font-data); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bs-sug-antes { text-decoration: line-through; text-decoration-thickness: 1px; }
.bs-sug-regla { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.bs-sug-salud .bs-sug-regla { border-top-color: var(--rojo); border-top-style: dotted; color: var(--ink); }

/* Badge */
.bs-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; line-height: 20px; font-weight: 700; letter-spacing: .02em; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); }
.bs-badge-amanecer { background: var(--amanecer-soft); color: var(--amanecer-ink); }
.bs-badge-noche { background: var(--noche); color: var(--on-noche); }
.bs-badge-cielo { background: var(--cielo-soft); color: var(--cielo); }