/*
  Poetik · La casa del poeta — la piel de la app sobre las páginas de WordPress
  © 2026 Bernard Engel. Todos los derechos reservados.

  TODAS las reglas cuelgan de html.poetik-app: fuera de la app no cambia nada.
*/

.pk-top { display: none; }

/* ─────────── 1. Fuera lo que es de la web ─────────── */
html.poetik-app #masthead,
html.poetik-app header.site-header,
html.poetik-app #ast-desktop-header,
html.poetik-app #ast-mobile-header,
html.poetik-app .ast-mobile-header-wrap,
html.poetik-app .ast-above-header-wrap,
html.poetik-app .ast-below-header-wrap,
html.poetik-app footer.site-footer,
html.poetik-app #colophon,
html.poetik-app .elementor-location-header,
html.poetik-app .elementor-location-footer,
html.poetik-app [data-elementor-type="header"],
html.poetik-app [data-elementor-type="footer"],
html.poetik-app .joinchat,
html.poetik-app #wpadminbar,
html.poetik-app .woocommerce-store-notice,
html.poetik-app .ast-scroll-top-icon,
html.poetik-app #ast-scroll-top,
html.poetik-app .tutor-tour-modal,
html.poetik-app .tutor-modal:has(.tutor-tour-modal) { display: none !important; }

html.poetik-app { margin-top: 0 !important; }

