/* Intega · Pasada móvil y experiencia web app instalable.
   Cero valores hex: única fuente de verdad en tokens.css.
   Áreas táctiles >= 44px, safe area insets y prevención de scroll horizontal. */

@media (max-width: 720px) {
  /* ---------- Contención de desbordamiento horizontal ---------- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ---------- Layout móvil ---------- */
  .a-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .a-layout > main,
  .main {
    grid-column: auto;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    flex: 1;
    overflow-x: hidden;
    padding: var(--e4) calc(var(--e3) + env(safe-area-inset-right, 0px)) calc(var(--e6) + env(safe-area-inset-bottom, 0px)) calc(var(--e3) + env(safe-area-inset-left, 0px));
  }

  /* ---------- Barra lateral como fila superior ---------- */
  .a-sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    max-width: 100vw;
    height: auto;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    padding: calc(var(--e2) + env(safe-area-inset-top, 0px)) calc(var(--e3) + env(safe-area-inset-right, 0px)) var(--e2) calc(var(--e3) + env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--papel) 94%, var(--fondo));
    border-right: 0;
    border-bottom: 1px solid var(--linea);
    overflow-x: visible;
    overflow-y: visible;
  }

  .a-sidebar .a-brand {
    order: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    font-size: 24px;
    letter-spacing: -1px;
    padding: 0;
    margin: 0;
    flex: none;
    min-height: 44px;
  }

  .a-sidebar .a-brand .a-glyph {
    font-size: 22px;
  }

  /* Selector «MI ESPACIO» en la fila superior (revierte display: none de base.css) */
  .a-sidebar .a-workspace {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    width: auto;
    max-width: calc(100% - 130px);
    min-height: 44px;
    margin: 0;
    padding: var(--e1) var(--e3);
    background: color-mix(in srgb, var(--lima) 35%, var(--papel));
    border: 1px solid var(--linea);
    border-radius: var(--r2);
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }

  .a-sidebar .a-workspace small {
    display: block;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--grafito-2);
    line-height: 1.1;
  }

  .a-sidebar .a-workspace strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .a-sidebar .a-workspace > span {
    margin-left: auto;
    font-size: 12px;
    color: var(--grafito-2);
    padding-left: var(--e1);
  }

  /* Menú desplegable del selector de espacios */
  #workspaceMenu:not([hidden]) {
    order: 3;
    width: 100%;
    display: grid;
    gap: var(--e1);
    padding: var(--e2);
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--r2) var(--r2) 0 0;
    box-shadow: var(--sombra-2);
  }

  #workspaceMenu:not([hidden]) button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: var(--e2) var(--e3);
    font-size: 14px;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--r1);
    color: var(--grafito);
    cursor: pointer;
  }

  #workspaceMenu:not([hidden]) button[aria-current="true"] {
    background: var(--verde);
    color: var(--papel);
    font-weight: 600;
  }

  #workspaceMenu:not([hidden]) button:not([aria-current="true"]):hover,
  #workspaceMenu:not([hidden]) button:not([aria-current="true"]):focus-visible {
    background: color-mix(in srgb, var(--lima) 30%, var(--papel));
  }

  /* «Salir» accesible dentro del menú desplegable */
  .a-sidebar .a-side-bottom {
    display: none;
  }

  #workspaceMenu:not([hidden]) ~ .a-side-bottom {
    order: 4;
    width: 100%;
    display: block;
    margin: 0 0 var(--e2) 0;
    padding: var(--e2) var(--e3);
    background: var(--papel);
    border: 1px solid var(--linea);
    border-top: 1px dashed var(--linea);
    border-radius: 0 0 var(--r2) var(--r2);
    box-shadow: var(--sombra-2);
  }

  #workspaceMenu:not([hidden]) ~ .a-side-bottom .a-side-guide {
    display: none;
  }

  #workspaceMenu:not([hidden]) ~ .a-side-bottom .a-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    min-height: 44px;
  }

  #workspaceMenu:not([hidden]) ~ .a-side-bottom .a-user .a-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--verde) 15%, var(--papel));
    color: var(--verde);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex: none;
  }

  #workspaceMenu:not([hidden]) ~ .a-side-bottom .a-user > div {
    min-width: 0;
    flex: 1;
  }

  #workspaceMenu:not([hidden]) ~ .a-side-bottom .a-user strong {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #workspaceMenu:not([hidden]) ~ .a-side-bottom .a-user small {
    display: block;
    font-size: 10px;
    color: var(--grafito-2);
  }

  #workspaceMenu:not([hidden]) ~ .a-side-bottom #signOutBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 68px;
    padding: var(--e2) var(--e4);
    font-size: 13px;
    font-weight: 600;
    color: var(--alerta);
    background: color-mix(in srgb, var(--alerta) 8%, var(--papel));
    border: 1px solid color-mix(in srgb, var(--alerta) 25%, var(--papel));
    border-radius: var(--r1);
    cursor: pointer;
    flex: none;
  }

  /* Fila de navegación del espacio activo */
  .a-sidebar #navigation.a-nav {
    order: 5;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--e1);
    padding: var(--e1) 0 0;
    scrollbar-width: none;
  }

  .a-sidebar #navigation.a-nav::-webkit-scrollbar {
    display: none;
  }

  .a-sidebar #navigation.a-nav button,
  .a-sidebar #navigation.a-nav a {
    flex-shrink: 0;
    min-height: 44px;
    padding: var(--e2) var(--e3);
    font-size: 13px;
    white-space: nowrap;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--e2);
    border-radius: var(--r1);
    text-decoration: none;
  }

  #sidebarProjects {
    display: none;
  }

  /* ---------- Barra superior complementaria ---------- */
  .a-topbar {
    height: auto;
    min-height: 44px;
    padding: var(--e2) calc(var(--e3) + env(safe-area-inset-right, 0px)) var(--e2) calc(var(--e3) + env(safe-area-inset-left, 0px));
    flex-wrap: wrap;
    gap: var(--e2);
  }

  .a-topbar .a-miga {
    display: block;
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .a-topbar .a-chips {
    gap: var(--e1);
    flex-wrap: wrap;
    margin-left: auto;
  }

  .a-topbar .a-chip {
    min-height: 28px;
    padding: var(--e1) var(--e2);
    font-size: 10px;
  }

  /* ---------- Títulos y texto adaptados ---------- */
  h1,
  h2,
  h3,
  .view-title,
  .a-title,
  .subtitulo,
  .detalle-title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .a-title {
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -1px;
  }

  .view-title {
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.8px;
  }

  .a-sub {
    font-size: 13px;
    line-height: 1.5;
    max-width: 100%;
  }

  /* ---------- Hero a una columna ---------- */
  .a-hero {
    min-height: 0;
    padding: var(--e5) var(--e4);
    border-radius: var(--r2);
    width: 100%;
    overflow: hidden;
  }

  .a-hero .a-hero-art {
    display: none;
  }

  .a-hero .a-title {
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    max-width: 100%;
    margin: var(--e3) 0 var(--e2);
  }

  .a-hero p {
    max-width: 100%;
    font-size: 13px;
    margin-bottom: var(--e4);
  }

  .a-hero .a-boton {
    min-height: 44px;
    width: 100%;
    justify-content: center;
  }

  /* ---------- Tiles a una columna ---------- */
  .a-tiles {
    grid-template-columns: 1fr;
    gap: var(--e2);
    width: 100%;
  }

  .a-tile {
    min-height: 44px;
    width: 100%;
  }

  /* ---------- Espacio: Vista general ---------- */
  .general-notificaciones {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .general-notificaciones .a-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e2);
    padding: var(--e4);
    margin-bottom: var(--e2);
    width: 100%;
  }

  .general-notificaciones .a-card p {
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .general-notificaciones .a-card button,
  .general-notificaciones .a-card .btn {
    min-height: 44px;
    min-width: 44px;
    padding: var(--e2) var(--e4);
    align-self: flex-start;
  }

  /* ---------- Espacio: Personal (Mi vida) ---------- */
  .vida-cuerpo {
    grid-template-columns: 1fr;
    gap: var(--e4);
    width: 100%;
  }

  .vida-rejilla {
    grid-template-columns: 1fr;
    gap: var(--e3);
    width: 100%;
  }

  .vida-rubro {
    padding: var(--e4);
    width: 100%;
  }

  .vida-rubro-archivo {
    flex-wrap: wrap;
    gap: var(--e1);
  }

  .vida-rubro-ruta {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  .vida-pendiente {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e2);
    padding: var(--e3) 0;
  }

  .vida-btn-hecho {
    min-height: 44px;
    width: 100%;
    justify-content: center;
  }

  .vida-conv-form {
    width: 100%;
  }

  .vida-conv-campo {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
  }

  .vida-conv-enviar {
    min-height: 44px;
    width: 100%;
    justify-content: center;
  }

  .vida-msg {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ---------- Espacio: Empresarial ---------- */
  .ob-grid,
  .panorama-grid,
  .form-grid,
  .cu-form,
  .detalle-meta {
    grid-template-columns: 1fr;
    gap: var(--e3);
    width: 100%;
  }

  .entity-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e2);
    padding: var(--e3) 0;
    width: 100%;
  }

  .entity-row .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
  }

  .entity-row .actions .btn,
  .entity-row .actions button {
    min-height: 44px;
    min-width: 44px;
    padding: var(--e2) var(--e4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .home-projects .home-company {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e2);
    padding: var(--e3) 0;
  }

  .home-company-btn,
  .home-project-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .pipeline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    padding: 0;
    list-style: none;
  }

  .pipeline li {
    min-height: 36px;
    padding: var(--e1) var(--e2);
    display: inline-flex;
    align-items: center;
  }

  .stats {
    flex-direction: column;
    gap: var(--e3);
  }

  .filtros {
    flex-direction: column;
    padding: var(--e4);
    gap: var(--e3);
  }

  .filtros .field,
  .filtros .buscar {
    min-width: 0;
    width: 100%;
  }

  /* ---------- Tarjetas y paneles ---------- */
  .login-card,
  .home-dashboard,
  .structure-dashboard,
  #workspaceView,
  #loginView,
  #inviteView {
    max-width: 100%;
    width: 100%;
    padding: var(--e4);
    margin: var(--e4) auto;
  }

  .modal,
  .detalle,
  dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  /* ---------- Áreas táctiles >= 44px en controles interactivos ---------- */
  button,
  .btn,
  .a-nav button,
  .a-nav a,
  .tree-title-btn,
  #breadcrumb button,
  .notice-link,
  summary {
    min-height: 44px;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .field label,
  .selector label {
    padding: var(--e1) 0;
  }

  /* ---------- Tarjeta de guía fija abajo con safe area ---------- */
  .guia-card {
    position: fixed;
    top: auto;
    left: calc(var(--e3) + env(safe-area-inset-left, 0px));
    right: calc(var(--e3) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: calc(100vw - 24px);
    z-index: 60;
  }

  .guia-card button,
  .guia-card .guia-saltar,
  .guia-card .guia-reanudar {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---------- Movimiento reducido respetado ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}