/* WSC Palabras Clave */
:root {
	--wsc-pc-azul: #0a5c8a;
	--wsc-pc-azul-bg: rgba(10, 92, 138, .11);
	--wsc-pc-rojo: #b4232a;
	--wsc-pc-rojo-bg: rgba(180, 35, 42, .1);
	--wsc-pc-boya: #e8b40c;
	--wsc-pc-fondo: #ffffff;
	--wsc-pc-tinta: #0f2433;
	--wsc-pc-gris: #5a6f7d;
	--wsc-pc-linea: #d5e0e7;
	--wsc-pc-suave: #f3f6f8;
}

/* Palabras resaltadas */
.wsc-pc-k {
	background: var(--wsc-pc-azul-bg);
	border-bottom: 1px dotted var(--wsc-pc-azul);
	border-radius: 3px;
	padding: 0 2px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.wsc-pc-k--q { font-weight: 600; }
.wsc-pc-tap { cursor: help; }
.wsc-pc-tap:hover { background: rgba(10, 92, 138, .2); }
.wsc-pc-tap:focus-visible { outline: 2px solid var(--wsc-pc-boya); outline-offset: 1px; }
.wsc-pc-trap {
	color: var(--wsc-pc-rojo);
	background: var(--wsc-pc-rojo-bg);
	border-radius: 3px;
	padding: 0 3px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* Franja bajo el enunciado */
.wsc-pc-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 12px;
	padding: 8px 10px;
	border: 1px dashed var(--wsc-pc-linea);
	border-radius: 8px;
	background: var(--wsc-pc-suave);
	font-size: 14px;
	line-height: 1.4;
}
.wsc-pc-strip__t {
	width: 100%;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wsc-pc-gris);
}
.wsc-pc-pair {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: baseline;
	background: var(--wsc-pc-fondo);
	border: 1px solid var(--wsc-pc-linea);
	border-radius: 6px;
	padding: 2px 8px;
	max-width: 100%;
}
.wsc-pc-pair__es { font-weight: 700; color: var(--wsc-pc-tinta); }
.wsc-pc-pair__tr { color: var(--wsc-pc-azul); }
.wsc-pc-pair--trap .wsc-pc-pair__es { color: var(--wsc-pc-rojo); }

/* Ventana de traducción */
.wsc-pc-tip {
	position: fixed;
	z-index: 100000;
	width: max-content;
	max-width: min(320px, calc(100vw - 16px));
	background: var(--wsc-pc-fondo);
	color: var(--wsc-pc-tinta);
	border: 1px solid var(--wsc-pc-azul);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 36, 51, .18);
	padding: 10px 12px;
	font-size: 15px;
	line-height: 1.45;
	display: grid;
	gap: 6px;
}
.wsc-pc-tip__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wsc-pc-tip__es { font-weight: 700; font-size: 17px; }
.wsc-pc-tip__tr { color: var(--wsc-pc-azul); font-size: 16px; }
.wsc-pc-tip__nota { font-size: 13px; background: #fdf3cf; border-radius: 6px; padding: 6px 8px; }
.wsc-pc-tip__play,
.wsc-pc-g__play {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--wsc-pc-linea);
	background: var(--wsc-pc-suave);
	color: var(--wsc-pc-tinta);
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	padding: 0;
}
.wsc-pc-tip__elegir {
	justify-self: start;
	border: 1px solid var(--wsc-pc-azul);
	background: transparent;
	color: var(--wsc-pc-azul);
	border-radius: 6px;
	padding: 4px 10px;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
}

