/* Ajustes comunes de las vistas. Las reglas de pantalla no alteran el PDF. */
*, *::before, *::after { box-sizing: border-box; }
html { height: auto; min-height: 100%; overflow: visible; -webkit-text-size-adjust: 100%; }
body { height: auto; min-height: 100vh; min-height: 100svh; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
button, input, select, textarea, fieldset { min-width: 0; max-width: 100%; }
img { max-width: 100%; }
button, p, h1, h2, h3, h4, label, summary, dd { overflow-wrap: anywhere; }

/* Acceso, registro y recuperación: el documento completo puede desplazarse. */
.vista-acceso, .vista-bienvenida, .vista-simple { overflow: visible; }
.vista-acceso #page {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
}
.vista-acceso :is(.left-panel, .right-panel, .form-card, .field, .row-2, .input-wrap) { min-width: 0; }
.vista-acceso .right-panel { overflow: visible; }
.vista-acceso .form-card { padding-block: .5rem; }
.vista-acceso .input-wrap input[type="password"],
.vista-acceso .input-wrap input:has(~ .toggle-pw) { padding-right: 3rem; }
.vista-acceso .toggle-pw { min-width: 32px; min-height: 40px; justify-content: center; right: .4rem; }
.vista-acceso :is(.modal-overlay, #modal-pw) { padding: .75rem; overflow-y: auto; }
.vista-acceso :is(.modal, .modal-box, #modal-pw > div) {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    margin-block: auto;
}
.vista-bienvenida #main { height: auto; min-height: 100vh; min-height: 100svh; gap: 2rem; }
.vista-bienvenida :is(header, footer) { gap: 1rem; flex-wrap: wrap; }
.vista-bienvenida #splash { padding: 1rem; text-align: center; }
.vista-bienvenida :is(#splash-sub, #splash-text) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.vista-simple :is(.error-page, .card) { min-width: 0; }
.vista-subida { padding: clamp(.75rem, 4vw, 2rem); font-family: system-ui, sans-serif; }
.vista-subida form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.vista-subida img { height: auto; }

/* Menú móvil disponible también en tablet y con teclado. */
.menu-movil, .menu-cerrar, .menu-fondo { display: none; }
.menu-movil, .menu-cerrar {
    align-items: center; justify-content: center; flex-shrink: 0;
    min-width: 44px; min-height: 44px; border: 1px solid var(--s200);
    border-radius: 9px; background: var(--white); color: var(--s800); cursor: pointer;
}
.menu-movil svg, .menu-cerrar svg { width: 22px; height: 22px; }
.vista-dashboard .sidebar { height: 100vh; height: 100dvh; }
.vista-dashboard .sidebar-inner { height: auto; min-height: 100%; }
.vista-dashboard :is(.card, .card-body, .field, .search-wrap, .rejilla-adaptable, .rejilla-adaptable > *, .form-grid > *, .grid-2 > *, .grid-2-eq > *) { min-width: 0; }
.vista-dashboard :is(.tbl-wrap, .table-wrap) { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.vista-dashboard .tbl-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.vista-dashboard .card-head { flex-wrap: wrap; gap: .6rem; }
.vista-dashboard .card-head > * { min-width: 0; max-width: 100%; }
.vista-dashboard .card-head h3 { white-space: normal; }
.vista-dashboard .card-head span { white-space: normal; overflow-wrap: anywhere; }
.vista-dashboard .modal-overlay { padding: .75rem; overflow-y: auto; overscroll-behavior: contain; }
.vista-dashboard .modal-box {
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    margin-block: auto;
}
.vista-dashboard .modal-head { flex-wrap: wrap; }
.vista-dashboard .modal-head > * { min-width: 0; max-width: 100%; }
.vista-dashboard .modal-head h3 { min-width: 0; }
.vista-dashboard .modal-head .btn { width: auto; }
.vista-dashboard .modal-head div { flex-wrap: wrap; }
.vista-dashboard .modal-head button { flex-shrink: 0; }
.vista-dashboard .img-tool-btn { min-width: 44px; min-height: 44px; }
.vista-dashboard .modal-foot { flex-wrap: wrap; }
.vista-dashboard .modal-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.vista-dashboard .cmp-visor { margin: auto; max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
.vista-dashboard .cmp-visor__cabecera { flex-wrap: wrap; }
.vista-dashboard .cmp-visor__zoom { flex-wrap: wrap; }
.vista-dashboard .cmp-visor__zoom input { min-width: 60px; }
/* La imagen ampliada conserva el desplazamiento y el zoom dentro de su visor. */
.vista-dashboard .cmp-visor__imagen img { max-width: none; }
.vista-dashboard #img-visor-wrap { width: auto !important; }
.vista-dashboard #img-visor-empty { max-width: 100%; padding: .75rem; text-align: center; }
.vista-dashboard .toast-wrap { max-width: calc(100vw - 1.5rem); }
.vista-dashboard .toast { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.vista-dashboard :is(.card, #clu-resultado, #cmp-resultado, .field) { scroll-margin-top: 80px; }

@media screen and (max-width: 900px) {
    .vista-acceso #page { grid-template-columns: minmax(0, 1fr); align-content: start; }
    .vista-acceso .left-panel { padding: 1.25rem max(1rem, env(safe-area-inset-left)); }
    .vista-acceso .left-panel :is(.greeting, .info, .left-footer) { display: none; }
    .vista-acceso .divider { display: none; }
    .vista-acceso .right-panel { padding: 1.25rem 1rem 2rem; transform: none; }
    .vista-acceso .left-panel { transform: none; }
    .vista-acceso .form-card { max-width: 460px; }
    .vista-acceso .logo-name { font-size: .85rem; }
    .vista-acceso .logo { gap: .65rem; }
    .vista-acceso .deco, .vista-bienvenida .deco { display: none; }
    .vista-dashboard .sidebar {
        display: flex; width: min(288px, 100vw); z-index: 1001;
        visibility: hidden; transform: translateX(-100%);
        transition: transform .2s ease, visibility .2s;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .vista-dashboard.menu-abierto .sidebar { visibility: visible; transform: none; }
    .vista-dashboard.menu-abierto { overflow: hidden; }
    .vista-dashboard .menu-movil, .vista-dashboard .menu-cerrar { display: flex; }
    .vista-dashboard .menu-cerrar { margin-left: auto; }
    .vista-dashboard .menu-fondo {
        position: fixed; inset: 0; z-index: 1000; border: 0;
        background: rgba(15, 23, 42, .55); width: 100%; max-width: none;
    }
    .vista-dashboard.menu-abierto .menu-fondo { display: block; }
    .vista-dashboard .main { margin-left: 0; }
    .vista-dashboard .topbar { height: auto; min-height: 60px; padding: .4rem .6rem; gap: .5rem; }
    .vista-dashboard .topbar-left { overflow: visible; }
    .vista-dashboard .topbar-left h1 { white-space: normal; flex-shrink: 1; font-size: .85rem; }
    .vista-dashboard .field[style*="min-width"] { min-width: 0 !important; }
    .vista-dashboard :is(.topbar-sub, .topbar-sep) { display: none; }
    .vista-dashboard .nav-item { white-space: normal; min-height: 44px; }
    .vista-dashboard .btn-logout { min-height: 44px; }
}

@media screen and (max-width: 700px) {
    /* Las rejillas clínicas se apilan; la escala de cuatro grados conserva sus segmentos. */
    .vista-dashboard :is(.rejilla-adaptable, .grid-2, .grid-2-eq, .grid-3, .form-grid, .ficha-grid, .clu-result__overview, .clu-result__facts) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .vista-dashboard .page { padding: 1rem .75rem 2rem; overflow: visible; }
    .vista-dashboard .main { overflow: visible; }
    .vista-dashboard .stats-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); }
    .vista-dashboard :is(.card-head, .card-body, .modal-head, .modal-body, .modal-foot) { padding: .9rem; }
    .vista-dashboard .hero-card { padding: 1.1rem; }
    .vista-dashboard :is(.search-row, .modal-foot, .card-head) > .btn { width: auto; flex: 1 1 130px; }
    .vista-dashboard :is(.search-wrap, .filter-sel) { min-width: 0 !important; width: 100%; }
    .vista-dashboard div[style*="display:flex"], .vista-dashboard div[style*="display: flex"] { flex-wrap: wrap; }
    .vista-dashboard input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .vista-dashboard select, .vista-dashboard textarea { font-size: 16px; }
    .vista-dashboard .btn { white-space: normal; min-height: 44px; }
    .vista-dashboard .clu-result__header { display: grid; grid-template-columns: 40px minmax(0, 1fr); }
    .vista-dashboard .clu-result__chip { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
    .vista-dashboard .clu-result__metric-heading { flex-direction: column; align-items: stretch; }
    .vista-dashboard .clu-result__metric-note { flex: none; max-width: none; text-align: left; }
    .vista-dashboard .clu-result__body { padding: .85rem; }
    .vista-dashboard #img-visor-wrap { height: clamp(200px, 50svh, 420px) !important; margin: .75rem !important; }
    .vista-dashboard #img-expand-wrap { height: 55svh !important; min-height: 170px; }
    .vista-dashboard #modal-img-expand .modal-head { flex-wrap: wrap; }
    .vista-dashboard .toast-wrap { bottom: max(.75rem, env(safe-area-inset-bottom)); right: .75rem; left: .75rem; }
    .vista-acceso .row-2 { grid-template-columns: minmax(0, 1fr); }
    .vista-acceso :is(input, select, textarea) { font-size: 16px; }
    .vista-acceso .input-wrap input { min-height: 46px; }
    .vista-acceso .otp-group { gap: clamp(3px, 1.5vw, 9px); }
    .vista-acceso .otp-input { flex: 1 1 0; width: 0; min-width: 0; max-width: 48px; height: 50px; padding: 0; font-size: 1.25rem; }
    .vista-acceso .otp-sep { padding: 0; }
    .vista-acceso .step-item { white-space: normal; flex-direction: column; text-align: center; gap: .25rem; flex: 1; }
    .vista-acceso :is(.modal, .modal-box, #modal-pw > div) { width: 100%; padding: 1.25rem !important; }
    .vista-bienvenida #main { padding: 1.25rem 1rem; gap: 2rem; }
    .vista-bienvenida .hero { gap: 1.5rem; }
    .vista-bienvenida :is(footer, .cta-block) { align-items: stretch; }
    .vista-bienvenida footer { flex-direction: column; }
    .vista-bienvenida .cta-btn { justify-content: center; }
    .vista-bienvenida .chip { max-width: 100%; }
    .vista-simple { padding: .75rem; }
    .vista-simple .error-page { padding: 0; }
    .vista-simple :is(.card, .error-card) { padding: 1.25rem; }
}

@media screen and (max-width: 420px) {
    .vista-dashboard .badge-online { padding: .5rem; }
    .vista-dashboard .badge-online__texto { display: none; }
    .vista-dashboard .form-grid, .vista-acceso .form-card { gap: 1rem; }
    .vista-dashboard .clu-result__technical dl { grid-template-columns: minmax(0, 1fr); }
    .vista-dashboard .clu-result__dataset { display: grid; grid-template-columns: minmax(0, 1fr); }
    .vista-dashboard .clu-result__dataset .clu-result__status { justify-self: start; }
    .vista-dashboard .card-head h3 { flex-basis: 100%; }
    .vista-dashboard .clu-result__scale-labels { font-size: .58rem; }
    .vista-acceso .modal-actions { flex-direction: column; }
    .vista-acceso .right-panel { padding-inline: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vista-dashboard .sidebar { transition: none; }
}

@media screen and (max-width: 360px) {
    /* El nombre de la etapa ya figura arriba; se evitan etiquetas superpuestas. */
    .vista-dashboard .clu-result__scale-labels { overflow-wrap: anywhere; }
    .vista-dashboard .clu-result__scale-labels small { display: none; }
}