/* ===== Link discreto para nombres clickeables (navega al show) =====
   Usado por el nombre del Local en Visits y la Categoría en
   PlanogramModules. */

.visit-local-link,
.pm-category-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.visit-local-link:hover,
.pm-category-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

.dark .visit-local-link:hover,
.dark .pm-category-link:hover {
  color: #818cf8;
}

/* ===== Acciones del index de Visits =====
   Estilo compartido desktop+mobile. En mobile se vuelven botones
   thumb-friendly con texto. */

.visit-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.visit-action-btn {
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.visit-action-btn--items { color: #8b5cf6; }
.visit-action-btn--view  { color: #6b7280; }
.visit-action-btn--edit  { color: #3b82f6; }

.visit-action-label { display: none; }

/* ===== Mobile: scopes y action items en fila scrolleable ===== */
/* Aplica a cualquier index del admin. */

@media (max-width: 768px) {

  /* --- Scope filters (Todos / Unplanned / ...) --- */

  .scopes {
    overflow: hidden;
  }

  .scopes .index-button-group {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    /* Indicador visual de scroll: degradado a la derecha */
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    padding-right: 24px;
  }

  .scopes .index-button-group::-webkit-scrollbar {
    display: none; /* WebKit */
  }

  .scopes .index-button {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
  }

  .scopes .scopes-count {
    font-size: 11px;
    margin-left: 4px;
  }

  /* --- Action items del header (Añadir, Calculate, Delete, ...) --- */
  /* :has() selecciona el contenedor flex-wrap que envuelve los botones,
     funcione el botón como <a class="action-item-button"> o como
     <form><button class="action-item-button"></form> (button_to). */

  .flex.flex-wrap:has(.action-item-button) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    padding-right: 24px;
  }

  .flex.flex-wrap:has(.action-item-button)::-webkit-scrollbar {
    display: none;
  }

  .flex.flex-wrap:has(.action-item-button) > * {
    flex: 0 0 auto;
  }

  .action-item-button {
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* ===== Mobile: tabla → cards (visits) ===== */

@media (max-width: 768px) {

  #index_table_visits {
    border: none;
    background: transparent;
    width: 100%;
  }

  #index_table_visits thead {
    display: none;
  }

  #index_table_visits tbody,
  #index_table_visits tbody tr {
    display: block;
    width: 100%;
  }

  #index_table_visits tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "select  local      status"
      "compl   compl      compl"
      "auditor auditor    date"
      "obs     obs        obs"
      "actions actions    actions";
    column-gap: 12px;
    row-gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    align-items: start;
  }

  .dark #index_table_visits tbody tr {
    background: #1f2937;
    border-color: #374151;
  }

  /* Reset de cada celda: bloques sin padding ni borde de tabla. */
  #index_table_visits tbody td {
    display: block;
    padding: 0;
    border: none;
  }

  /* Posicionamiento por columna del DOM:
     1 = selectable (checkbox)
     2 = id (oculto en mobile)
     3 = local
     4 = cumplimiento
     5 = estado
     6 = auditor
     7 = fecha
     8 = observación (oculto en mobile)
     9 = acciones */
  #index_table_visits tbody td:nth-child(1) {
    grid-area: select;
    align-self: center;
  }

  #index_table_visits tbody td:nth-child(2) {
    display: none;
  }

  #index_table_visits tbody td:nth-child(3) {
    grid-area: local;
    align-self: center;
    min-width: 0; /* permite que el nombre haga ellipsis si es muy largo */
  }

  #index_table_visits tbody td:nth-child(4) {
    grid-area: compl;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 2px;
  }

  /* Quita el margin-bottom que tiene inline el % para que quede
     alineado con la línea extra (items / módulos) en flex. */
  #index_table_visits tbody td:nth-child(4) > div:first-child {
    margin-bottom: 0 !important;
  }

  #index_table_visits tbody td:nth-child(5) {
    grid-area: status;
    align-self: center;
    justify-self: end;
    text-align: right;
  }

  #index_table_visits tbody td:nth-child(6) {
    grid-area: auditor;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
  }

  #index_table_visits tbody td:nth-child(7) {
    grid-area: date;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    justify-self: end;
    text-align: right;
  }

  /* Observación: visible inline (sin modal) sólo si tiene contenido.
     El botón edit + el width fijo del cell se neutralizan en mobile. */
  #index_table_visits tbody td:nth-child(8) {
    grid-area: obs;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    font-size: 12px;
    color: #374151;
  }
  #index_table_visits tbody td:nth-child(8):has(.visit-obs-cell.empty) {
    display: none;
  }
  #index_table_visits tbody td:nth-child(8) .visit-obs-cell {
    width: auto;
    align-items: flex-start;
  }
  #index_table_visits tbody td:nth-child(8) .visit-obs-icon {
    display: inline-block;
    color: #f59e0b;
    font-size: 12px;
    margin-top: 2px;
    flex-shrink: 0;
  }
  .dark #index_table_visits tbody td:nth-child(8) .visit-obs-icon {
    color: #fbbf24;
  }
  #index_table_visits tbody td:nth-child(8) .visit-obs-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  #index_table_visits tbody td:nth-child(8) .edit-observation-btn {
    display: none;
  }

  #index_table_visits tbody td:nth-child(9) {
    grid-area: actions;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }

  .dark #index_table_visits tbody td:nth-child(4),
  .dark #index_table_visits tbody td:nth-child(6),
  .dark #index_table_visits tbody td:nth-child(7),
  .dark #index_table_visits tbody td:nth-child(8),
  .dark #index_table_visits tbody td:nth-child(9) {
    border-top-color: #374151;
  }

  /* Detalles secundarios de fecha (Revisión: Xmin, por user) que no
     aportan en mobile. */
  .visit-date-detail {
    display: none;
  }

  /* Oculta la barra de cumplimiento en mobile — la info del % y los
     items quedan en una sola línea, sin barra. */
  #index_table_visits tbody td:nth-child(4) > div[style*="height: 6px"] {
    display: none !important;
  }

  /* ===== Botones de acción thumb-friendly ===== */

  .visit-actions-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .visit-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    min-height: 34px;
  }

  .visit-action-btn--items {
    background: #ede9fe;
    color: #6d28d9;
  }
  .visit-action-btn--view {
    background: #f3f4f6;
    color: #374151;
  }
  .visit-action-btn--edit {
    background: #dbeafe;
    color: #1d4ed8;
  }

  .dark .visit-action-btn--items {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
  }
  .dark .visit-action-btn--view {
    background: rgba(107, 114, 128, 0.25);
    color: #d1d5db;
  }
  .dark .visit-action-btn--edit {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
  }

  .visit-action-label {
    display: inline;
  }
}

