/* ----------------------------------------------------------------------------
   ACE NUTRITIONS. — Hoja de Componente 25
   Extraida de `tokens.css` en la Iteracion 07.7 (Regla #011).
   El ORDEN de carga en `app-shell.html` reproduce el del archivo original:
   la cascada CSS depende de el y no debe alterarse.
   -------------------------------------------------------------------------- */

/* 5. Smartphones (<= 640px): Optimización integral de todas las rutas y sub-vistas */
@media (max-width: 640px) {
  .ace-container,
  body:not([data-active-page="landing"]):not([data-active-page^="auth"]):not([data-active-page="calculator"]) .ace-container {
    padding: 12px 12px 84px;
  }

  .ace-brand-sub {
    display: none;
  }

  .ace-brand-title {
    font-size: 15.5px;
  }

  .ace-brand-logo {
    width: 30px;
    height: 30px;
  }

  /* Tarjetas generales y cabeceras en vistas interiores (/studio, /dashboard, /tours, /branding, /pricing, /checkout, /faq) */
  body:not([data-active-page="landing"]):not([data-active-page^="auth"]):not([data-active-page="calculator"]) .ace-card,
  body:not([data-active-page="landing"]):not([data-active-page^="auth"]):not([data-active-page="calculator"]) .ace-card-elevated,
  #hero-3d-stage-card,
  #clinicalWizardCard {
    padding: 14px 14px;
    border-radius: 14px;
  }

  #sec-tours > .ace-card-header,
  #sec-branding > .ace-card-header,
  #sec-pricing > .ace-card-header,
  #sec-checkout > .ace-card-header {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    gap: 12px;
  }

  #sec-tours .ace-section-title,
  #sec-branding .ace-section-title,
  #sec-pricing .ace-section-title,
  #sec-checkout .ace-section-title,
  #sec-faq .ace-section-title {
    font-size: 20px;
  }

  /* Cabecera de Espacio de Trabajo (#protectedWorkspaceBar) en /studio y /dashboard */
  #protectedWorkspaceBar.ace-protected-workspace-bar {
    padding: 10px 12px;
    gap: 8px;
  }

  #protectedWorkspaceBar .ace-navheader-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  #protectedWorkspaceBar .ace-navheader-right {
    flex: 0 0 auto;
  }

  #protectedWorkspaceBar .ace-navheader-center {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #protectedWorkspaceBar .ace-patient-switcher-wrap {
    width: 100%;
    justify-content: space-between;
  }

  #protectedWorkspaceBar .ace-patient-switcher-wrap .ace-select {
    flex: 1;
    min-width: 0;
    max-width: 100%;
  }

  #protectedWorkspaceBar .ace-command-search-wrap,
  #protectedWorkspaceBar .ace-command-search-input {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /* Cabecera dinámica de contenido (#aceContentHeader) */
  #aceContentHeader.ace-content-header {
    padding: 12px 14px;
    gap: 10px;
  }

  #aceContentHeader .ace-section-title {
    font-size: 18px;
  }

  #aceContentHeader .ace-content-header-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  #aceContentHeader .ace-content-header-actions > * {
    flex: 1 1 auto;
  }

  #aceContentHeader .ace-content-header-actions .ace-dropdown-trigger {
    width: 100%;
    justify-content: center;
  }

  /* Menús desplegables dentro del estudio: nunca salirse de la pantalla */
  .ace-nav-dropdown .ace-dropdown-menu,
  .ace-nav-dropdown.ace-dropdown-right .ace-dropdown-menu {
    max-width: calc(100vw - 28px);
    min-width: 220px;
    right: 0;
    left: auto;
  }

  /* Visor 3D y Controles en /studio (#tab-consulta) */
  .ace-studio-3d-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ace-studio-3d-controls > .ace-field:last-child {
    grid-column: 1 / -1;
  }

  .ace-studio-main-grid .ace-3d-studio-stage,
  #hero-cad-stage.ace-3d-studio-stage {
    min-height: 310px;
    height: 320px;
  }

  .ace-3d-hud-top {
    padding: 8px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .ace-layer-switcher {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ace-layer-btn {
    padding: 5px 6px;
    font-size: 11px;
    text-align: center;
    justify-content: center;
  }

  .ace-3d-floating-inspector {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 7px 10px;
    gap: 8px;
  }

  .ace-site-svg-thumb {
    width: 38px;
    height: 32px;
  }

  /* Stepper de 4 pasos del Wizard Clínico en 1 sola fila compacta */
  .ace-wizard-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .ace-wizard-step-btn {
    padding: 7px 4px;
    font-size: 11px;
    justify-content: center;
    gap: 4px;
  }

  .ace-wizard-step-idx {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  /* Controles híbridos tipo volumen en /studio: botones táctiles cómodos */
  .ace-vol-step-btn {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  .ace-vol-num-input.ace-input {
    height: 30px;
    font-size: 14.5px;
  }

  /* Paso 3 de /studio: KPIs y Proyección 3D Antes/Después */
  .ace-studio-kpi-strip-4,
  .ace-future-deltas.ace-future-deltas-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ace-future-deltas.ace-future-deltas-4 .ace-future-delta-pill strong {
    white-space: normal;
    font-size: 11px;
  }

  .ace-studio-goal-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .ace-studio-goal-left {
    width: 100%;
    justify-content: space-between;
  }

  .ace-studio-goal-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .ace-studio-goal-chips .ace-btn-sm {
    width: 100%;
    justify-content: center;
  }

  .ace-studio-future-bar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 10px;
  }

  .ace-studio-future-bar .ace-future-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
  }

  .ace-studio-future-bar .ace-future-presets .ace-btn-sm {
    padding: 6px 4px;
    font-size: 11px;
    justify-content: center;
  }

  /* Pie de navegación del Wizard Clínico siempre en fila horizontal */
  .ace-wizard-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  /* Gráficas SaaS y Tablas Clínicas en /dashboard */
  .cz-charts-grid {
    grid-template-columns: 1fr;
  }

  .ace-table th,
  .ace-table td {
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Sub-vista /calculadora: Bienvenida, Wizard Zen, Espejo 3D y Mano 3D */
  .pn-calc-topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
  }

  .pn-welcome-hero-stage {
    padding: 24px 16px;
    border-radius: 18px;
  }

  .pn-welcome-main-title {
    font-size: clamp(24px, 7vw, 34px);
  }

  .pn-welcome-main-sub {
    font-size: 14px;
  }

  .pn-welcome-step-item {
    padding: 16px 14px;
  }

  #btnStartMacroWizard {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* Píldoras de 5 etapas del Wizard de Calculadora: barra horizontal deslizable */
  .pn-step-tabs.is-zen-pills {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px;
    gap: 4px;
  }

  .pn-step-tabs.is-zen-pills::-webkit-scrollbar {
    display: none;
  }

  .pn-step-tabs.is-zen-pills .pn-step-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 7px 12px;
    font-size: 12px;
  }

  .pn-zen-card,
  .pn-wizard-stage-card {
    padding: 20px 14px;
    border-radius: 18px;
  }

  .pn-zen-sex-toggle {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .pn-zen-foot {
    gap: 10px;
  }

  .pn-zen-continue-btn {
    padding: 12px 20px;
    font-size: 13.5px;
  }

  /* Resultados Etapa 5 en /calculadora: Espejo 3D Antes/Después compacto y legible */
  .pn-future-3d-card,
  .pn-dual-3d-viewport {
    padding: 12px 10px;
    border-radius: 14px;
  }

  .pn-dual-3d-chamber {
    padding: 10px;
  }

  .pn-future-3d-stage-wrap.is-dual-canvas-wrap,
  .pn-future-3d-stage-wrap.is-edu-stage {
    height: 265px;
  }

  .pn-dual-3d-vs-bridge {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    padding: 2px 0;
  }

  .pn-dual-3d-vs-bridge .pn-mirror-axis-line,
  .pn-dual-3d-vs-bridge .pn-vs-circle {
    display: none;
  }

  .pn-future-controls.is-minimal-bar {
    padding: 10px;
    gap: 8px;
  }

  .pn-future-controls.is-minimal-bar .pn-future-presets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .pn-future-controls.is-minimal-bar .pn-future-preset-btn {
    padding: 6px 4px;
    font-size: 11px;
    text-align: center;
  }

  .pn-future-slider-wrap.is-inline-slider {
    width: 100%;
    padding: 6px 10px;
  }

  /* Cuadrícula 2x2 para las 4 manos 3D en móvil (de un vistazo sin scroll interminable) */
  .pn-hand-portions-grid.is-4col-row,
  .fx-calc-hand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .pn-hand-portions-grid.is-4col-row .pn-hand-card {
    padding: 12px 10px;
  }

  .pn-hand-3d-box {
    height: 118px;
  }

  /* Sub-vistas /pricing, /checkout, /auth/register: Funnel Stepper horizontal deslizable */
  .ace-funnel-stepper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 10px;
  }

  .ace-funnel-stepper::-webkit-scrollbar {
    display: none;
  }

  .ace-funnel-step {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Sub-vista /tours: controles del director en matriz 2x2 y tarjeta flotante compacta */
  #ln-director-dock {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  #ln-director-dock .ace-btn {
    width: 100%;
    justify-content: center;
    font-size: 12px;
    padding: 8px 10px;
  }

  .ln-tour-card {
    max-height: 78dvh;
    overflow-y: auto;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: calc(100vw - 20px);
    padding: 14px;
  }

  /* Sub-vista /branding: tarjeta ejecutiva adaptable */
  .ace-bcard-mockup {
    padding: 16px 14px;
    max-width: 100%;
  }

  .ace-bcard-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Modal de Reporte Médico Clínico (InBody / ISAK Sheet) en móvil */
  .cz-med-report-overlay {
    padding: 8px;
  }

  .cz-med-report-toolbar {
    padding: 10px 12px;
    gap: 8px;
  }

  .cz-med-toolbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .cz-med-toolbar-actions > :first-child {
    grid-column: 1 / -1;
  }

  .cz-med-toolbar-actions .ace-btn {
    width: 100%;
    justify-content: center;
  }

  .cz-med-sheet {
    padding: 14px 12px;
    gap: 12px;
  }

  .cz-med-sheet-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
    gap: 10px;
  }

  .cz-med-sheet-score-box {
    width: 100%;
    align-items: flex-start;
  }

  .cz-med-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Botones flotantes inferiores (#btnHappyPathDemo y #btnChatLauncher) sin solaparse ni tapar contenido */
  .ace-floating-demo {
    left: 10px;
    right: auto;
    bottom: 10px;
    width: auto;
    max-width: calc(100vw - 155px);
    padding: 8px 12px;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ace-chat-widget-wrap {
    right: 10px;
    bottom: 10px;
    width: auto;
  }

  .ace-chat-drawer:not(.is-minimized) {
    width: calc(100vw - 20px);
    max-width: 360px;
    max-height: 76dvh;
  }
}

/* 6. Pantallas ultra-compactas (<= 380px) */
@media (max-width: 380px) {
  .pn-hand-portions-grid.is-4col-row,
  .fx-calc-hand-grid {
    grid-template-columns: 1fr;
  }
}