/* Botón flotante y panel de idioma */
.wsc-pc-fab {
	position: fixed;
	z-index: 99990;
	right: calc(16px + env(safe-area-inset-right, 0px));
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	border-radius: 999px;
	padding: 9px 14px;
	background: var(--wsc-pc-tinta);
	color: #fff;
	font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	box-shadow: 0 4px 14px rgba(15, 36, 51, .25);
	cursor: pointer;
}
.wsc-pc-fab__l { background: var(--wsc-pc-boya); color: var(--wsc-pc-tinta); border-radius: 999px; padding: 3px 7px; font-size: 12px; letter-spacing: .05em; }
.wsc-pc-fab--nuevo { animation: wsc-pc-pulso 1.6s ease-in-out 3; }
@keyframes wsc-pc-pulso { 50% { box-shadow: 0 0 0 8px rgba(232, 180, 12, .35); } }
.wsc-pc-fab:focus-visible, .wsc-pc-opt:focus-visible { outline: 2px solid var(--wsc-pc-boya); outline-offset: 2px; }
.wsc-pc-panel {
	position: fixed;
	z-index: 99991;
	right: calc(16px + env(safe-area-inset-right, 0px));
	bottom: calc(68px + env(safe-area-inset-bottom, 0px));
	width: min(300px, calc(100vw - 32px));
	max-height: calc(100vh - 100px);
	overflow: auto;
	background: var(--wsc-pc-fondo);
	color: var(--wsc-pc-tinta);
	border: 1px solid var(--wsc-pc-linea);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(15, 36, 51, .2);
	padding: 12px;
}
.wsc-pc-panel[hidden] { display: none !important; }
.wsc-pc-panel__h { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.wsc-pc-panel__h small { display: block; font-weight: 400; font-size: 13px; color: var(--wsc-pc-gris); margin-top: 2px; }
.wsc-pc-panel__list { display: grid; gap: 4px; }
.wsc-pc-selector-inline { border: 1px solid var(--wsc-pc-linea); border-radius: 12px; padding: 12px; max-width: 420px; }
.wsc-pc-selector-inline .wsc-pc-panel__list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wsc-pc-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	text-align: left;
	border: 1px solid transparent;
	background: transparent;
	color: inherit;
	border-radius: 8px;
	padding: 7px 8px;
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}
.wsc-pc-opt:hover { background: var(--wsc-pc-suave); }
.wsc-pc-opt.is-on { border-color: var(--wsc-pc-azul); background: var(--wsc-pc-azul-bg); font-weight: 600; }
.wsc-pc-opt__c { font: 600 11px/1 ui-monospace, monospace; color: var(--wsc-pc-gris); width: 22px; }

/* Glosario para alumnos */
.wsc-pc-glosario { display: grid; gap: 12px; }
.wsc-pc-g__q { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px; border: 1px solid var(--wsc-pc-linea); border-radius: 8px; }
.wsc-pc-g__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.wsc-pc-g__cats button { border: 1px solid var(--wsc-pc-linea); background: transparent; color: var(--wsc-pc-gris); border-radius: 8px; padding: 5px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.wsc-pc-g__cats button[aria-pressed="true"] { color: var(--wsc-pc-tinta); border-color: var(--wsc-pc-tinta); }
.wsc-pc-g__list { display: grid; gap: 6px; }
.wsc-pc-g__row { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--wsc-pc-linea); border-radius: 8px; padding: 10px 12px; background: var(--wsc-pc-fondo); }
.wsc-pc-g__main { display: grid; gap: 2px; min-width: 0; }
.wsc-pc-g__es { font-weight: 700; font-size: 17px; }
.wsc-pc-g__tr { color: var(--wsc-pc-azul); }
.wsc-pc-g__nota { font-size: 13px; color: var(--wsc-pc-gris); }
.wsc-pc-g__vacio { color: var(--wsc-pc-gris); }

