/* Legacy stylesheet, replaced screen by screen by static/src/app.css
   (ADR-009, R3). The whole file sits in the `legacy` cascade layer, which
   is declared before app.css's layers, so any rule in app.css beats any
   rule here, including the element selectors below (body, button, input,
   h1). The body of the layer is deliberately not re-indented.

   The design tokens this file reads (--background, --card, --muted,
   --severity-*...) are defined in static/src/app.css for both themes; this
   file no longer defines any of its own. */
@layer legacy {

* { box-sizing: border-box; }

body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
    background: var(--background);
    color: var(--foreground);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.125rem;
    line-height: 1.5;
}

h1 {
    margin: 0 0 1.5rem;
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

h2 {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--card);
    color: var(--foreground);
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-danger {
    color: var(--danger);
}

button:hover, .btn:hover {
    opacity: 0.9;
}

input, textarea, select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--card);
    color: var(--foreground);
    font: inherit;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

textarea {
    min-height: 80px;
    resize: vertical;
}

/* Same height as .btn so a select sitting next to a button lines up and
   keeps the large touch target the audience needs. */
select {
    min-height: 2.75rem;
}

.card {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--card-gradient-from) 0%, var(--card-gradient-via) 55%, var(--card) 100%);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

/* Classification severity pills - shared shape, reused standalone (report
   distribution rows) and combined with .bp-classification/.report-classification
   (which only add positioning for their specific layout). */
.normal, .elevated, .stage1, .stage2, .crisis {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.normal   { background: var(--severity-normal-bg);   color: var(--severity-normal-text); }
.elevated { background: var(--severity-elevated-bg); color: var(--severity-elevated-text); }
.stage1   { background: var(--severity-stage1-bg);   color: var(--severity-stage1-text); }
.stage2   { background: var(--severity-stage2-bg);   color: var(--severity-stage2-text); }
.crisis   { background: var(--severity-crisis-bg);   color: var(--severity-crisis-text); }

/* Notice for readings/averages above the severe-hypertension cutoff (180/120) */
.bp-alert {
    margin: 0.5rem 0;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--severity-crisis-text);
    border-radius: 0.4rem;
    background: var(--severity-crisis-row-bg);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Existing edit form */

.measurement-form {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--card);
}

.attempt-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.paste-box {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.paste-box textarea {
    min-height: 70px;
}

.measurement-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.field-spaced {
    display: block;
    margin-top: 1rem;
}

.paste-error {
    margin-top: 0.5rem;
    color: var(--danger);
    font-size: 0.9rem;
}

.empty-state {
    display: none;
}

@media (max-width: 700px) {
    .attempt-row {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {
    body {
        padding-inline: 0.75rem;
    }

}

@media print {
    .no-print {
        display: none !important;
    }

    body {
        max-width: none;
        padding: 0;
        background: white;
    }

    .card {
        break-inside: avoid;
    }
}

/* Report */

.report {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
}

.report-header h1 {
    margin-bottom: 0.5rem;
}

.report-period {
    margin: 0;
}

.report-actions {
    margin: 0;
    flex-shrink: 0;
}

.report-day {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.report-day-header {
    margin-bottom: 1rem;
}

.report-day-header h2 {
    margin-bottom: 0.35rem;
}

.report-day-note {
    margin: 0;
    line-height: 1.45;
}

.report-measurement {
    padding: 0.9rem 0;
    border-top: 1px solid var(--border-color);
}

.report-measurement:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.report-measurement-header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-height: 1.75rem;
}

.report-measurement-time {
    font-variant-numeric: tabular-nums;
}

.report-measurement-comment {
    margin: 0.3rem 0 0.65rem;
    line-height: 1.4;
}

.report-attempts {
    width: 100%;
    margin-top: 0.6rem;
}

.report-attempt-row {
    display: grid;
    grid-template-columns: 5.5rem 8rem 8rem minmax(11rem, 1fr) minmax(12rem, 1.2fr);
    align-items: center;
    min-height: 2.35rem;
    border-bottom: 1px solid var(--border-color);
}

.report-attempt-row:last-child {
    border-bottom: 0;
}

.report-attempt-row > span {
    min-width: 0;
    padding: 0.35rem 0.65rem;
}

/* A grid item stretches to fill its column by default; the badge must hug
   its label instead. */
.report-attempt-row > .report-classification {
    justify-self: start;
    padding-block: 0.2rem;
}

.report-average-classification {
    font-size: 0.8125rem;
}

.report-section-note {
    margin: -0.35rem 0 0.75rem;
    font-size: 0.875rem;
}

.report-attempt-header {
    min-height: 2rem;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
    border-radius: 0.4rem 0.4rem 0 0;
}

.report-attempt-header > span {
    white-space: nowrap;
}

.report-attempt-value,
.report-attempt-index {
    font-variant-numeric: tabular-nums;
}

.report-attempt-index {
    color: var(--muted);
}

.report-day-average {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
    line-height: 1.4;
}

.report-day-average span {
    font-variant-numeric: tabular-nums;
}

.report-section {
    margin: 1.75rem 0 0;
}

.report-section h2 {
    margin-bottom: 0.75rem;
}

.report-summary,
.report-distribution {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--card);
}

.report-summary-row {
    display: grid;
    grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(7rem, 1fr));
    align-items: center;
    min-height: 2.5rem;
    border-bottom: 1px solid var(--border-color);
}

.report-summary-row:last-child,
.report-distribution-row:last-child {
    border-bottom: 0;
}

.report-summary-row > span,
.report-distribution-row > span {
    padding: 0.5rem 0.75rem;
    min-width: 0;
}

.report-summary-header,
.report-distribution-header {
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--surface-muted);
}

