/*
 * Área do aluno — lembretes (M4, Tarefa A; spec §14). 5ª folha (aluno.css passou de ~60 KB), carregada pelo
 * AlunoPanelProvider com AssetVersion. Mesmos tokens do aluno.css (--ta-*).
 *
 * Componentes (prefixo ta-rem-, ta-push-)
 *   Eu → Lembretes  .ta-rem-state (.is-on/.is-paused/.is-off/.is-teacher-off; -icon, -main, -title, -text) ·
 *                   régua do dia .ta-rem-day > .ta-rem-day-track (.ta-rem-day-quiet hachurado = silêncio 21h–8h;
 *                   .ta-rem-day-win[data-w] = a janela; a marcada no rádio aparece pelo :has(), .is-on sem :has) +
 *                   .ta-rem-day-scale · .ta-rem-windows > .ta-rem-window (rádio 8h / 12h30 / 19h) · .ta-rem-list
 *                   (switches) · .ta-rem-device ([data-ta-push-toggle], botões do aluno-pwa.js) · .ta-rem-stop
 *                   (.ta-rem-stop-row) · .ta-rem-note · .ta-rem-foot
 *   Hoje            .ta-push-card[data-ta-push-card] (nasce hidden; o aluno-pwa.js mostra quando o aparelho dá conta):
 *                   .ta-push-head, -title, -text, -actions, -done
 *   Sino            .ta-reminder-footer (rodapé do lembrete na notificação do painel)
 */

/* ===== Estado no topo ===== */
.ta-rem-state {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .35rem .85rem;
    padding: .9rem 1rem; border-radius: var(--ta-radius); background: var(--ta-navy); color: #dbe4ee;
}
.ta-rem-state > .ta-btn { grid-column: 1 / -1; justify-self: start; }
.ta-rem-state-icon {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff;
}
.ta-rem-state-main { display: grid; gap: .15rem; min-width: 0; }
.ta-rem-state-title { margin: 0; font: 600 1.0625rem/1.3 var(--ta-font-head); color: #fff; }
.ta-rem-state-text { margin: 0; font-size: .9375rem; line-height: 1.45; }
.ta-rem-state.is-on .ta-rem-state-icon { position: relative; }
.ta-rem-state.is-on .ta-rem-state-icon::after {
    content: ""; position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--ta-red); box-shadow: 0 0 0 2px var(--ta-navy);
}
.ta-rem-state.is-paused, .ta-rem-state.is-off, .ta-rem-state.is-teacher-off {
    background: var(--ta-card); color: var(--ta-ink); border: 1px solid var(--ta-line);
}
.ta-rem-state.is-paused .ta-rem-state-icon { background: var(--ta-warn-bg); color: var(--ta-warn); }
.ta-rem-state.is-off .ta-rem-state-icon, .ta-rem-state.is-teacher-off .ta-rem-state-icon { background: var(--ta-hover); color: var(--ta-muted); }
.ta-rem-state.is-paused .ta-rem-state-title,
.ta-rem-state.is-off .ta-rem-state-title,
.ta-rem-state.is-teacher-off .ta-rem-state-title { color: var(--ta-navy); }
.ta-rem-state.is-paused .ta-rem-state-text,
.ta-rem-state.is-off .ta-rem-state-text,
.ta-rem-state.is-teacher-off .ta-rem-state-text { color: var(--ta-muted); }
@media (min-width: 30rem) {
    .ta-rem-state { grid-template-columns: auto minmax(0, 1fr) auto; }
    .ta-rem-state > .ta-btn { grid-column: auto; justify-self: end; }
}

.ta-rem-form { display: grid; gap: 1.75rem; }
.ta-rem-form > .ta-section, .ta-rem-form > .ta-section + .ta-section { margin-top: 0; }
.ta-rem-form > .ta-btn { justify-self: start; }
.ta-rem-note { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ta-muted); }
.ta-rem-foot { margin-top: -.25rem; }

