/*!
 * Cinetide Player — skin «Clásica» (gráfica). Recursos: icons-dark.png e
 * icons-light.png (originales, generados por dev/make-skins.mjs;
 * GPL-2.0-or-later; ver docs/LICENCIAS.md).
 * Aspecto plano en negro y gris: barra compacta bajo el vídeo, iconos grises,
 * lista compacta con títulos blancos y descripciones grises, botón central
 * semitransparente. Sin resplandores ni degradados.
 */

.ctp-skin-clasica.ctp-theme-dark {
	--ctp-bg: #0b0b0b;
	--ctp-panel: #151515;
	--ctp-panel-2: #1e1e1e;
	--ctp-text: #ffffff;
	--ctp-muted: #9b9b9b;
	--ctp-border: rgba(255, 255, 255, 0.08);
	--ctp-hover: rgba(255, 255, 255, 0.05);
	--ctp-shadow: none;
	--ctp-on-accent: #111111;
	--ctp-track: #3a3a3a;
	--ctp-bar-fg: #c9c9c9;
}

.ctp-skin-clasica.ctp-theme-light {
	--ctp-bg: #f2f2f2;
	--ctp-panel: #e7e7e7;
	--ctp-panel-2: #dcdcdc;
	--ctp-text: #111111;
	--ctp-muted: #5c5c5c;
	--ctp-border: rgba(0, 0, 0, 0.1);
	--ctp-hover: rgba(0, 0, 0, 0.04);
	--ctp-shadow: none;
	--ctp-on-accent: #ffffff;
	--ctp-track: #bdbdbd;
	--ctp-bar-fg: #3c3c3c;
}

.ctp-skin-clasica {
	--ctp-ctrl: 38px;
}

/* Objetivos táctiles de 44 px (la hoja de la skin se carga después de la general). */
@media (pointer: coarse) {
	.ctp-skin-clasica {
		--ctp-ctrl: 44px;
	}
}

.ctp-skin-clasica.ctp-theme-dark .ctp-ico {
	background-image: url(icons-dark.png);
}

.ctp-skin-clasica.ctp-theme-light .ctp-ico {
	background-image: url(icons-light.png);
}

.ctp-skin-clasica .ctp-layout {
	box-shadow: none;
}

/* ---------- Barra de controles compacta bajo el vídeo ---------- */

.ctp-skin-clasica .ctp-controls,
.ctp-skin-clasica.ctp-idle .ctp-controls {
	position: relative;
	inset: auto;
	padding: 4px 6px 4px;
	background: var(--ctp-panel-2);
	border-top: 1px solid var(--ctp-border);
	color: var(--ctp-bar-fg);
	/* Debajo del vídeo no tapa nada: siempre visible. */
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.ctp-skin-clasica .ctp-controls .ctp-btn {
	color: var(--ctp-bar-fg);
	border-radius: 2px;
	opacity: 1;
}

.ctp-skin-clasica .ctp-controls .ctp-btn:hover {
	background: var(--ctp-hover);
}

/* Los iconos PNG no cambian de color: se aclaran al pasar el ratón. */
.ctp-skin-clasica.ctp-theme-dark .ctp-btn:hover .ctp-ico {
	filter: brightness(1.3);
}

.ctp-skin-clasica.ctp-theme-light .ctp-btn:hover .ctp-ico {
	filter: brightness(0.6);
}

.ctp-skin-clasica .ctp-time {
	color: var(--ctp-muted);
	font-size: 12px;
}

.ctp-skin-clasica .ctp-range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 0;
}

.ctp-skin-clasica .ctp-range::-moz-range-track {
	height: 4px;
	border-radius: 0;
}

.ctp-skin-clasica .ctp-range::-webkit-slider-thumb {
	width: 12px;
	height: 12px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--ctp-text);
	box-shadow: none;
}

.ctp-skin-clasica .ctp-range::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: var(--ctp-text);
	box-shadow: none;
}

.ctp-skin-clasica .ctp-menu {
	border-radius: 2px;
	box-shadow: none;
	border: 1px solid var(--ctp-border);
}

/* Con la barra fuera del vídeo, los subtítulos no necesitan subir. */
.ctp-skin-clasica .ctp-captions {
	bottom: 6%;
}

.ctp-skin-clasica .ctp-nowplaying {
	background: rgba(0, 0, 0, 0.55);
	padding-bottom: 12px;
}

/* Pantalla completa: el vídeo ocupa el espacio restante sobre la barra. */
.ctp-skin-clasica .ctp-stage:fullscreen .ctp-screen {
	flex: 1;
	height: auto;
	aspect-ratio: auto;
}

.ctp-skin-clasica .ctp-stage:-webkit-full-screen .ctp-screen {
	flex: 1;
	height: auto;
}

/* ---------- Botón central semitransparente (solo archivos propios) ----------
   Con YouTube/Vimeo la capa no se muestra (.ctp-embed), según sus normas. */
.ctp-skin-clasica .ctp-bigplay {
	width: 72px;
	height: 72px;
	background: rgba(0, 0, 0, 0.5);
	border: 2px solid rgba(255, 255, 255, 0.7);
	box-shadow: none;
}

.ctp-skin-clasica .ctp-bigplay:hover {
	background: rgba(0, 0, 0, 0.7);
	border-color: #ffffff;
	transform: none;
}

/* El botón central siempre usa el icono claro: va sobre el vídeo. */
.ctp-skin-clasica .ctp-bigplay .ctp-ico {
	background-image: url(icons-dark.png);
	filter: brightness(1.25);
}

/* ---------- Lista compacta ---------- */

.ctp-skin-clasica .ctp-sidebar-head,
.ctp-skin-clasica .ctp-sidebar-foot {
	background: var(--ctp-panel);
}

.ctp-skin-clasica .ctp-select,
.ctp-skin-clasica .ctp-search-input,
.ctp-skin-clasica .ctp-sidebar .ctp-btn {
	border-radius: 2px;
}

.ctp-skin-clasica .ctp-sidebar .ctp-btn:hover {
	border-color: var(--ctp-muted);
	color: var(--ctp-text);
}

.ctp-skin-clasica .ctp-item {
	border-left-width: 2px;
}

.ctp-skin-clasica .ctp-item-title {
	color: var(--ctp-text);
	font-weight: 600;
}

.ctp-skin-clasica .ctp-item-desc,
.ctp-skin-clasica .ctp-item-meta {
	color: var(--ctp-muted);
}

.ctp-skin-clasica .ctp-thumb {
	border-radius: 0;
}

.ctp-skin-clasica .ctp-duration {
	border-radius: 0;
	background: rgba(0, 0, 0, 0.75);
}

/* Botón «Continuar» (fondo del color de acento): icono que contrasta con él. */
.ctp-skin-clasica.ctp-theme-dark .ctp-resume-btn .ctp-ico {
	background-image: url(icons-light.png);
}

.ctp-skin-clasica.ctp-theme-light .ctp-resume-btn .ctp-ico {
	background-image: url(icons-dark.png);
}