/* ── RESPONSIVE COMPARTIDO — todas las páginas ─────────────────────────────
   Incluir con: <link rel="stylesheet" href="/responsive.css">
   Complementa los estilos específicos de cada página.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Nav bar ── */
nav {
  height: auto !important;
  min-height: 56px;
  flex-wrap: nowrap !important;   /* nunca wrap — el brand se achica en vez de partir */
  align-items: center;
}
.nav-brand {
  white-space: nowrap;            /* texto en una sola línea siempre */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}
.nav-right {
  flex-shrink: 0;                 /* los links no se comprimen */
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav-brand img { max-width: clamp(60px, 12vw, 120px); }

/* 900px: brand achicado */
@media (max-width: 900px) {
  .nav-brand { font-size: 14px !important; }
  .nav-right  { gap: 12px !important; font-size: 12px !important; }
}

/* 680px: brand más pequeño */
@media (max-width: 680px) {
  nav { padding: 0 12px !important; }
  .nav-brand { font-size: 13px !important; }
  .nav-right { gap: 10px !important; font-size: 12px !important; }
}

/* 520px: brand 12px, link SAP oculto (accesible desde Analítica) */
@media (max-width: 520px) {
  .nav-brand { font-size: 12px !important; }
  .nav-right { gap: 8px !important; font-size: 11px !important; }
  .nav-right a[href="/importar-sap.html"] { display: none; }
}

/* 400px: brand solo "Teldat IoT" — oculta el " | Subtítulo" */
@media (max-width: 400px) {
  nav { padding: 0 10px !important; }
  .nav-brand { font-size: 12px !important; }
  .nav-brand .nav-sub { display: none; }
  .nav-right { gap: 6px !important; font-size: 11px !important; }
}

/* ── Botones: mínimo táctil 44px ── */
.btn, .btn-primary, .btn-success, .btn-save, .btn-cancel, .navbtn,
button[class*="btn"] {
  min-height: 40px;
}
@media (max-width: 768px) {
  .btn, .btn-primary, .btn-success, .btn-save, .btn-cancel, .navbtn,
  button[class*="btn"] {
    min-height: 44px;
  }
}

/* ── Inputs: font-size 16px en móvil para evitar auto-zoom en iOS ── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
}

/* ── Tablas: siempre con scroll horizontal en móvil ── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.table-scroll table {
  min-width: 480px;
}

/* ── Container padding reducido en móvil ── */
@media (max-width: 600px) {
  .container { padding: 12px !important; }
  .card { padding: 14px 16px !important; }
  .top-bar { padding: 10px 12px !important; }
}

/* ── Toast centrado en móvil ── */
@media (max-width: 480px) {
  .toast {
    right: 12px !important;
    left: 12px !important;
    bottom: 16px !important;
    text-align: center;
  }
}

/* ── Gráficos: reducir altura en pantallas pequeñas ── */
@media (max-width: 480px) {
  .chart-wrap { height: 200px !important; }
  .chart-wrap.sm { height: 160px !important; }
}

/* ── KPI grid: 1 columna en pantallas muy pequeñas ── */
@media (max-width: 420px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .kpi-value { font-size: clamp(18px, 5vw, 26px) !important; }
}