/* App shell, topbar, sidebar and route modes
   Extracted from index.html to keep PWA visual ownership explicit. */

/* ================================
       App Shell (vNext) — overrides
       - Mantiene el look actual de .card/.btn, pero cambia el layout a "app" (topbar + sidebar + main).
       - Importante: NO elimina estilos existentes; solo los ajusta para full-height y contenedor central.
    ================================= */

    html, body { height: 100%; }

    body{
      margin:0;
      max-width:none;
      background:var(--surface-page);
      color:var(--text-primary);
      overflow-x:hidden;
    }

    .app-shell{
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }

    .topbar{
      position:sticky;
      top:0;
      z-index:70;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--space-control-x);
      padding:var(--space-5) var(--space-6);
      background:var(--surface-card);
      border-bottom:1px solid var(--border-subtle);
    }

    .brand{display:flex;flex-direction:column;gap:2px}
    .brand-title{font-weight:var(--font-weight-extrabold);letter-spacing:.2px}
    .brand-subtitle{font-size:var(--font-size-xs);color:var(--text-muted); display:none; }

    .topbar-context{
      flex:1;
      min-width:120px;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:2px;
      padding-left:var(--space-4);
      border-left:1px solid var(--border-subtle);
    }
    .context-alias{font-weight:var(--font-weight-bold)}
    .context-hint{font-size:var(--font-size-xs);color:var(--text-muted)}

/* --- Selector de persona (header) — iOS-like popover (solo CSS) --- */
.topbar-context{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  width:fit-content;
}


/* Botón del selector (dos líneas, compacto) */
.topbar-context-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2);
  padding:var(--space-4) var(--space-5);
  margin:0;
  background: rgba(255, 255, 255, 0.9);
  border:1px solid rgba(15, 23, 42, 0.08);
  border-radius:var(--radius-xl);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  cursor:pointer;
  text-align:left;
  line-height:1.1;
}
.topbar-context-btn:focus-visible{
  outline:2px solid rgba(37,99,235,.35);
  outline-offset:4px;
}
.context-alias{
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-bold);
  letter-spacing:-0.01em;
  color:var(--text-primary);
}
.context-hint{
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  color: rgba(15, 23, 42, 0.62);
}
.context-activity{
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-medium);
  color:var(--text-muted);
  max-width:220px;
  line-height:1.25;
}

/* Popover */
.topbar-context-menu{
  position:absolute;
  top:calc(100% + 10px); /* espacio para la "nub" */
  left:50%;
  right:auto;
  transform: translateX(-50%);
  min-width:220px;
  width:min(280px, calc(100vw - 32px));
  max-height: min(70vh, 420px);
  background: var(--overlay-panel);
  border:1px solid rgba(15, 23, 42, 0.08);
  border-radius:var(--radius-3xl);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow:var(--shadow-popover);
  padding:var(--space-3);
  overflow: visible; /* permite la nub */
  z-index:80;
  transform-origin: top center;
  display:flex;
  flex-direction:column;
}

.topbar-context-menu[hidden]{
  display:none !important;
}

.topbar-context-menu::before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  transform: translateX(-50%);
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid var(--overlay-panel);
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.10));
}

.topbar-context-menu::after{
  content:"";
  position:absolute;
  top:-11px;
  left:50%;
  transform: translateX(-50%);
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-bottom:11px solid rgba(15, 23, 42, 0.08);
  z-index:-1;
}