.report-summary-row:not(.report-summary-header) > span:not(:first-child),
.report-distribution-row > span:not(:first-child) {
    font-variant-numeric: tabular-nums;
}

.report-distribution-row {
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) minmax(7rem, 1fr) minmax(7rem, 1fr);
    align-items: center;
    min-height: 2.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Same as the attempts table: the classification badge hugs its label
   instead of stretching across the whole column. */
.report-distribution-row:not(.report-distribution-header) > span:first-child {
    justify-self: start;
    margin-inline-start: 0.5rem;
    padding-block: 0.2rem;
}

.report-generated {
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .report-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .report-actions {
        margin-top: 0;
    }

    .report-attempt-row {
        grid-template-columns: 4.5rem 7rem 7rem minmax(9rem, 1fr) minmax(10rem, 1.1fr);
    }

    .report-attempt-row > span {
        padding-inline: 0.5rem;
    }
}

@media (max-width: 700px) {
    .report-day {
        padding: 1rem;
    }

    .report-attempt-header {
        display: none;
    }

    .report-attempt-row {
        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 0.15rem 0.5rem;
        min-height: auto;
        margin-bottom: 0.5rem;
        padding: 0.55rem 0.65rem;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
    }

    .report-attempt-row:last-child {
        margin-bottom: 0;
    }

    .report-attempt-row > span {
        padding: 0.2rem 0.4rem;
    }

    .report-attempt-index {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        font-weight: 600;
    }

    .report-attempt-value:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .report-attempt-value:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
    }

    .report-attempt-value:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    .report-attempt-value:nth-child(2)::before {
        content: "Sistólica";
    }

    .report-attempt-value:nth-child(3)::before {
        content: "Diastólica";
    }

    .report-attempt-value:nth-child(4)::before {
        content: "FC";
    }

    .report-classification {
        grid-column: 3;
        grid-row: 2;
        align-self: center;
        margin-top: 0;
        white-space: normal;
    }

    .report-attempt-value::before {
        display: block;
        margin-bottom: 0.1rem;
        color: var(--muted);
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .report-summary,
    .report-distribution {
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .report-summary-header,
    .report-distribution-header {
        display: none;
    }

    .report-summary-row,
    .report-distribution-row {
        grid-template-columns: 1fr 1fr;
        min-height: auto;
        margin-bottom: 0.5rem;
        padding: 0.5rem;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        background: var(--card);
    }

    .report-summary-row > span,
    .report-distribution-row > span {
        padding: 0.25rem 0.4rem;
    }

    .report-summary-row > span:first-child,
    .report-distribution-row > span:first-child {
        grid-column: 1 / -1;
        padding-bottom: 0.4rem;
        font-weight: 600;
    }

    .report-summary-row > span:not(:first-child)::before,
    .report-distribution-row > span:not(:first-child)::before {
        display: block;
        margin-bottom: 0.1rem;
        color: var(--muted);
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .report-summary-row > span:nth-child(2)::before {
        content: "Promedio";
    }

    .report-summary-row > span:nth-child(3)::before {
        content: "Mínimo";
    }

    .report-summary-row > span:nth-child(4)::before {
        content: "Máximo";
    }

    .report-distribution-row > span:nth-child(2)::before {
        content: "Mediciones";
    }

    .report-distribution-row > span:nth-child(3)::before {
        content: "Porcentaje";
    }
}

@media (max-width: 450px) {
    body {
        padding-inline: 0.65rem;
    }

    .report-header {
        margin-bottom: 1rem;
    }

    .report-header h1 {
        font-size: 1.35rem;
    }

    .report-period {
        line-height: 1.45;
    }

    .report-actions {
        width: 100%;
    }

    .report-actions .btn,
    .report-actions .btn-primary {
        flex: 1;
    }

    .report-day {
        padding: 0.85rem;
        border-radius: 0.65rem;
    }

    .report-day-header h2 {
        font-size: 1rem;
    }

    .report-measurement-header {
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .report-attempt-row {
        grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr);
        padding-inline: 0.5rem;
    }

    .report-attempt-value,
    .report-classification {
        min-width: 0;
    }

    .report-classification {
        font-size: 0.875rem;
        line-height: 1.25;
    }

    .report-section {
        margin-top: 1.35rem;
    }

    .report-summary-row,
    .report-distribution-row {
        grid-template-columns: 1fr 1fr;
    }

    .report-generated {
        margin-bottom: 0.5rem;
    }
}

@media print {
    .report {
        max-width: none;
    }

    .report-day {
        break-inside: avoid;
    }

    .report-section {
        break-inside: avoid;
    }

    .report-attempt-row {
        grid-template-columns: 5rem 7rem 7rem 10rem 1fr;
    }
}

/* Button icons and page navigation */

.btn-icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    align-items: center;
    justify-content: center;
}

.btn-icon svg {
    width: 1rem;
    height: 1rem;
}

.btn-with-icon {
    gap: 0.45rem;
}

.page-back {
    margin-bottom: 1rem;
}

.measurement-actions {
    margin-bottom: 0.65rem;
}

@media (max-width: 450px) {
    .page-back {
        margin-bottom: 1rem;
    }

    .measurement-actions {
        margin-bottom: 0.75rem;
    }
}

/* Mobile report hardening */

@media (max-width: 700px) {
    .report-attempts > .report-attempt-header {
        display: none !important;
    }

    .report-attempt-row:not(.report-attempt-header) {
        grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .report-attempt-row:not(.report-attempt-header) .report-attempt-index {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .report-attempt-row:not(.report-attempt-header) .report-attempt-value:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .report-attempt-row:not(.report-attempt-header) .report-attempt-value:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
    }

    .report-attempt-row:not(.report-attempt-header) .report-attempt-value:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    .report-attempt-row:not(.report-attempt-header) .report-classification {
        grid-column: 3;
        grid-row: 2;
        overflow-wrap: anywhere;
    }
}

/* Comfortable vertical rhythm for instructional controls */

.measurement-actions {
    margin-top: 0.85rem;
    margin-bottom: 0.9rem;
}

.paste-help {
    margin-top: 0.25rem;
    line-height: 1.45;
}

.page-back {
    margin-bottom: 1.35rem;
}

@media (max-width: 450px) {
    .measurement-actions {
        margin-top: 0.9rem;
        margin-bottom: 1rem;
    }

    .page-back {
        margin-bottom: 1.4rem;
    }
}

/* Visually hidden but still readable by screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Periods (ADR-007): the selector shared by the dashboard and the report,
   the admin screens under /periods, and the period block at the top of a
   period's report. Kept minimal on purpose: R3 replaces this stylesheet.
   Smokes: smokes/periodos-*.html */

.period-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 1.25rem 0 0.5rem;
}

.period-selector label {
    display: flex;
    flex: 1 1 18rem;
    flex-direction: column;
    gap: 0.35rem;
    /* A select's intrinsic width is its longest option; without this the
       label refuses to shrink below it and overflows a phone screen. */
    min-width: 0;
    font-weight: 600;
}

.period-selector select {
    min-width: 0;
    font-weight: 400;
}

.period-selector-manage {
    margin-left: auto;
}

.period-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
}

.period-card-header h2 {
    margin: 0;
}

.period-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.period-tag-open {
    background: var(--severity-normal-bg);
    color: var(--severity-normal-text);
}

.period-medications {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.period-medications li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.period-medication-time {
    min-width: 3.5rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.report-period {
    padding: 1.25rem 1.5rem;
}

.report-period-range {
    margin: 0;
}

.report-period-comment {
    margin: 0.75rem 0 0;
    line-height: 1.45;
}

.report-period-lists {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 2rem;
    margin-top: 1rem;
}

.report-period-lists h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
}

@media (min-width: 700px) {
    .report-period-lists {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .report-period {
        padding: 1.15rem;
    }

    .period-selector-manage {
        margin-left: 0;
    }
}

}
/* end of @layer legacy */