@charset "UTF-8";
/* Wizard público de AssessmentRequest — Typeform-style.
 * Mobile-first, todas las clases bajo prefijo .jm-wz-*.
 * Solo tokens V3 (var(--ska-*)). Cero hex grays hardcoded.
 */

/* ===== Reset html/body =====
 * Sin esto el body conserva el margin 8px del browser default, y como
 * `.jm-wz-app` usa `min-height: 100vh` la página overflows el viewport en
 * 16px (8 arriba + 8 abajo) → scroll vertical innecesario + "marco gris"
 * alrededor del wizard. El bg del body matchea el wizard para que
 * cualquier área visible más allá (rebote/overscroll en mobile) NO se vea
 * blanca en dark mode. */
html, body {
    margin: 0;
    padding: 0;
    background: var(--ska-bg);
    min-height: 100%;
}

/* ===== Reset mínimo + base ===== */
.jm-wz-app *,
.jm-wz-app *::before,
.jm-wz-app *::after {
    box-sizing: border-box;
}

.jm-wz-app {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--ska-bg);
    color: var(--ska-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

[x-cloak] { display: none !important; }

/* ===== Progress bar fija arriba ===== */
.jm-wz-progress {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ska-bg);
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--ska-border);
}
.jm-wz-progress__track {
    position: relative;
    height: 4px;
    background: var(--ska-surface-alt);
    border-radius: 2px;
    overflow: hidden;
}
.jm-wz-progress__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--ska-primary);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.jm-wz-progress__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 11px;
    color: var(--ska-text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.jm-wz-progress__meta-right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Theme toggle discreto — solo visible cuando el modo efectivo es dark. */
.jm-wz-theme-toggle {
    appearance: none;
    background: transparent;
    border: 1px solid var(--ska-border);
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ska-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.jm-wz-theme-toggle:hover {
    color: var(--ska-text);
    border-color: var(--ska-primary);
}
.jm-wz-theme-toggle__label {
    /* Oculta el label en mobile pequeño; solo icon. */
}
@media (max-width: 480px) {
    .jm-wz-theme-toggle__label { display: none; }
    .jm-wz-theme-toggle { padding: 4px 8px; }
}

/* ===== Contenedor principal (un step a la vez) ===== */
.jm-wz-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 20px 100px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .jm-wz-main {
        padding: 48px 32px 120px;
        max-width: 640px;
    }
}

.jm-wz-step {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: jm-wz-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes jm-wz-slide-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Tipografía de cada step ===== */
.jm-wz-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ska-primary);
    margin-bottom: -8px;
}
.jm-wz-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ska-text);
    margin: 0;
}
@media (min-width: 768px) {
    .jm-wz-title { font-size: 32px; }
}
.jm-wz-subtitle {
    font-size: 15px;
    color: var(--ska-text-muted);
    margin: 0;
}
.jm-wz-helper {
    font-size: 13px;
    color: var(--ska-text-muted);
    margin: 0;
}
.jm-wz-error {
    color: var(--ska-danger, #d23030);
    font-size: 13px;
    margin: 4px 0 0;
}

/* ===== Inputs ===== */
.jm-wz-field { display: flex; flex-direction: column; gap: 8px; }
.jm-wz-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ska-text);
}
.jm-wz-input,
.jm-wz-textarea,
.jm-wz-select {
    appearance: none;
    width: 100%;
    background: var(--ska-surface);
    border: 1.5px solid var(--ska-border);
    color: var(--ska-text);
    font: inherit;
    font-size: 16px; /* evita zoom iOS */
    padding: 14px 16px;
    border-radius: 12px;
    min-height: 52px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.jm-wz-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}
.jm-wz-input:focus,
.jm-wz-textarea:focus,
.jm-wz-select:focus {
    outline: none;
    border-color: var(--ska-primary);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ska-primary) 18%, transparent);
}
.jm-wz-input::placeholder,
.jm-wz-textarea::placeholder { color: var(--ska-text-muted); }

