/* Mi nota: Capa para celular y app instalada CovAi.
   Va después de app.css; en computadora casi no cambia nada. */

/* ── Instalar CovAi (login) ─────────────────────────────── */
.pwa-install { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border, #e2e8f0); }
.pwa-install[hidden] { display: none; }
.pwa-install-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 46px; padding: 10px 14px;
  background: #fff; color: #1c4886;
  border: 1.5px solid #1c4886; border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pwa-install-btn img { border-radius: 50%; flex: none; }
.pwa-install-btn:hover { background: #e8f1fb; }
.pwa-ios-guide { margin-top: 12px; padding: 12px 14px; background: #f0f4f8; border-radius: 12px; color: #10233f; font-size: 13.5px; line-height: 1.5; text-align: left; }
.pwa-ios-guide[hidden] { display: none; }
.pwa-ios-guide ol { margin: 0; padding-left: 20px; }
.pwa-ios-guide li + li { margin-top: 6px; }
.pwa-ios-guide svg { vertical-align: -3px; color: #1c4886; }
.pwa-ios-other { margin: 0 0 8px; }
body.dark-mode .pwa-install-btn { background: transparent; color: #b8d5ff; border-color: #74a8f4; }
body.dark-mode .pwa-ios-guide { background: rgba(255,255,255,.06); color: #e2eaf4; }

/* ── Tablas: se deslizan de lado en lugar de desbordar la página ── */
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── App instalada: respetar la muesca y la barra inferior del iPhone ── */
html.is-standalone .topbar-auth { padding-top: max(10px, env(safe-area-inset-top)); }
html.is-standalone .sidebar { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
html.is-standalone .content { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
html.is-standalone .login-shell { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

/* ── Tablet y laptop chica: la barra superior no cabe completa ── */
@media (max-width: 1280px) {
  /* "Última sincronización" ocupa mucho; en pantallas medianas se omite */
  .topbar-actions > span { display: none; }
}
@media (max-width: 1100px) {
  .topbar > div:first-child { flex: 1 1 auto; min-width: 0; }
  .topbar > div:first-child > div { min-width: 0; }
  .topbar-actions { flex: none; gap: 10px; }
  .topbar h1 {
    font-size: 17px; line-height: 1.2;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden;
  }
  .user-menu-name, .user-menu-caret { display: none; }

  /* Pantallas con columnas de ancho fijo */
  .xml-cleaner { grid-template-columns: 1fr !important; }
  .xml-cleaner__form { grid-template-columns: minmax(0, 1fr) auto !important; }
  .soporte-toolbar { display: flex !important; flex-wrap: wrap; }
  .soporte-toolbar > * { flex: 1 1 170px; min-width: 0; }
  .soporte-toolbar > .soporte-reset { flex: 0 0 auto; }
}
@media (max-width: 960px) {
  .topbar-title-prefix { display: none; }
  .topbar .eyebrow { display: none; }
}

/* ── Celular ──────────────────────────────────────────────── */
@media (max-width: 960px) {
  html.is-standalone .main-auth { padding-top: calc(54px + env(safe-area-inset-top)); }
  html, body { -webkit-text-size-adjust: 100%; }
  /* Evita el zoom automático de iPhone al tocar un campo */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
  button, .button, .button-secondary, select { min-height: 40px; }
  /* Filtros: listas normales y de varias casillas con la misma letra */
  .content select.input, .content summary.input { font-size: 16px !important; font-weight: 500 !important; min-height: 42px; }
  .content canvas { max-width: 100% !important; }
  img, svg, video { max-width: 100%; }
}

@media (max-width: 640px) {
  /* Botón Actualizar datos visible en celular, como botón redondo junto a la foto */
  .topbar-actions > #full-resync-form { display: block; }
  .topbar-actions { gap: 8px; }
  #full-resync-form .button-resync {
    width: 40px; height: 40px; min-height: 40px; padding: 0;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 19px; line-height: 1;
  }
  #full-resync-form .resync-label { display: none; }

  .content { padding: 14px 12px !important; }

  /* Título de la barra: deja su lugar a los botones de la derecha */
  .topbar > div:first-child { flex: 1 1 auto; min-width: 0; }
  .topbar > div:first-child > div { min-width: 0; }
  .topbar-actions { flex: none; }
  /* Título de la barra: un renglón; si es largo, dos renglones parejos (sin cortar palabras) */
  .topbar h1 {
    font-size: 15px; line-height: 1.2; letter-spacing: -.01em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; white-space: normal; overflow-wrap: normal;
  }
  .topbar-title-prefix { display: none; }
  .topbar h1 + p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .eyebrow { display: none; }

  /* Encabezados de cada pantalla: tamaño acorde al celular y sin desbordar */
  .content h1 { overflow-wrap: anywhere; }
  .content h2, .content h3 { overflow-wrap: anywhere; }

  /* Filas y cuadrículas pensadas para computadora: en celular bajan de renglón o van en una columna */
  .content [style*="display:flex"], .content [style*="display: flex"],
  .section-heading, .kpi-row, .zona-header { flex-wrap: wrap; }
  .content [style*="grid-template-columns"], .etl-caps { grid-template-columns: 1fr !important; }
  .content [style*="grid-template-columns"] > *, .etl-caps > * { min-width: 0; }
  .metric-card, .metric-card *, .kpi-row-stat, .obj-kpi-val { min-width: 0; overflow-wrap: anywhere; }
  .obj-kpi-val .cv, .metric-card strong .cv { white-space: normal; }

  /* Pestañas (Metas de ventas): se deslizan de lado */
  .mg-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 8px !important; }
  .mg-tabs > * { flex: none; white-space: nowrap; }

  /* Filtros y formularios en una columna, a todo lo ancho */
  .content form:not(.login-form) { flex-wrap: wrap; }
  .content form:not(.login-form) select,
  .content form:not(.login-form) input[type=date],
  .content form:not(.login-form) input[type=month],
  .content form:not(.login-form) input[type=text],
  .content form:not(.login-form) input[type=search] { max-width: 100%; }

  /* Rejillas de varias columnas pasan a una sola */
  .grid-2, .grid-3, .grid-4, .two-col, .three-col { grid-template-columns: 1fr !important; }

  /* Tablas: texto sin partir, se desliza la tabla */
  .table-scroll > table th, .table-wrap > table th { white-space: nowrap; }
  .table-scroll > table, .table-wrap > table { font-size: 12.5px; }

  /* Ventanas emergentes al ancho de la pantalla */
  .swal2-popup { width: calc(100vw - 24px) !important; max-width: 520px; }
  .modal, .modal-dialog, [role=dialog] { max-width: calc(100vw - 16px); }
}