/* ===== Mobile: tabla → cards (planogram_modules) ===== */

@media (max-width: 768px) {

  #index_table_planogram_modules {
    border: none;
    background: transparent;
    width: 100%;
  }

  #index_table_planogram_modules thead {
    display: none;
  }

  #index_table_planogram_modules tbody,
  #index_table_planogram_modules tbody tr {
    display: block;
    width: 100%;
  }

  #index_table_planogram_modules tbody tr {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    /* Layout default sin tracks_prices */
    grid-template-areas:
      "photo   category   modulo"
      "items   items      view";
    column-gap: 8px;
    row-gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    align-items: start;
  }

  /* Cuando el proyecto trackea precios, expandir el grid: precios bajo
     modulo, anomalías en la fila de acciones a la izquierda. */
  #index_table_planogram_modules tbody tr:has(td[data-column="precios"]) {
    grid-template-areas:
      "photo   category   modulo"
      "photo   category   precios"
      "anomal  items      view";
  }

  .dark #index_table_planogram_modules tbody tr {
    background: #1f2937;
    border-color: #374151;
  }

  #index_table_planogram_modules tbody td {
    display: block;
    padding: 0;
    border: none;
  }

  /* Selectors por data-column (AA v4 los agrega automáticamente). Más
     robusto que :nth-child contra columnas condicionales / reorder. */

  #index_table_planogram_modules tbody td[data-column="id"] {
    display: none;
  }

  #index_table_planogram_modules tbody td[data-column="category_name"] {
    grid-area: category;
    align-self: center;
    font-weight: 600;
    font-size: 13px;
    color: #111827;
  }
  .dark #index_table_planogram_modules tbody td[data-column="category_name"] {
    color: #f3f4f6;
  }

  #index_table_planogram_modules tbody td[data-column="modulo"] {
    grid-area: modulo;
    align-self: center;
    justify-self: end;
    text-align: right;
    font-size: 12px;
    color: #6b7280;
  }
  .dark #index_table_planogram_modules tbody td[data-column="modulo"] {
    color: #9ca3af;
  }

  #index_table_planogram_modules tbody td[data-column="modulo_photo"] {
    grid-area: photo;
    align-self: center;
  }

  #index_table_planogram_modules tbody td[data-column="modulo_photo"] img {
    max-width: 80px;
    max-height: 80px;
    height: auto;
    width: auto;
    border-radius: 8px;
    object-fit: cover;
    display: block;
  }

  #index_table_planogram_modules tbody td[data-column="precios"] {
    grid-area: precios;
    align-self: center;
    justify-self: end;
    text-align: right;
    font-size: 12px;
  }

  #index_table_planogram_modules tbody td[data-column="anomalias"] {
    grid-area: anomal;
    align-self: center;
    font-size: 12px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_planogram_modules tbody td[data-column="anomalias"] {
    border-top-color: #374151;
  }

  #index_table_planogram_modules tbody td[data-column="planogram_items"] {
    grid-area: items;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }

  /* Última columna sin data-column (column '') → "Vista Módulo". */
  #index_table_planogram_modules tbody td:last-child {
    grid-area: view;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }

  .dark #index_table_planogram_modules tbody td[data-column="planogram_items"],
  .dark #index_table_planogram_modules tbody td:last-child {
    border-top-color: #374151;
  }

  /* Botones de acción full-width dentro de su celda en mobile. */
  #index_table_planogram_modules tbody td[data-column="planogram_items"] .action-item-button,
  #index_table_planogram_modules tbody td:last-child .action-item-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    border-radius: 6px;
  }
}


