/* Traductor en Vivo (croma) — hoja de estilos */
#lt-app{
	--chroma:#00ff00;          /* verde croma (ajústalo aquí) */
	--ink:#ffffff;             /* color del texto traducido */
	--stroke:1px #fff;         /* contorno del texto (ancho+color) */
	--font:'Playfair Display', 'Cormorant Garamond', Georgia, serif;
	--lt-size:120px;           /* tamaño máximo de la letra */
	--box-w:1720px;            /* ancho del marco */
	--box-h:26vh;              /* alto del marco */
	--box-bg:transparent;      /* color de relleno interno del cuadro (croma) */
	--bg:#00ff00;              /* color de fondo principal de la pantalla */
	--fit:calc(var(--box-h) * .42);  /* mayor letra que cabe en 2 líneas dentro del marco */

	position:fixed !important;
	top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
	width:100vw !important; height:100vh; z-index:999999;
	max-width:none !important;
	background:var(--bg, #00ff00);
	overflow:hidden;
	font-family:var(--font);
}
#lt-app *{ box-sizing:border-box; }
#lt-app.show-chroma{ box-shadow:inset 0 0 0 6px #0a5d00; }

/* capa de texto: anclada abajo, como subtítulos (reserva espacio para la barra de control) */
.lt-stage{
	position:absolute; inset:0;
	display:flex; flex-direction:column;
	justify-content:center; align-items:center;
	padding:0 6vw;
	text-align:center; gap:1.6vh;
	pointer-events:none;
}
.lt-source{
	color:#0a7d00; font-family:'Cormorant Garamond', serif;
	font-size:clamp(20px,3.2vw,44px); font-weight:600;
	letter-spacing:.4px; font-style:italic; opacity:.9;
	max-width:78%;
	min-height:1.4em;
}
/* banner oscuro opcional detrás del texto (toggle) */
/* ocultamos la transcripción en español: solo se muestra la traducción en inglés */
.lt-source{ display:none; }

