/* 05-RESPONSIVE — todas las @media en orden original. SIEMPRE el último CSS. */
@media(max-width:480px){ .auth-box { padding:36px 24px 28px;border-radius:18px; } }
@media(min-width:640px){.cuenta-fichas{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){
  .empty-state{min-height:360px;padding:36px 18px;}
  .empty-state-icon{width:160px;}
}
@media (max-width: 768px) {
  body { overflow-x: hidden; }

  /* MiVitae Connect: mismo breakpoint que oculta .sidebar-desktop, así el
     acceso al conector nunca queda huérfano. En desktop sigue solo el sidebar. */
  .dash-connect-mobile { display: flex; }

  /* ── HEADER: grid de 3 filas ── */
  header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand  user"
      "sync   sync"
      "search search";
    gap: 8px 12px;
    padding: 12px 16px;
    align-items: center;
  }

  .hdr-brand       { grid-area: brand; }
  #syncStatus      { grid-area: sync; justify-self: start; }
  .hdr-tools-aligned { grid-area: search; margin-left: 0; gap: 8px; }
  .hdr-global-actions { grid-area: user; gap: 0; }

  /* ocultar herramientas secundarias del header */
  #privacyBtnGlobal,
  .hdr-tools-aligned > div:not(.hdr-search-wrap):not(.hdr-mobile-tools) { display: none; }
  .hdr-mobile-tools > button:first-child { display: none; }

  /* ocultar slot de acción contextual (no hay espacio en mobile) */
  .header-action-slot { display: none; }

  /* fila de herramientas: Resumen médico 40% + buscador 60% */
  #btn-descargar-pdf { flex: 2; justify-content: center; height: 42px; }
  .hdr-search-wrap { flex: 3; }
  .hdr-search-input { height: 42px; }

  /* ocultar nombre de usuario — solo mostrar avatar */
  .user-name-label { display: none; }

  /* ── NAV ── */
  .nav-tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding: 0 16px;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }

  .filter-bar {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .filter-bar::-webkit-scrollbar { display: none; }

  /* ── CONTENIDO ── */
  main { max-width: none; padding: 16px; }

  /* ── STATS ── */
  .stats { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr !important; gap: 8px; }

  /* ── DASHBOARD ── */
  /* NOTA (split jul 2026): en el styles.css original estas 4 declaraciones (grid-template-columns
     de .dash-kpis/.dash-row/.dash-health-grid + gap de .dash-kpis) estaban ANTES de las bases del
     dashboard y por eso HOY las pisa la base en 641–768px (y el bloque 640 en ≤640). Se comentan
     para preservar el comportamiento pixel-exacto pre-split. Descomentar = activar el layout
     mobile "intencionado" también en tablet (641–768px). */
  #viewInicio { width: 100%; max-width: 100%; overflow-x: hidden; }
  .dash-kpis { /* grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; */ width: 100%; }
  .dash-kpi { min-width: 0; overflow: hidden; }
  .dash-kpi > div { min-width: 0; overflow: hidden; }
  .dash-kpi-label, .dash-kpi-num, .dash-kpi-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* .dash-row { grid-template-columns: 1fr; } */
  .dash-card { min-width: 0; width: 100%; max-width: 100%; overflow: hidden; }
  .dash-act-item > div { min-width: 0; }
  .dash-act-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  /* .dash-health-grid { grid-template-columns: 1fr; } */
  .dash-health-item { min-width: 0; overflow: hidden; }
  .dash-health-val { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
  .dash-emerg { width: 100%; max-width: 100%; overflow: hidden; flex-wrap: wrap; gap: 8px; }

  /* ── FICHA Y FORMULARIOS ── */
  .ficha-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  /* ── LISTAS — evitar overflow horizontal ── */
  .med-item, .tl-item, .tl2-item, .tl2-card, .dash-act-item { min-width: 0; }
  .med-nombre, .dash-act-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── EXÁMENES: tabla → cards ── */
  #viewLista table { display: none; }
  #examMobileCards { display: block; }
  .exam-mobile-card { background:#fff; border:0.5px solid #d0dff0; border-radius:10px; padding:12px 14px; margin-bottom:8px; cursor:pointer; }
  .exam-mobile-card .emc-tipo { font-size:9px; color:#aab8cc; letter-spacing:1.5px; font-weight:600; margin-bottom:3px; }
  .exam-mobile-card .emc-nombre { font-size:13px; font-weight:500; color:#1a2a3a; margin-bottom:3px; }
  .exam-mobile-card .emc-detalle { font-size:11px; color:#7a9ab8; margin-bottom:8px; }
  .exam-mobile-card .emc-footer { display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:0.5px solid #e8f0f8; }
  .exam-mobile-card .emc-actions { display:flex; gap:6px; align-items:center; }
  #examMobileCards.privacy-mode .emc-nombre,
  #examMobileCards.privacy-mode .emc-detalle,
  #examMobileCards.privacy-mode .emc-footer { filter: blur(4px); user-select: none; pointer-events: none; transition: filter 0.2s; }

  /* ── OVERFLOW GLOBAL ── */
  html { max-width: 100%; overflow-x: hidden; }

  /* ── MEDICAMENTOS: tabs + botón interacciones en columna ── */
  #viewMedicamentos > div:nth-child(2) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
  }
  #viewMedicamentos > div:nth-child(2) > .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── MED-ITEM: layout vertical en mobile ── */
  .med-item {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* inner row (texto | acciones) → columna */
  .med-item > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    width: 100%;
    min-width: 0;
  }

  /* bloque de texto: sin ancho fijo */
  .med-item > div:first-child > div:first-child {
    flex: none !important;
    width: 100%;
    min-width: 0;
  }

  /* nombre: permite wrap */
  .med-nombre {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
  }

  /* detalle: permite wrap */
  .med-detalle {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* bloque de acciones (badge + botones): wrap en fila, no se sale */
  .med-item > div:first-child > div:last-child {
    flex-shrink: 1 !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px 8px;
    width: 100%;
    min-width: 0;
  }

  .med-item .btn, .med-item .btn-ghost, .med-item .btn-danger {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ── RECETAS: layout vertical en mobile ── */
  #recetasList .med-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* bloque de texto: ocupa ancho completo */
  #recetasList .med-item > div:first-child {
    flex: none !important;
    width: 100%;
    min-width: 0;
  }

  /* med-nombre en recetas: wrap */
  #recetasList .med-nombre {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
  }

  /* bloques de detalle: wrap */
  #recetasList .med-detalle {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* bloque de acciones (PDF + editar + eliminar): fila inferior que wrappea */
  #recetasList .med-item > div:last-child {
    flex-shrink: 1 !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    gap: 6px 8px;
    width: 100%;
    min-width: 0;
  }

  #recetasList .med-item .btn,
  #recetasList .med-item .btn-ghost,
  #recetasList .med-item .btn-danger,
  #recetasList .med-item .pdf-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ── MÉDICOS: layout vertical en mobile ── */
  .medico-item { flex-direction: column; }
  .medico-actions { width: 100%; justify-content: flex-start; margin-top: 8px; }
  .medico-notas { max-width: 100%; overflow-wrap: anywhere; }

  /* ── HEADER MOBILE: botones icono y tools ── */
  .hdr-icon-btn { display: flex; }
  #privacyBtnMobile { display: flex; }
  .hdr-mobile-tools { display: none; }
  .hdr-search-wrap { display: flex; }

  /* ── BARRAS DE ACCIÓN DE MÓDULO ── */
  .module-action-bar { display: flex; }
  #viewVacunas .section-header { display: none; }
  #habitosBottomBtn { display: none; }
}
@media(max-width:640px){
  .dash-hero-main{grid-template-columns:1fr;padding:18px 16px;gap:20px;}
  .dash-hero-profile{padding-right:0;}
  .dash-quick{border-left:none;padding-left:0;border-top:1px solid #eef3f9;padding-top:16px;}
  .dash-hero-avatar{width:44px;height:44px;font-size:16px;}
  .dash-hero-title{font-size:18px;}
  .dash-last-visit{padding:12px 16px;flex-wrap:wrap;gap:8px;}
  .dash-kpis{grid-template-columns:1fr 1fr;}
  .dash-row{grid-template-columns:1fr;}
  .dash-health-grid{grid-template-columns:1fr;}
  /* MiVitae Connect en móvil: el flujo es 100% web, así que el portal se abre
     en una pestaña del mismo teléfono. */
  .conectar-grid{grid-template-columns:1fr;}
  .conectar-acciones{flex-direction:column-reverse;}
  .conectar-acciones .btn{width:100%;justify-content:center;}
}
@media (min-width: 769px) {
  #appScreen {
    /* 12px margen + 220px sidebar flotante + 12px de aire hasta el contenido */
    padding-left:244px;
  }

  header {
    background:#f0f4f9; /* mismo gris del body: header integrado a la página */
  }

  /* Sobre el header gris el fondo #f5f8fc del input se pierde — blanco para contrastar */
  .hdr-search-input { background:#fff; }

  .header-action-slot { display:none; }
  #logoutMenu { display:none !important; }
  .side-logo { border-bottom:none; padding-top:22px; text-align:center; }
  .side-logo img { height:38px; margin:0 auto; }
  .side-nav-item { padding:11px 12px; }
  .side-nav { gap:4px; }
  #btn-descargar-pdf { background:#378add; color:#fff; border:none; }
  #btn-descargar-pdf i { color:#fff; }
  #privacyIconGlobal { color:#185fa5; }

  .sidebar-desktop {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:12px;
    left:12px;
    bottom:12px;
    width:220px;
    background:#fff;
    border:0.5px solid #d0dff0;
    border-radius:16px;
    box-shadow:0 8px 24px rgba(26,42,58,0.06);
    z-index:60;
  }

  .nav-tabs {
    display:none;
  }

  .hdr-brand {
    display:none;
  }

  .hdr-search-wrap {
    width:clamp(360px, 30vw, 560px);
  }

  main {
    max-width:1180px;
  }
}
@media (max-width: 768px) {
  .dash-health-grid-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-health-grid-icons .dash-health-item-icon {
    min-height: 84px;
  }

  .dash-health-grid-icons .dash-health-item-icon:nth-child(3n+1),
  .dash-health-grid-icons .dash-health-item-icon:nth-child(3n+2) {
    border-right: none;
  }

  .dash-health-grid-icons .dash-health-item-icon:nth-child(odd) {
    border-right: 1px solid #eef3f9;
  }

  .dash-health-grid-icons .dash-health-item-icon:nth-child(n+4) {
    border-bottom: 1px solid #eef3f9;
  }

  .dash-health-grid-icons .dash-health-item-icon:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .dash-health-copy {
    grid-template-rows: 24px auto;
  }
}