/*
Theme Name: Praxis Portal
Theme URI: https://quqos.com
Author: JADENGER CLASS
Author URI: https://quqos.com
Description: Tema de acceso multi-rol (CENTRO, PROFESOR, TUTOR, ESTUDIANTE) con barra lateral ocultable estilo ChatGPT. El login/registro y el panel de cada rol se cargan por AJAX en el área central. Las funcionalidades de cada panel las aportan plugins independientes mediante los hooks documentados en functions.php.
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: praxis-portal
*/

/* =========================================================
   PRAXIS PORTAL — estilos base
   ========================================================= */

:root{
  --pp-bg: #0f1115;
  --pp-bg-soft: #15181e;
  --pp-sidebar: #111319;
  --pp-border: #262a33;
  --pp-text: #e8e9ec;
  --pp-text-dim: #9aa0ab;
  --pp-accent: #4f8cff;
  --pp-accent-2: #21c58a;
  --pp-danger: #ff5a5a;
  --pp-radius: 14px;
}

* { box-sizing: border-box; }

html, body.praxis-portal{
  height: 100%;
  margin: 0;
  background: var(--pp-bg);
  color: var(--pp-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.praxis-portal{
  overflow: hidden;
}

.pp-shell{
  display: flex;
  height: 100vh;
  width: 100%;
}

/* ---------- Sidebar (oculta por defecto, tipo ChatGPT) ---------- */

/* Móvil / pantallas estrechas: sidebar flotante con overlay */
.pp-sidebar{
  width: 280px;
  max-width: 80vw;
  flex-shrink: 0;
  background: var(--pp-sidebar);
  border-right: 1px solid var(--pp-border);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .22s ease;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 40;
}

body.pp-sidebar-open .pp-sidebar{
  transform: translateX(0);
}

/* Escritorio: la sidebar, cuando está abierta, empuja el contenido
   (no lo tapa) — igual que ChatGPT. Solo se oculta si el propio
   usuario la cierra. */
@media (min-width: 900px){
  .pp-sidebar{
    position: static;
    transform: none;
    width: 0;
    border-right: none;
    overflow: hidden;
    transition: width .22s ease;
  }
  body.pp-sidebar-open .pp-sidebar{
    width: 280px;
    border-right: 1px solid var(--pp-border);
  }
  .pp-overlay{ display: none; }
}

.pp-sidebar-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
  border-bottom: 1px solid var(--pp-border);
}

.pp-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 15px;
}

.pp-brand-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pp-accent), var(--pp-accent-2));
  flex-shrink: 0;
}

.pp-sidebar-close{
  background: none;
  border: none;
  color: var(--pp-text-dim);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 6px;
}
.pp-sidebar-close:hover{ color: var(--pp-text); }

.pp-nav{
  padding: 10px;
  overflow-y: auto;
  flex: 1;
}

.pp-nav-label{
  padding: 14px 10px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pp-text-dim);
}

.pp-nav-item{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--pp-text);
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 4px;
  transition: background .15s ease;
}

.pp-nav-item:hover{ background: var(--pp-bg-soft); }

.pp-nav-item.is-active{
  background: var(--pp-bg-soft);
  box-shadow: inset 0 0 0 1px var(--pp-border);
}

.pp-nav-icon{
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pp-bg);
  border: 1px solid var(--pp-border);
  font-size: 14px;
  flex-shrink: 0;
}

.pp-nav-item-title{ font-weight: 600; }
.pp-nav-item-sub{ display:block; font-size: 11px; color: var(--pp-text-dim); font-weight: 400; }

.pp-sidebar-footer{
  padding: 14px 16px;
  border-top: 1px solid var(--pp-border);
  font-size: 12px;
  color: var(--pp-text-dim);
}

.pp-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 30;
}
body.pp-sidebar-open .pp-overlay{
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Área principal ---------- */

.pp-main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.pp-topbar{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--pp-border);
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.pp-menu-toggle{
  background: var(--pp-bg-soft);
  border: 1px solid var(--pp-border);
  color: var(--pp-text);
  width: 38px; height: 38px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
}

.pp-topbar-title{
  font-weight: 700;
  font-size: 15px;
  min-width: 0;
}

.pp-topbar-title small{
  display: block;
  font-weight: 400;
  color: var(--pp-text-dim);
  font-size: 12px;
}

.pp-topbar-right{
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--pp-text-dim);
}