/* ===== Régua do dia: silêncio hachurado e a janela escolhida ===== */
.ta-rem-when { display: grid; gap: .75rem; }
.ta-rem-when > .ta-section-title { margin-bottom: 0; }
.ta-rem-day { padding: .9rem .9rem .35rem; background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius); }
.ta-rem-day-track {
    position: relative; height: 28px; border-radius: 8px; overflow: hidden;
    background: var(--ta-blue-soft);
}
.ta-rem-day-quiet {
    position: absolute; top: 0; bottom: 0;
    background: repeating-linear-gradient(135deg, #d9d5d8 0 2px, #eeebed 2px 7px);
}
.ta-rem-day-win {
    position: absolute; top: 3px; bottom: 3px; border-radius: 6px; background: var(--ta-blue);
    opacity: 0; transition: opacity .15s;
}
.ta-rem-day-win.is-on { opacity: 1; }
.ta-rem-when:has(.ta-rem-window input:checked) .ta-rem-day-win { opacity: 0; }
.ta-rem-when:has(input[value="08:00"]:checked) .ta-rem-day-win[data-w="08:00"],
.ta-rem-when:has(input[value="12:30"]:checked) .ta-rem-day-win[data-w="12:30"],
.ta-rem-when:has(input[value="19:00"]:checked) .ta-rem-day-win[data-w="19:00"] { opacity: 1; }
.ta-rem-day-scale { position: relative; height: 1.5rem; font-size: .8125rem; font-weight: 600; color: var(--ta-muted); }
.ta-rem-day-scale span { position: absolute; top: .3rem; transform: translateX(-50%); }

.ta-rem-windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; border: 0; }
.ta-rem-window { position: relative; display: block; cursor: pointer; }
.ta-rem-window input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ta-rem-window span {
    display: grid; place-items: center; gap: .15rem; min-height: 64px; padding: .5rem .25rem;
    border: 2px solid var(--ta-line); border-radius: var(--ta-radius); background: #fff;
    color: var(--ta-muted); font-size: .875rem; text-align: center; transition: border-color .12s, background-color .12s;
}
.ta-rem-window strong { font: 700 1.375rem/1 var(--ta-font-head); color: var(--ta-navy); }
.ta-rem-window input:checked + span { border-color: var(--ta-blue); background: var(--ta-blue-soft); color: var(--ta-blue-ink); }
.ta-rem-window input:checked + span strong { color: var(--ta-blue-ink); }
.ta-rem-window input:focus-visible + span { box-shadow: var(--ta-ring-focus); }

/* ===== Listas de switches, aparelho e pausa ===== */
.ta-rem-list { display: grid; gap: 1rem; }
.ta-rem-device { display: grid; gap: .5rem; justify-items: start; padding: .75rem 0 0 calc(48px + .85rem); border-top: 1px solid var(--ta-line); }
.ta-rem-device [hidden] { display: none !important; }
.ta-rem-stop { display: grid; gap: 0; padding-block: .25rem; }
.ta-rem-stop-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 0; }
.ta-rem-stop-row + .ta-rem-stop-row { border-top: 1px solid var(--ta-line); }
.ta-rem-stop-row p { margin: 0; display: grid; gap: .1rem; line-height: 1.4; }
.ta-rem-stop-row p span { color: var(--ta-muted); font-size: .9375rem; }
.ta-rem-stop-row .ta-btn { flex: none; }

/* ===== Card "Ativar lembretes no celular" (Hoje) ===== */
.ta-push-card {
    display: grid; gap: .65rem; padding: 1rem; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-left: 4px solid var(--ta-blue); border-radius: var(--ta-radius);
}
.ta-push-card[hidden], .ta-push-card [hidden] { display: none !important; }
.ta-push-head { display: flex; align-items: center; gap: .7rem; }
.ta-push-head .ta-row-icon { color: var(--ta-blue-ink); }
.ta-push-title { margin: 0; font: 600 1.125rem/1.25 var(--ta-font-head); color: var(--ta-navy); }
.ta-push-text { margin: 0; line-height: 1.5; }
.ta-push-actions { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.ta-push-actions .ta-btn:first-child { margin-right: auto; }
.ta-push-done { margin: 0; color: var(--ta-ok); font-weight: 600; }

/* Eu: o caminho para Lembretes, logo abaixo das preferências */
.ta-rem-me-link { margin-top: .75rem; }

/* ===== Sino: rodapé do lembrete ===== */
.ta-reminder-footer { display: block; margin-top: .35rem; font-size: .8125rem; color: var(--ta-muted); }

@media (prefers-reduced-motion: reduce) {
    .ta-rem-day-win, .ta-rem-window span { transition: none; }
}