html.poetik-app body {
	background: radial-gradient(130% 90% at 50% -8%, #FFFFFF 0%, #FBF7EF 45%, #F2EEE3 100%) fixed !important;
	padding-top: calc(52px + env(safe-area-inset-top)) !important;
	-webkit-font-smoothing: antialiased;
}

/* ─────────── 2. La barra superior de la app ─────────── */
html.poetik-app .pk-top {
	display: flex; align-items: center; justify-content: space-between;
	position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
	height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0;
	background: rgba(251, 247, 239, .96); border-bottom: 1px solid #E7DDCB;
	-webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
}
html.poetik-app .pk-top button {
	width: 44px; height: 44px; border: 0; background: transparent; color: #002C54; cursor: pointer;
	display: grid; place-items: center; border-radius: 12px; -webkit-tap-highlight-color: transparent; padding: 0;
}
html.poetik-app .pk-top button:active { background: #F2EEE3; }
html.poetik-app .pk-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.poetik-app .pk-top .pk-top-rep { color: #6F6A60; }
html.poetik-app .pk-top .pk-top-rep svg { width: 19px; height: 19px; }
html.poetik-app .pk-top-marca {
	font: 700 12px 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	letter-spacing: .24em; text-transform: uppercase; color: #002C54 !important; text-decoration: none !important;
}

/* ─────────── 3. Tutor LMS con los colores y letras de la casa ─────────── */
html.poetik-app body,
html.poetik-app .tutor-wrap,
html.poetik-app .tutor-learning-page {
	--tutor-color-primary: #002C54;
	--tutor-color-primary-rgb: 0, 44, 84;
	--tutor-color-primary-hover: #001E3B;
	--tutor-button-radius: 12px;
	--tutor-input-radius: 12px;
	--tutor-font-family-body: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--tutor-font-family-heading: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html.poetik-app .tutor-btn { font-weight: 700; letter-spacing: .01em; }

/* ─────────── 4. La lección, pensada para el móvil ─────────── */
/* En la lección manda la cabecera de Tutor (atrás + título + temario): la nuestra se esconde. */
html.poetik-app body:has(.tutor-learning-page) { padding-top: 0 !important; }
html.poetik-app body:has(.tutor-learning-page) .pk-top { display: none; }

html.poetik-app .tutor-learning-area { --tutor-site-header-offset: 0px !important; background: transparent; }
html.poetik-app .tutor-learning-header {
	top: 0 !important; padding: calc(6px + env(safe-area-inset-top)) 8px 6px !important;
	background: rgba(251, 247, 239, .96) !important; border-bottom: 1px solid #E7DDCB;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html.poetik-app .tutor-learning-header-title { font-size: 15px !important; line-height: 1.25; color: #002C54; }
html.poetik-app .tutor-learning-area-content { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
html.poetik-app .tutor-lesson-content,
html.poetik-app .tutor-learning-area-container { font-size: 17px; line-height: 1.6; }

/* Anterior · Completar · Siguiente, siempre a mano, justo encima de la barra de la app. */
html.poetik-app .tutor-learning-area-footer {
	position: fixed !important; left: 0 !important; right: 0 !important;
	bottom: calc(64px + env(safe-area-inset-bottom)) !important; margin: 0 !important; border-radius: 0 !important;
	padding: 10px 12px !important; background: #FFFFFF !important; border: 0 !important; border-top: 1px solid #E7DDCB !important;
	z-index: 9990 !important; box-shadow: 0 -6px 18px rgba(20, 17, 12, .06) !important;
}
html.poetik-app .tutor-learning-area-footer .tutor-btn { min-height: 44px; }

/* El temario lateral, como hoja a pantalla completa y con toques grandes. */
html.poetik-app .tutor-learning-sidebar a,
html.poetik-app .tutor-learning-nav a { min-height: 44px; }

/* ─────────── 5. Vídeos: dentro de su ventana y con aire arriba ─────────── */
/* Plyr (el reproductor de Tutor) calcula él solo la proporción: no se fuerza nada dentro. */
html.poetik-app .tutor-learning-area-content { padding-top: 14px !important; }
html.poetik-app .tutor-video-player,
html.poetik-app .tutor-lesson-video,
html.poetik-app .tutor-learning-area-content .plyr {
	display: block; margin: 4px 16px 14px !important; width: auto !important; max-width: none !important;
	border-radius: 14px; overflow: hidden; background: #001E3B;
}
html.poetik-app .plyr__video-wrapper { border-radius: 14px; }
/* Antes de que arranque el reproductor, el vídeo ya ocupa su hueco 16:9 (sin zoom al cargar). */
html.poetik-app .tutor-video-player:not(:has(.plyr)) iframe,
html.poetik-app .tutor-video-player:not(:has(.plyr)) video {
	display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: contain;
}
html.poetik-app iframe, html.poetik-app video, html.poetik-app img { max-width: 100%; }

/* ─────────── 5 bis. Nada se sale de la pantalla ─────────── */
html.poetik-app, html.poetik-app body { overflow-x: hidden !important; max-width: 100vw; }
html.poetik-app .tutor-learning-page,
html.poetik-app .tutor-learning-area,
html.poetik-app .tutor-learning-area-body,
html.poetik-app .tutor-learning-area-content,
html.poetik-app .tutor-learning-area-container { max-width: 100vw !important; min-width: 0 !important; box-sizing: border-box; }
/* Tutor saca el vídeo a sangre con márgenes de -16px: el contenedor debe tener exactamente 16px. */
html.poetik-app .tutor-learning-area-container { padding-left: 16px !important; padding-right: 16px !important; }

/* ─────────── 5 ter. Letras de la app en los botones y títulos de Tutor ─────────── */
/* El tema pone mayúsculas, espaciado y cursiva a botones y títulos: dentro de Tutor, fuera. */
html.poetik-app .tutor-learning-page .tutor-btn,
html.poetik-app .tutor-learning-page button,
html.poetik-app .tutor-learning-page [role="tab"],
html.poetik-app .tutor-learning-page select,
html.poetik-app .tutor-learning-page input,
html.poetik-app .tutor-learning-page textarea {
	font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	letter-spacing: normal !important; text-transform: none !important; font-style: normal !important;
	font-size: 14px !important; line-height: 1.2 !important;
}
html.poetik-app .tutor-learning-page .tutor-btn { padding: 10px 14px !important; min-height: 40px; white-space: nowrap; border-radius: 12px !important; }
html.poetik-app .tutor-learning-page textarea { font-size: 16px !important; line-height: 1.45 !important; }
html.poetik-app .tutor-learning-header-content { min-width: 0; flex: 1; }
html.poetik-app .tutor-learning-header-title {
	font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-style: normal !important; text-transform: none !important; letter-spacing: -.005em !important;
	font-size: 15px !important; font-weight: 700 !important; color: #002C54 !important;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0 !important;
}
html.poetik-app .tutor-learning-header-inner { gap: 6px; padding-right: 4px; }
html.poetik-app .tutor-learning-header .tutor-btn-icon { width: 40px !important; height: 40px !important; min-height: 40px; padding: 0 !important; flex: 0 0 40px; }
html.poetik-app .tutor-learning-page h1, html.poetik-app .tutor-learning-page h2,
html.poetik-app .tutor-learning-page h3, html.poetik-app .tutor-learning-page h4 {
	text-transform: none !important; letter-spacing: normal !important; font-style: normal !important; overflow-wrap: anywhere;
}
/* Pie de la lección: tres botones que siempre caben. */
html.poetik-app .tutor-learning-area-footer { gap: 6px !important; }
html.poetik-app .tutor-learning-area-footer .tutor-btn { font-size: 13.5px !important; padding: 10px 10px !important; flex: 0 1 auto; min-width: 0; }
html.poetik-app .tutor-learning-area-footer .tutor-btn span { overflow: hidden; text-overflow: ellipsis; }

/* ─────────── 6. El acceso con código (administradores y alumnos con verificación) ─────────── */
html.poetik-app .tutor-login-wrap,
html.poetik-app .tutor-login-form-wrapper,
html.poetik-app .tutor-template-segment.tutor-login-wrap {
	max-width: 480px; margin: 18px auto !important; background: #FFFFFF; border: 1px solid #E7DDCB;
	border-radius: 18px; padding: 22px 18px !important; box-shadow: none;
}
html.poetik-app .tutor-login-wrap input[type="text"],
html.poetik-app .tutor-login-wrap input[type="password"],
html.poetik-app .tutor-login-wrap input[type="email"] { font-size: 16px !important; min-height: 48px; }

/* ─────────── 7. Precios: una sola vez ─────────── */
html.poetik-app .price .screen-reader-text,
html.poetik-app .woocommerce-Price-amount + .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }

/* ─────────── 8. El hueco de la barra inferior ─────────── */
html.poetik-app #page, html.poetik-app .site-content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }