/* Paquete equipos — corrección del frontend 13-sep-2026 (docs/auditoria/frontend-vistas-2026-09-13.md). */

/* ── Tipografía ─────────────────────────────────────────────────────────────
   Las vistas de equipo usaban la clase `orbitron`, que material.css define como
   `font-family: orbitron` SIN respaldo. El proyecto no trae esa fuente (ver la
   medición en cyberconquer.css, sección MARCADORES), así que el nombre del
   equipo, los puntos y la lista de integrantes se pintaban en la serif por
   omisión del navegador dentro de una consola en Geist. Se retiró la clase de
   las vistas; esto cubre cualquier resto heredado dentro de estas pantallas. */
.team-view, .team-card, .team-invite, .team-create, .team-update { font-family: var(--sans); }
.team-view .orbitron, .team-card .orbitron, .team-invite .orbitron { font-family: var(--sans); }
/* DCC-02: la clase no era la única vía. material.css asigna `font-family:
   Orbitron` (sin respaldo) por selector a `.team-card h4.card-title`,
   `.team-card h6.badge` y a los enlaces de `.team-members`: medido en /teams,
   «EQUIPO UX» salía en Times con 3.74px de espaciado. Mismos selectores, con la
   monoespaciada del proyecto que ya usa /team/mine. */
.team-card h4.card-title, .team-view h4.card-title, .team-invite h4.card-title {
  font-family: var(--mono); letter-spacing: .14em;
}
.team-card h6.badge,
.team-members li.nav-item a,
.team-members li.pending a { font-family: var(--sans); }
.equipo-cifra { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.team-view .badge.equipo-cifra, .team-card .badge.equipo-cifra { margin: 0 4px 6px 0; }

/* ── Aviso de solicitud pendiente ───────────────────────────────────────────
   Ámbar de espera, no rojo de error. role=status en el marcado. */
.equipo-aviso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--warn-bg); border: 1px solid oklch(0.60 0.14 80 / 0.45); border-radius: var(--r-sm);
  color: var(--fg-dim); font-size: 13.5px; line-height: 1.55;
}
.equipo-aviso p { margin: 0; flex: 1 1 28ch; }
.equipo-aviso strong { color: var(--warn); }
/* btn-outline-secondary del tema es gris sobre gris: en la captura a 1440 px
   «Retirar mi solicitud» casi no se veía sobre el ámbar del aviso. */
.equipo-aviso .btn { color: var(--fg); border-color: var(--line-bright); background: var(--bg-1); white-space: normal; }
.equipo-aviso .btn:hover { border-color: var(--warn); color: var(--fg); }

/* ── Enlace de invitación ───────────────────────────────────────────────── */
.equipo-invitacion p { margin: 0 0 6px; color: var(--fg-dim); }
.equipo-enlace { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.equipo-enlace code { overflow-wrap: anywhere; word-break: break-all; }
.equipo-enlace code a { color: var(--accent); font-weight: 600; }

/* ── Integrantes ─────────────────────────────────────────────────────────── */
.equipo-integrantes td { vertical-align: middle; }
.equipo-col-avatar { width: 38px; }
.equipo-col-acciones { width: 1%; white-space: nowrap; text-align: right; }
.equipo-integrantes a { overflow-wrap: anywhere; }

/* El estado se dice con texto; el color solo acompaña. Antes la fila pendiente
   era `bg-dark text-danger` y un icono sin nombre: estado transmitido solo por
   color. */
.equipo-fila-pendiente td { color: var(--fg-mute); }
/* El enlace del perfil heredaba rojo en la fila pendiente (captura 1440): rojo
   es error, y esperar aprobación no lo es. La insignia ya lo dice. */
.equipo-fila-pendiente td a, .equipo-fila-pendiente td a:hover { color: var(--fg-dim); }
.equipo-insignia {
  display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--bg-3); color: var(--fg-dim);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  vertical-align: middle; white-space: nowrap;
}
.equipo-insignia--pendiente { background: var(--warn-bg); color: var(--warn); border: 1px solid oklch(0.60 0.14 80 / 0.45); }

/* ── Botones de acción (formularios POST) ──────────────────────────────────
   Las acciones dejaron de ser <a href data-method> para no dejar un href que
   copiar y abrir por GET. El formulario no debe romper la línea ni el botón
   parecer un botón de formulario del navegador. 36 px de lado: objetivo táctil
   usable en un teléfono. */
.equipo-accion-form { display: inline-block; margin: 0; }
.equipo-accion-form--bloque { display: block; }
.equipo-icono-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px; padding: 0 6px; margin: 0 0 0 2px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--info); font-size: 1.15em; line-height: 1; cursor: pointer;
}
.equipo-icono-btn:hover { background: var(--bg-2); border-color: var(--line); }
.equipo-icono-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.equipo-icono-btn--peligro { color: var(--danger); }

.equipo-acciones-capitan { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.equipo-acciones-capitan > * { flex: 1 1 12rem; }
.equipo-acciones-capitan .btn { width: 100%; justify-content: center; margin: 0; }

.team-card .card-footer, .team-view .card-footer { display: block; }
.equipo-nota { margin: 8px 0 0; color: var(--fg-mute); font-size: 12.5px; line-height: 1.5; text-align: center; }

/* La columna de la tarjeta traía `min-width: 27em` en línea: 432 px, más que
   un teléfono de 390 px, así que la página se desbordaba de lado. */
.equipo-columna-tarjeta { min-width: 0; max-width: 40em; }
@media (min-width: 1200px) { .equipo-columna-tarjeta { min-width: 22rem; } }

.equipo-reclutamiento { text-align: center; color: var(--fg-dim); }

/* ── Formulario de edición ──────────────────────────────────────────────────
   El rótulo del input de archivo era `btn-warning text-dark`: oklch(0.155) casi
   negro sobre ámbar al 14 % encima del fondo oscuro, ilegible; y `btn` le daba
   white-space: nowrap, así que a 390 px se cortaba «(PNG DE 300>». */
/* Especificidad subida a propósito: la regla de etiquetas de formulario del tema
   (mayúsculas y gris atenuado) ganaba a una sola clase — medido en el navegador:
   color oklch(0.66 0.016 260) y text-transform uppercase sobre este rótulo. */
.team-update .field-team-uploadedavatar label.equipo-btn-logo,
.equipo-btn-logo {
  display: inline-block; max-width: 100%; white-space: normal; text-align: center; line-height: 1.35;
  padding: 9px 14px; margin-top: 10px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--fg); text-transform: none; letter-spacing: 0; font-size: 13px; cursor: pointer;
}
.equipo-btn-logo:hover { border-color: var(--line-bright); }
.team-update input[type=file]:focus-visible + .equipo-btn-logo,
.team-update .field-team-uploadedavatar:focus-within .equipo-btn-logo { outline: 2px solid var(--accent); outline-offset: 2px; }
.team-update .form-text, .team-create .form-text, .team-update .help-block, .team-create .help-block,
.equipo-ayuda { display: block; margin-top: 4px; color: var(--fg-mute); font-size: 12.5px; line-height: 1.45; }
.equipo-form-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* «Tu equipo» en la tarjeta propia de /teams (DCC-09): la cabecera ya lleva el
   único «Ir a mi equipo». */
.equipo-tarjeta-propia { display: block; text-align: center; margin: 6px 0; }

/* ── Áreas táctiles en teléfono (DCC-05) ────────────────────────────────────
   Medido a 390px: segmentos de /teams de 27px de alto y «Generar un enlace
   nuevo» de 36x36. En escritorio se conserva el tamaño compacto. */
@media (max-width: 760px) {
  .equipos-barra .segmento { min-height: 44px; }
  .equipo-icono-btn { min-width: 44px; min-height: 44px; }
  .team-update input[type=checkbox] { width: 20px; height: 20px; }
}