/* 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-color: var(--panel);
  background-image: var(--grad-superficie);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  color: inherit;
  text-align: left;
  font: inherit;
}

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

.chip {
  display: inline-block;
  padding: 2px var(--sp-2);
  border: 1px solid var(--line-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(--line-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);
  /* Secundario: fondo apenas marcado + hairline, nunca el outline gris de un control. */
  background: color-mix(in srgb, var(--ink) 6%, var(--panel));
  color: var(--ink);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  font: 600 var(--fs-md) / 1 inherit;
}

.btn:active { background: var(--fill-hi); }
.btn:disabled { opacity: 0.5; }
/* Primario: degradé dorado + sombra cálida, el único con ese peso por pantalla. */
.btn.primario { background-image: var(--accent-grad); background-color: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: var(--accent-sh); }
.btn.plano { background: transparent; border-color: transparent; color: var(--faint); font-weight: 500; }
/* A diferencia de `.plano` (sin borde, texto fantasma), ésta SÍ dibuja el contorno: es la
 * negativa de una decisión binaria (p. ej. «Rechazar» junto a un `.primario` ámbar), donde
 * hace falta que se vea como un botón y no como un link apagado. */
.btn.contorno { background: transparent; border-color: var(--border-ctl); color: var(--ink); }
/* 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 ──────────────────────────────────────────────────── */
/* Cápsula de vidrio: el alto y la posición los pone/mide el layout (--pie-alto); acá
   sólo se pinta la superficie translúcida con blur, para que se lea flotando encima
   del contenido en vez de una barra opaca pegada al borde. */
.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-color: var(--vidrio);
  background-image: var(--grad-superficie);
  backdrop-filter: var(--blur-vidrio);
  -webkit-backdrop-filter: var(--blur-vidrio);
  border-top: 1px solid var(--line-hi);
}

.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); }
/* Fondo ámbar suave detrás del ícono activo, además del glow existente. */
.tab.activa .tab-icono { display: inline-flex; align-items: center; justify-content: center; padding: 2px 13px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 16%, transparent); text-shadow: 0 0 10px var(--glow-accent); }

/* ── 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: var(--z-aviso);
}

.toast {
  max-width: min(92vw, 420px);
  padding: var(--sp-2) var(--sp-4);
  background: var(--panel-velo);
  backdrop-filter: var(--blur-vidrio);
  -webkit-backdrop-filter: var(--blur-vidrio);
  border: 1px solid var(--line-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); }

/* Peligro: rojo suave (fondo tenue), sin contorno duro — se distingue sin gritar. */
.btn.peligro { color: var(--conflict); border-color: transparent; background: color-mix(in srgb, var(--conflict) 12%, 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); }
}

/* ── Selector segmentado ────────────────────────────────────────────────────
   Tres opciones excluyentes en una fila (el tema, por ahora). Cada celda respeta el
   mínimo táctil y la elegida se pinta con el acento, igual que un botón primario. */
.segmentado {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--fill);
}

.seg-op {
  flex: 1;
  min-height: calc(var(--toque) - 8px);
  border: 0;
  border-radius: calc(var(--r-md) - 3px);
  background: transparent;
  color: var(--muted);
  font: 600 var(--fs-sm) / 1 inherit;
  cursor: pointer;
}

.seg-op.activa {
  background: var(--accent);
  color: var(--on-accent);
}