/* Diagnóstico */
.wsc-pc-diag-zona { outline: 2px dashed #2f7d4f !important; outline-offset: 2px; }
.wsc-pc-diag-preg { outline: 2px solid #e07b00 !important; outline-offset: 4px; }
.wsc-pc-diag {
	position: fixed;
	z-index: 99992;
	left: calc(12px + env(safe-area-inset-left, 0px));
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	max-width: calc(100vw - 140px);
	background: #2f7d4f;
	color: #fff;
	font: 12px/1.4 ui-monospace, monospace;
	padding: 6px 10px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.wsc-pc-fab--nuevo { animation: none; }
}
@media print {
	.wsc-pc-fab, .wsc-pc-panel, .wsc-pc-tip, .wsc-pc-diag { display: none !important; }
}

/* v1.1 — definiciones y bienvenida */
.wsc-pc-tip__def { font-size: 14px; color: var(--wsc-pc-tinta); }
.wsc-pc-tip__tr + .wsc-pc-tip__def { font-size: 13px; color: var(--wsc-pc-gris); }
.wsc-pc-g__def { font-size: 14px; }
.wsc-pc-pair--def .wsc-pc-pair__es::after { content: ":"; }
.wsc-pc-pair--def .wsc-pc-pair__tr { color: var(--wsc-pc-tinta); }
html.wsc-pc-sin-scroll { overflow: hidden; }
.wsc-pc-modal {
	position: fixed;
	inset: 0;
	z-index: 100001;
	background: rgba(15, 36, 51, .55);
	display: flex;
	padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	overflow-y: auto;
}
.wsc-pc-modal__box {
	width: min(560px, 100%);
	margin: auto;
	background: var(--wsc-pc-fondo);
	color: var(--wsc-pc-tinta);
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(15, 36, 51, .35);
	padding: 22px 22px 16px;
	display: grid;
	gap: 12px;
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: left;
}
.wsc-pc-modal__k { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--wsc-pc-gris); }
.wsc-pc-modal__t { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 800; color: var(--wsc-pc-tinta); text-wrap: balance; }
.wsc-pc-modal__p { margin: 0; color: var(--wsc-pc-gris); }
.wsc-pc-modal__ej { background: var(--wsc-pc-suave); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.wsc-pc-modal__ej-a { color: var(--wsc-pc-azul); }
.wsc-pc-modal__ej-a::before { content: "→ "; color: var(--wsc-pc-gris); }
.wsc-pc-modal__ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wsc-pc-modal__op {
	display: grid;
	gap: 2px;
	text-align: left;
	border: 1px solid var(--wsc-pc-linea);
	background: var(--wsc-pc-fondo);
	color: var(--wsc-pc-tinta);
	border-radius: 10px;
	padding: 10px 12px;
	cursor: pointer;
	font: inherit;
}
.wsc-pc-modal__op span { font-size: 13px; color: var(--wsc-pc-gris); }
.wsc-pc-modal__op[data-l="es"] { border-color: var(--wsc-pc-azul); }
.wsc-pc-modal__op:hover, .wsc-pc-modal__lang:hover { background: var(--wsc-pc-azul-bg); }
.wsc-pc-modal__sub { margin: 4px 0 0; font-weight: 700; font-size: 14px; }
.wsc-pc-modal__langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.wsc-pc-modal__lang {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--wsc-pc-linea);
	background: var(--wsc-pc-fondo);
	color: var(--wsc-pc-tinta);
	border-radius: 8px;
	padding: 8px 10px;
	cursor: pointer;
	font: inherit;
	text-align: left;
}
.wsc-pc-modal__op:focus-visible, .wsc-pc-modal__lang:focus-visible, .wsc-pc-modal__luego:focus-visible { outline: 2px solid var(--wsc-pc-boya); outline-offset: 2px; }
.wsc-pc-modal__pie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--wsc-pc-gris); border-top: 1px solid var(--wsc-pc-linea); padding-top: 10px; }
.wsc-pc-modal__luego { border: 0; background: transparent; color: var(--wsc-pc-azul); text-decoration: underline; cursor: pointer; font: inherit; padding: 4px 0; }
@media (max-width: 480px) {
	.wsc-pc-modal__ops { grid-template-columns: 1fr; }
	.wsc-pc-modal__t { font-size: 19px; }
}