/* El Legado · responsivo de los componentes del panel, los modales y las tablas.
   (El de la estructura vive en shell.css; el de Ajustes, en ajustes.css.) */

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .line-grid, .audience-grid, .when-grid { grid-template-columns: minmax(0, 1fr); }
  /* Cada etapa en dos renglones: etapa | resultado y costo | cambio. */
  .money-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); }
  .money-result { text-align: right; }
  .money-cost { text-align: left; }
  .funnel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cada persona es una tarjeta cuando la tabla (seis columnas) no cabe en su tarjeta o en el modal:
   depende del ancho del contenedor, no de la pantalla (con la barra lateral, 1024px ya no alcanza). */
.card:has(.people-table), .modal-body:has(.people-table) { container-type: inline-size; }
@container (max-width: 900px) {
  .people-table thead { display: none; }
  .people-table, .people-table tbody, .people-table tr, .people-table th, .people-table td { display: block; }
  .people-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3);
    grid-template-areas: "persona escribio" "anuncio anuncio" "etapa monto" "acciones acciones";
    padding: var(--space-4) 0; border-bottom: 1px solid var(--line-soft);
  }
  .people-table tbody th, .people-table td, .people-table tbody th:first-child { padding: 0; border: 0; min-width: 0; text-align: left; }
  .people-table tbody th, .people-table .col-anuncio { min-width: 0; }
  .people-table.is-compact tr { grid-template-areas: "persona escribio" "etapa monto" "acciones acciones"; }
  .people-table tbody th { grid-area: persona; }
  .people-table td[data-label="Anuncio"] { grid-area: anuncio; }
  .people-table td[data-label="Etapa"] { grid-area: etapa; align-self: center; }
  .people-table td[data-label="Escribió"] { grid-area: escribio; }
  .people-table td[data-label="Escribió"] .cell-stack { justify-items: end; text-align: right; }
  .people-table td[data-label="Monto"] { grid-area: monto; align-self: center; text-align: right; font-weight: 600; }
  .people-table td.is-empty { display: none; }
  .people-table .row-actions { grid-area: acciones; padding: 0; text-align: left; }
}

@media (max-width: 640px) {
  .modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .modal-content { height: 100%; }
  .modal-body { flex: 1; }
  .modal-head, .modal-body, .modal-foot { padding-left: var(--space-4); padding-right: var(--space-4); }
  .modal-foot { border-radius: 0; }
  .modal-foot .btn { width: 100%; text-align: center; }
  .modal-two { grid-template-columns: minmax(0, 1fr); }
  .modal-title { font-size: var(--text-2xl); }
  .modal.modal-wide { width: 100vw; }
  .modal-actions { width: 100%; }
  .modal-actions .btn { flex: 1; }
  /* Modal de fechas: hoja que sube desde abajo (no ocupa toda la pantalla), con Cancelar y Ver periodo lado a lado. */
  .modal.modal-periodo {
    width: 100vw; height: fit-content; max-height: calc(100dvh - var(--space-6)); margin: auto 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-periodo[open] { animation: hoja-sube var(--duration) var(--ease); }
  .periodo-foot { flex-wrap: wrap; padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .periodo-foot .modal-actions { flex: 1 1 100%; }
  .periodo-foot .btn { width: auto; }
  .periodo-campos { gap: var(--space-2) var(--space-3); }
  .ad-head { gap: var(--space-3); }
  .ad-head .ad-thumb { width: 48px; height: 48px; }
  .ad-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-metrics, .ad-facts { grid-template-columns: minmax(0, 1fr); }
  .ad-metrics div:nth-child(2) { border-top: 1px solid var(--line); }
  /* En el celular cada anuncio es una tarjeta: nombre arriba y sus cifras debajo, en dos columnas. */
  /* Campañas y anuncios: en el celular cada fila es una tarjeta (nombre arriba, cifras en dos columnas). */
  .campaign-table thead { display: none; }
  .campaign-table, .campaign-table tbody, .campaign-table tr, .campaign-table th, .campaign-table td { display: block; }
  .campaign-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); }
  .ads-table tr[hidden], .ads-table.is-collapsed tr.is-extra { display: none; }
  .campaign-table th, .campaign-table td { padding: 0; border: 0; min-width: 0; }
  .campaign-table tbody th { grid-column: 1 / -1; min-width: 0; margin-bottom: var(--space-1); }
  .campaign-table td.num { text-align: left; white-space: normal; }
  .ads-table th[scope="row"] .bar { margin-left: calc(40px + var(--space-3)); max-width: none; }

  /* Mosaicos del héroe: reparten el ancho (en Grupos son tres y a 120px cada uno se salían de la tarjeta). */
  .hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); width: 100%; }
  .hero-stats div { min-width: 0; padding: var(--space-3); }
  .hero-stats dd { white-space: normal; }

  .timeline-item { grid-template-columns: 32px minmax(0, 1fr); }
  .timeline-item time { grid-column: 2; }
  .search { width: 100%; }
  .search input[type="search"] { flex: 1; width: auto; }
}

@media (max-width: 480px) {
  .funnel-grid { grid-template-columns: minmax(0, 1fr); }
  /* Sin el calendario, el periodo y la plataforma caben en un renglón. */
  .period-form .icon { display: none; }
  .period-form select { padding-left: var(--space-4); }
  /* Las pestañas del modal (Recorrido, Conversación, Ficha) caben en un renglón solo con su texto. */
  .modal-tabs [role="tab"] .icon { display: none; }
  /* Dos acciones con logotipo no caben lado a lado sin partir el texto: una debajo de la otra. */
  .modal-foot:not(.periodo-foot) .modal-actions { flex-direction: column; }
  .modal-foot:not(.periodo-foot) .modal-actions .btn { flex: none; }
}

@keyframes hoja-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }