/* Componentes del cockpit móvil: tarjetas, controles, avisos y toasts.
   Los tokens y el layout viven en app.css. */

/* ── Tarjetas y listas ──────────────────────────────────────────────────── */
.card {
  display: block;
  width: 100%;
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  color: inherit;
  text-align: left;
  font: inherit;
}

.card:active { background: var(--panel2); transform: scale(0.995); }

.chip {
  display: inline-block;
  padding: 2px var(--sp-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.aviso {
  padding: var(--sp-4);
  background: var(--panel);
  border: 1px dashed var(--border-hi);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.aviso p { margin: 0 0 var(--sp-2); }
.aviso:last-child p { margin-bottom: 0; }

/* ── Controles ──────────────────────────────────────────────────────────── */
.btn {
  min-height: var(--toque);
  padding: 0 var(--sp-4);
  background: var(--fill);
  color: var(--ink);
  border: 1px solid var(--border-ctl);
  border-radius: var(--r-md);
  font: 600 var(--fs-md) / 1 inherit;
}

.btn:active { background: var(--fill-hi); }
.btn:disabled { opacity: 0.5; }
.btn.primario { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.plano { background: transparent; border-color: transparent; color: var(--faint); font-weight: 500; }
/* Acción secundaria: la que está SIEMPRE a mano pero casi nunca se toca (pausar, cancelar,
   backlog, cerrar). Chica a propósito — el alto táctil completo es para lo que uno vino a
   hacer, no para lo que puede arruinar la tarea de un dedazo. */
.btn.mini {
  min-height: 26px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
}
/* `.mini` apaga el color del texto y se declara DESPUÉS de `.primario`: sin esto un
   mini primario queda ámbar sobre gris claro, ilegible. */
.btn.mini.primario { color: var(--on-accent); font-weight: 600; }
/* Botón de sólo ícono: cuadrado y sin padding lateral, para filas bajas (el composer).
   El SVG ya trae su tamaño; acá sólo se lo centra. */
.btn.icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--toque);
  padding: 0;
}

.input {
  width: 100%;
  min-height: var(--toque);
  padding: 0 var(--sp-3);
  background: var(--panel2);
  color: var(--ink);
  border: 1px solid var(--border-ctl);
  border-radius: var(--r-md);
  font: var(--fs-md) / 1.4 inherit;
}

.input::placeholder { color: var(--faint); }

/* El zoom automático de iOS al enfocar un input arranca por debajo de 16 px. */
@supports (-webkit-touch-callout: none) {
  .input, textarea { font-size: 16px; }
}

.form { display: flex; flex-direction: column; gap: var(--sp-3); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Barra de pestañas ──────────────────────────────────────────────────── */
.tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--alto-tabs) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--panel);
  border-top: 1px solid var(--border);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: 0;
  color: var(--faint);
  font: 500 var(--fs-xs) / 1 inherit;
}

.tab-icono { font-size: var(--fs-lg); line-height: 1; }
.tab.activa { color: var(--accent); }
.tab.activa .tab-icono { text-shadow: 0 0 10px rgba(230, 169, 56, 0.45); }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--alto-tabs) + var(--safe-bottom) + var(--sp-3));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
  z-index: 50;
}

.toast {
  max-width: min(92vw, 420px);
  padding: var(--sp-2) var(--sp-4);
  background: var(--panel2);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  font-size: var(--fs-sm);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.toast.salir { opacity: 0; transform: translateY(6px); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Pantalla de enlace (/pair) ─────────────────────────────────────────── */
.app-simple { grid-template-rows: 1fr; }
.marca-icono { align-self: center; border-radius: var(--r-lg); box-shadow: var(--sh-sm); }

.input.codigo {
  font: 700 24px / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.24em;
  text-align: center;
  text-indent: 0.24em; /* compensa el tracking del último carácter */
}

.estado-conexion:empty { display: none; }

/* ── Enlace del teléfono ────────────────────────────────────────────────── */
.card-enlace { display: flex; flex-direction: column; gap: var(--sp-3); }

.fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.et { color: var(--faint); font-size: var(--fs-sm); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); color: var(--muted); }

.btn.peligro { color: var(--conflict); border-color: var(--conflict); background: transparent; }
.como-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.avanzado {
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.avanzado > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-sm);
  list-style: none;
  min-height: var(--toque);
  display: flex;
  align-items: center;
}

.avanzado > summary::-webkit-details-marker { display: none; }
.avanzado > summary::before { content: '⌄'; margin-right: var(--sp-2); color: var(--faint); }
.avanzado[open] > summary::before { content: '⌃'; }
.avanzado > .form, .avanzado > .sub { margin-top: var(--sp-2); }

/* ── Avatar de proyecto ─────────────────────────────────────────────────── */
/* Monograma (o logo) de identidad del proyecto. Vive acá y no en proyectos.css porque lo
   usan la card del tablero Y el encabezado, que es global a todas las pantallas. */
.cp-avatar {
  position: relative;
  flex: 0 0 auto;
  width: var(--lado, 30px);
  height: var(--lado, 30px);
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ident) 22%, var(--panel));
  color: var(--ident);
  font: 700 12px / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Con logo, la imagen es la identidad: el fondo tintado del monograma sobra. */
.cp-avatar.con-logo { background: none; }

.cp-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

/* Trabajando: el trazo RECORRE el contorno del ícono (como en el escritorio) en vez de
   girar un aro, que sobre un cuadrado se ve roto. La animación mueve el guion sobre el
   perímetro; `--per` lo calcula avatarProyecto.js según el tamaño. */
.cp-trazo {
  position: absolute;
  inset: -3px;
  color: var(--ident); /* mismo tono que el escritorio: el trazo es del proyecto */
  pointer-events: none;
  overflow: visible;
}

.cp-trazo rect { animation: recorrer-contorno 1.6s linear infinite; }

@keyframes recorrer-contorno {
  to { stroke-dashoffset: calc(var(--per) * -1); }
}