/* ============================================================
   instagram-block.css — "Instagram" con más de una cuenta por
   cliente (components/instagram-block.js, views/ficha.js,
   2026-09-02). Pedido textual de Fernando (CEO): "necesito que
   permitas agregar mas de un instagram por clientes si se desea".

   Mockup elegido (contrato visual): variante A —
   docs/design/direcciones/ficha-instagram-a{,-desktop}.html. Clases
   `.ig-*` calcadas del mockup; los tokens son los reales del
   proyecto (docs/design/sistema-visual.md), no los del HTML de
   referencia (que reescribe los mismos nombres con valores propios
   para poder mirarse solo).

   `.ig-cell` vive dentro de la grilla "El local" (`.el-local-grid`,
   app.css) — acá solo lo exclusivo de este bloque, mismo patrón que
   locations-block.css ("acá solo lo exclusivo de la lista/
   formulario"). `.ig-hd`/`.ig-list`/`.ig-item` son calco estructural
   de `.pv-hd`/`.pv-list`/`.pv-item` a propósito: mismo lenguaje
   visual del proyecto (§4.1 nº13, "no se inventa un segundo
   lenguaje de edición"), con nombres propios porque el contenido
   (handle + tilde + Hacer principal) no es intercambiable con el de
   un punto de venta.
   ============================================================ */

.ig-cell-inner { display: flex; flex-direction: column; }

.ig-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ig-hd .k { margin-bottom: 0; } /* comparte fila con "+ Agregar", no apila debajo — igual que .pv-hd */

.ig-add-btn {
  display: inline-flex; align-items: center; gap: 4px; position: relative;
  border: none; background: none; cursor: pointer; padding: 3px 6px; margin: -3px -6px;
  border-radius: 6px; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--blue-text);
}
.ig-add-btn:hover { background: var(--surface-3); }
.ig-add-btn[aria-expanded="true"] { color: var(--text-3); }

.ig-list { display: flex; flex-direction: column; margin-top: 4px; }

/* Fila de cuenta — mismo criterio de layout que `.pv-item` (locations-block.css): las acciones
   siguen al handle, NUNCA se van al borde opuesto (`justify-content: space-between` dejaba un
   hueco enorme en el medio cuando el handle es corto — medido en producción para puntos de venta,
   §4.1 nº18, vale igual acá). `flex-wrap` para que un handle largo empuje las acciones al renglón
   de abajo en vez de apretarlas. */
.ig-item {
  padding: 8px 0; position: relative;
  display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap;
  gap: 4px 14px;
}
.ig-item + .ig-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: .5px; background: var(--hairline);
}

.ig-item-main {
  min-width: 0; max-width: 100%; flex: 0 1 auto;
  display: flex; align-items: center; gap: 5px; overflow: hidden;
}
.ig-star { font-size: var(--fs-sm); color: var(--orange); flex-shrink: 0; }
.ig-handle {
  font-size: var(--fs-sm); font-weight: 500; color: var(--blue-text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ig-handle:hover { text-decoration: underline; }
.ig-principal-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--orange-text); background: var(--orange-soft); border-radius: var(--r-pill); padding: 1px 7px;
}

.ig-item-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
/* Separador tilde / botones — mismo `.vc-sep` que usan puntos de venta (locations-block.css). */
.ig-item-actions .vc-sep { width: .5px; height: 14px; background: var(--hairline); margin: 0 4px; align-self: center; }

.ig-btn {
  font-size: var(--fs-sm); font-weight: 400; color: var(--blue-text);
  background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 5px;
  white-space: nowrap; position: relative;
}
.ig-btn:hover { background: var(--blue-soft); }
.ig-btn-del {
  font-size: var(--fs-sm); font-weight: 400; color: var(--red-text);
  background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 5px;
  white-space: nowrap; position: relative;
}
.ig-btn-del:hover { background: var(--red-soft); }

/* Confirmación inline de borrado (NUNCA `confirm()` del navegador — Mand. V, "lo irreversible se
   confirma DENTRO de la app, con la misma jerarquía visual que el resto"). */
.ig-confirm { width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0; }
.ig-confirm-msg { font-size: var(--fs-sm); color: var(--text-2); flex: 1; min-width: 0; }
.ig-confirm-yes {
  font-size: var(--fs-sm); font-weight: 500; color: var(--red-text); background: var(--red-soft);
  border: none; cursor: pointer; padding: 4px 10px; border-radius: var(--r-pill); position: relative;
}
.ig-confirm-no {
  font-size: var(--fs-sm); color: var(--text-3); background: none; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: var(--r-pill); position: relative;
}

/* Formulario de alta/edición — mismo input que `.fe-input` en look, clase propia para no acoplar
   este bloque al contrato de field-edit.js (acá el guardado es siempre 1 solo campo de texto). */
