/* ==========================================================================
   CHASQUI — equipo.css
   Módulo «equipo» (§11): el equipo con sus credenciales, la invitación con
   QR, los avisos y la página pública de la invitación.
   --------------------------------------------------------------------------
   1  El equipo: grupos por credencial y la rejilla de tarjetas
   2  La credencial de papel (.integrante), como las de la landing
   3  Invitar: el QR sobre papel
   4  Avisos: la lista por día
   5  La invitación pública (sobre .ingreso de ingreso.css)
   6  Movimiento reducido e impresión

   Sin colores nuevos: cada credencial toma un acento de base.css (sodio,
   ok, alerta y el gris de tinta) a través de dos variables propias,
   --integrante-acento y --integrante-tinte, que fija su modificador.
   ========================================================================== */

/* ── 1 · El equipo ──────────────────────────────────────────────────────── */
.equipo{display:flex;flex-direction:column;gap:1.6rem;min-width:0}
.equipo__resumen{
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tx-3);
}
.equipo__nota{background:var(--sodio-tinte);border-color:var(--sodio-borde);color:var(--tx-2)}
.equipo__nota .icono{color:var(--sodio-texto)}

.equipo__grupo-cab{display:flex;flex-direction:column;gap:.3rem}
.equipo__grupo .seccion-app__titulo{display:flex;align-items:center;gap:.55rem}
.equipo__cuantos{
  display:inline-grid;
  place-items:center;
  min-width:1.6rem;
  height:1.6rem;
  padding:0 .4rem;
  border-radius:99px;
  background:var(--sup-3);
  color:var(--tx-2);
  font-family:var(--f-mono);
  font-size:.76rem;
  font-weight:700;
}
.equipo__grupo-texto{max-width:62ch;color:var(--tx-2);font-size:.92rem;line-height:1.5}

.equipo__tarjetas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
  gap:1rem;
}
.equipo__item{display:flex;min-width:0}

/* Debajo del selector de credencial, en agregar y editar */
.equipo__que-ve{
  padding:.55rem .75rem;
  border-left:3px solid var(--sodio);
  border-radius:0 var(--radio-sm) var(--radio-sm) 0;
  background:var(--sodio-tinte);
  color:var(--tx-2);
  font-size:.86rem;
  line-height:1.45;
}

/* ── 2 · La credencial de papel ─────────────────────────────────────────── */
/*  La misma credencial de la landing (sección «Cada uno con su credencial»),
    sin el cordón colgando: once tarjetas balanceándose a la vez marean. Queda
    el clip de metal arriba y el filo de color de la credencial.            */
.integrante{
  --integrante-acento:var(--tx-3);
  --integrante-tinte:var(--sup-3);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  width:100%;
  min-width:0;
  padding:1.45rem 1.2rem 1.1rem;
  border:1px solid var(--brd-2);
  border-radius:var(--radio);
  background:linear-gradient(180deg,var(--sup-2),var(--sup-1));
  box-shadow:var(--sombra-2);
  overflow:hidden;
}
.integrante::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:var(--integrante-acento);
}
.integrante--manager{
  --integrante-acento:linear-gradient(90deg,var(--sodio-hondo),var(--sodio),var(--sodio-claro));
  --integrante-tinte:var(--sodio-tinte);
}
.integrante--tecnica{--integrante-acento:var(--ok);--integrante-tinte:var(--ok-tinte)}
.integrante--artista{--integrante-acento:var(--alerta);--integrante-tinte:var(--alerta-tinte)}
.integrante.is-yo{border-color:var(--sodio-borde)}

.integrante__clip{
  position:absolute;
  top:10px;
  left:50%;
  width:34px;
  height:7px;
  margin-left:-17px;
  border-radius:99px;
  background:var(--hondo);
  box-shadow:inset 0 1px 2px var(--brd-3);
}
.integrante__cab{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding-bottom:.7rem;
  margin-bottom:.35rem;
  border-bottom:1px dashed var(--brd-2);
}
.integrante__logo{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:114%;
  font-size:.95rem;
  letter-spacing:-.03em;
  color:var(--tx);
}
.integrante__tipo{
  padding:.18rem .5rem;
  border:1px solid var(--brd-3);
  border-radius:4px;
  background:var(--integrante-tinte);
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tx-2);
}
.integrante__nombre{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.2rem .5rem;
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:110%;
  font-size:1.3rem;
  line-height:1.08;
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}
.integrante__yo{
  padding:.1rem .45rem;
  border-radius:99px;
  background:var(--sodio);
  color:var(--sobre-acento);
  font-family:var(--f-mono);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.integrante__funcion{color:var(--tx-2);font-size:.92rem}
.integrante__contactos{display:flex;flex-direction:column;gap:.1rem;margin-top:.25rem}
.integrante__contacto{
  align-self:flex-start;
  max-width:100%;
  font-family:var(--f-mono);
  font-size:.8rem;
  color:var(--tx-2);
  text-decoration:underline;
  text-decoration-color:var(--brd-3);
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.integrante__contacto:hover{color:var(--sodio-texto);text-decoration-color:currentColor}
.integrante__base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  margin-top:auto;
  padding-top:.85rem;
}
.integrante__sin-cuenta{
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tx-3);
}
/* El código de barras de mentira de la landing: la tarjeta es un documento. */
.integrante__codigo{
  width:54px;
  height:18px;
  margin-left:auto;
  border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--tx-3) 0 1px,transparent 1px 3px,var(--tx-3) 3px 5px,transparent 5px 7px);
  opacity:.5;
}
.integrante__acciones{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem;
  margin:.75rem -.35rem -.2rem;
  padding-top:.7rem;
  border-top:1px solid var(--brd);
}
.integrante__acciones .boton{flex:1 1 auto}
.integrante__acciones .boton-icono{margin-left:auto}
.integrante__acciones .boton-icono + .boton-icono{margin-left:0}