/* ===== Indicador de promoción inline (círculo verde con P) =====
   Se renderiza al lado del precio en planogram_items para indicar
   que el item está en promoción sin ocupar espacio horizontal. */

.pi-promo-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
  cursor: help;
}

.dark .pi-promo-circle {
  background: #22c55e;
}

/* ===== Brand badges (Marca / Proveedor / Procedencia) =====
   Estilo común desktop+mobile. Se renderizan dentro de una sola
   celda 'Marcas' generada por planogram_items.rb cuando el
   proyecto tiene facing_with_custom_brands. */

.pi-brand-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 4px;
}

.pi-brand-badge--marca { background: #e0e7ff; color: #3730a3; }
.pi-brand-badge--prov  { background: #fef3c7; color: #92400e; }
.pi-brand-badge--proc  { background: #ccfbf1; color: #115e59; }

.dark .pi-brand-badge--marca { background: rgba(99, 102, 241, 0.2);  color: #c7d2fe; }
.dark .pi-brand-badge--prov  { background: rgba(245, 158, 11, 0.2); color: #fde68a; }
.dark .pi-brand-badge--proc  { background: rgba(20, 184, 166, 0.2); color: #99f6e4; }

/* ===== Mobile: tabla → cards (planogram_items) ===== */

@media (max-width: 768px) {

  #index_table_planogram_items {
    border: none;
    background: transparent;
    width: 100%;
  }

  #index_table_planogram_items thead {
    display: none;
  }

  #index_table_planogram_items tbody,
  #index_table_planogram_items tbody tr {
    display: block;
    width: 100%;
  }

  /* Bandeja headers se mantienen como divisores (el JS de toggle
     sigue funcionando porque la clase .bandeja-group-header no la toco). */
  #index_table_planogram_items tbody tr.bandeja-group-header {
    margin: 8px 0;
  }

  #index_table_planogram_items tbody tr.bandeja-group-header > td {
    display: block;
    padding: 0;
    border: none;
  }

  /* Cards: solo filas no-header. */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header) {
    display: grid;
    grid-template-columns: auto auto 1fr 1fr 1fr;
    grid-template-areas:
      "pos     foto    desc    desc    desc"
      "pos     foto    ean     caras   precio"
      "actions actions actions actions actions";
    column-gap: 8px;
    row-gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    align-items: center;
  }

  .dark #index_table_planogram_items tbody tr:not(.bandeja-group-header) {
    background: #1f2937;
    border-color: #374151;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td {
    display: block;
    padding: 0;
    border: none;
  }

  /* DOM order:
     1 pos | 2 foto | 3 ean | 4 desc | 5 caras | 6 precio
     [opcional cuando facing_custom: 7 marcas]
     último = actions
     (Tags ya no es columna — pesable/laminado van inline en desc,
      promo va inline en precio.) */

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(1) {
    grid-area: pos;
    align-self: center;
    justify-self: center;
    min-width: 24px;
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    text-align: center;
  }
  .dark #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(1) {
    color: #9ca3af;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(2) {
    grid-area: foto;
    align-self: center;
  }

  /* Foto agrandada en mobile (28px → 40px). El override del style
     inline va con !important para ganar al style="width:28px;..." */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(2) img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(2) > i.fa-image {
    font-size: 28px !important;
    opacity: 0.25;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(4) {
    grid-area: desc;
    font-size: 13px;
    line-height: 1.3;
    align-self: center;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(3) {
    grid-area: ean;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: visible;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(3)::before {
    content: "EAN ";
    font-size: 11px;
    color: #9ca3af;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(5) {
    grid-area: caras;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(5)::before {
    content: "Caras ";
    font-size: 11px;
    color: #9ca3af;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(6) {
    grid-area: precio;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-align: right;
    white-space: nowrap;
    overflow: visible;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:nth-child(6)::before {
    content: "Precio ";
    font-size: 11px;
    color: #9ca3af;
  }

  /* Acciones: siempre la última columna. */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child {
    grid-area: actions;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }

  .dark #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child {
    border-top-color: #374151;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child .data-table-resource-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child .data-table-resource-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    background: #f3f4f6;
    color: #374151;
  }

  .dark #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child .data-table-resource-actions a {
    background: rgba(107, 114, 128, 0.25);
    color: #d1d5db;
  }

  /* Eliminar oculto en card mobile — acción destructiva accesible
     desde el show del item. */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header) > td:last-child .data-table-resource-actions a[data-method="delete"] {
    display: none;
  }

  /* ===== Caso facing_with_custom_brands: 8 columnas =====
     La columna 'Marcas' (única, generada por planogram_items.rb) se ubica
     entre Precio y Acciones. Los badges van inline dentro de esa celda. */

  #index_table_planogram_items tbody tr:not(.bandeja-group-header):has(td:nth-child(8)) {
    grid-template-areas:
      "pos     foto    desc        desc        desc"
      "pos     foto    ean         caras       precio"
      "marcas  marcas  marcas      marcas      marcas"
      "actions actions actions     actions     actions";
  }

  /* Celda 'Marcas' como flex container — los badges fluyen pegados con
     wrap natural si no caben en una línea. */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header):has(td:nth-child(8)) > td:nth-child(7) {
    grid-area: marcas;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px dashed #f3f4f6;
  }

  .dark #index_table_planogram_items tbody tr:not(.bandeja-group-header):has(td:nth-child(8)) > td:nth-child(7) {
    border-top-color: #374151;
  }

  /* En mobile el margin-right del badge sobra (ya hay gap del flex). */
  #index_table_planogram_items tbody tr:not(.bandeja-group-header):has(td:nth-child(8)) > td:nth-child(7) .pi-brand-badge {
    margin-right: 0;
  }
}