/* ===== Botonera de footer (sticky en mobile) ===== */
.jm-wz-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: var(--ska-bg);
    border-top: 1px solid var(--ska-border);
    padding: 14px 20px max(14px, env(safe-area-inset-bottom));
}
.jm-wz-footer__inner {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    gap: 12px;
    align-items: center;
}
@media (min-width: 768px) {
    .jm-wz-footer__inner { max-width: 640px; }
}

.jm-wz-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 22px;
    border-radius: 12px;
    min-height: 52px;
    transition: transform 0.1s, opacity 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.jm-wz-btn:active:not(:disabled) { transform: scale(0.98); }
.jm-wz-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.jm-wz-btn--primary {
    flex: 1;
    background: var(--ska-primary);
    color: var(--ska-text-on-primary);
}
.jm-wz-btn--primary:hover:not(:disabled) {
    background: color-mix(in oklab, var(--ska-primary) 90%, black);
}

.jm-wz-btn--ghost {
    background: transparent;
    color: var(--ska-text-muted);
    padding: 14px 14px;
    min-width: 52px;
}
.jm-wz-btn--ghost:hover:not(:disabled) {
    color: var(--ska-text);
    background: var(--ska-surface);
}

/* ===== Cards / options (multi-select catalogs) ===== */
.jm-wz-options {
    display: grid;
    gap: 10px;
}
.jm-wz-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--ska-surface);
    border: 1.5px solid var(--ska-border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    text-align: left;
    font: inherit;
    width: 100%;
}
.jm-wz-option:hover { border-color: color-mix(in oklab, var(--ska-primary) 35%, var(--ska-border)); }
.jm-wz-option:active { transform: scale(0.99); }
.jm-wz-option--selected {
    border-color: var(--ska-primary);
    background: color-mix(in oklab, var(--ska-primary) 6%, var(--ska-surface));
}
.jm-wz-option__check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--ska-border);
    border-radius: 6px;
    display: grid;
    place-items: center;
    margin-top: 2px;
    transition: background 0.15s, border-color 0.15s;
}
.jm-wz-option--selected .jm-wz-option__check {
    background: var(--ska-primary);
    border-color: var(--ska-primary);
}
.jm-wz-option__check svg { display: none; }
.jm-wz-option--selected .jm-wz-option__check svg { display: block; }
.jm-wz-option__body { flex: 1; min-width: 0; }
.jm-wz-option__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ska-text);
}
.jm-wz-option__desc {
    font-size: 13px;
    color: var(--ska-text-muted);
    margin-top: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Radio variant (single-select dentro de opciones) */
.jm-wz-option--radio .jm-wz-option__check { border-radius: 50%; }

/* ===== Boolean toggle (sí / no) ===== */
.jm-wz-bool-group { display: flex; gap: 10px; }
.jm-wz-bool-group .jm-wz-option {
    flex: 1;
    justify-content: center;
    text-align: center;
    padding: 18px 16px;
}
.jm-wz-bool-group .jm-wz-option__check { display: none; }
.jm-wz-bool-group .jm-wz-option__body { text-align: center; }

/* ===== Consent banner (legacy single-check, mantenido por compat) ===== */
.jm-wz-consent {
    background: var(--ska-surface);
    border: 1.5px solid var(--ska-border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.jm-wz-consent__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--ska-primary) 12%, var(--ska-surface));
    color: var(--ska-primary);
    display: grid;
    place-items: center;
    font-size: 24px;
}
.jm-wz-consent__title {
    font-size: 17px;
    font-weight: 600;
}
.jm-wz-consent__text {
    font-size: 14px;
    color: var(--ska-text-muted);
    line-height: 1.55;
}