.topbar-context-menu:not([hidden]){
  animation: shellPopoverIn 140ms ease-out;
}
@keyframes shellPopoverIn{
  from { opacity:0; transform: translateY(-6px) scale(0.98); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Lista simple */
.topbar-context-list{
  list-style:none;
  padding:var(--space-2);
  margin:0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  max-height: min(34vh, 200px);
}

/* Items: renderizados como <li><div class="topbar-context-item">...</div></li> */
.topbar-context-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding:var(--space-5);
  border-radius:var(--radius-lg);
  cursor:pointer;
  user-select:none;
  font-size:var(--font-size-xl);
  font-weight:var(--font-weight-bold);
  letter-spacing:-0.01em;
  color:var(--text-primary);
}
.topbar-context-item:hover{
  background: rgba(15, 23, 42, 0.04);
}
.topbar-context-item:active{
  background: rgba(15, 23, 42, 0.06);
}
.topbar-context-item.active{
  background: rgba(37, 99, 235, 0.08);
}
.topbar-context-item.muted{
  cursor:default;
  color:var(--text-muted);
  font-size:var(--font-size-md);
  font-weight:var(--font-weight-semibold);
  letter-spacing:0;
}
.topbar-context-item-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 220px;
}
.topbar-context-item-check{
  font-size:18px;
  color:var(--color-primary);
  flex:0 0 auto;
}

/* Footer + botón Conectar persona */
.topbar-context-footer{
  border-top:1px solid rgba(15, 23, 42, 0.06);
  margin-top:8px;
  padding:var(--space-4) var(--space-2) var(--space-2);
  display:flex;
  background: rgba(255, 255, 255, 0.7);
}



.topbar-context-footer .btn{
  width:100%;
  padding:var(--space-5) var(--space-control-x);
  border-radius:var(--radius-xl);
  border:1px solid rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.06);
  color:var(--color-primary);
  font-weight:var(--font-weight-extrabold);
  font-size:var(--font-size-xl);
  letter-spacing:-0.01em;
}

.topbar-context-footer .btn:active{
  background: rgba(37, 99, 235, 0.12);
}


    /* Estado de conexión: alias + estado en azul cuando hay contexto activo */
    .topbar-context.connected .context-alias,
    .topbar-context.connected .context-hint{ color:var(--color-info); }
/* Al navegar/scroll a secciones, evita que la topbar fija las tape */
    .card{ scroll-margin-top: calc(var(--topbar-h) + var(--space-5)); }

    html{ scroll-padding-top: calc(var(--topbar-h) + var(--space-5)); }

    .topbar-actions{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:var(--space-1);
    }
    .talk-hint{
      font-size:var(--font-size-xs);
      color:var(--text-muted);
      max-width:320px;
      text-align:right;
      line-height:1.3;
    
      display:none;
    }

    .shell-body{
      flex:1;
      min-height:0;
      display:flex;
    }

    .sidebar{
      width:240px;
      flex:0 0 240px;
      background:var(--surface-card);
      border-right:1px solid var(--border-subtle);
      padding:var(--space-5);
      display:flex;
      flex-direction:column;
      gap:var(--space-4);
    }

    .nav-group{display:flex;flex-direction:column;gap:var(--space-3)}
    .nav-group-account{margin-top:var(--space-control-x)}
    .nav-label{font-size:var(--font-size-xs);color:var(--text-muted);margin:var(--space-1) var(--space-1) 0}
    .nav-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      text-align:left;
      width:100%;
      padding:var(--space-4) var(--space-5);
      border-radius:var(--radius-lg);
      border:1px solid var(--border-subtle);
      background:var(--surface-muted);
      cursor:pointer;
      font-weight:var(--font-weight-semibold);
    }

    .nav-badge{
      font-weight:var(--font-weight-extrabold);
      font-size:var(--font-size-xs);
      padding:2px var(--space-3);
      border-radius:var(--radius-pill);
      background: rgba(15,23,42,.08);
      color:var(--text-primary);
      min-width: 22px;
      text-align:center;
    }
    .nav-item:disabled{
      opacity:.55;
      cursor:not-allowed;
    }

    .nav-foot{
      margin-top:auto;
      padding-top:var(--space-4);
      border-top:1px solid var(--border-subtle);
    }
    .muted{color:var(--text-muted)}
    .nav-foot-note{font-size:var(--font-size-xs); line-height:1.3}

    .shell-main{
      flex:1;
      min-width:0;
      overflow:auto;
      padding:var(--space-6);
    }

    .content{
      max-width:980px;
      margin:0 auto;
    }

    /* Ajuste visual: el título grande pasa al topbar */
    h1{ display:none; }

    /* Cards: mantienen estilo, pero ajustamos margen vertical para el nuevo layout */
    .card{ margin:var(--space-5) 0; }

    

