/**
 * Doctoriofy — shared design system for the diagnostic tools.
 *
 * Lifted verbatim from the neurológico pilot (vet/src/index.wizard.html), which is
 * where this design was designed and proven. Nothing here is new: if a rule looks
 * odd, it is load-bearing somewhere and the pilot is the reference.
 *
 * What is deliberately NOT here, because only the pilot has it: the photo/document
 * upload UI, the tab strip, the results modal, the desktop context rail, the exit
 * overlay, and the old .email-box (superseded by shared/email-capture.js + the
 * emphasis in dfy-capture.css).
 *
 * Load BEFORE the tool's own <style>, so a tool can still override.
 * Served with a 1-YEAR cache — every consumer must bump its ?v= when this changes.
 */


/* ===== pilot 292-317 ===== */
:root {
    /* Palette from the 2026-08 redesign proposal: deeper navy, same mint family. */
    --ink: #0F1F3D;
    --primary: #2350B8;
    --primary-dark: #16305E;
    --secondary: #12A87A;
    --mint: #7FE3C0;
    --accent: #f59e0b;
    --emergency: #dc2626;
    --success: #0B7A58;
    --warning: #d97706;
    --info: #2350B8;
    --white: #ffffff;
    --light: #EDF2FD;
    --gray-100: #F1F5F9;
    --gray-200: #E3E9F0;
    --gray-300: #A9B5C4;
    --gray-600: #7A8AA0;
    --gray-800: #0F1F3D;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Poppins', 'DM Sans', sans-serif;
    /* Rounder shapes + more air are what make the deck read as "easier". */
    --r-card: 18px;
    --r-input: 14px;
    --r-pill: 99px;
}

/* ===== pilot 319-450 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, var(--light) 0%, var(--gray-100) 100%);
    color: var(--gray-800);
    line-height: 1.6;
}

/* Back Nav */
.back-nav {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(44,90,160,0.12);
    transition: box-shadow 0.2s;
}
.back-nav.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
.back-nav-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.back-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}
.back-link:hover { color: var(--primary-dark); }
.back-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
    text-decoration: none;
    letter-spacing: -0.3px;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
.header {
    text-align: center;
    margin-bottom: 22px;
    padding: clamp(2.2rem, 5vw, 3.2rem) 24px clamp(1.8rem, 3.5vw, 2.4rem);
    background: linear-gradient(135deg, #16305E 0%, #0F1F3D 55%, #16305E 100%);
    color: var(--white);
    border-radius: var(--r-card);
    box-shadow: 0 18px 44px rgba(15,31,61,.22);
    position: relative;
    overflow: hidden;
}
.header::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 15px;
}

.header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.header-sub {
    font-size: 1em;
    opacity: 0.95;
    margin-bottom: 15px;
}

.header-specialty {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9em;
    margin: 10px auto;
    max-width: 450px;
}