/* ===== Consents legales multi-doc (paso 6 nuevo, Ley 527/1999) ===== */
.jm-wz-consents {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.jm-wz-consent-item {
    background: var(--ska-surface);
    border: 1.5px solid var(--ska-border);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.jm-wz-consent-item--signed {
    border-color: color-mix(in oklab, var(--ska-success, var(--ska-primary)) 60%, var(--ska-border));
    background: color-mix(in oklab, var(--ska-success, var(--ska-primary)) 6%, var(--ska-surface));
}
.jm-wz-consent-item__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.jm-wz-consent-item__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ska-text);
    flex: 1 1 auto;
}
.jm-wz-consent-item__badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--ska-primary) 14%, var(--ska-surface));
    color: var(--ska-primary);
}
/* El TEXTO del documento, adentro del paso.
 *
 * Reemplaza a `.jm-wz-consent-item__link`, que sacaba al paciente a otra pestaña
 * (`/signum/<slug>`) y dejaba aceptar sin haber abierto nada. Va con altura máxima y
 * scroll propio: un consentimiento de 50 líneas empujaría el botón de aceptar fuera de
 * la pantalla, y el paciente aceptaría sin ver que había texto arriba. */
.jm-wz-consent-item__body {
    max-height: 320px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--ska-border);
    border-radius: 10px;
    background: var(--ska-surface-2, var(--ska-surface));
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ska-text);
    overscroll-behavior: contain;
}
.jm-wz-consent-item__body h1,
.jm-wz-consent-item__body h2,
.jm-wz-consent-item__body h3 {
    font-size: 14.5px;
    font-weight: 600;
    margin: 14px 0 6px;
}
.jm-wz-consent-item__body h1:first-child,
.jm-wz-consent-item__body h2:first-child {
    margin-top: 0;
}
.jm-wz-consent-item__body p,
.jm-wz-consent-item__body ul,
.jm-wz-consent-item__body ol {
    margin: 0 0 10px;
}
.jm-wz-consent-item__body ul,
.jm-wz-consent-item__body ol {
    padding-left: 20px;
}
.jm-wz-consent-item__body li {
    margin-bottom: 4px;
}
.jm-wz-consent-item__body hr {
    border: 0;
    border-top: 1px solid var(--ska-border);
    margin: 12px 0;
}
.jm-wz-consent-item__body strong {
    font-weight: 600;
}
/* Sin cuerpo no se puede firmar. Se dice por qué en vez de dejar un botón gris. */
.jm-wz-consent-item__unavailable {
    font-size: 13px;
    color: var(--ska-warning, var(--ska-text-muted));
    margin: 0;
}

/* ===== Loading / empty / error states ===== */
.jm-wz-status {
    display: grid;
    place-items: center;
    gap: 16px;
    padding: 80px 24px;
    text-align: center;
    color: var(--ska-text-muted);
}
.jm-wz-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--ska-border);
    border-top-color: var(--ska-primary);
    border-radius: 50%;
    animation: jm-wz-spin 0.8s linear infinite;
}
@keyframes jm-wz-spin {
    to { transform: rotate(360deg); }
}

/* ===== Welcome hero ===== */
.jm-wz-hero {
    text-align: center;
    padding: 8px 0 12px;
}
.jm-wz-hero__emoji {
    font-size: 48px;
    margin-bottom: 8px;
}
.jm-wz-hero__title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ska-text);
}

.jm-wz-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (min-width: 768px) {
    .jm-wz-hero__title { font-size: 36px; }
}
.jm-wz-hero__text {
    font-size: 15px;
    color: var(--ska-text-muted);
    max-width: 38ch;
    margin: 0 auto;
}

/* ===== Inline rows (peso+altura, complicación+alcohol etc.) ===== */
.jm-wz-row {
    display: grid;
    gap: 12px;
}
@media (min-width: 480px) {
    .jm-wz-row--2 { grid-template-columns: 1fr 1fr; }
    .jm-wz-row--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Done screen ===== */
.jm-wz-done {
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.jm-wz-done__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--ska-success, #16a34a) 16%, var(--ska-surface));
    color: var(--ska-success, #16a34a);
    display: grid;
    place-items: center;
    font-size: 40px;
}
.jm-wz-done__title {
    font-size: 24px;
    font-weight: 700;
}
.jm-wz-done__text {
    font-size: 15px;
    color: var(--ska-text-muted);
    max-width: 36ch;
}

/* ===== Photo hub (grid de cards con illustration) ===== */
.jm-wz-photos__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: var(--ska-surface);
    border: 1.5px solid var(--ska-border);
    border-radius: 14px;
    font-size: 14px;
}
.jm-wz-photos__count {
    font-weight: 600;
    color: var(--ska-text);
}
.jm-wz-photos__count-detail {
    color: var(--ska-text-muted);
    margin-left: 6px;
}

.jm-wz-photos__grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) {
    .jm-wz-photos__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 920px) {
    .jm-wz-photos__grid { grid-template-columns: repeat(4, 1fr); }
}