/* ── 3 · Invitar ────────────────────────────────────────────────────────── */
.invitar{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center}
/* El QR va sobre papel: oscuro sobre claro siempre, que es lo que lee una cámara. */
.invitar__papel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  width:min(100%,320px);
  margin:0;
  padding:1rem 1rem .8rem;
  border-radius:6px;
  background:var(--papel);
  color:var(--tinta);
  box-shadow:var(--sombra-papel),var(--sombra-hojas);
}
.invitar__pie{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.invitar__nombre{color:var(--tinta);font-weight:700}
.invitar__texto{max-width:40ch;font-weight:600;line-height:1.45;text-wrap:balance}
.invitar__detalle{max-width:44ch;color:var(--tx-2);font-size:.9rem;text-wrap:pretty}
.invitar__acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.invitar__vence{max-width:44ch;color:var(--tx-3);font-size:.82rem;text-wrap:pretty}
.invitar .nota{text-align:left}

.qr{display:block;width:100%;max-width:288px;height:auto;aspect-ratio:1}
.qr__fondo{fill:var(--papel)}
.qr__modulos{fill:var(--tinta)}

/* ── 4 · Avisos ─────────────────────────────────────────────────────────── */
.avisos{display:flex;flex-direction:column;gap:1.4rem;min-width:0}
.avisos__grupo{display:flex;flex-direction:column;gap:.55rem}
.avisos__dia{
  font-family:var(--f-mono);
  font-size:.76rem;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tx-3);
}
.avisos__fila{position:relative;align-items:flex-start}
.avisos__fila:has(.avisos__enlace):hover{background:var(--sup-1)}
.avisos__icono{
  display:grid;
  place-items:center;
  flex:none;
  width:36px;
  height:36px;
  margin-top:.05rem;
  border-radius:50%;
  background:var(--sup-3);
  color:var(--tx-2);
}
.avisos__icono--hoja,.avisos__icono--sistema{background:var(--sodio-tinte);color:var(--sodio-texto)}
.avisos__icono--cambio{background:var(--alerta-tinte);color:var(--alerta)}
.avisos__icono--inventario,.avisos__icono--equipo{background:var(--ok-tinte);color:var(--ok)}
.avisos__icono--gasto{background:var(--alto-tinte);color:var(--alto)}
/* Toda la fila es el enlace (el <a> del título se estira), sin perder la lista. */
.avisos__enlace{color:inherit}
.avisos__enlace::after{content:"";position:absolute;inset:0}
.avisos__enlace:focus-visible{outline:none}
.avisos__enlace:focus-visible::after{outline:2px solid var(--sodio);outline-offset:-2px;border-radius:inherit}
.avisos__cuerpo{margin-top:.15rem;color:var(--tx-2);font-size:.92rem;line-height:1.5;overflow-wrap:anywhere}
.avisos__flecha{color:var(--tx-3)}
.avisos__fila.is-no-leido{
  background:linear-gradient(90deg,var(--sodio-tinte),transparent 70%);
  box-shadow:inset 3px 0 0 var(--sodio);
}
.avisos__pie{display:flex;justify-content:center}
.avisos__fin{color:var(--tx-3);font-size:.86rem}
@media (max-width:560px){
  /* La lista compartida parte la fila en dos en el teléfono: acá el lado va arriba a la derecha. */
  .avisos__fila{flex-wrap:nowrap}
  .avisos__fila .lista__lado{flex-direction:column;align-items:flex-end}
}

/* ── 5 · La invitación pública ──────────────────────────────────────────── */
.invitacion__texto{color:var(--tx);font-weight:600;line-height:1.5;text-wrap:pretty}
.invitacion__lado{align-items:stretch}
.invitacion__pase{display:flex;justify-content:center;padding:.4rem .2rem 0}
.invitacion__pase .integrante{max-width:300px;transform:rotate(-1.5deg)}
.invitacion__ya .boton.is-destacado{--btn-borde:var(--sodio);--btn-tx:var(--sodio-texto);box-shadow:0 0 0 3px var(--sodio-tinte)}
.invitacion .nota{margin:0}

/* ── 6 · Movimiento reducido e impresión ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .invitacion__pase .integrante{transform:none}
}
@media print{
  .integrante__acciones,.avisos__pie,.equipo__nota{display:none}
  .integrante{box-shadow:none;break-inside:avoid}
}