/* ======================================================================
   HUB — AJUSTES PARA TABLET (761–1180 px) — Fase BC (13-oct-2026)
   Pedido de Brayan: "los datos del paciente se ven muy mal en tamaño
   tablet (iPad) — en teléfono y PC se ven bien. Sugiero que la info se
   vuelva iconos y al pasar el mouse o tocar en móviles se vea una ventana
   flotante con la info completa sin invadir la pantalla completa."
   - Solo aplica en el rango tablet: celular (≤760) y PC (≥1181) intactos.
   - El JS que acompaña (js/hub-tablet.js) marca cada dato del encabezado
     con .meta-item / .mi-txt y maneja la ventanita (#meta-pop).
   ====================================================================== */
@media (min-width: 761px) and (max-width: 1180px) {
  /* Encabezado del expediente: avatar + nombre arriba; íconos y acciones abajo */
  .exp-header { flex-wrap: wrap; align-items: center; row-gap: 10px; column-gap: 12px; }
  .exp-title { flex: 1 1 260px; min-width: 0; }
  .exp-title h2 {
    font-size: 18px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }

  /* Datos → íconos redondos */
  .exp-title .meta { gap: 6px; margin-top: 8px; }
  .exp-title .meta .meta-item {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
    background: var(--panel-2, #f3f5fa); border: 1px solid var(--border, #e6e8f0);
    color: var(--ink-soft, #4b5563); font-size: 14px; position: relative;
    transition: background .15s, border-color .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .exp-title .meta .meta-item:hover,
  .exp-title .meta .meta-item.abierto,
  .exp-title .meta .meta-item:focus-visible {
    border-color: var(--accent, #6d5efc); color: var(--accent, #6d5efc); background: #fff; outline: none;
  }
  .exp-title .meta .meta-item .mi-txt { display: none; }
  .exp-title .meta .meta-item i { margin: 0; }
  /* Cumpleaños hoy: punto de aviso sobre el ícono */
  .exp-title .meta .meta-item.cumple::after {
    content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px;
    border-radius: 50%; background: #f59e0b; border: 2px solid #fff;
  }

  /* Botones del encabezado → solo ícono (el texto queda en title/aria-label) */
  .exp-header > .btn { font-size: 0; padding: 10px 12px; gap: 0; }
  .exp-header > .btn i { font-size: 15px; margin: 0; }
  .exp-header > .btn span { display: none; }

  /* Fila de estadísticas: 5 columnas no caben con el menú lateral */
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  .stat-strip.cols-6 { grid-template-columns: repeat(3, 1fr); }

  /* Pestañas del expediente: desplazamiento horizontal en vez de amontonarse */
  #exp-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  #exp-tabs::-webkit-scrollbar { display: none; }
  #exp-tabs .tab-btn { flex: 0 0 auto; }
}

/* Ventanita flotante (se usa solo en el rango tablet; ver hub-tablet.js) */
#meta-pop {
  position: fixed; z-index: 9999; max-width: min(300px, calc(100vw - 24px));
  background: #fff; color: var(--ink, #111827); border: 1px solid var(--border, #e6e8f0);
  border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(16, 20, 37, .35);
  padding: 10px 12px; font-size: 13px; line-height: 1.45;
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .12s, transform .12s;
}
#meta-pop.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#meta-pop .mp-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint, #8a90a2); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
#meta-pop .mp-valor { word-break: break-word; }
#meta-pop .mp-acciones { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
#meta-pop .mp-acciones a, #meta-pop .mp-acciones button {
  font: inherit; font-size: 12px; padding: 5px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border, #e6e8f0); background: var(--panel-2, #f6f7fb); color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
#meta-pop .mp-flecha { position: absolute; width: 10px; height: 10px; background: #fff; border-left: 1px solid var(--border, #e6e8f0); border-top: 1px solid var(--border, #e6e8f0); transform: rotate(45deg); top: -6px; }
#meta-pop.arriba .mp-flecha { top: auto; bottom: -6px; transform: rotate(225deg); }

/* iPad vertical (761–1024): nombre + íconos a todo lo ancho; botones y
   chips de estado bajan a su propia fila, alineados a la izquierda. */
@media (min-width: 761px) and (max-width: 1024px) {
  .exp-title { flex: 1 1 calc(100% - 72px); }
  .exp-header > .btn, .exp-header > .chip { order: 2; }
  .exp-header > .btn:first-of-type { margin-left: 68px; }
}

/* ======================================================================
   HUB — CELULAR: pestañas que no desbordan y sin zoom automático
   (16-oct-2026). Reporte de Brayan (iPhone/Safari): en el expediente el menú
   de pestañas se salía de la pantalla y, al tocar un campo, Safari hacía
   zoom y dejaba la página desplazada. Dos causas:
   1) .tabs era un flex sin overflow: con 8 pestañas el contenedor se
      ensanchaba más que la pantalla (solo se había arreglado entre 761 y
      1180 px). Ahora TODA fila de pestañas se desplaza horizontalmente.
   2) iOS hace zoom al enfocar un campo con letra < 16 px. En celular los
      campos usan 16 px (se ve igual de bien y Safari ya no acerca la página).
   ====================================================================== */
.tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab-btn { flex: 0 0 auto; white-space: nowrap; }
.main { min-width: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, select, label, summary, [role="button"], .tab-btn, .nav-item { touch-action: manipulation; } /* sin zoom por doble toque */

@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select, textarea { font-size: 16px !important; }
  /* El expediente traía 32 px laterales fijos (estilo en línea): en celular
     sobran y empujan el contenido; abajo se deja espacio para el menú flotante. */
  #view-expediente > div[style*="26px 32px"] { padding: 16px 14px 96px !important; }
  #exp-tabs { margin-left: -2px; margin-right: -2px; }
  #exp-tabs .tab-btn { margin-right: 18px; }
}