.header-benefits {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.benefit {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 6px 14px;
    border-radius: 15px;
    font-size: 0.85em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ===== pilot 471-633 ===== */
/* Progress */
.progress-box {
    background: var(--white);
    padding: 16px 22px;
    border-radius: var(--r-card);
    margin-bottom: 20px;
    border: 1px solid var(--gray-200);
    box-shadow: 0 6px 20px rgba(15,31,61,.06);
    position: sticky;
    top: 50px;
    z-index: 100;
}

.progress-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.progress-step {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .98em;
    color: var(--ink);
}

.progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width .35s ease;
    border-radius: var(--r-pill);
}

/* Form Sections */
.section { background: transparent; padding: 0; margin: 0 0 8px; border: 0; box-shadow: none; }

.section-title {
    font-family: var(--font-display);
    font-size: 1.7em; font-weight: 600; letter-spacing: -.015em;
    color: #0F1F3D; margin-bottom: 4px; padding: 0; border: 0;
    display: block; text-wrap: pretty;
}

.section-num { display: none; }

/* Questions */
.question {
    margin-bottom: 38px;
}

.question:last-child {
    margin-bottom: 0;
}

.label {
    font-family: var(--font-display); font-weight: 600; font-size: 1.22em;
    line-height: 1.3; letter-spacing: -.01em; color: #0F1F3D;
    margin-bottom: 6px; display: block; text-wrap: pretty;
}

.required {
    color: var(--emergency);
    margin-left: 3px;
}

.optional-tag {
    display: inline-block; margin-left: 9px; padding: 2px 8px; border-radius: 6px;
    background: #EDF2FD; color: #2350B8; vertical-align: middle;
    font: 600 11px/1.5 'DM Sans', sans-serif; letter-spacing: .03em; text-transform: uppercase;
}

.hint { font: 400 13.5px/1.5 'DM Sans', sans-serif; color: #7A8AA0; margin-bottom: 12px; padding: 0; background: none; border: 0; }

/* Options Grid */
.options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.opt, .opt-multi {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
    border: 1.5px solid #E3E9F0;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    font: 600 15px/1.25 'DM Sans', sans-serif;
    color: #47566B;
    min-height: 56px;
}

.opt:focus-visible, .opt-multi:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.opt:hover, .opt-multi:hover { border-color: #A9B5C4; }

.opt.selected {
    border-color: #2350B8;
    background: #EDF2FD;
    color: #16305E;
    box-shadow: 0 0 0 3px rgba(35,80,184,.1);
}

.opt-multi.selected {
    border-color: #12A87A;
    background: #E9F8F3;
    color: #0B7A58;
    box-shadow: 0 0 0 3px rgba(18,168,122,.1);
}

/* Critical Alert Box */
.critical-box { background: #FFF5F5; border: 1.5px solid #F5C2C2; padding: 20px; border-radius: 16px; margin-bottom: 34px; }

.critical-box h3 {
    color: var(--emergency);
    margin-bottom: 12px;
    font-size: 1.1em;
}

/* Textarea */
.textarea-wrapper {
    margin-top: 15px;
}

.comments-field {
    width: 100%;
    min-height: 108px;
    padding: 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--r-input);
    font-family: inherit;
    font-size: 1em;
    color: var(--ink);
    resize: vertical;
    background: var(--white);
}

.comments-field:focus {
    outline: none;
    border-color: var(--primary);
}

.char-count {
    text-align: right;
    font-size: 0.8em;
    color: var(--gray-600);
    margin-top: 5px;
}

/* ===== pilot 809-892 ===== */
/* Submit */
.submit-btn {
    background: var(--secondary);
    color: #fff;
    font-family: var(--font-display);
    padding: 20px 34px;
    font-size: 1.08em;
    font-weight: 600;
    border: none;
    border-radius: var(--r-input);
    cursor: pointer;
    display: block;
    margin: 0;
    min-width: 260px;
    box-shadow: 0 10px 26px rgba(18,168,122,.3);
    transition: filter .15s, transform .15s;
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(245, 158, 11, 0.5);
}

.submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-pet {
    font-size: 4em;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.loading-text {
    color: white;
    font-size: 1.2em;
    margin-top: 20px;
}

.loading-steps {
    color: rgba(255,255,255,0.7);
    margin-top: 15px;
}

.load-step {
    margin: 5px 0;
}

.load-step.done { color: var(--success); }
.load-step.active { color: var(--secondary); }


/* ===== pilot 972-1042 ===== */
.urgency {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    margin: 10px 0;
}

.diagnosis-box {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 2px solid var(--success);
    padding: 25px;
    border-radius: 15px;
    margin: 20px 0;
}

.urgency-baja { background: #d1fae5; color: #065f46; }
.urgency-media { background: #fef3c7; color: #92400e; }
.urgency-alta { background: #fee2e2; color: #991b1b; }
.urgency-critica { background: #991b1b; color: white; }

.confidence-bar {
    background: var(--gray-200);
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    margin: 12px 0;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--warning), var(--success));
    transition: width 1s;
}

.diff-list { margin: 20px 0; }

.diff-item {
    display: flex;
    align-items: center;
    padding: 10px;
    background: var(--gray-100);
    border-radius: 8px;
    margin-bottom: 8px;
}

.diff-item .name { flex: 1; font-weight: 500; }

.diff-item .bar {
    width: 120px;
    height: 6px;
    background: var(--gray-300);
    border-radius: 3px;
    margin: 0 12px;
    overflow: hidden;
}

.diff-item .bar-fill {
    height: 100%;
    background: var(--info);
}

.diff-item .pct {
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}


/* ===== pilot 1114-1167 ===== */
/* Disclaimer */
.disclaimer {
    background: #fffaf0;
    border-left: 4px solid var(--warning);
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Action Buttons */
.actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 25px;
    flex-wrap: wrap;
}

.btn {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95em;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--primary); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-whatsapp { background: #25D366; color: white; }
.btn-secondary { background: var(--gray-600); color: white; }

/* Toast */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 2000;
    transform: translateX(120%);
    transition: transform 0.3s;
}

.toast.show { transform: translateX(0); }
.toast-success { background: var(--success); }
.toast-error { background: var(--emergency); }
.toast-info { background: var(--info); }

/* ===== pilot 1211-1302 ===== */
[hidden] { display: none !important; }

/* ============================================================
   RESULTS — proposal 1e. Dark hero carrying the answer, then white
   cards on light. Values taken from the mockup's own markup.
   ============================================================ */
.rx-hero {
    background: linear-gradient(135deg,#16305E 0%,#0F1F3D 55%,#16305E 100%);
    padding: 30px 34px 32px;
}
.rx-ready {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
    font: 500 13px/1 'DM Sans',sans-serif; color: #9DB0CC;
}
.rx-chip {
    display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
    border-radius: 8px; background: rgba(127,227,192,.16); color: #7FE3C0;
    font: 600 11.5px/1 'DM Sans',sans-serif; letter-spacing: .07em;
    margin-bottom: 14px;
}
.rx-title {
    margin: 0 0 12px; font: 600 34px/1.15 'Poppins',sans-serif; color: #fff;
    letter-spacing: -.02em; text-wrap: pretty;
}
.rx-lead {
    margin: 0 0 24px; font: 400 16.5px/1.6 'DM Sans',sans-serif;
    color: #C6D4E8; max-width: 660px; text-wrap: pretty;
}
.rx-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rx-urgency {
    display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px;
    border-radius: 12px; font: 600 14.5px/1.35 'DM Sans',sans-serif;
    background: #E9A23B; color: #3D2703;
}
.rx-urgency.is-low  { background: #7FE3C0; color: #063D2C; }
.rx-urgency.is-high { background: #F2705B; color: #3D0D06; }
.rx-cta {
    display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px;
    border-radius: 12px; background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2); color: #fff;
    font: 600 14.5px/1 'DM Sans',sans-serif; text-decoration: none;
}
.rx-cta:hover { background: rgba(255,255,255,.18); }

.rx-body {
    background: #F1F5F9; padding: 24px 26px 30px;
    display: flex; flex-direction: column; gap: 16px;
}
.rx-card { background: #fff; border: 1px solid #E3E9F0; border-radius: 18px; padding: 22px 24px; }
.rx-card h3 { margin: 0; font: 600 18px/1.3 'Poppins',sans-serif; color: #0F1F3D; }
.rx-card h4 { margin: 0; font: 600 16px/1.3 'Poppins',sans-serif; color: #0F1F3D; }
.rx-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
@media (max-width: 560px) {
    .rx-hero { padding: 24px 20px 26px; }
    .rx-title { font-size: 27px; }
    .rx-lead { font-size: 15.5px; }
    .rx-body { padding: 18px 16px 24px; }
    .rx-card { padding: 18px 18px; }
    .rx-card-head { flex-direction: column; gap: 2px; }
}
.rx-card-note { margin: 0 0 18px; font: 400 13.5px/1.55 'DM Sans',sans-serif; color: #7A8AA0; }
.rx-muted { font: 400 13px/1 'DM Sans',sans-serif; color: #7A8AA0; }
.rx-p { margin: 0; font: 400 14.5px/1.65 'DM Sans',sans-serif; color: #47566B; }
.rx-grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .rx-grid2 { grid-template-columns: 1fr 1fr; } }
.rx-list { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.rx-list li { display: flex; gap: 10px; font: 400 14px/1.55 'DM Sans',sans-serif; color: #47566B; }
.rx-list li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 99px; background: #12A87A; }
.rx-list.is-warn li::before { background: #F2705B; }
.rx-head-ico { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }

/* differential rows */
.rx-dx { display: flex; flex-direction: column; gap: 12px; }
.rx-dx-item { border: 1px solid #E3E9F0; border-radius: 14px; padding: 15px 16px; }
.rx-dx-top { display: flex; align-items: center; gap: 14px; margin-bottom: 9px; }
.rx-dx-pct { font: 700 17px/1 'DM Sans',sans-serif; color: #2350B8; min-width: 44px; }
.rx-dx-name { font: 600 15px/1.3 'DM Sans',sans-serif; color: #0F1F3D; flex: 1; }
.rx-dx-bar { height: 6px; border-radius: 99px; background: #EEF2F7; overflow: hidden; margin-bottom: 10px; }
.rx-dx-bar > div { height: 100%; border-radius: 99px; background: #2350B8; }
.rx-dx-why { margin: 0; font: 400 13.5px/1.6 'DM Sans',sans-serif; color: #47566B; }

/* tools + boost panels (1e) and the step-4 boost cards (1a) */
.rx-tools { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
.rx-tool {
    border: 1.5px solid #E3E9F0; border-radius: 15px; padding: 18px; background: #fff;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.rx-tool:hover { border-color: #2350B8; background: #F8FAFF; }
.rx-tool b { font: 600 14.5px/1.3 'Poppins',sans-serif; color: #0F1F3D; }
.rx-tool span { font: 400 12.5px/1.5 'DM Sans',sans-serif; color: #7A8AA0; }

/* ===== pilot 1331-1349 ===== */
.loading-overlay { background: #0F1F3D !important; }
/* the interstitial sits on a dark panel, so its empty state has to be dark too */
.loading-overlay .dfy-ad {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.16);
}
.loading-overlay .dfy-ad::before { color: #9DB0CC; }
.loading-overlay .dfy-ad-empty { color: #7A8AA0; }
.dv-load {
    width: min(420px, 92vw); background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 20px;
}
.dv-load-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dv-dot { width: 9px; height: 9px; border-radius: 99px; background: #7FE3C0; animation: dvPulse 1.4s ease-in-out infinite; }
@keyframes dvPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.dv-load-title { font: 600 14px/1 'DM Sans',sans-serif; color: #fff; }
.dv-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.dv-step { display: flex; align-items: center; gap: 9px; font: 400 13px/1.4 'DM Sans',sans-serif; color: #9DB0CC; }
.dv-step.is-done { color: #7FE3C0; }

/* ===== pilot 1351-1456 ===== */
/* ============================================================
   APP SHELL — proposal 1a, copied from the mockup's own values.
   This replaces the marketing hero + numbered section cards with the
   contained app frame the proposal actually shows.
   ============================================================ */
body { background: #F1F5F9; }

.app-shell {
    max-width: 1180px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #E3E9F0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(15,31,61,.07);
}

/* --- top bar: logo, tool chip, saved state, exit --- */
.app-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 13px 28px;
    background: #fff; border-bottom: 1px solid #E3E9F0;
}
.app-bar-left { display: flex; align-items: center; gap: 10px; }
.app-logo {
    width: 34px; height: 34px; flex: none;
    border-radius: 10px; background: #0F1F3D;
    display: flex; align-items: center; justify-content: center;
}
.app-name { font: 600 16px/1 'Poppins', sans-serif; color: #0F1F3D; }
.app-chip {
    display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
    border-radius: 7px; background: #EDF2FD; color: #2350B8;
    font: 600 12px/1 'DM Sans', sans-serif;
}
.app-bar-right { display: flex; align-items: center; gap: 16px; }
.app-saved {
    display: inline-flex; align-items: center; gap: 7px;
    font: 500 13px/1 'DM Sans', sans-serif; color: #12A87A;
}
.app-exit {
    font: 500 13px/1 'DM Sans', sans-serif; color: #7A8AA0;
    text-decoration: none; cursor: pointer;
}
.app-exit:hover { color: #0F1F3D; }

/* --- step tracker + progress --- */
.app-steps { padding: 16px 28px 14px; background: #fff; border-bottom: 1px solid #E3E9F0; }
.app-steps-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 11px;
}
.step-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.step-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px 7px 8px; border-radius: 10px;
    font: 500 13.5px/1 'DM Sans', sans-serif; color: #7A8AA0;
    background: transparent; white-space: nowrap;
}
.step-chip .dot {
    width: 21px; height: 21px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #E3E9F0; color: #7A8AA0;
    font: 600 11.5px/1 'DM Sans', sans-serif;
}
.step-chip.is-current { background: #EDF2FD; color: #2350B8; font-weight: 600; }
.step-chip.is-current .dot { background: #2350B8; color: #fff; }
.step-chip.is-done { color: #12A87A; }
.step-chip.is-done .dot { background: #12A87A; color: #fff; }
.app-eta { font: 500 13px/1 'DM Sans', sans-serif; color: #7A8AA0; white-space: nowrap; }
.step-compact { display: none; font: 600 13px/1 'DM Sans', sans-serif; color: #2350B8; }
@media (max-width: 767px) {
    .app-bar, .app-steps, .app-foot { padding-left: 20px; padding-right: 20px; }
    .app-steps { padding-top: 10px; padding-bottom: 12px; }
    .step-chips { display: none; }
    .step-compact { display: inline; }
    .app-eta { font-size: 12px; }
    .app-eta strong { font-weight: 500; }
    .app-bar-progress { height: 6px; }
    .app-shell { border-radius: 0; border-left: 0; border-right: 0; }
    .section-title { font-size: 1.45em; }
}
.app-eta strong { color: #0F1F3D; font-weight: 600; }
.app-bar-progress { height: 7px; border-radius: 99px; background: #E3E9F0; overflow: hidden; }
.app-bar-progress > div {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #2350B8, #12A87A);
    transition: width .35s ease;
}

/* --- body: reading column + rail --- */
.app-body { display: block; padding: 26px 28px 8px; }
@media (min-width: 1024px) {
    .app-body { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 26px; align-items: start; }
}

/* --- bottom bar --- */
.app-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 28px; background: #fff; border-top: 1px solid #E3E9F0;
}
.app-privacy {
    display: flex; align-items: center; gap: 8px;
    font: 400 13px/1.3 'DM Sans', sans-serif; color: #7A8AA0;
}
.app-actions { display: flex; align-items: center; gap: 12px; }

/* ===== pilot 1616-1663 ===== */
/* ---- Ad slots (proposal 1f) -------------------------------------------
   Four placements, all AdSense-ready and empty until a network is approved.
   Every slot reserves its height up front so nothing shifts when a creative
   finally loads — that is rule 4 and the reason CLS stays at zero. */
.dfy-ad {
    position: relative;
    background: var(--gray-100);
    border: 1px dashed var(--gray-300);
    border-radius: var(--r-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dfy-ad::before {
    content: 'PUBLICIDAD';
    position: absolute;
    top: 6px;
    left: 10px;
    font-size: .58em;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--gray-600);
    opacity: .75;
}
.dfy-ad-empty {
    font-size: .78em;
    color: var(--gray-600);
    opacity: .5;
}
/* Reserved heights — these must exist before any creative arrives. */
.dfy-ad-interstitial { width: 100%; max-width: 336px; height: 280px; margin: 22px auto 0; }
.dfy-ad-native       { width: 100%; min-height: 250px; margin: 20px 0; }
.dfy-ad-rail         { width: 300px; height: 250px; margin-top: 4px; }
.dfy-ad-anchor {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 50px;
    margin: 0;
    border-radius: 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    background: var(--white);
    z-index: 900;
}
/* Rule 3: the anchor must never sit over the questions on a short screen,
   so the page reserves the same 50px at the bottom while it is showing. */
@media (max-width: 767px) { body { padding-bottom: 50px; } }
@media (min-width: 768px) { .dfy-ad-anchor { display: none; } }

/* ===== pilot 1730-1799 ===== */
/* ---- Forward guidance -------------------------------------------------
   Steps 2 and 3 hold 15 of the 23 questions and both contain a multi-select,
   which blocks auto-advance — so answering there moved nothing on screen and
   the next question was usually below the fold on mobile. Everything below is
   transform and opacity only: none of it can shift layout.

   `clip` (not `hidden`) keeps the slide from producing a horizontal scrollbar
   without turning the step into a scroll container, which would break the
   sticky rail. */
.step { display: none; overflow-x: clip; }
.step.active { display: block; }
.step.active > .section { animation: step-fwd .3s cubic-bezier(.2,.8,.2,1); }
.step.active.from-back > .section { animation-name: step-back; }
@keyframes step-fwd  { from { opacity: 0; transform: translateX(24px); }  to { opacity: 1; transform: none; } }
@keyframes step-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

.question { border-radius: 16px; transition: opacity .3s ease, box-shadow .35s ease; }

/* Answered: the options they did not pick step back so the chosen one carries the
   row, and the label takes a tick. An 8-question step reads shorter than it is.
   Hovering restores full contrast — changing an answer must never feel locked. */
.question.is-done .opt:not(.selected),
.question.is-done .opt-multi:not(.selected) { opacity: .48; }
.question.is-done:hover .opt,
.question.is-done:hover .opt-multi,
.question.is-done:focus-within .opt,
.question.is-done:focus-within .opt-multi { opacity: 1; }
.question.is-done > .label::after { content: ' ✓'; color: #12A87A; font-weight: 700; }

/* Next up: two soft rings so the eye lands on the question that is now theirs. */
@keyframes q-next {
    0%, 100% { box-shadow: 0 0 0  0px rgba(35,80,184,0); }
    35%      { box-shadow: 0 0 0 7px rgba(35,80,184,.13); }
}
.question.is-next { animation: q-next 1.15s ease-in-out 2; }

select.comments-field {
    min-height: 0;
    height: 56px;
    padding: 0 16px;
    cursor: pointer;
    background: var(--white);
}

.diff-item-x { border-radius: var(--r-input); overflow: hidden; }
.diff-item-x summary::-webkit-details-marker { display: none; }
.diff-item-x[open] summary { background: var(--light); }
.diff-why {
    margin: 0;
    padding: 4px 14px 14px;
    font-size: .9em;
    line-height: 1.55;
    color: var(--gray-600);
    background: var(--light);
}

.opt-ico { flex: none; width: 22px; height: 22px; stroke: #7A8AA0; stroke-width: 1.7; fill: none;
           stroke-linecap: round; stroke-linejoin: round; }
.opt.selected .opt-ico { stroke: #2350B8; }
.opt-multi.selected .opt-ico { stroke: #12A87A; }
.opt-txt { flex: 1; }
.opt-sub { margin-left: auto; padding-left: 10px; font: 400 12.5px/1.3 'DM Sans', sans-serif; color: #7A8AA0; white-space: nowrap; }

/* Breed examples under the weight buckets. Kilos alone are unanswerable for most
   owners — this gives them something to recognise instead of a number to know.
   Own line (not .opt-sub) so a long breed list wraps instead of squeezing the
   label, and so answerLabel() never folds it into the case summary. */
.options-eg .opt { flex-wrap: wrap; }
.opt-eg { flex: 1 0 100%; padding-left: 32px; font: 400 12px/1.35 'DM Sans', sans-serif; color: #8B99AC; }
.opt.selected .opt-eg { color: #46608F; }

/* ===== pilot 1801-1874 ===== */
.boost-note {
    background: var(--light);
    border-left: 3px solid var(--secondary);
    border-radius: var(--r-input);
    padding: 14px 18px;
    margin: 0 0 30px;
    font-size: .98em;
    line-height: 1.5;
    color: var(--ink);
}

.step-sub { margin: 0 0 26px; padding: 0; font: 400 14px/1.55 'DM Sans', sans-serif; color: #7A8AA0; }

.progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: .86em;
    color: var(--gray-600);
}
.progress-saved { color: var(--success, #16a34a); font-weight: 600; }

.nav-btn svg { margin-left: 2px; }
.app-actions .submit-btn { margin: 0; min-width: 0; }
.nav-btn {
    font-family: var(--font-display);
    font-size: 1.02em;
    font-weight: 600;
    border-radius: var(--r-input);
    padding: 19px 28px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: filter .15s, border-color .15s, color .15s;
    min-height: 58px;
}
.nav-back {
    background: var(--white);
    border-color: var(--gray-200);
    color: var(--gray-600);
    flex: 0 0 auto;
}
.nav-back:hover { border-color: var(--primary); color: var(--primary); }
.nav-next {
    background: var(--primary);
    color: #fff;
    flex: 1;
    box-shadow: 0 10px 26px rgba(35,80,184,.28);
}
.nav-next:hover { filter: brightness(1.08); }

.case-summary {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-card);
    padding: 16px 18px;
}
.case-summary h4 {
    margin: 0 0 8px;
    font-size: 0.72em;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-600);
}
.case-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.case-chip {
    background: var(--light);
    color: var(--ink);
    border-radius: var(--r-pill);
    padding: 6px 13px;
    font-size: .84em;
    font-weight: 500;
}


/* ===== pilot 1875-1951 ===== */
/* ---- Emergency interrupt ---- */
.emergency-box {
    background: #FFF5F5;
    border: 1.5px solid var(--emergency);
    border-radius: var(--r-card);
    padding: 28px 26px;
    margin-bottom: 20px;
    text-align: center;
}
.emergency-icon { font-size: 2.4em; line-height: 1; }
.emergency-box h2 {
    margin: 6px 0 10px;
    font-size: 1.35em;
    color: var(--danger, #dc2626);
}
.emergency-box p { margin: 0 0 8px; line-height: 1.55; }
.emergency-hint { font-size: 0.88em; color: var(--gray-600); }
.emergency-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}
.emergency-btn {
    background: var(--emergency);
    color: #fff;
    font-family: var(--font-display);
    text-decoration: none;
    font-weight: 600;
    padding: 16px 26px;
    border-radius: var(--r-input);
    min-height: 52px;
    display: inline-flex;
    align-items: center;
}
.emergency-dismiss {
    background: transparent;
    border: 1px solid var(--gray-300, #d1d5db);
    color: var(--gray-600);
    font-family: inherit;
    font-size: 0.92em;
    padding: 14px 18px;
    border-radius: 12px;
    min-height: 48px;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .container { padding: 14px; }
    .header h1 { font-size: 1.35em; }
    .section { padding: 24px 20px; }
    .section-title { font-size: 1.35em; }
    .label { font-size: 1.15em; }
    .step-sub { padding-left: 0; margin-bottom: 24px; }
    .question { margin-bottom: 30px; }
    .header-benefits { gap: 8px; }
    .benefit { font-size: 0.8em; padding: 5px 10px; }
    .options { grid-template-columns: 1fr 1fr; }
    .actions { flex-direction: column; }
}

@media (max-width: 480px) {
    .options { grid-template-columns: 1fr; }
    .header-specialty { font-size: 0.85em; }
    .wizard-nav { flex-wrap: wrap; }
    .nav-back { flex: 1 1 100%; order: 2; }
    .nav-next { flex: 1 1 100%; order: 1; }
    .emergency-actions { flex-direction: column; }
    .emergency-btn { justify-content: center; }
}

/* ---- Motion is decoration -----------------------------------------------
   Never make a worried owner — or someone filling in a mental-health form —
   sit through an animation. Same block as the pilot's, minus the selectors
   for components that live only there.

   The capture card's own reduced-motion rules are in dfy-capture.css, next
   to the animations they switch off. */
@media (prefers-reduced-motion: reduce) {
    .step.active > .section,
    .question.is-next { animation: none !important; }
    .question { transition: none; }
    .progress-fill, .app-bar-progress > div { transition: none; }
}

/* ---- Photo upload -------------------------------------------------------
   Added 2026-08-05 for the three tools where an image is genuinely
   diagnostic: dermato (lesions), toxicologia (what they ate / the packet),
   respiratorio (video of the breathing). Lifted from the pilot, which is the
   only tool that had it. Paired with shared/dfy-upload.js. */
.upload-area {
    border: 3px dashed var(--primary);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    background: linear-gradient(135deg, #f8faff, #e0f2fe);
    cursor: pointer;
    transition: all 0.3s;
    margin: 15px 0;
}

.upload-area:hover {
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    border-color: var(--secondary);
}

.upload-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.upload-area h4 {
    margin-bottom: 5px;
}

.upload-area p {
    color: var(--gray-600);
    font-size: 0.9em;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.photo-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.photo-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.photo-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--emergency);
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 12px;
}

/* Photo Tips */
   drop zone changes state and the thumbnails arrive instead of appearing. */
.upload-area.has-files,
.medical-upload.has-files {
    border-style: solid;
    border-color: #12A87A;
    background: linear-gradient(135deg, #F0FDF7, #DCFCE7);
}
.upload-area.has-files h4::after,
.medical-upload.has-files h4::after { content: ' ✓'; color: #12A87A; }
.upload-area:active, .medical-upload:active { transform: scale(.995); }

@keyframes file-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.photo-item { animation: file-in .28s cubic-bezier(.2,.8,.2,1) both; }
.file-item  { animation: file-in .24s ease both; }


/* ---- Mobile app bar -----------------------------------------------------
   At 390px the bar held a logo, "Doctoriofy", the tool chip and an exit link,
   and the chip wrapped onto two lines. Drop the wordmark: the logo still
   carries the brand, and mid-form the tool name is the more useful of the two. */
@media (max-width: 560px) {
    .app-name { display: none; }
    .app-chip { white-space: nowrap; font-size: 11px; padding: 3px 9px; }
}

/* ---- Professional CTA ---------------------------------------------------
   doctor_listing_click is a key event in ANALYTICS-SCHEMA.md and the listener
   for it has lived in email-capture.js all along — but no diagnostic tool, the
   pilot included, ever linked to /lista-tu-consulta/, so it could never fire.
   This is that surface. Deliberately secondary: a worried owner is not the
   audience, but a professional reading their own result is exactly the person
   to ask, and it must not compete with "go and see someone". */
.rx-pro {
    margin: 4px 0 26px; padding: 14px 16px; border-radius: 14px;
    background: #fff; border: 1px dashed #C6D2E4;
    font: 400 13.5px/1.5 'DM Sans', sans-serif; color: #7A8AA0; text-align: center;
}
.rx-pro a { color: #2350B8; font-weight: 600; }

/* ===== page heading + blog links (added 2026-08-11) =====
   The redesign replaced the old .header block with .app-bar, and .app-bar is spans -- so
   every tool shipped with no <h1> a crawler could read. These pages are almost entirely
   option labels, so the intro paragraph is also the only prose on them. .tool-reading is
   the return direction of doctoriofy-blog-ctas.php, which has routed blog -> tool for
   months while the tools linked to no article at all. */
.tool-intro { padding: 22px 28px 4px; }
.tool-intro h1 {
    font-family: var(--font-display);
    font-size: 1.55em; font-weight: 700; letter-spacing: -.015em;
    color: var(--ink); margin-bottom: 8px; line-height: 1.25;
}
.tool-intro p { color: var(--gray-600); font-size: .97em; line-height: 1.6; max-width: 68ch; }

.tool-reading { padding: 4px 28px 24px; }
.tool-reading h2 {
    font-family: var(--font-display);
    font-size: 1.05em; font-weight: 600; color: var(--ink); margin-bottom: 10px;
}
.tool-reading ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tool-reading a {
    color: var(--primary); text-decoration: none; font-size: .95em; line-height: 1.45;
    /* 44px min tap target -- the design gate checks this at 390px. */
    display: inline-block; padding: 11px 0;
}
.tool-reading a:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .tool-intro { padding: 18px 20px 4px; }
    .tool-intro h1 { font-size: 1.3em; }
    .tool-reading { padding: 4px 20px 20px; }
}