/* Modo "Pauta de medicación": al navegar a Medicinas mostramos solo el contenido relevante. */
body.route-meds #secProfile,
body.route-meds #secPatients,
body.route-meds #secLink,
body.route-meds #secTokenDebug{
  display:none !important;
}
body.route-meds #linkInfoCard{
  display:none !important;
}
body.route-meds #secPatientDetail > h2,
body.route-meds #secPatientDetail > p,
body.route-meds #secPatientDetail > .row{
  display:none !important;
}

/* Responsive: en móvil la sidebar se oculta (volverá como drawer/bottom-nav más adelante) */
    /* Robustez cross-device (iOS/Android): controles de formulario no deben desbordar el contenedor. */
input, select, textarea{
  box-sizing:border-box;
  max-width:100%;
}
.med-form-grid .med-form-field{ min-width:0; }
.med-form-grid input,
.med-form-grid select,
.med-form-grid textarea{
  width:100%;
}
.med-form-grid input[type="file"]{
  display:block;
}

    /* Responsive (móvil): la sidebar pasa a ser un drawer (overlay) controlado por #navToggle.
   - No requiere JS (checkbox hack).
   - El cierre se hace tocando el overlay o el mismo botón ☰.
   - En desktop la sidebar se mantiene fija.
*/
.nav-toggle{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.nav-hamburger{
  display:none; /* desktop */
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  line-height:1;
  font-size:18px;
}


.nav-icon{
  width:28px;
  height:28px;
  display:block;
  object-fit:contain;
}

.drawer-overlay{ display:none; }

/* Ajustes de wrap para evitar overflow horizontal (especialmente en iOS) */
.med-item, .patient-item{ min-width:0; }
.med-subtitle, .med-note, .patient-id{ overflow-wrap:anywhere; word-break:break-word; }

@media (max-width: 840px){
  :root{ --topbar-h: 120px; }
  .nav-hamburger{ display:inline-flex; }

  /* Drawer sidebar */
  .sidebar{
    display:flex;
    position:fixed;
    left:0;
    top:var(--topbar-h);
    height:calc(100dvh - var(--topbar-h));
    width:260px;
    max-width:86vw;
    transform:translateX(-110%);
    transition:transform .2s ease;
    z-index:66;
    box-shadow:var(--shadow-shell);
  }

  /* Overlay para cerrar al tocar fuera */
  .drawer-overlay{
    display:none;
    position:fixed;
    left:0;
    right:0;
    top:var(--topbar-h);
    bottom:0;
    background:var(--overlay-drawer);
    z-index:65;
  }

  /* Estado abierto */
  #navToggle:checked ~ .shell-body .sidebar{ transform:translateX(0); }
  #navToggle:checked ~ .shell-body .drawer-overlay{ display:block; }

  /* Topbar por encima del overlay */
  .topbar{
    align-items:center;
    z-index:70;
  }

  .topbar-actions{ align-items:center; }
  .talk-hint{ display:none; }
  .topbar-context{ border-left:none; padding-left:0; }

  .shell-main{ padding:var(--space-5); }

  /* Meds: en móvil apilamos el contenido del item para que acciones y texto no se salgan */
  #medsList .med-item{
    flex-direction:column;
    align-items:stretch;
  }
  #medsList .med-thumb{
    width:64px;
    height:64px;
  }
  #medsList .btn{
    white-space:normal;
  }

  /* Formularios en móvil: controles a ancho completo */
  .med-form-grid{ grid-template-columns: 1fr !important; }
  .med-form-field{ min-width:0; }
  select, input{ width:100%; max-width:100%; }
}
  
    #medsForm{ scroll-margin-top: calc(var(--topbar-h) + var(--space-5)); }