/* ===== Mobile: tabla → cards (visit_items / nsg) ===== */

@media (max-width: 768px) {

  #index_table_visit_items:not(:has(.vi-price-cell)) {
    border: none;
    background: transparent;
    width: 100%;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) thead {
    display: none;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr {
    display: block;
    width: 100%;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "select foto product score"
      "select foto product score"
      "presencia presencia presencia presencia"
      "fleje    fleje    fleje    fleje"
      "promo    promo    promo    promo"
      "descargos descargos descargos descargos"
      "quest    quest    quest    quest"
      "actions  actions  actions  actions";
    column-gap: 8px;
    row-gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    align-items: start;
  }

  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr {
    background: #1f2937;
    border-color: #374151;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td {
    display: block;
    padding: 0;
    border: none;
  }

  /* DOM: 1=select | 2=id (oculto) | 3=foto | 4=product | 5=pres | 6=fleje
     | 7=promo | 8=score | 9=descargos | 10=quest | 11=actions */

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(1) {
    grid-area: select;
    align-self: center;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(2) {
    display: none;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(3) {
    grid-area: foto;
    align-self: center;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(3) .vi-nsg-ref-img {
    width: 56px;
    height: 56px;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(4) {
    grid-area: product;
    align-self: center;
    min-width: 0;
  }

  /* Score / Descargos / Quest / Actions: nth-last-child para que las
     posiciones se mantengan estables aunque se inserte la columna
     opcional 'Visibilidad' (cuando facing_as_separate_section). */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(4) {
    grid-area: score;
    align-self: center;
    justify-self: end;
    text-align: right;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(4) .vi-nsg-score {
    font-size: 18px;
  }

  /* Toggle rows estilo iOS list-tile: [imagen] [label flex:1] [switch right] */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5) { grid-area: presencia; }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6) { grid-area: fleje; }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) { grid-area: promo; }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5),
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6),
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #f3f4f6;
  }

  /* El wrapper .vi-nsg-toggle-cell (necesario para desktop) se "borra"
     del layout en mobile con display: contents — sus hijos pasan a ser
     flex items directos del td, así el order y flex:1 funcionan. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5) > .vi-nsg-toggle-cell,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6) > .vi-nsg-toggle-cell,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) > .vi-nsg-toggle-cell {
    display: contents;
  }

  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5),
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6),
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) {
    border-top-color: #374151;
  }

  /* Reordenamos children via flex order:
     0 = imagen | 1 = label (::before) | 3 = switch (a la derecha) */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5)::before { content: "Presencia"; }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6)::before { content: "Fleje"; }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7)::before { content: "Promo"; }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5)::before,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6)::before,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7)::before {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }

  /* Sin '>' porque display:contents no cambia el DOM — el toggle y la
     img siguen siendo descendientes (no hijos directos) del td. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5) .vi-card__toggle-img,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6) .vi-card__toggle-img,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) .vi-card__toggle-img {
    order: 0;
    flex-shrink: 0;
    padding: 0;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5) .vi-card__toggle-img img,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6) .vi-card__toggle-img img,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) .vi-card__toggle-img img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(5) .vi-card__toggle,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(6) .vi-card__toggle,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7) .vi-card__toggle {
    order: 3;
    flex-shrink: 0;
  }

  /* Switch más grande estilo iOS (40x22 vs 26x15 desktop). */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody .vi-card__switch {
    width: 40px;
    height: 22px;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody .vi-card__switch .toggle-switch-thumb {
    width: 18px;
    height: 18px;
    top: 2px;
    left: 2px;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody .vi-card__toggle[data-toggle-value="true"] .toggle-switch-thumb {
    transform: translateX(18px);
  }

  /* Esconder fila promo cuando el item no tiene ask_promo (cell vacío). */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-child(7):not(:has(.vi-card__toggle)) {
    display: none;
  }

  /* Descargos / Questions / Actions: nth-last-child para estabilidad. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(3) {
    grid-area: descargos;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(2) {
    grid-area: quest;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(3),
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(2) {
    border-top-color: #374151;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(3):empty,
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(2):empty {
    display: none;
  }

  /* Questions: prefijar "Questions:" */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(2):not(:empty) {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:nth-last-child(2):not(:empty)::before {
    content: "Questions";
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }

  /* Acciones: 2 botones thumb-friendly. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child {
    grid-area: actions;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child {
    border-top-color: #374151;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    min-height: 36px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action--view {
    background: #f3f4f6;
    color: #374151;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action--edit {
    background: #dbeafe;
    color: #1d4ed8;
  }
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action--view {
    background: rgba(107, 114, 128, 0.25);
    color: #d1d5db;
  }
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action--edit {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
  }

  #index_table_visit_items:not(:has(.vi-price-cell)) tbody td:last-child .vi-nsg-action-label {
    display: inline;
  }

  /* ===== Variante con Visibilidad (facing_as_separate_section) =====
     Cuando la tabla tiene 12 cols (visibilidad agregada antes de cumpl),
     reorganiza el grid agregando la fila de visibilidad. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) {
    grid-template-areas:
      "select foto product score"
      "select foto product score"
      "presencia presencia presencia presencia"
      "fleje    fleje    fleje    fleje"
      "promo    promo    promo    promo"
      "visibilidad visibilidad visibilidad visibilidad"
      "descargos descargos descargos descargos"
      "quest    quest    quest    quest"
      "actions  actions  actions  actions";
  }

  /* Visibilidad: 8va columna cuando la tabla tiene 12 (facing case).
     Mismo styling que las otras toggle rows. */
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) > td:nth-child(8) {
    grid-area: visibilidad;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) > td:nth-child(8) {
    border-top-color: #374151;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) > td:nth-child(8) > .vi-nsg-toggle-cell {
    display: contents;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) > td:nth-child(8)::before {
    content: "Visibilidad";
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }
  #index_table_visit_items:not(:has(.vi-price-cell)) tbody tr:has(td:nth-child(12)) > td:nth-child(8) .vi-card__toggle {
    order: 3;
    flex-shrink: 0;
  }
}

