/* Ajustes > Integraciones con iconos (public/integraciones.js; lienzo UEsyrWop93fj6TryA7iRgz, aprobado 2026-10-04).
   Solo tokens de cuarto-oscuro.css (paridad-cuarto-oscuro). Un icono se toca: 16 px (flota). La hoja flota: 16 px y sombra de flotar.
   Telefono (< 720 px): iconos chicos en tres columnas y la hoja sale de abajo. Nada se anima con prefers-reduced-motion. */
.intg{ display:flex; flex-direction:column; gap:var(--e-5); container-type:inline-size; container-name:intg; }
.intg-ayuda{ margin:0; color:var(--apagado); font-size:var(--t-texto); max-width:560px; }
.intg-filtros{ display:flex; gap:var(--e-2); flex-wrap:wrap; }
.intg-pil{ min-height:40px; padding:0 var(--e-4); border-radius:var(--r-pildora); border:1px solid var(--linea); background:transparent; color:var(--tinta); font:inherit; font-size:var(--t-meta); cursor:pointer; }
.intg-pil.on{ background:var(--tinta); color:var(--piedra); border-color:var(--tinta); }
.intg-rejilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--e-4); }
.intg-tile{ min-height:168px; padding:var(--e-5); border:0; border-radius:var(--r-flota); background:var(--piedra); color:var(--tinta); font:inherit; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--e-4); transition:background .15s var(--curva-cambia); }
.intg-tile:hover, .intg-tile.on{ background:var(--piedra-on); }
.intg-tile:focus-visible, .intg-pil:focus-visible, .intg-x:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
.intg-tile-arriba{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-2); width:100%; }
.intg-ico{ width:52px; height:52px; border-radius:var(--r-flota); background:var(--piedra-on); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.intg-tile:hover .intg-ico, .intg-tile.on .intg-ico{ background:var(--piedra); }
.intg-tile-txt{ display:flex; flex-direction:column; gap:var(--e-1); }
.intg-nombre{ font-size:var(--t-sub); font-weight:600; }
.intg-linea{ font-size:var(--t-meta); color:var(--apagado); line-height:1.4; }
.intg-estado{ display:inline-flex; align-items:center; gap:6px; font-size:var(--t-meta); color:var(--apagado); }
.intg-punto{ width:8px; height:8px; border-radius:var(--r-pildora); background:var(--punto); flex-shrink:0; }
.intg-punto.intg-ok{ background:var(--ok); }
.intg-punto.intg-urge{ background:var(--urge); }
.intg-estado:has(.intg-ok){ color:var(--ok); }
.intg-estado:has(.intg-urge){ color:var(--urge); }

/* La hoja: velo + panel a la derecha. Las tarjetas de siempre van dentro sin su caja ni su titulo (el titulo ya esta en la cabecera). */
/* Un escalon DEBAJO del velo de los modales del CRM: un confirmModal abierto desde la hoja («Regenerar enlace», «Revocar») tiene que quedar encima. */
.intg-hoja{ position:fixed; inset:0; z-index:calc(var(--z-velo) - 1); }
.intg-hoja[hidden]{ display:none; }
.intg-fondo{ position:absolute; inset:0; background:var(--velo); animation:intg-funde .2s var(--curva-entra); }
.intg-panel{ position:absolute; top:var(--e-4); right:var(--e-4); bottom:var(--e-4); width:min(460px, calc(100vw - 32px)); box-sizing:border-box; overflow:auto;
  background:var(--hoja); border-radius:var(--r-flota); box-shadow:var(--sombra-flota); padding:var(--e-6) var(--e-6) var(--e-5);
  display:flex; flex-direction:column; gap:var(--e-4); animation:intg-entra-lado .28s var(--curva-entra); }
.intg-asa{ display:none; }
.intg-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e-3); }
.intg-cab-txt{ display:flex; flex-direction:column; gap:var(--e-1); min-width:0; }
.intg-eti{ font-size:var(--t-eti); letter-spacing:.08em; text-transform:uppercase; color:var(--apagado); }
.intg-cab h2{ margin:0; font-size:var(--t-titulo); font-weight:600; }
.intg-x{ width:44px; height:44px; flex-shrink:0; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-sub); cursor:pointer; }
.intg-cuerpo .settcard{ margin:0 !important; padding:0; border:0; background:transparent; box-shadow:none; }
.intg-cuerpo .settcard > .peyebrow:first-child{ display:none; }
.intg-cuerpo #aj-claude > h3{ display:none; }
/* Campo con botones (enlace .ics, llave nueva): en una hoja angosta el campo va arriba, entero, y los botones abajo. */
.intg-cuerpo .link-copy{ flex-wrap:wrap; }
.intg-cuerpo .link-copy .inp{ flex:1 1 100%; min-width:0; }
.intg-extra{ display:flex; flex-direction:column; gap:var(--e-3); margin-top:var(--e-4); padding-top:var(--e-4); }
.intg-fila{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:44px; font-size:var(--t-texto); cursor:pointer; }
.intg-nota{ margin:0; font-size:var(--t-meta); color:var(--apagado); }

@keyframes intg-funde{ from{ opacity:0; } }
@keyframes intg-entra-lado{ from{ opacity:0; transform:translateX(24px); } }
@keyframes intg-entra-abajo{ from{ transform:translateY(100%); } }

/* Los iconos miden su COLUMNA, no la ventana: con el chat abierto Ajustes tiene ~420 px aunque la ventana mida 1280 (la trampa de #/saber y .pz-tabs). */
@container intg (max-width:520px){
  .intg-rejilla{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e-3); }
  .intg-tile{ min-height:104px; padding:var(--e-3) var(--e-2); align-items:center; justify-content:center; gap:var(--e-2); text-align:center; position:relative; }
  .intg-tile-arriba{ justify-content:center; }
  .intg-tile .intg-estado{ position:absolute; top:10px; right:10px; font-size:0; gap:0; }
  .intg-ico{ width:44px; height:44px; }
  .intg-linea{ display:none; }
  .intg-nombre{ font-size:var(--t-meta); font-weight:500; }
}
/* La hoja si mira la ventana: en un telefono sale de abajo. */
@media (max-width:720px){
  .intg-panel{ top:auto; left:0; right:0; bottom:0; width:auto; max-height:88vh; border-radius:var(--r-flota) var(--r-flota) 0 0; padding:var(--e-3) var(--e-5) var(--e-6);
    animation:intg-entra-abajo .3s var(--curva-entra); }
  .intg-asa{ display:block; align-self:center; width:40px; height:4px; border-radius:var(--r-pildora); background:var(--linea); }
}
@media (prefers-reduced-motion:reduce){
  .intg-panel{ animation:intg-funde .2s linear; }
  .intg-tile{ transition:none; }
}