/*
 * El intérprete.
 *
 * Móvil primero y sin compilar. La pantalla se usa de pie, con una mano, a
 * menudo con alguien delante esperando: las dos zonas de hablar son enormes a
 * propósito y ocupan la mitad inferior, que es donde llega el pulgar.
 *
 * Hereda los tokens del tema. Lo que se declara aquí es lo que solo tiene
 * sentido en este producto.
 */

.poc-i {
	--poc-i-bg: #101014;
	--poc-i-fg: #e9e9f0;
	--poc-i-dim: #9a9aab;
	--poc-i-line: #2a2a35;
	--poc-i-en: #2f6dd0;
	--poc-i-es: #c2410c;
	--poc-i-ok: #1f9d55;
	--poc-i-bad: #d14343;
	/* Tres colores que NO son el fondo ni el texto y que el tema claro tiene
	 * que poder cambiar: el rojo legible del aviso, el anillo de foco y lo que
	 * se escribe ENCIMA del botón primario. Sin ellos, el claro dejaba el
	 * mensaje de error en rosa sobre blanco, el foco invisible y el botón de
	 * «Activar el micrófono» negro sobre negro. */
	--poc-i-bad-fg: #ffb4b4;
	--poc-i-focus: #ffffff;
	--poc-i-on-fg: #0b0b0f;

	display: block;
	max-width: 40rem;
	margin: 0 auto;
	padding: var(--poc-space-2, 1rem);
	border-radius: var(--poc-radius, 14px);
	color: var(--poc-i-fg);
	background: var(--poc-i-bg);
}

/* ---------- Cabecera ---------- */

.poc-i-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.poc-i-chip {
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--poc-i-line);
	border-radius: 999px;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.poc-i.is-empty .poc-i-chip {
	color: var(--poc-i-bad-fg);
	border-color: var(--poc-i-bad);
}

/* A-77: con «5 minutos gratis» en la ficha (antes salía «0 créditos» y no
   se medía), los cinco botones no caben a 390 px y el último se salía del
   recuadro. Si no caben, bajan a su renglón, pegados a la derecha. */
.poc-i-head-actions {
	display: flex;
	gap: 0.4rem;
	margin-inline-start: auto;
}

.poc-i-icon {
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	border: 1px solid var(--poc-i-line);
	/* Píldora, como todo botón de la marca (auditoría 2026-10-07, P2-B). */
	border-radius: 999px;
	color: inherit;
	font: inherit;
	font-weight: 600;
	background: transparent;
	cursor: pointer;
}

/* ---------- Estado ----------
 *
 * Vive en `role="status"` con `aria-live="polite"`: es la única forma de que
 * quien no ve la pantalla se entere de que su turno se perdió o de que no se le
 * oyó. En este producto el estado NO es decorativo — dice si se está cobrando.
 */

.poc-i-status {
	min-height: 1.6em;
	margin: 0 0 0.75rem;
	color: var(--poc-i-dim);
	font-size: 0.9375rem;
	text-align: center;
}

.poc-i-status.is-bad {
	color: var(--poc-i-bad-fg);
	font-weight: 600;
}

/* ---------- Paneles de texto ---------- */

.poc-i-panes {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.poc-i-pane {
	min-height: 5.5rem;
	max-height: 11rem;
	padding: 0.6rem 0.75rem;
	overflow-y: auto;
	border: 1px solid var(--poc-i-line);
	border-radius: var(--poc-radius-sm, 8px);
	overscroll-behavior: contain;
}

.poc-i-pane-h {
	margin: 0 0 0.25rem;
	color: var(--poc-i-dim);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.poc-i-text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.poc-i-remote {
	margin: 0.4rem 0 0;
	padding-left: 0.6rem;
	border-left: 3px solid var(--poc-i-line);
	color: var(--poc-i-dim);
	font-size: 1rem;
}

/* ---------- Zonas de hablar ----------
 *
 * 44 px es el mínimo de accesibilidad; aquí son 140 y no es despilfarro: se
 * pulsan a ciegas, mientras miras a la cara de la otra persona.
 */

.poc-i-zones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.poc-i-zone {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	padding: 1rem;
	border: 2px solid var(--poc-i-line);
	border-radius: var(--poc-radius-lg, 18px);
	color: inherit;
	font: inherit;
	background: transparent;
	cursor: pointer;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	transition: transform 120ms ease, background-color 120ms ease;
}

.poc-i-zone[data-dir="en-es"] { border-color: color-mix(in srgb, var(--poc-i-en) 60%, var(--poc-i-line)); }
.poc-i-zone[data-dir="es-en"] { border-color: color-mix(in srgb, var(--poc-i-es) 60%, var(--poc-i-line)); }

.poc-i-zone:focus-visible {
	outline: 3px solid var(--poc-i-focus);
	outline-offset: 2px;
}

.poc-i-zone.is-talking {
	transform: scale(0.985);
	background: rgba(255, 255, 255, 0.08);
}

.poc-i-zone[data-dir="en-es"].is-talking { background: color-mix(in srgb, var(--poc-i-en) 30%, transparent); }
.poc-i-zone[data-dir="es-en"].is-talking { background: color-mix(in srgb, var(--poc-i-es) 30%, transparent); }

.poc-i-flag {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.poc-i-zone-h {
	color: var(--poc-i-dim);
	font-size: 0.9375rem;
}

/* Sin micro todavía: las zonas no se ofrecen como si funcionaran. */
.poc-i:not(.is-live) .poc-i-zones {
	opacity: 0.35;
	pointer-events: none;
}

/* ---------- Arranque, prueba y compra ---------- */

.poc-i-start,
.poc-i-trial,
.poc-i-buy,
.poc-i-room,
.poc-i-pwa {
	margin-top: 0.9rem;
	text-align: center;
}

.poc-i-why,
.poc-i-note {
	margin: 0 0 0.6rem;
	color: var(--poc-i-dim);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.poc-i-note.is-bad { color: var(--poc-i-bad-fg); }

.poc-i-primary {
	display: inline-block;
	min-height: 52px;
	padding: 0.85rem 1.4rem;
	border: 0;
	/* Píldora, como todos los botones de la marca (docs/39, P1-1). */
	border-radius: 999px;
	color: var(--poc-i-on-fg);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	background: var(--poc-i-fg);
	cursor: pointer;
}

.poc-i-link {
	color: inherit;
	overflow-wrap: anywhere;
}

.poc-i-ctl-btn {
	min-height: 48px;
	padding: 0 1rem;
	border: 1px solid var(--poc-i-line);
	border-radius: 999px;
	color: inherit;
	font: inherit;
	background: transparent;
	cursor: pointer;
}

/* ---------- Controles ---------- */

.poc-i-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: end;
	justify-content: center;
	margin-top: 0.9rem;
}

.poc-i-ctl {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: 0.8125rem;
	text-align: left;
}

.poc-i-ctl select {
	min-height: 48px;
	padding: 0 0.6rem;
	border: 1px solid var(--poc-i-line);
	border-radius: var(--poc-radius-sm, 8px);
	color: inherit;
	font: inherit;
	font-size: 1rem;
	background: transparent;
}

/* ---------- Sala ---------- */

.poc-i-room-code {
	margin: 0.3rem 0;
	font-family: var(--poc-font-mono, ui-monospace, monospace);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

/* El LED de presencia dice DOS cosas, y son distintas: si la otra persona
 * está, y si ya puede hablar. «En línea» no bastaba. */
.poc-i-room-presence::before {
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-right: 0.45em;
	border-radius: 50%;
	background: var(--poc-i-bad);
	content: "";
}

.poc-i-room-presence.is-on::before { background: #d4a017; }
.poc-i-room-presence.is-ready::before { background: var(--poc-i-ok); }

/* ---------- Escalera de pases ---------- */

.poc-i-packs {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.poc-i-pack {
	padding: 0.9rem;
	border: 1px solid var(--poc-line, #dfe5ec);
	border-radius: var(--poc-radius-sm, 8px);
	text-align: center;
}

.poc-i-pack h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; }

/* «Recomendado»: borde de marca y una etiqueta. El oro es de conversión y ya
 * lo lleva el botón; la etiqueta va en tinta para no gastar un segundo oro. */
.poc-i-pack.is-featured { border: 2px solid var(--poc-ink, #0d1b2a); }
.poc-i-pack-badge {
	display: inline-block;
	margin: 0 0 0.4rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	/* La pareja de marca: con `--poc-ink` y `#fff` fijo, en oscuro la tinta se
	   invertía a casi blanco y la etiqueta quedaba a 1,12:1 (docs/39, P1-6). */
	background: var(--poc-brand);
	color: var(--poc-brand-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.poc-i-pack-credits { margin: 0 0 0.2rem; font-weight: 600; }
.poc-i-pack-price { margin: 0 0 0.6rem; }

/* Dentro de una tarjeta de la cuenta, el pase es lo anidado: relleno suave y
   sin borde propio (tarjeta dentro de tarjeta, `app-dashboard.md`). */
.poc-app .poc-i-pack { border-color: transparent; background: var(--poc-surface); }
.poc-app .poc-i-pack.is-featured { border-color: var(--poc-ink); }

.poc-i-buy .poc-i-packs { margin-top: 0.6rem; }

/* ---------- Detalle ---------- */

.poc-i-detail {
	margin-top: 0.9rem;
	padding: 0.75rem;
	border: 1px solid var(--poc-i-line);
	border-radius: var(--poc-radius-sm, 8px);
	font-size: 0.9375rem;
}

.poc-i-detail dl { display: grid; gap: 0.3rem; margin: 0; }
.poc-i-detail div { display: flex; justify-content: space-between; gap: 1rem; }
.poc-i-detail dt { color: var(--poc-i-dim); }
.poc-i-detail dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- Señal ---------- */

.poc-i.sig-bad .poc-i-chip { border-color: #d4a017; }

/* ---------- La pantalla de la cuenta ---------- */

.poc-i-app .poc-i-balance-n {
	margin: 0 0 0.3rem;
	font-size: 1.5rem;
}

.poc-i-app .poc-i-balance-eq {
	color: var(--poc-muted, #51617a);
	font-size: 1rem;
}

.poc-i-app .poc-i-note,
.poc-i-app .poc-i-accounting {
	color: var(--poc-muted, #51617a);
	font-size: 0.9375rem;
}

.poc-i-app .poc-i-accounting span {
	display: block;
	margin-top: 0.2rem;
}

.poc-i-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--poc-line, #dfe5ec);
	border-radius: 999px;
	font-size: 0.8125rem;
}

.poc-i-ledger {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.poc-i-ledger th,
.poc-i-ledger td {
	padding: 0.5rem 0.4rem;
	border-bottom: 1px solid var(--poc-line, #dfe5ec);
	text-align: left;
}

.poc-i-num {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.poc-i-num.is-down { color: #b3261e; }
.poc-i-num.is-up { color: #1f6f43; }

.poc-i-ref-url {
	width: 100%;
	min-height: 48px;
	padding: 0 0.6rem;
	border: 1px solid var(--poc-line, #dfe5ec);
	border-radius: var(--poc-radius-sm, 8px);
	font: inherit;
}

/* El botón de copiar no tenía ni una línea de estilo: salía como un botón
   crudo del navegador, de 21 px de alto, al lado de un campo de 48. Además de
   feo, 21 px incumple el mínimo de 24 de WCAG 2.5.8 —el de 44 con el dedo—,
   y está en la página del producto que más se abre desde un teléfono. */
.poc-i-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 0.6rem;
	padding: 0 1.1rem;
	border: 1px solid var(--poc-ink, #0d1b2a);
	border-radius: 999px;
	background: transparent;
	color: var(--poc-ink, #0d1b2a);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.poc-i-copy:hover { background: var(--poc-ink, #0d1b2a); color: var(--poc-surface, #fff); }
.poc-i-copy:focus-visible { outline: 3px solid var(--poc-focus, #b8922a); outline-offset: 2px; }

.poc-switch {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	min-height: 48px;
	cursor: pointer;
}

/* ---------- Pantallas anchas ---------- */

@media (min-width: 40rem) {
	.poc-i-panes { grid-template-columns: 1fr 1fr; }
	.poc-i-packs { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Menos movimiento ----------
 *
 * Quien lo pide no quiere que nada se mueva solo. Aquí lo único que se mueve es
 * la zona al pulsarla, que es respuesta directa a un gesto y no una animación;
 * aun así se quita, porque el color ya lo dice.
 */

@media (prefers-reduced-motion: reduce) {
	.poc-i-zone {
		transition: none;
	}

	.poc-i-zone.is-talking {
		transform: none;
	}
}

/* ---------- Contraste alto ---------- */

@media (prefers-contrast: more) {
	.poc-i {
		--poc-i-line: #6b6b7d;
		--poc-i-dim: #cdcddb;
	}
}

/* El QR de la sala: blanco detrás siempre, también en tema oscuro, o el
   teléfono del invitado no lo lee. */
.poc-i-room-qr {
	margin: 0.5rem auto;
	text-align: center;
}

.poc-i-room-qr img {
	display: inline-block;
	width: min(220px, 60vw);
	height: auto;
	padding: 12px;
	background: #fff;
	border-radius: 12px;
	image-rendering: pixelated;
}

/* ---------- Conversación ----------
 *
 * La hoja vive debajo de todo y no tapa las zonas de hablar: se consulta entre
 * turnos, con la otra persona delante, y perder el botón bajo un panel modal
 * sería cambiar una función por otra.
 */

.poc-i-hist {
	margin-top: 0.9rem;
	padding: 0.75rem;
	border: 1px solid var(--poc-i-line);
	border-radius: var(--poc-radius-sm, 8px);
}

.poc-i-hist-h {
	margin: 0 0 0.6rem;
	font-size: 1rem;
}

.poc-i-hist-list {
	max-height: 40vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.poc-i-hist-turn {
	padding: 0.5rem 0 0.5rem 0.6rem;
	border-left: 3px solid var(--poc-i-line);
}

.poc-i-hist-turn + .poc-i-hist-turn {
	margin-top: 0.4rem;
}

.poc-i-hist-turn[data-dir="en-es"] { border-left-color: var(--poc-i-en); }
.poc-i-hist-turn[data-dir="es-en"] { border-left-color: var(--poc-i-es); }

.poc-i-hist-in {
	margin: 0;
	color: var(--poc-i-dim);
	font-size: 0.9375rem;
}

.poc-i-hist-out {
	margin: 0.15rem 0 0;
	font-size: 1rem;
}

.poc-i-hist-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.75rem;
}

/* ---------- Rescate del micrófono ---------- */

.poc-i-rescue {
	margin-top: 0.75rem;
}

.poc-i-rate {
	margin: 0.35rem 0 0;
	flex-basis: 100%;
}

/* ---------- Tema claro ----------
 *
 * El intérprete nace oscuro —se usa de pie y a menudo de noche—, pero a pleno
 * sol no se lee. `is-light` es la elección manual; sin elección manda el
 * sistema. Los colores están medidos contra AA sobre el fondo de cada tema:
 * el atenuado llega a 6,4:1 y los dos idiomas por encima de 5:1.
 */

.poc-i.is-light {
	--poc-i-bg: #ffffff;
	--poc-i-fg: #0d1b2a;
	--poc-i-dim: #5a5a6a;
	--poc-i-line: var(--poc-line, #e1e6ee);
	--poc-i-en: #1d4ed8;
	--poc-i-es: #b3360a;
	--poc-i-ok: #157347;
	--poc-i-bad: #b42318;
	--poc-i-bad-fg: #b42318;
	--poc-i-focus: #0d1b2a;
	--poc-i-on-fg: #ffffff;
}

@media (prefers-color-scheme: light) {
	.poc-i:not(.is-dark) {
		--poc-i-bg: #ffffff;
		--poc-i-fg: #0d1b2a;
		--poc-i-dim: #5a5a6a;
		--poc-i-line: var(--poc-line, #e1e6ee);
		--poc-i-en: #1d4ed8;
		--poc-i-es: #b3360a;
		--poc-i-ok: #157347;
		--poc-i-bad: #b42318;
		--poc-i-bad-fg: #b42318;
		--poc-i-focus: #0d1b2a;
		--poc-i-on-fg: #ffffff;
	}
}

.poc-i-tagline {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	line-height: 1.5;
}