.jm-wz-photo-card {
    appearance: none;
    background: var(--ska-surface);
    border: 1.5px solid var(--ska-border);
    border-radius: 14px;
    padding: 14px 12px 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    color: inherit;
    font: inherit;
    position: relative;
    overflow: hidden;
}
.jm-wz-photo-card:hover {
    border-color: color-mix(in oklab, var(--ska-primary) 40%, var(--ska-border));
}
.jm-wz-photo-card:active { transform: scale(0.99); }

.jm-wz-photo-card--uploaded {
    border-color: var(--ska-success, #16a34a);
    background: color-mix(in oklab, var(--ska-success, #16a34a) 6%, var(--ska-surface));
}
.jm-wz-photo-card--sensitive { border-style: dashed; }

.jm-wz-photo-card__pose {
    aspect-ratio: 1 / 1;
    /* 14% (antes 8%): el dibujo de la pose se perdía sobre el fondo claro. */
    background: color-mix(in oklab, var(--ska-primary) 14%, var(--ska-surface));
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--ska-primary);
    position: relative;
}
.jm-wz-photo-card__pose svg {
    width: 75%;
    height: 75%;
    /* Trazo un poco más firme para legibilidad del hint. */
    stroke-width: 1.4;
    opacity: 0.9;
}
.jm-wz-photo-card__thumb {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.jm-wz-photo-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ska-text);
    line-height: 1.25;
    min-height: 32px;
}
.jm-wz-photo-card__status {
    font-size: 11px;
    color: var(--ska-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
.jm-wz-photo-card--uploaded .jm-wz-photo-card__status {
    color: var(--ska-success, #16a34a);
}
/* Estado "Procesando…" (gap async de OmniVault tras subir). */
.jm-wz-photo-card--processing {
    border-color: color-mix(in oklab, var(--ska-primary) 45%, var(--ska-border));
}
.jm-wz-photo-card--processing .jm-wz-photo-card__status {
    color: var(--ska-primary);
}
.jm-wz-photo-card--processing .jm-wz-photo-card__pose {
    animation: jm-wz-pose-pulse 1.4s ease-in-out infinite;
}
@keyframes jm-wz-pose-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.jm-wz-photo-card--uploading .jm-wz-photo-card__pose::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in oklab, var(--ska-bg) 40%, transparent);
    backdrop-filter: blur(2px);
}

/* ===== Photo sheet (bottom-sheet modal) ===== */
.jm-wz-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: color-mix(in oklab, black 60%, transparent);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: jm-wz-sheet-fade 0.2s ease;
}
@keyframes jm-wz-sheet-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.jm-wz-sheet {
    width: 100%;
    max-width: 560px;
    max-height: 92dvh;
    background: var(--ska-bg);
    border-radius: 20px 20px 0 0;
    padding: 20px 20px max(20px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
    overflow-y: auto;
    animation: jm-wz-sheet-slide 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@keyframes jm-wz-sheet-slide {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.jm-wz-sheet__handle {
    width: 40px;
    height: 4px;
    background: var(--ska-border);
    border-radius: 2px;
    margin: -4px auto 4px;
}
.jm-wz-sheet__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.jm-wz-sheet__pose {
    aspect-ratio: 4 / 3;
    background: color-mix(in oklab, var(--ska-primary) 8%, var(--ska-surface));
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--ska-primary);
}
.jm-wz-sheet__pose svg { width: 50%; height: 80%; }
.jm-wz-sheet__pose img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
}
.jm-wz-sheet__instruction {
    font-size: 14px;
    color: var(--ska-text);
    line-height: 1.5;
}
.jm-wz-sheet__tip {
    font-size: 13px;
    color: var(--ska-text-muted);
    background: var(--ska-surface);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.jm-wz-sheet__tip i { color: var(--ska-primary); margin-top: 2px; }

.jm-wz-sheet__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.jm-wz-sheet__hidden-input { display: none; }
.jm-wz-btn--outline {
    background: transparent;
    border: 1.5px solid var(--ska-border);
    color: var(--ska-text);
}
.jm-wz-btn--outline:hover:not(:disabled) {
    border-color: var(--ska-primary);
    color: var(--ska-primary);
}
.jm-wz-btn--danger {
    background: transparent;
    border: 1.5px solid color-mix(in oklab, var(--ska-danger, #d23030) 50%, var(--ska-border));
    color: var(--ska-danger, #d23030);
}

/* ===== Authorization checkbox card ===== */
.jm-wz-auth {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--ska-surface);
    border: 1.5px solid var(--ska-border);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
}
button.jm-wz-auth { font-family: inherit; }
.jm-wz-auth:disabled {
    cursor: default;
}
.jm-wz-auth:disabled:not(.jm-wz-auth--checked) {
    opacity: 0.6;
}
.jm-wz-auth--checked {
    border-color: var(--ska-primary);
    background: color-mix(in oklab, var(--ska-primary) 6%, var(--ska-surface));
}
.jm-wz-auth__check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--ska-border);
    border-radius: 6px;
    display: grid;
    place-items: center;
    margin-top: 2px;
    background: var(--ska-surface);
}
.jm-wz-auth--checked .jm-wz-auth__check {
    background: var(--ska-primary);
    border-color: var(--ska-primary);
}
.jm-wz-auth__check svg { display: none; color: var(--ska-text-on-primary); }
.jm-wz-auth--checked .jm-wz-auth__check svg { display: block; }
.jm-wz-auth__text { font-size: 14px; color: var(--ska-text); line-height: 1.5; }

/* ===== Phone verification (opcional, vía OTP SMS) ===== */
.jm-wz-phone-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.jm-wz-phone-verify-btn {
    appearance: none;
    background: transparent;
    border: 1.5px solid var(--ska-border);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--ska-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.15s, background 0.15s;
}
.jm-wz-phone-verify-btn:hover:not(:disabled) {
    border-color: var(--ska-primary);
    color: var(--ska-primary);
}
.jm-wz-phone-verify-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.jm-wz-phone-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ska-success, #16a34a);
    background: color-mix(in oklab, var(--ska-success, #16a34a) 10%, transparent);
    border-radius: 8px;
    padding: 8px 14px;
}
.jm-wz-otp-input {
    text-align: center;
    letter-spacing: 0.4em;
    font-size: 24px;
    font-weight: 600;
}

/* ===== Avisos de catálogo (loading / error / empty) =====
   Los tres estados que antes colapsaban en "no se ve nada". El paso de condiciones
   médicas desapareció durante meses porque un `x-show` sobre la lista vacía ocultaba
   el bloque sin decir nada (tarjeta 226). */
.jm-wz-notice {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--ska-border);
    background: var(--ska-surface-alt);
    margin: 4px 0 16px;
}
.jm-wz-notice__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ska-text);
}
/* `error` = falló la carga (reintentable). `warn` = cargó pero vino vacío: no es culpa
   del paciente ni lo puede resolver, así que se avisa sin pintarlo como error suyo. */
.jm-wz-notice--error {
    border-color: color-mix(in srgb, var(--ska-danger, #d23030) 45%, var(--ska-border));
    background: color-mix(in srgb, var(--ska-danger, #d23030) 7%, var(--ska-surface-alt));
}
.jm-wz-notice--warn {
    border-color: color-mix(in srgb, var(--ska-primary) 40%, var(--ska-border));
    background: color-mix(in srgb, var(--ska-primary) 6%, var(--ska-surface-alt));
}
.jm-wz-notice .jm-wz-auth { width: 100%; }

.jm-wz-btn--sm {
    padding: 8px 14px;
    min-width: 0;
    font-size: 13px;
    border: 1px solid var(--ska-border);
    border-radius: 10px;
}

/* Skeletons: mientras el catálogo carga se muestra la FORMA de lo que viene, en vez de
   un hueco. Un hueco es indistinguible de "no hay nada", que es justo la confusión que
   este trabajo viene a eliminar. */
.jm-wz-skeleton {
    height: 52px;
    border-radius: 12px;
    border: 1px solid var(--ska-border);
    background: linear-gradient(
        90deg,
        var(--ska-surface-alt) 25%,
        color-mix(in srgb, var(--ska-text-muted) 12%, var(--ska-surface-alt)) 37%,
        var(--ska-surface-alt) 63%
    );
    background-size: 400% 100%;
    animation: jm-wz-shimmer 1.4s ease-in-out infinite;
}
.jm-wz-skeleton--tall { height: 76px; }

@keyframes jm-wz-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* Respeta a quien pidió menos movimiento: el shimmer es decorativo. */
@media (prefers-reduced-motion: reduce) {
    .jm-wz-skeleton { animation: none; }
}

/* ── Cirugías previas: filas que el paciente agrega y quita ─────────────────
   Una fila = nombre + hace cuánto + quitar. En móvil se apila (el ancho de un
   teléfono no da para tres columnas y el select quedaba de 60px). */
.jm-wz-surgery-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
}
.jm-wz-surgery-row__name { flex: 1 1 55%; margin: 0; }
.jm-wz-surgery-row__when { flex: 1 1 45%; margin: 0; }
.jm-wz-surgery-row__remove {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--ska-border);
    background: var(--ska-surface);
    color: var(--ska-text-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.jm-wz-surgery-row__remove:hover {
    color: var(--ska-danger, #d64545);
    border-color: var(--ska-danger, #d64545);
}
@media (max-width: 520px) {
    .jm-wz-surgery-row {
        flex-wrap: wrap;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--ska-border);
    }
    .jm-wz-surgery-row__name,
    .jm-wz-surgery-row__when { flex: 1 1 100%; }
    .jm-wz-surgery-row__remove { margin-left: auto; }
}
.jm-wz-add-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px dashed var(--ska-border);
    background: transparent;
    color: var(--ska-primary);
    font-weight: 600;
    cursor: pointer;
}
.jm-wz-add-row:hover { border-color: var(--ska-primary); }

/* ── Paso de fotos agrupado por área ────────────────────────────────────────
   Antes eran hasta 29 tarjetas planas en una sola grilla. */
.jm-wz-photo-area { margin-bottom: 24px; }
.jm-wz-photo-area__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.jm-wz-photo-area__title {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ska-text);
}
.jm-wz-photo-area__count {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ska-text-muted);
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ska-surface-alt);
}
.jm-wz-photo-area__count--done {
    color: var(--ska-success, #2e7d52);
    background: color-mix(in srgb, var(--ska-success, #2e7d52) 12%, transparent);
}
/* La instrucción corta dentro de la tarjeta: dice qué hacer, no sólo cómo se
   llama la pose. Dos líneas como máximo para no romper la grilla. */
.jm-wz-photo-card__how {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .72rem;
    line-height: 1.25;
    color: var(--ska-text-muted);
    margin-top: 2px;
}

/* El SVG hidratado ocupa su caja; el color lo hereda de `currentColor`. */
.jm-wz-pose-art { display: contents; }
.jm-wz-pose-art > svg { width: 100%; height: 100%; display: block; }
/* Sin dibujo se dice, no se deja el hueco. */
.jm-wz-pose-art__fallback {
    font-size: 28px;
    color: var(--ska-text-muted);
    opacity: .5;
}