.pp-topbar-link{
  background: none;
  border: none;
  color: var(--pp-text-dim);
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.pp-topbar-link:hover{ color: var(--pp-text); }

.pp-mode-toggle{
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-left: 1px solid var(--pp-border);
  color: var(--pp-text-dim);
  padding: 4px 0 4px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.pp-mode-toggle:hover{ color: var(--pp-text); }

/* ---------- Modal "Sobre Lorito360" ---------- */

.pp-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 60;
  padding: 20px;
}
.pp-modal-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

.pp-modal{
  background: var(--pp-bg-soft);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  width: 100%;
  max-width: 460px;
  padding: 22px 24px;
}

.pp-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pp-modal-header h2{ margin: 0; font-size: 18px; }

.pp-modal-body p{
  color: var(--pp-text-dim);
  line-height: 1.55;
  font-size: 14px;
}

/* ---------- Modo claro ---------- */

body.pp-theme-light{
  --pp-bg: #f6f7f9;
  --pp-bg-soft: #ffffff;
  --pp-sidebar: #ffffff;
  --pp-border: #e3e5ea;
  --pp-text: #1c1e22;
  --pp-text-dim: #6b7078;
}

.pp-content{
  flex: 1;
  overflow-y: auto;
  padding: 40px 24px 60px;
}

.pp-content-inner{
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- Pantalla de bienvenida: solo el logo, sin nada más ---------- */

.pp-welcome{
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-welcome-logo{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: .9;
}

.pp-brand-dot-lg{
  width: 56px;
  height: 56px;
}

.pp-welcome-logo-text{
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pp-text);
}

/* ---------- Panel genérico (login / registro / dashboard) ---------- */

.pp-panel{
  background: var(--pp-bg-soft);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  padding: 28px;
}

.pp-panel h2{
  margin-top: 0;
  font-size: 20px;
}

.pp-tabs{
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--pp-border);
}

.pp-tab{
  background: none;
  border: none;
  color: var(--pp-text-dim);
  padding: 10px 4px;
  margin-right: 18px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}
.pp-tab.is-active{
  color: var(--pp-text);
  border-bottom-color: var(--pp-accent);
}

.pp-field{
  margin-bottom: 16px;
}

.pp-field label{
  display: block;
  font-size: 13px;
  color: var(--pp-text-dim);
  margin-bottom: 6px;
}

.pp-field input{
  width: 100%;
  background: var(--pp-bg);
  border: 1px solid var(--pp-border);
  color: var(--pp-text);
  padding: 11px 12px;
  border-radius: 9px;
  font-size: 14px;
}
.pp-field input:focus{
  outline: none;
  border-color: var(--pp-accent);
}

.pp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--pp-accent);
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.pp-btn:hover{ filter: brightness(1.08); }
.pp-btn:disabled{ opacity: .6; cursor: default; }

.pp-btn-ghost{
  background: transparent;
  border: 1px solid var(--pp-border);
  color: var(--pp-text);
}

.pp-msg{
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13px;
}
.pp-msg-error{ background: rgba(255,90,90,.12); color: #ff9b9b; border: 1px solid rgba(255,90,90,.3); }
.pp-msg-success{ background: rgba(33,197,138,.12); color: #7fe8c4; border: 1px solid rgba(33,197,138,.3); }

.pp-hint{
  font-size: 12.5px;
  color: var(--pp-text-dim);
  line-height: 1.5;
  margin: -4px 0 16px;
}

.pp-panel-loading{
  text-align: center;
  padding: 60px 0;
  color: var(--pp-text-dim);
}

/* Cabecera de panel de rol autenticado */
.pp-role-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.pp-role-header .pp-role-user{
  font-size: 13px;
  color: var(--pp-text-dim);
}
.pp-logout-link{
  color: var(--pp-text-dim);
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--pp-border);
  padding: 7px 12px;
  border-radius: 8px;
}
.pp-logout-link:hover{ color: var(--pp-text); }

/* Bloque "Cuenta" al final de la barra lateral, cuando ya hay sesión
   y la barra muestra el contenido propio del rol en vez de los 4
   accesos (ver praxis_portal_render_sidebar_nav()). */
.pp-sidebar-account{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--pp-border);
}





/* =========================================================
   LORITO360 · Pantalla inicial profesional
   ========================================================= */
.pp-welcome-lorito360{
	width:100%;
	min-height:calc(100vh - 112px);
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:22px;
	padding:clamp(18px,3vw,42px);
	box-sizing:border-box;
	overflow:hidden;
}

.pp-home-hero{
	position:relative;
	width:min(1180px,100%);
	margin:0 auto;
	display:grid;
	grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);
	align-items:center;
	gap:clamp(24px,5vw,72px);
	padding:clamp(30px,4vw,58px);
	border:1px solid var(--pp-border,rgba(20,54,88,.12));
	border-radius:32px;
	background:
		linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,252,255,.92));
	box-shadow:
		0 24px 70px rgba(8,45,83,.10),
		inset 0 1px 0 rgba(255,255,255,.9);
	isolation:isolate;
	overflow:hidden;
}

body.pp-dark .pp-home-hero,
body[data-theme="dark"] .pp-home-hero{
	background:linear-gradient(145deg,rgba(17,29,44,.97),rgba(13,25,39,.94));
	border-color:rgba(255,255,255,.10);
	box-shadow:0 24px 70px rgba(0,0,0,.32);
}

