/*
 * PULSO Dialer -- adaptación a cualquier dispositivo.
 *
 * Un solo archivo que el backend inyecta en las 12 pantallas, para que el
 * dashboard se vea bien en teléfono, tablet y escritorio sin tener que editar
 * cada HTML.
 *
 * El problema que resuelve: tus tablas (CDR, llamadas en vivo, listados) miden
 * más que la pantalla de un teléfono, y como los paneles tienen overflow:hidden
 * las columnas de la derecha quedaban RECORTADAS e imposibles de ver. Aquí, en
 * pantallas angostas, cada fila se convierte en una tarjeta con sus etiquetas,
 * así no se pierde ni un dato.
 */

/* ---------- base: nada se sale de la pantalla ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Respeta el notch y la barra de gestos cuando corre como app instalada */
@media (display-mode: standalone) {
  .main { padding-top: max(26px, env(safe-area-inset-top)) !important; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .bot-launcher { bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- tablas: contenedor que sí deja desplazar ---------- */
.pulso-tabla-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* los paneles recortaban el contenido; aquí se permite el desplazamiento */
.panel:has(.pulso-tabla-scroll) { overflow: visible; }

/* ---------- tablet y móvil ---------- */
@media (max-width: 1000px) {
  .main { margin-left: 0 !important; padding-left: 16px; padding-right: 16px; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- teléfono ---------- */
@media (max-width: 600px) {
  .main { padding: 74px 14px 32px; }
  h1 { font-size: 18px; }

  /* una sola columna en formularios y rejillas */
  .form-grid,
  .grid,
  .kpi-row,
  .counter-row,
  .amd-row,
  .campaign-bar { grid-template-columns: 1fr !important; }

  /* Campos cómodos de tocar. 16px evita que el teléfono haga zoom al
     enfocar un campo (comportamiento de iOS y de algunos Android). */
  input, select, textarea { font-size: 16px !important; min-height: 40px; }
  button { min-height: 40px; }
  .form-actions { flex-wrap: wrap; gap: 8px; }
  .form-actions > div { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .form-actions button { flex: 1 1 auto; justify-content: center; }

  /* --- cada fila de tabla pasa a ser una tarjeta legible --- */
  .pulso-tabla-scroll table { display: block; width: 100%; }
  .pulso-tabla-scroll thead { display: none; }
  .pulso-tabla-scroll tbody { display: block; width: 100%; }
  .pulso-tabla-scroll tbody tr {
    display: block;
    width: 100%;
    padding: 10px 2px;
    border-bottom: 1px solid var(--divider, var(--border, #e8e9f1));
  }
  .pulso-tabla-scroll tbody tr:last-child { border-bottom: none; }
  .pulso-tabla-scroll tbody td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 5px 0 !important;
    border: none !important;
    white-space: normal;
    text-align: right;
    word-break: break-word;
  }
  /* la etiqueta sale del encabezado de la columna (la pone el script) */
  .pulso-tabla-scroll tbody td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    flex: 0 0 auto;
    max-width: 45%;
    text-align: left;
    font-family: var(--sans, -apple-system, 'Segoe UI', Inter, sans-serif);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #8a8d99);
  }
  /* celdas sin etiqueta (columnas de acciones): ocupan toda la fila */
  .pulso-tabla-scroll tbody td:not([data-etiqueta]) { justify-content: flex-end; }
  .pulso-tabla-scroll tbody td select { max-width: 60%; }
}

/* ---------- teléfonos muy angostos ---------- */
@media (max-width: 380px) {
  .main { padding-left: 10px; padding-right: 10px; }
  .panel-head { font-size: 13.5px; }
}

/* ---------- impresión: sin menú ni asistente ---------- */
@media print {
  .sidebar, .bot-launcher, .bot-panel, .bot-greeting,
  .theme-toggle, .mobile-menu-btn { display: none !important; }
  .main { margin-left: 0 !important; }
}