/* ===== Mobile: tabla → cards (visit_items / price) =====
   Detecta tabla price via :has(.vi-price-cell). Las reglas nsg también
   matchearían el mismo #index_table_visit_items pero usan nth-child
   sobre posiciones distintas; las reglas price acá usan selectores de
   clase para que sean estables sin importar columnas opcionales y
   tomen precedencia sobre las nsg cuando aplica. */

@media (max-width: 768px) {

  #index_table_visit_items:has(.vi-price-cell) {
    border: none;
    background: transparent;
    width: 100%;
  }

  #index_table_visit_items:has(.vi-price-cell) thead {
    display: none;
  }

  #index_table_visit_items:has(.vi-price-cell) tbody {
    display: block;
    width: 100%;
  }

  #index_table_visit_items:has(.vi-price-cell) tbody tr {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "select foto product ocr"
      "select foto product ocr"
      "marcas marcas marcas marcas"
      "precio precio precio precio"
      "promo  promo  promo  promo"
      "mec    mec    mec    mec"
      "quest  quest  quest  quest"
      "actions actions actions actions";
    column-gap: 8px;
    row-gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    align-items: start;
  }

  .dark #index_table_visit_items:has(.vi-price-cell) tbody tr {
    background: #1f2937;
    border-color: #374151;
  }

  #index_table_visit_items:has(.vi-price-cell) tbody td {
    display: block;
    padding: 0;
    border: none;
  }

  /* Map cells to grid areas via classes (estables ante columnas opcionales). */
  #index_table_visit_items:has(.vi-price-cell) tbody td:nth-child(1) {
    grid-area: select;
    align-self: center;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td:nth-child(2) {
    display: none; /* ID hidden */
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-ref {
    grid-area: foto;
    align-self: center;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-ref .vi-nsg-ref-img {
    width: 56px;
    height: 56px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-product {
    grid-area: product;
    align-self: center;
    min-width: 0;
  }

  /* Marcas (chips coloreados) */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-brands {
    grid-area: marcas;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-brands {
    border-top-color: #374151;
  }
  /* Cuando no hay marcas el cell queda vacío — ocultar la fila. */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-brands:empty {
    display: none;
  }

  /* Precio + Promo lado a lado, label arriba pequeño + valor grande. */
  /* Precio / Promo iOS-style: cada uno fila full-width, label izq, valor der. */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio,
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio,
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo {
    border-top-color: #374151;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio { grid-area: precio; }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo { grid-area: promo; }

  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio::before,
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo::before {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio::before { content: "Precio"; }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo::before { content: "Promo"; }

  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-precio > .vi-price-cell,
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-promo > .vi-price-cell {
    flex-shrink: 0;
    text-align: right;
  }
  /* Mobile: ref inline al lado del valor (override del stacked desktop). */
  #index_table_visit_items:has(.vi-price-cell) tbody .vi-price-main {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody .vi-price-value {
    font-size: 15px;
  }

  /* OCR en el header (top-right) — solo el icono, sin label, sin border. */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-ocr {
    grid-area: ocr;
    align-self: center;
    justify-self: end;
    display: flex;
    align-items: center;
  }
  /* Icono más chico para que no domine el header. */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-ocr .vi-price-ocr {
    font-size: 16px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-mecanica {
    grid-area: mec;
    padding: 8px 0;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-mecanica:not(:empty)::before {
    content: "Mecánica";
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-mecanica:empty {
    display: none;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-ocr,
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-price-col-mecanica {
    border-top-color: #374151;
  }

  /* Quest. iOS-style: label izq, badge der. */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-questions {
    grid-area: quest;
    padding: 8px 0;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-questions:not(:empty)::before {
    content: "Questions";
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-questions:empty {
    display: none;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-questions {
    border-top-color: #374151;
  }

  /* Acciones — botones thumb-friendly (mismo estilo que nsg). */
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions {
    grid-area: actions;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions {
    border-top-color: #374151;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    min-height: 36px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action--view {
    background: #f3f4f6;
    color: #374151;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action--edit {
    background: #dbeafe;
    color: #1d4ed8;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action--view {
    background: rgba(107, 114, 128, 0.25);
    color: #d1d5db;
  }
  .dark #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action--edit {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
  }
  #index_table_visit_items:has(.vi-price-cell) tbody td.vi-nsg-col-actions .vi-nsg-action-label {
    display: inline;
  }
}

/* ===== Buscador de visita en el header — modo mobile expandido =====
   En <sm el form arranca con `hidden`. Cuando el usuario toca el botón
   de lupa, el JS le quita `hidden` y le agrega `is-mobile-open`, y al
   título le agrega `is-mobile-hidden`. */
@media (max-width: 639px) {
  #header-visit-search-form.is-mobile-open {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
  }
  #header-title-wrap.is-mobile-hidden {
    display: none;
  }
}

/* ===== /admin/app_links: índice responsive en mobile =====
   La tabla tiene 8 columnas (audience, platform, channel, label, url,
   enabled, updated_at, acciones). En mobile (≤768px) dejamos sólo 4:
   PLATFORM (con icono), LABEL, URL (botones Copiar/Share), ACCIONES.
   Ocultamos audience(1) — redundante con LABEL —, channel(3),
   enabled(6), updated_at(7). Identificamos la tabla con
   :has(.app-link-copy-btn) — sin necesidad de body class. */
@media (max-width: 768px) {
  table.data-table:has(.app-link-copy-btn) thead th:nth-child(1),
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(1),
  table.data-table:has(.app-link-copy-btn) thead th:nth-child(3),
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(3),
  table.data-table:has(.app-link-copy-btn) thead th:nth-child(6),
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(6),
  table.data-table:has(.app-link-copy-btn) thead th:nth-child(7),
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(7) {
    display: none;
  }

  /* Padding compacto + tipografía más chica. */
  table.data-table:has(.app-link-copy-btn) th,
  table.data-table:has(.app-link-copy-btn) td {
    padding: 6px 8px;
    font-size: 12px;
  }

  /* Botones de la columna URL (col 5) apilados con poco margen. */
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(5) {
    white-space: nowrap;
  }
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(5) .app-link-share-btn {
    margin-left: 0;
    margin-top: 2px;
  }

  /* Acciones (Ver/Editar/Eliminar) apiladas, sin separador "·". */
  table.data-table:has(.app-link-copy-btn) tbody td:last-child {
    white-space: nowrap;
  }
  table.data-table:has(.app-link-copy-btn) tbody td:last-child a {
    display: block;
    line-height: 1.6;
  }
  table.data-table:has(.app-link-copy-btn) .app-link-actions__sep {
    display: none;
  }

  /* LABEL (col 4): limitar ancho para que no consuma demasiado. */
  table.data-table:has(.app-link-copy-btn) tbody td:nth-child(4) {
    max-width: 120px;
    word-break: break-word;
  }

  /* Acciones: en mobile mostrar sólo iconos (no labels) para que entren. */
  table.data-table:has(.app-link-copy-btn) .app-link-action__label {
    display: none;
  }
  table.data-table:has(.app-link-copy-btn) .app-link-action__icon {
    font-size: 14px;
  }
}

/* En desktop mostrar el label y ocultar el icono (default).
   Specificity alta para battir las reglas de FontAwesome / ActiveAdmin. */
@media (min-width: 769px) {
  table.data-table .app-link-action__icon {
    display: none !important;
  }
}