.pp-home-hero::before{
	content:"";
	position:absolute;
	inset:auto auto -36% -8%;
	width:56%;
	aspect-ratio:1;
	border-radius:50%;
	background:radial-gradient(circle,rgba(24,157,216,.12),rgba(24,157,216,0) 70%);
	z-index:-1;
}

.pp-home-hero::after{
	content:"";
	position:absolute;
	inset:-26% -12% auto auto;
	width:50%;
	aspect-ratio:1;
	border-radius:50%;
	background:radial-gradient(circle,rgba(53,181,77,.13),rgba(53,181,77,0) 72%);
	z-index:-1;
}

.pp-home-copy{
	position:relative;
	z-index:3;
	min-width:0;
}

.pp-home-kicker{
	display:inline-flex;
	align-items:center;
	min-height:32px;
	padding:0 13px;
	border-radius:999px;
	background:rgba(16,126,190,.09);
	color:#0876b5;
	font-size:12px;
	font-weight:800;
	letter-spacing:.15em;
}

body.pp-dark .pp-home-kicker,
body[data-theme="dark"] .pp-home-kicker{
	background:rgba(31,169,230,.15);
	color:#7cd5ff;
}

.pp-home-copy h1{
	margin:18px 0 16px;
	max-width:680px;
	font-size:clamp(34px,4.7vw,66px);
	line-height:.99;
	letter-spacing:-.045em;
	font-weight:850;
	color:var(--pp-text,#0b3159);
}

.pp-home-copy h1 span{
	background:linear-gradient(90deg,#087fbd,#36b34a);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

.pp-home-copy p{
	max-width:610px;
	margin:0;
	font-size:clamp(15px,1.6vw,18px);
	line-height:1.65;
	color:var(--pp-muted,#5e7185);
}

.pp-home-pills{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:26px;
}

.pp-home-pills span{
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-height:38px;
	padding:0 14px;
	border:1px solid rgba(12,65,109,.10);
	border-radius:999px;
	background:rgba(255,255,255,.62);
	color:var(--pp-text,#1d3e5d);
	font-size:13px;
	font-weight:700;
}

body.pp-dark .pp-home-pills span,
body[data-theme="dark"] .pp-home-pills span{
	background:rgba(255,255,255,.055);
	border-color:rgba(255,255,255,.10);
}

.pp-home-pills b{
	width:8px;
	height:8px;
	border-radius:50%;
	flex:0 0 8px;
}
.pp-home-pills .is-blue{background:#138fd0}
.pp-home-pills .is-orange{background:#f29b16}
.pp-home-pills .is-green{background:#39af4b}

.pp-home-visual{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:420px;
}

.pp-home-logo-stage{
	position:relative;
	width:min(430px,88%);
	aspect-ratio:1;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:
		radial-gradient(circle at 50% 46%,rgba(255,255,255,.96) 0 47%,rgba(235,247,251,.72) 48% 64%,rgba(255,255,255,0) 65%);
}

body.pp-dark .pp-home-logo-stage,
body[data-theme="dark"] .pp-home-logo-stage{
	background:
		radial-gradient(circle at 50% 46%,rgba(22,39,55,.92) 0 47%,rgba(24,60,75,.45) 48% 64%,rgba(255,255,255,0) 65%);
}

.pp-home-logo-stage::before,
.pp-home-logo-stage::after{
	content:"";
	position:absolute;
	border-radius:50%;
	border:1px solid rgba(18,145,195,.18);
}
.pp-home-logo-stage::before{inset:7%}
.pp-home-logo-stage::after{inset:17%;border-color:rgba(55,177,76,.16)}

.pp-home-logo-glow{
	position:absolute;
	inset:24%;
	border-radius:50%;
	background:rgba(31,165,216,.16);
	filter:blur(38px);
}

.pp-home-logo{
	position:relative;
	z-index:2;
	width:94%;
	height:auto;
	object-fit:contain;
	filter:drop-shadow(0 18px 22px rgba(10,63,102,.13));
}

.pp-home-mini-card{
	position:absolute;
	z-index:4;
	display:flex;
	align-items:center;
	gap:11px;
	min-width:178px;
	padding:12px 14px;
	border:1px solid rgba(10,59,96,.10);
	border-radius:18px;
	background:rgba(255,255,255,.88);
	box-shadow:0 14px 38px rgba(10,50,83,.12);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
}

body.pp-dark .pp-home-mini-card,
body[data-theme="dark"] .pp-home-mini-card{
	background:rgba(17,34,50,.88);
	border-color:rgba(255,255,255,.10);
	box-shadow:0 14px 38px rgba(0,0,0,.26);
}

.pp-home-mini-card-a{left:-2%;top:18%}
.pp-home-mini-card-b{right:-4%;bottom:18%}

.pp-home-mini-icon{
	width:40px;
	height:40px;
	display:grid;
	place-items:center;
	border-radius:12px;
	background:rgba(12,129,187,.10);
	font-size:20px;
}

.pp-home-mini-card div{display:flex;flex-direction:column;gap:2px}
.pp-home-mini-card strong{font-size:14px;color:var(--pp-text,#163958)}
.pp-home-mini-card small{font-size:11px;color:var(--pp-muted,#728294)}

.pp-home-orbit{
	position:absolute;
	border-radius:50%;
	pointer-events:none;
	z-index:0;
}
.pp-home-orbit-one{
	width:170px;height:170px;
	right:-55px;top:-55px;
	border:28px solid rgba(242,155,22,.08);
}
.pp-home-orbit-two{
	width:120px;height:120px;
	left:43%;bottom:-72px;
	border:22px solid rgba(56,176,75,.07);
}

.pp-home-hint{
	width:max-content;
	max-width:100%;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	padding:9px 14px;
	border-radius:999px;
	color:var(--pp-muted,#738398);
	font-size:12px;
	font-weight:650;
	text-align:center;
}

.pp-home-hint-dot{
	width:7px;height:7px;
	border-radius:50%;
	background:#31ad4a;
	box-shadow:0 0 0 5px rgba(49,173,74,.10);
}

@media (max-width:980px){
	.pp-welcome-lorito360{
		min-height:auto;
		justify-content:flex-start;
		padding:22px;
	}
	.pp-home-hero{
		grid-template-columns:1fr;
		gap:12px;
		padding:34px;
	}
	.pp-home-copy{
		text-align:center;
	}
	.pp-home-copy p{margin-inline:auto}
	.pp-home-pills{justify-content:center}
	.pp-home-visual{
		min-height:350px;
	}
	.pp-home-logo-stage{
		width:min(390px,80%);
	}
	.pp-home-mini-card-a{left:4%;top:18%}
	.pp-home-mini-card-b{right:4%;bottom:14%}
}

@media (max-width:640px){
	.pp-welcome-lorito360{
		padding:14px 10px 22px;
		gap:14px;
	}
	.pp-home-hero{
		padding:26px 17px 22px;
		border-radius:24px;
	}
	.pp-home-copy h1{
		margin-top:14px;
		font-size:clamp(31px,10vw,45px);
		line-height:1.03;
	}
	.pp-home-copy p{
		font-size:15px;
		line-height:1.55;
	}
	.pp-home-kicker{
		font-size:10px;
		min-height:29px;
	}
	.pp-home-pills{
		gap:7px;
		margin-top:20px;
	}
	.pp-home-pills span{
		min-height:34px;
		padding:0 11px;
		font-size:12px;
	}
	.pp-home-visual{
		min-height:300px;
	}
	.pp-home-logo-stage{
		width:min(310px,86%);
	}
	.pp-home-mini-card{
		min-width:0;
		padding:9px 11px;
		border-radius:14px;
	}
	.pp-home-mini-card-a{left:0;top:13%}
	.pp-home-mini-card-b{right:0;bottom:12%}
	.pp-home-mini-card small{display:none}
	.pp-home-mini-icon{
		width:34px;height:34px;
		font-size:17px;
	}
	.pp-home-mini-card strong{font-size:12px}
}

@media (max-width:390px){
	.pp-home-mini-card{display:none}
	.pp-home-visual{min-height:260px}
	.pp-home-logo-stage{width:270px;max-width:92%}
	.pp-home-pills span{flex:1 1 auto;justify-content:center}
}


/* =========================================================
   LORITO360 · CERO SCROLL EN EL PORTAL
   La interfaz siempre queda contenida dentro de la pantalla.
   ========================================================= */
html,
body{
	width:100%;
	height:100%;
	margin:0;
	overflow:hidden!important;
	overscroll-behavior:none;
}

body{
	min-height:100%;
}

.pp-shell,
.pp-app,
.pp-portal{
	height:100%;
	max-height:100%;
	overflow:hidden!important;
}

.pp-main{
	height:100vh!important;
	max-height:100vh!important;
	min-height:0!important;
	overflow:hidden!important;
	display:flex!important;
	flex-direction:column!important;
}

.pp-topbar{
	flex:0 0 auto!important;
	min-height:0!important;
}

.pp-content{
	flex:1 1 auto!important;
	min-height:0!important;
	height:auto!important;
	overflow:hidden!important;
}

.pp-content-inner{
	height:100%!important;
	max-height:100%!important;
	min-height:0!important;
	overflow:hidden!important;
	box-sizing:border-box;
}

/* Portada: siempre cabe completa sin scroll */
.pp-welcome-lorito360{
	height:100%!important;
	min-height:0!important;
	max-height:100%!important;
	display:flex!important;
	flex-direction:column!important;
	justify-content:center!important;
	gap:clamp(6px,1.3vh,14px)!important;
	padding:clamp(8px,1.6vh,20px) clamp(8px,1.8vw,24px)!important;
	overflow:hidden!important;
	box-sizing:border-box!important;
}

.pp-home-hero{
	width:min(1180px,100%)!important;
	height:min(100%,760px)!important;
	min-height:0!important;
	max-height:calc(100% - 34px)!important;
	margin:0 auto!important;
	grid-template-columns:minmax(0,1.03fr) minmax(300px,.97fr)!important;
	gap:clamp(14px,3vw,48px)!important;
	padding:clamp(18px,3vh,38px) clamp(18px,3vw,42px)!important;
	border-radius:clamp(20px,2.4vw,30px)!important;
	box-sizing:border-box!important;
	overflow:hidden!important;
}

.pp-home-copy h1{
	font-size:clamp(28px,min(4.3vw,6.8vh),58px)!important;
	margin:clamp(10px,1.8vh,16px) 0 clamp(8px,1.6vh,14px)!important;
}

.pp-home-copy p{
	font-size:clamp(13px,min(1.35vw,2.2vh),17px)!important;
	line-height:1.5!important;
}

.pp-home-kicker{
	min-height:28px!important;
	padding:0 11px!important;
	font-size:11px!important;
}

.pp-home-pills{
	margin-top:clamp(12px,2vh,20px)!important;
	gap:7px!important;
}

.pp-home-pills span{
	min-height:32px!important;
	padding:0 11px!important;
	font-size:12px!important;
}

.pp-home-visual{
	min-height:0!important;
	height:100%!important;
	max-height:460px!important;
}

.pp-home-logo-stage{
	width:min(390px,78%,42vh)!important;
	max-width:100%!important;
}

.pp-home-mini-card{
	padding:9px 11px!important;
	min-width:155px!important;
}

.pp-home-mini-icon{
	width:34px!important;
	height:34px!important;
	font-size:17px!important;
}

.pp-home-hint{
	flex:0 0 auto!important;
	padding:5px 10px!important;
	font-size:11px!important;
}

/* Alturas medias / portátiles */
@media (max-height:760px){
	.pp-home-hero{
		padding:16px 24px!important;
		gap:18px!important;
	}
	.pp-home-copy h1{
		font-size:clamp(27px,min(4vw,6.2vh),46px)!important;
		margin:8px 0!important;
	}
	.pp-home-copy p{
		font-size:13px!important;
		line-height:1.4!important;
	}
	.pp-home-kicker{
		min-height:25px!important;
		font-size:10px!important;
	}
	.pp-home-pills{
		margin-top:10px!important;
	}
	.pp-home-pills span{
		min-height:29px!important;
		font-size:11px!important;
	}
	.pp-home-visual{
		max-height:360px!important;
	}
	.pp-home-logo-stage{
		width:min(320px,72%,38vh)!important;
	}
	.pp-home-mini-card{
		transform:scale(.9);
		transform-origin:center;
	}
}

/* Tablets */
@media (max-width:980px){
	.pp-welcome-lorito360{
		padding:10px!important;
	}
	.pp-home-hero{
		grid-template-columns:1fr!important;
		grid-template-rows:auto minmax(0,1fr)!important;
		gap:8px!important;
		padding:18px 22px!important;
	}
	.pp-home-copy{
		text-align:center!important;
	}
	.pp-home-copy h1{
		font-size:clamp(27px,min(6vw,5.7vh),44px)!important;
	}
	.pp-home-copy p{
		max-width:670px!important;
		margin-inline:auto!important;
	}
	.pp-home-pills{
		justify-content:center!important;
	}
	.pp-home-visual{
		min-height:0!important;
		max-height:300px!important;
	}
	.pp-home-logo-stage{
		width:min(300px,66%,32vh)!important;
	}
	.pp-home-mini-card-a{left:8%!important;top:14%!important}
	.pp-home-mini-card-b{right:8%!important;bottom:10%!important}
}

/* Móviles */
@media (max-width:640px){
	.pp-main{
		height:100vh!important;
	}
	.pp-welcome-lorito360{
		gap:4px!important;
		padding:6px!important;
	}
	.pp-home-hero{
		max-height:calc(100% - 26px)!important;
		padding:14px 12px 10px!important;
		border-radius:18px!important;
		gap:4px!important;
	}
	.pp-home-kicker{
		min-height:23px!important;
		font-size:9px!important;
		letter-spacing:.11em!important;
	}
	.pp-home-copy h1{
		font-size:clamp(24px,min(8.5vw,5.2vh),36px)!important;
		line-height:1!important;
		margin:7px 0!important;
	}
	.pp-home-copy p{
		font-size:12px!important;
		line-height:1.35!important;
	}
	.pp-home-pills{
		margin-top:8px!important;
		gap:5px!important;
	}
	.pp-home-pills span{
		min-height:27px!important;
		padding:0 8px!important;
		font-size:10px!important;
	}
	.pp-home-visual{
		max-height:235px!important;
	}
	.pp-home-logo-stage{
		width:min(230px,72%,29vh)!important;
	}
	.pp-home-mini-card{
		padding:6px 8px!important;
		min-width:auto!important;
	}
	.pp-home-mini-icon{
		width:28px!important;
		height:28px!important;
		font-size:14px!important;
	}
	.pp-home-mini-card strong{
		font-size:10px!important;
	}
	.pp-home-mini-card small{
		display:none!important;
	}
	.pp-home-hint{
		font-size:10px!important;
		padding:3px 7px!important;
	}
}

/* Pantallas muy bajas: conserva todo visible y elimina elementos secundarios */
@media (max-height:610px){
	.pp-home-pills{
		display:none!important;
	}
	.pp-home-mini-card{
		display:none!important;
	}
	.pp-home-hero{
		grid-template-columns:1fr 1fr!important;
		grid-template-rows:1fr!important;
	}
	.pp-home-copy{
		text-align:left!important;
	}
	.pp-home-copy h1{
		font-size:clamp(24px,min(4vw,6vh),38px)!important;
	}
	.pp-home-visual{
		max-height:100%!important;
	}
	.pp-home-logo-stage{
		width:min(280px,85%,43vh)!important;
	}
}

/* Móvil muy bajo: simplificación extrema, siempre sin desplazamiento */
@media (max-width:640px) and (max-height:610px){
	.pp-home-hero{
		grid-template-columns:1fr 1fr!important;
		padding:10px!important;
	}
	.pp-home-copy{
		text-align:left!important;
	}
	.pp-home-copy p{
		font-size:10.5px!important;
		line-height:1.28!important;
	}
	.pp-home-kicker{
		display:none!important;
	}
	.pp-home-hint{
		display:none!important;
	}
	.pp-home-logo-stage{
		width:min(190px,90%,38vh)!important;
	}
}

/* Evita que cualquier panel provoque scroll en el documento.
   Si un módulo necesita más espacio, debe remaquetarse dentro del área visible. */
.pp-content,
.pp-content-inner,
.pp-panel,
.ppc-nivel-panel{
	max-height:100%!important;
}


/* =========================================================
   CORRECCIÓN DE SCROLL INTERNO
   - La pantalla inicial sigue sin scroll.
   - Los módulos reales (CENTRO / PROFESOR / TUTOR / ESTUDIANTE)
     pueden desplazarse INTERNAMENTE cuando el contenido lo necesita.
   ========================================================= */

/* El documento general continúa bloqueado para evitar scroll doble. */
html,
body{
	overflow:hidden!important;
}

/* El área central sí puede administrar su propio desplazamiento. */
.pp-content{
	overflow:hidden!important;
}

.pp-content-inner{
	overflow-y:auto!important;
	overflow-x:hidden!important;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior:contain;
	scrollbar-gutter:stable;
}

/* La portada neutral nunca debe generar desplazamiento. */
.pp-content-inner:has(.pp-welcome-lorito360){
	overflow:hidden!important;
}

/* Los paneles de rol y módulos del CENTRO pueden crecer y desplazarse. */
.pp-role-panel-content,
.pp-panel,
.ppc-root,
.ppc-panel,
.ppc-nivel-panel,
.pga-root,
.pga-panel,
.pga-config-wrap,
.pga-config-panel,
.pga-students-table-wrap,
.pga-table-wrap{
	max-height:none!important;
}

/* Si el plugin de CENTRO usa contenedores propios, permitimos scroll interno. */
.pp-role-panel-content{
	min-height:0!important;
	overflow:visible!important;
}

.pp-role-panel-content > *{
	min-height:0;
}

/* Contenedores de nivel/grupo que antes quedaron forzados a 100%. */
.ppc-nivel-panel{
	overflow:visible!important;
}

/* Tablas/listas largas: scroll local cómodo, sin bloquear toda la pantalla. */
.pga-students-table-wrap,
.pga-table-wrap{
	overflow:auto!important;
	-webkit-overflow-scrolling:touch;
}

/* Móvil y tablet: mantener navegación usable y contenido desplazable. */
@media (max-width:980px){
	.pp-content-inner{
		overflow-y:auto!important;
		overflow-x:hidden!important;
	}
}

@media (max-width:640px){
	.pp-content-inner{
		overflow-y:auto!important;
		overflow-x:hidden!important;
	}
}

/* Portada: prioridad absoluta sin scroll incluso en móviles. */
@media (max-width:980px){
	.pp-content-inner:has(.pp-welcome-lorito360){
		overflow:hidden!important;
	}
}

/* Fallback para navegadores donde :has() no esté disponible:
   el propio bloque de bienvenida permanece contenido. */
.pp-welcome-lorito360{
	overflow:hidden!important;
}


/* =========================================================
   LORITO360 · SCROLL MÓVIL DEFINITIVO
   ========================================================= */

/* La aplicación ocupa la pantalla, pero el contenido central es quien desplaza. */
html, body{
	width:100%;
	height:100%;
	margin:0;
	overflow:hidden!important;
	overscroll-behavior:none;
}

.pp-main{
	height:100dvh!important;
	max-height:100dvh!important;
	min-height:0!important;
	display:flex!important;
	flex-direction:column!important;
	overflow:hidden!important;
}

@supports not (height:100dvh){
	.pp-main{
		height:100vh!important;
		max-height:100vh!important;
	}
}

.pp-topbar{
	flex:0 0 auto!important;
}

.pp-content{
	flex:1 1 auto!important;
	min-height:0!important;
	height:auto!important;
	max-height:none!important;
	overflow:hidden!important;
	position:relative;
}

/* ESTE es el único contenedor de scroll general del portal. */
.pp-content-inner{
	position:relative;
	display:block!important;
	width:100%;
	height:100%!important;
	min-height:0!important;
	max-height:100%!important;
	overflow-x:hidden!important;
	overflow-y:auto!important;
	-webkit-overflow-scrolling:touch!important;
	touch-action:pan-y!important;
	overscroll-behavior-y:contain;
	scroll-behavior:auto;
}

/* No bloquear el gesto táctil dentro de módulos. */
.pp-content-inner *,
.pp-role-panel-content,
.pp-role-panel-content *,
.pga-root,
.pga-root *,
.l360p-root,
.l360p-root *{
	touch-action:auto;
}

/* Formularios y controles mantienen interacción normal */
button,a,input,select,textarea,label{
	touch-action:manipulation;
}

/* En móvil/tablet nunca anular el scroll vertical del contenido central. */
@media (max-width: 1100px){
	html,body{
		overflow:hidden!important;
	}
	.pp-main{
		height:100dvh!important;
		max-height:100dvh!important;
	}
	.pp-content{
		min-height:0!important;
		overflow:hidden!important;
	}
	.pp-content-inner{
		height:100%!important;
		max-height:100%!important;
		min-height:0!important;
		overflow-y:auto!important;
		overflow-x:hidden!important;
		-webkit-overflow-scrolling:touch!important;
		touch-action:pan-y!important;
	}
}

/* La portada puede caber sin scroll, pero no se fuerza overflow:hidden en móvil
   porque eso terminaba bloqueando el gesto al cambiar dinámicamente de panel. */
.pp-welcome-lorito360{
	min-height:100%;
}

/* Cualquier bloqueo inline heredado en paneles se neutraliza. */
.pp-content-inner [style*="overflow: hidden"],
.pp-content-inner [style*="overflow:hidden"]{
	overflow-y:visible!important;
}

/* Tablas pueden hacer scroll horizontal local sin secuestrar el vertical. */
.pga-students-table-wrap,
.pga-table-wrap,
.pga-schedule-wrap,
.l360p-table-wrap{
	overflow-x:auto!important;
	overflow-y:visible!important;
	-webkit-overflow-scrolling:touch;
}

/* Evitar que grids/flex hijos impidan el desplazamiento del padre. */
.pp-role-panel-content,
.pga-root,
.l360p-root{
	min-height:auto!important;
	height:auto!important;
	max-height:none!important;
	overflow:visible!important;
}


/* =========================================================
   LORITO360 · SCROLL MÓVIL NATIVO
   En móvil/tablet NO usamos un contenedor interno de scroll.
   El documento completo se desplaza como una web normal.
   ========================================================= */
@media (max-width:1100px){

	html{
		height:auto!important;
		min-height:100%!important;
		overflow-x:hidden!important;
		overflow-y:auto!important;
		overscroll-behavior-y:auto!important;
	}

	body{
		position:static!important;
		top:auto!important;
		left:auto!important;
		right:auto!important;
		width:100%!important;
		height:auto!important;
		min-height:100dvh!important;
		max-height:none!important;
		overflow-x:hidden!important;
		overflow-y:auto!important;
		-webkit-overflow-scrolling:touch!important;
		touch-action:auto!important;
		overscroll-behavior-y:auto!important;
	}

	.pp-main{
		position:relative!important;
		height:auto!important;
		min-height:100dvh!important;
		max-height:none!important;
		overflow:visible!important;
		display:block!important;
	}

	.pp-topbar{
		position:relative!important;
		top:auto!important;
		flex:none!important;
	}

	.pp-content{
		position:relative!important;
		display:block!important;
		height:auto!important;
		min-height:0!important;
		max-height:none!important;
		overflow:visible!important;
		padding-bottom:40px!important;
	}

	.pp-content-inner{
		position:relative!important;
		display:block!important;
		height:auto!important;
		min-height:0!important;
		max-height:none!important;
		overflow:visible!important;
		-webkit-overflow-scrolling:auto!important;
		touch-action:auto!important;
		overscroll-behavior:auto!important;
		scrollbar-gutter:auto!important;
	}

	.pp-role-panel-content,
	.pp-panel,
	.ppc-root,
	.ppc-panel,
	.pga-root,
	.pga-app,
	.pga-wrap,
	.pga-content,
	.pga-main,
	.pga-dashboard,
	.pga-panel,
	.pga-view,
	.pga-section,
	.pga-config-wrap,
	.pga-config-panel,
	.pga-nivel-panel,
	.pga-grupo-panel,
	.pga-tab-content,
	.l360p-root,
	.l360p-page{
		position:relative;
		height:auto!important;
		min-height:0!important;
		max-height:none!important;
		overflow:visible!important;
		touch-action:auto!important;
	}

	/* Solo tablas anchas pueden desplazarse horizontalmente. */
	.pga-students-table-wrap,
	.pga-table-wrap,
	.pga-schedule-wrap,
	.pga-horario-table-wrap,
	.l360p-table-wrap{
		overflow-x:auto!important;
		overflow-y:visible!important;
		touch-action:pan-x pan-y!important;
		-webkit-overflow-scrolling:touch!important;
	}

	/* La capa oscura solo puede capturar pulsaciones cuando
	   realmente está abierto el menú lateral. */
	.pp-overlay{
		pointer-events:none!important;
		visibility:hidden!important;
	}
	body.pp-sidebar-open .pp-overlay{
		pointer-events:auto!important;
		visibility:visible!important;
	}

	/* Evitar bloqueos heredados de modales ya cerrados. */
	body:not(.pga-success-open):not(.pga-modal-open){
		overflow-y:auto!important;
		position:static!important;
	}
}

/* Pantallas pequeñas: misma regla, sin excepción. */
@media (max-width:640px){
	html,body,
	.pp-main,
	.pp-content,
	.pp-content-inner{
		height:auto!important;
		max-height:none!important;
		overflow-y:visible!important;
		touch-action:auto!important;
	}
	html,body{
		overflow-y:auto!important;
	}
}


/* =========================================================
   LORITO360 · CORRECCIÓN ESPECÍFICA PARA TELÉFONOS
   Tablet conserva el comportamiento actual.
   En teléfono, el BODY es el único scroll vertical.
   ========================================================= */
@media (max-width:640px){

	html{
		position:static!important;
		width:100%!important;
		height:auto!important;
		min-height:100%!important;
		max-height:none!important;
		overflow-x:hidden!important;
		overflow-y:visible!important;
		touch-action:auto!important;
	}

	body{
		position:static!important;
		inset:auto!important;
		width:100%!important;
		height:auto!important;
		min-height:100vh!important;
		min-height:100dvh!important;
		max-height:none!important;
		overflow-x:hidden!important;
		overflow-y:auto!important;
		-webkit-overflow-scrolling:touch!important;
		touch-action:pan-y!important;
		overscroll-behavior-y:auto!important;
	}

	/* Ningún contenedor de la aplicación puede convertirse en viewport cerrado. */
	.pp-main,
	.pp-content,
	.pp-content-inner,
	.pp-role-panel-content,
	.pp-panel,
	.ppc-root,
	.ppc-panel,
	.pga-root,
	.pga-app,
	.pga-wrap,
	.pga-content,
	.pga-main,
	.pga-dashboard,
	.pga-panel,
	.pga-view,
	.pga-section,
	.pga-config-wrap,
	.pga-config-panel,
	.pga-nivel-panel,
	.pga-grupo-panel,
	.pga-tab-content,
	.l360p-root,
	.l360p-page{
		position:relative!important;
		top:auto!important;
		bottom:auto!important;
		left:auto!important;
		right:auto!important;
		inset:auto!important;
		width:auto!important;
		height:auto!important;
		min-height:0!important;
		max-height:none!important;
		overflow:visible!important;
		overscroll-behavior:auto!important;
		touch-action:auto!important;
	}

	/* El área central debe formar parte del flujo normal del documento. */
	.pp-main{
		display:block!important;
		min-height:100dvh!important;
	}

	.pp-content{
		display:block!important;
		padding-bottom:56px!important;
	}

	.pp-content-inner{
		display:block!important;
	}

	/* No permitir pseudo-capas o overlays invisibles capturando el dedo. */
	.pp-overlay,
	.pp-sidebar-overlay,
	[data-pp-overlay]{
		pointer-events:none!important;
	}

	body.pp-sidebar-open .pp-overlay,
	body.pp-sidebar-open .pp-sidebar-overlay,
	body.pp-sidebar-open [data-pp-overlay]{
		pointer-events:auto!important;
	}

	/* Tablas: horizontal local, pero el gesto vertical pasa al body. */
	.pga-students-table-wrap,
	.pga-table-wrap,
	.pga-schedule-wrap,
	.pga-horario-table-wrap,
	.l360p-table-wrap{
		overflow-x:auto!important;
		overflow-y:visible!important;
		touch-action:pan-x pan-y!important;
	}

	/* Prevenir que un modal ya cerrado deje el body congelado. */
	body:not(.pga-success-open):not(.pga-modal-open):not(.modal-open){
		position:static!important;
		top:auto!important;
		overflow-y:auto!important;
		touch-action:pan-y!important;
	}
}