/* caja de subtítulos: dimensión FIJA siempre, texto contenido dentro, lo de más atrás se elimina */
.lt-feed{
	position:relative; width:min(var(--box-w,1720px),94%); height:var(--box-h,26vh);
	box-sizing:border-box; padding:1.5vh 2vw; border-radius:28px;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	text-align:center; background:var(--box-bg, transparent); overflow:hidden;
}
/* guía: borde visible del cuadro (para calibrar posición) */
.lt-feed.lt-guide{ border:3px solid #ff0000; }
.lt-committed{ display:flex; flex-direction:column; align-items:center; gap:.4vh; width:100%; flex:none; }
#lt-app.with-banner .lt-feed{ background:rgba(0,0,0,.62); border-radius:20px; padding:10px 34px; }

/* línea de traducción rodante: la más nueva grande, las viejas van desapareciendo */
.lt-ln{
	color:var(--ink);
	font-family:var(--font);
	line-height:1.08; letter-spacing:.02em;
	text-shadow:none; /* 100% blanco, sin borde */
	width:100%; margin:0;
}
.lt-ln--new{ font-size:min(var(--lt-size,120px), var(--fit)); font-weight:700; }
.lt-ln--old-1{ font-size:clamp(24px,3.4vw,56px); font-weight:600; opacity:1; margin-bottom:.4vh; }
.lt-ln--old-2{ font-size:clamp(18px,2.4vw,40px); font-weight:600; opacity:1; margin-bottom:.4vh; }

/* aparición progresiva (estilo transcripción de Google) */
@keyframes ltFade{ from{opacity:0; letter-spacing:.06em;} to{opacity:1; letter-spacing:.02em;} }
.lt-reveal{ animation:ltFade .32s ease forwards; }

/* contorno variable y relleno del texto en todos los textos del display */
.lt-ln, .lt-hint{
	-webkit-text-stroke:var(--stroke, 1px #fff);
}

/* entrada suave de la línea nueva (las viejas se desvanecen por contraste) */
@keyframes ltIn{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.lt-ln--new{ animation:ltIn .5s ease forwards; }

/* estado vacío (antes de hablar o mientras se escucha) */
.lt-hint{
	color:var(--ink); opacity:1; font-style:italic;
	font-size:min(clamp(28px,4vw,var(--lt-size,76px)), var(--fit)); font-weight:600; letter-spacing:.03em;
	animation:ltIn .6s ease forwards;
}

/* barra de control (no es verde: se elimina aparte al hacer croma) */
.lt-bar{
	position:absolute; left:50%; bottom:96px; transform:translateX(-50%);
	z-index:5; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
	font-family:-apple-system,Segoe UI,Roboto,sans-serif;
	width:min(1230px,96vw);
	background:rgba(12,12,12,.78); color:#fff;
	padding:8px 14px; border-radius:12px; font-size:13px;
	box-shadow:0 6px 20px rgba(0,0,0,.4);
	user-select:none;
	transition:opacity .3s, transform .3s;
}
#lt-app.bar-hidden .lt-bar{ opacity:0; transform:translateX(-50%) translateY(10px); pointer-events:none; }
.lt-bar button,.lt-bar select{
	font:inherit; color:#fff; background:#2b2b2b; border:1px solid #444;
	border-radius:9px; padding:6px 11px; cursor:pointer; height:34px;
	line-height:1; transition:background .15s, border-color .15s;
}
.lt-bar button:focus-visible,.lt-bar select:focus-visible{ outline:2px solid #2fd93f; outline-offset:2px; }
.lt-bar button:hover{ background:#3a3a3a; border-color:#5a5a5a; }
.lt-bar button:active{ transform:translateY(1px); }
.lt-bar button.on{ background:#0a7d00; border-color:#0fa500; }
.lt-status{ opacity:.75; min-width:96px; text-align:center; }
.lt-sep{ width:1px; height:22px; background:#555; }

/* aviso en pantalla (permisos / errores) */
.lt-note{
	position:absolute; top:50%; left:12%; right:12%; transform:translateY(-50%);
	text-align:center;
	font-family:Segoe UI,sans-serif; font-size:26px; font-weight:600; color:#004d00;
	background:#aaffaa; border:2px solid #00a300; border-radius:18px;
	padding:28px 30px; z-index:7; line-height:1.4;
	display:none;
}
.lt-note.show{ display:block; }

/* encabezado de estilos (fuente / contorno / color) — barra superior visible */
.lt-panel{
	position:absolute; left:50%; top:16px; transform:translateX(-50%);
	z-index:6; display:flex; flex-direction:row; align-items:center; justify-content:center;
	flex-wrap:wrap; gap:4px 12px;
	font-family:-apple-system,Segoe UI,Roboto,sans-serif; font-size:13px; color:#fff;
	width:min(1230px,96vw); min-height:140px;
	background:rgba(12,12,12,.78); border-radius:12px; padding:6px 12px;
	box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.lt-panel.hide{ display:none; }
.lt-panel label{ display:flex; flex-direction:row; align-items:center; gap:6px; font-weight:600; }
.lt-panel select{
	font:inherit; font-weight:500; color:#fff; background:#2b2b2b;
	border:1px solid #444; border-radius:8px; padding:4px 7px; cursor:pointer;
}
.lt-colors{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-weight:600; }
.lt-colors .sw{
	width:20px; height:20px; border-radius:5px; border:2px solid rgba(255,255,255,.55);
	cursor:pointer; padding:0; box-sizing:border-box;
}
.lt-colors .sw-none{ background:repeating-linear-gradient(45deg,#3a3a3a 0 3px,#555 3px 6px); border-style:dashed; }
.lt-colors .sw.active{ outline:2px solid #2fd93f; outline-offset:2px; }
.lt-panel input[type=range]{ width:96px; accent-color:#2fd93f; }
.lt-panel input[type=color]{ width:38px; height:26px; border:none; padding:0; background:none; cursor:pointer; }

#lt-collapse{ cursor:pointer; color:#fff; background:#2b2b2b; border:1px solid #555; border-radius:8px; width:32px; height:32px; font-size:18px; line-height:1; padding:0; }
#lt-collapse:hover{ border-color:#2fd93f; }
#lt-app.panel-collapsed #lt-collapse{ transform:rotate(180deg); background:transparent; border:none; width:auto; height:auto; font-size:24px; color:#dcdce0; margin:0 auto; padding:0 10px; }
#lt-app.panel-collapsed .lt-panel > *:not(#lt-collapse){ display:none; }
#lt-app.panel-collapsed .lt-panel{
	width:min(460px,92vw); min-height:46px; padding:10px 16px;
	background:linear-gradient(180deg,#2b2b30,#131316);
	border:1px solid rgba(255,255,255,.14);
	box-shadow:0 12px 34px rgba(0,0,0,.55);
	border-radius:14px;
}

/* ---- responsive: pantallas pequeñas (móvil / iPhone) adapta los paneles ---- */
@media (max-width:600px){
	#lt-app .lt-panel{
		width:97vw; top:12px; gap:5px 8px; padding:6px 8px; border-radius:12px;
	}
	#lt-app .lt-panel label{ font-size:12px; gap:4px; }
	#lt-app .lt-panel label span{ display:none; }
	#lt-app .lt-panel input[type=range]{ width:80px; height:22px; }
	#lt-app .lt-panel select{ padding:3px 5px; font-size:12px; max-width:128px; }
	#lt-app .lt-colors{ gap:4px; font-size:12px; }
	#lt-app .lt-colors .sw{ width:19px; height:19px; }
	#lt-app .lt-panel input[type=color]{ width:32px; height:24px; }
	#lt-collapse{ width:28px; height:28px; }

	#lt-app .lt-bar{
		width:97vw; bottom:22vh; gap:6px; padding:6px 8px; border-radius:12px;
	}
	#lt-app .lt-bar button,#lt-app .lt-bar select{
		padding:4px 8px; height:32px; font-size:12px; max-width:150px;
	}
	#lt-app .lt-bar select{ max-width:122px; }
	.lt-status{ min-width:0; font-size:12px; }
	.lt-sep{ display:none; }

	#lt-app .lt-stage{ padding:0 3vw; }
}