.ig-form { margin-top: 8px; padding-top: 10px; border-top: .5px dashed var(--border-strong); display: flex; flex-direction: column; gap: 8px; }
.ig-form-input {
  font-size: var(--fs-sm); font-family: var(--font, inherit); color: var(--text-1); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; outline: none; width: 100%;
}
.ig-form-input:focus { border-color: var(--blue); }
.ig-form-input::placeholder { color: var(--text-4); }
.ig-form-actions { display: flex; gap: 8px; }
.ig-form-save {
  font-size: var(--fs-sm); font-weight: 600; color: #fff; background: var(--blue-solid);
  border: none; cursor: pointer; padding: 7px 16px; border-radius: var(--r-sm); flex: 1;
}
.ig-form-save:disabled, .ig-form-cancel:disabled, .ig-form-input:disabled { opacity: .55; cursor: not-allowed; }
.ig-form-cancel {
  font-size: var(--fs-sm); font-weight: 400; color: var(--text-2); background: var(--gray-soft);
  border: none; cursor: pointer; padding: 7px 14px; border-radius: var(--r-sm);
}
.ig-error { font-size: var(--fs-sm); color: var(--red-text); }

/* Fallback defensivo (no debería pintarse nunca — ver docstring de `render()`). */
.ig-empty-fallback { font-size: var(--fs-sm); color: var(--text-3); margin: 0; }

/* Blancos táctiles ≥44px en touch, por pseudo-elemento (nunca padding — §4.1 nº12, no descoloca
   filas de una lista densa). Ya declarados los `::after` de arriba con `inset` chico; en coarse se
   agrandan al piso táctil real. */
@media (pointer: coarse) {
  .ig-add-btn::after, .ig-btn::after, .ig-btn-del::after {
    content: ''; position: absolute; inset: -14px -10px; border-radius: 6px;
  }
  .ig-confirm-yes::after, .ig-confirm-no::after {
    content: ''; position: absolute; inset: -12px -8px; border-radius: 6px;
  }
  /* El handle es un LINK de texto (no un `.ig-btn`), sin blanco propio -- medido en el banco de
     pruebas (pasada visual del orquestador, 2026-09-02): 19px de alto sin pseudo-elemento. Mismo
     criterio que el resto de esta lista: pseudo-elemento, nunca padding real (correr el padding
     real descolocaria la fila y el underline en :hover). */
  .ig-handle { position: relative; }
  .ig-handle::after {
    content: ''; position: absolute; inset: -14px -6px; border-radius: 6px;
  }
}

/* ================================================================
   MOBILE (< 900px, --bp-desk en tokens.css) -- pasada visual del
   orquestador sobre el banco de pruebas (2026-09-02, cliente con 2
   cuentas): `.ig-cell` compartia fila con "Locales" en la grilla de
   2 columnas y media 178px -- los DOS handles quedaban con ellipsis
   ("@nativ..." el principal, comido ademas por el chip PRINCIPAL).
   Corolario de §4.1 nº12: "en una lista vertical el nombre va en su
   propio renglon a ancho completo".

   Arreglo en DOS partes, no una:
   (1) La celda pasa a ocupar la fila ENTERA del grid (`grid-column:
       1 / -1`) -- "Locales" cae sola a la fila siguiente por el
       auto-flow del grid, sin tocar `elLocalCell`/`.el-local-grid`
       (ninguna otra celda se mueve).
   (2) DENTRO de la celda, cada cuenta pasa de fila (handle + tilde +
       Editar + Borrar todo en una linea) a COLUMNA: el handle (con
       su star/chip PRINCIPAL) en su propio renglon a ancho completo,
       las acciones (tilde, Hacer principal, Editar, Borrar) debajo.
       Sin esto, ancho completo solo no alcanza: "Hacer principal ·
       Editar · Borrar" en una sola linea contra un handle largo
       ("@oldschool_parana_outlet_oficial") seguia empujando/cortando.
   El handle ademas deja de recortar con ellipsis en este ancho (pasa
   a `overflow-wrap: anywhere`) -- con la celda entera para el, cortar
   ya no hace falta, y el `title` (siempre presente, ver
   components/instagram-block.js) sigue disponible para el caso
   extremo.

   ⚠️ Nota 2026-09-04: "Borrar" salió de la fila de reposo (ver
   components/instagram-block.js) — hoy la línea de acciones en
   reposo trae solo tilde/Hacer principal/Editar; "Borrar" aparece
   recién en `.ig-form-actions`, dentro del modo edición. La lección
   de layout de arriba sigue valiendo igual para esa línea de acciones.
   ================================================================ */
@media (max-width: 899px) {
  .ig-cell { grid-column: 1 / -1; }
  .ig-cell.col-sep-left { border-right: none; } /* la celda ya no tiene vecina a la derecha */

  .ig-item { flex-direction: column; align-items: stretch; gap: 6px; }
  .ig-item-main { max-width: 100%; overflow: visible; flex-wrap: wrap; }
  .ig-handle {
    overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
    flex: 1 1 auto;
  }
  .ig-item-actions { flex-wrap: wrap; }
}