/* =====================================================================
   theme-modern.css
   Capa de modernización visual para perfil/mis_cursos/miscursosDocente.
   Coherente con el tema React (Material UI):
     - Primary: #0072d2
     - Texto: #132F4C / #5f6b7b
     - Fondo: #F0F5FB
     - Tipografía: Poppins
   Se carga DESPUÉS de admin-materialize.min.css, perfil.css y global.css
   para sobrescribir solo la capa visual sin tocar la estructura.
   ===================================================================== */

/* Fuente Poppins (la app React la carga vía Google Fonts; aquí también) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
	--tm-primary: #0072d2;
	--tm-primary-dark: #005ba8;
	--tm-primary-light: #e6f1fb;
	--tm-text: #132F4C;
	--tm-text-secondary: #5f6b7b;
	--tm-text-muted: #70839B;
	--tm-bg: #F0F5FB;
	--tm-bg-gradient: linear-gradient(180deg, #F0F5FB 0%, #dde8f5 100%);
	--tm-card-bg: #ffffff;
	--tm-border: rgba(19, 47, 76, 0.08);
	--tm-shadow-sm: 0 1px 2px rgba(19, 47, 76, 0.06), 0 1px 3px rgba(19, 47, 76, 0.04);
	--tm-shadow-md: 0 4px 12px rgba(19, 47, 76, 0.08), 0 2px 4px rgba(19, 47, 76, 0.04);
	--tm-shadow-lg: 0 10px 30px rgba(19, 47, 76, 0.10), 0 4px 8px rgba(19, 47, 76, 0.05);
	--tm-radius-sm: 10px;
	--tm-radius-md: 16px;
	--tm-radius-lg: 20px;

	/* Sobrescribimos las variables de global.css */
	--hse-body-background: var(--tm-bg-gradient) !important;
	--hse-button-background: var(--tm-primary) !important;
	--hse-button-background-focus: var(--tm-primary-dark) !important;
	--hse-button-color: #ffffff !important;
	--hse-button-zonaalumno-background: var(--tm-primary) !important;
	--hse-button-zonaalumno-background-focus: var(--tm-primary-dark) !important;
	--hse-button-red-background: var(--tm-primary) !important;
	--hse-button-red-background-focus: var(--tm-primary-dark) !important;
	--hse-floating-action-button-background: var(--tm-primary) !important;
	--hse-floating-action-button-background-focus: var(--tm-primary-dark) !important;
}

/* ---------- Tipografía global ---------- */
html, body {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	color: var(--tm-text);
}

body {
	background: var(--tm-bg) !important;
	background: var(--tm-bg-gradient) !important;
	background-attachment: fixed !important;
}

main {
	background: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', sans-serif !important;
	color: var(--tm-text);
	letter-spacing: -0.01em;
}
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
h4, h5 { font-weight: 600; }

p, span, label, li,
a:not(.material-icons):not(.paginate_button) {
	font-family: 'Poppins', sans-serif !important;
}

/* Proteger las fuentes de iconos: nunca aplicar Poppins encima */
.material-icons,
i.material-icons,
.dataTables_wrapper .dataTables_paginate .paginate_button.first,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.last,
.dataTables_wrapper .dataTables_paginate .paginate_button.first::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.next::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.last::before,
.fc .fc-button.fc-prev-button,
.fc .fc-button.fc-next-button,
.fc-icon {
	font-family: "Material Icons" !important;
}

/* ---------- Cards ---------- */
.card,
.cardmodulowraper {
	border-radius: var(--tm-radius-md) !important;
	border: 1px solid var(--tm-border) !important;
	box-shadow: var(--tm-shadow-md) !important;
	background-color: var(--tm-card-bg) !important;
	transition: box-shadow .2s ease, transform .2s ease;
}

/* Excepción: la cabecera con imagen de fondo del módulo en mis_cursos.html
   recibe el background-image por JS (idimagen.style.backgroundImage = url…).
   No le aplicamos background-color para no taparlo. */
.card#idimagen {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	overflow: hidden !important;       /* recorta el título si excede */
	position: relative !important;
}

/* Título del módulo sobre la imagen: limitar a 2 líneas y centrar
   horizontal y verticalmente para que no se desborde de la cabecera. */
.card#idimagen #idnombremodulo_titulo {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: calc(100% - 1rem) !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 .5rem !important;
	text-align: center !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden !important;
	text-overflow: ellipsis;
	word-break: break-word;
	line-height: 1.15 !important;
}

@media (max-width: 600px) {
	.card#idimagen #idnombremodulo_titulo {
		font-size: 1.5em !important;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
}

.card:hover {
	box-shadow: var(--tm-shadow-lg) !important;
}

.card .card-content,
.card-panel {
	border-radius: var(--tm-radius-md) !important;
}

/* ---------- Botones ---------- */
.btn,
.btn-large,
.btn-small,
.btn-flat {
	font-family: 'Poppins', sans-serif !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0.2px !important;
	border-radius: 999px !important;
	box-shadow: var(--tm-shadow-sm) !important;
	transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease !important;
}

.btn:hover,
.btn-large:hover,
.btn-small:hover {
	box-shadow: var(--tm-shadow-md) !important;
	background-color: var(--tm-primary-dark) !important;
}

.btn:active,
.btn-large:active {
	transform: translateY(1px);
}

/* Botón flotante / FAB */
.fixed-action-btn .btn-floating,
.btn-floating {
	box-shadow: var(--tm-shadow-md) !important;
}

/* ---------- Header / logo flotante ---------- */
.logoflota {
	filter: drop-shadow(0 2px 6px rgba(19, 47, 76, 0.15));
}

/* ---------- Navbar inferior ---------- */
#navbarbottom .navbar-bottom,
.navbar-bottom {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border-top-left-radius: var(--tm-radius-lg) !important;
	border-top-right-radius: var(--tm-radius-lg) !important;
	box-shadow: 0 -4px 16px rgba(19, 47, 76, 0.08) !important;
	border-top: 1px solid var(--tm-border);
}

.navbar-bottom a,
.navbar-bottom .nav-bottom-item {
	color: var(--tm-text-secondary) !important;
	font-weight: 500;
}

.navbar-bottom a.active,
.navbar-bottom a:focus,
.navbar-bottom a.selected {
	color: var(--tm-primary) !important;
}

/* ---------- Imagen de usuario ---------- */
#imguser {
	border-radius: 20px !important;
	box-shadow: var(--tm-shadow-md) !important;
	border: 4px solid #fff !important;
}

/* ---------- Inputs / select ---------- */
input[type=text]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=search]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=date]:not(.browser-default),
textarea.materialize-textarea,
.select-wrapper input.select-dropdown {
	border-bottom: 1px solid #c8d2dc !important;
	transition: border-color .2s ease, box-shadow .2s ease;
	font-family: 'Poppins', sans-serif !important;
	color: var(--tm-text) !important;
}

input:focus:not([type]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]),
.select-wrapper input.select-dropdown:focus {
	border-bottom: 1px solid var(--tm-primary) !important;
	box-shadow: 0 1px 0 0 var(--tm-primary) !important;
}

input.select-dropdown,
.dropdown-content {
	border-radius: var(--tm-radius-sm) !important;
}

.dropdown-content {
	box-shadow: var(--tm-shadow-md) !important;
	border: 1px solid var(--tm-border);
}

/* ---------- Collapsible (acordeón) ---------- */
.collapsible {
	border: none !important;
	box-shadow: none !important;
	border-radius: var(--tm-radius-md) !important;
	overflow: hidden;
}

.collapsible-header {
	background: transparent !important;
	font-weight: 500;
	color: var(--tm-text);
	padding: 1rem 1.25rem !important;
	border-bottom: 1px solid var(--tm-border) !important;
}

.collapsible-header.active {
	color: var(--tm-primary);
}

.collapsible-body {
	border-bottom: none !important;
	background: transparent !important;
}

/* ---------- Subtítulos / etiquetas tipo "GWO / IRATA / Total ID" ---------- */
.subtitle2,
.label-uppercase {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.78rem;
	color: var(--tm-text-muted);
	font-weight: 500;
}

/* ---------- Modulo / curso card ---------- */
.cardmodulowraper {
	border: 1px solid var(--tm-border) !important;
	transition: transform .15s ease, box-shadow .2s ease;
	overflow: hidden !important;     /* recorta el bloque de color interior */
	padding: 0 !important;            /* sin padding para que llegue a los bordes */
	display: flex;
	align-items: stretch;
}

.cardmodulowraper:hover {
	transform: translateY(-2px);
	box-shadow: var(--tm-shadow-lg) !important;
}

/* La parte coloreada (cardmoduloimg) ocupa toda su altura
   y respeta las esquinas redondeadas del wrapper */
.cardmodulowraper .cardmoduloimg {
	border-radius: 0 !important;
	height: 100% !important;
}

.cardmodulowraper .derechaedicion {
	background: #fff;
	height: 100% !important;
}

/* ---------- Spinner color primario ---------- */
.spinner-blue,
.spinner-blue-only {
	border-color: var(--tm-primary) !important;
}

/* ---------- Materialize select / chips ---------- */
.chip {
	background: var(--tm-primary-light) !important;
	color: var(--tm-primary-dark) !important;
	border-radius: 999px !important;
}

/* ---------- Links ---------- */
a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-small) {
	color: var(--tm-primary);
	transition: color .15s ease;
}

a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-small):hover {
	color: var(--tm-primary-dark);
}

/* ---------- Modal ---------- */
.modal {
	border-radius: var(--tm-radius-lg) !important;
	box-shadow: var(--tm-shadow-lg) !important;
}

.modal .modal-footer {
	border-radius: 0 0 var(--tm-radius-lg) var(--tm-radius-lg) !important;
}

/* ---------- Tabs ---------- */
.tabs {
	background: transparent !important;
	border-radius: var(--tm-radius-sm) !important;
}
.tabs .indicator {
	background-color: var(--tm-primary) !important;
}
.tabs .tab a {
	color: var(--tm-text-secondary) !important;
	font-family: 'Poppins', sans-serif !important;
	text-transform: none !important;
	font-weight: 500;
}
.tabs .tab a.active,
.tabs .tab a:focus.active {
	color: var(--tm-primary) !important;
	background: transparent !important;
}

/* ---------- Pequeños ajustes específicos perfil ---------- */
.section.container.ipadcontainer {
	padding-top: 0.5rem;
}

/* Cards de cursos: padding consistente */
.cardmodulowraper {
	padding: 0;
}

/* =====================================================================
   ROLES: alumno vs docente
   Activación: añadir al <body> la clase `role-alumno` o `role-docente`.
   También se acepta el atributo `data-role="alumno|docente"`.
   La idea: identificación clara pero sutil, no invasiva.
   ===================================================================== */

:root {
	--tm-role-alumno: #0072d2;          /* azul (mismo primario) */
	--tm-role-alumno-bg: #e6f1fb;
	--tm-role-docente: #ff8a3d;         /* naranja cálido, contraste suave */
	--tm-role-docente-bg: #fff1e6;
}

/* Tinte sutil del fondo según el rol activo (sustituye al estilo "barra superior")
   Es lo bastante distinto para identificar el modo de un vistazo, pero suave. */
body.role-alumno,
body[data-role="alumno"] {
	background: linear-gradient(180deg, #fff4ea 0%, #f0f0f0 100%) !important;
	background-attachment: fixed !important;
}

body.role-docente,
body[data-role="docente"] {
	background: linear-gradient(180deg, #eaf3fc 0%, #d6e6f5 100%) !important;
	background-attachment: fixed !important;
}

/* Badge "ALUMNO" / "DOCENTE" — usar con <span class="role-badge">…</span>
   Se rellena automáticamente con el contenido si se quiere, o se usa
   .role-badge.role-badge-alumno / .role-badge-docente */
.role-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.role-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
}

body.role-alumno .role-badge,
body[data-role="alumno"] .role-badge,
.role-badge-alumno {
	background: var(--tm-role-alumno-bg);
	color: var(--tm-role-alumno);
}
body.role-alumno .role-badge::before,
body[data-role="alumno"] .role-badge::before,
.role-badge-alumno::before {
	background: var(--tm-role-alumno);
}

body.role-docente .role-badge,
body[data-role="docente"] .role-badge,
.role-badge-docente {
	background: var(--tm-role-docente-bg);
	color: #c9521a;
}
body.role-docente .role-badge::before,
body[data-role="docente"] .role-badge::before,
.role-badge-docente::before {
	background: var(--tm-role-docente);
}

/* Acento sutil del avatar según rol */
body.role-alumno #imguser,
body[data-role="alumno"] #imguser {
	box-shadow: 0 0 0 3px var(--tm-role-alumno-bg), var(--tm-shadow-md) !important;
}
body.role-docente #imguser,
body[data-role="docente"] #imguser {
	box-shadow: 0 0 0 3px var(--tm-role-docente-bg), var(--tm-shadow-md) !important;
}

/* Pequeño tinte en el icono activo de la navbar inferior */
body.role-docente .navbar-bottom a.active,
body.role-docente .navbar-bottom a:focus,
body[data-role="docente"] .navbar-bottom a.active,
body[data-role="docente"] .navbar-bottom a:focus {
	color: var(--tm-role-docente) !important;
}

/* =====================================================================
   Tarjeta "Datos personales" (#datosid en perfil.html)
   Solo CSS — no toca HTML para no romper bindings de JS.
   ===================================================================== */

#datosid.card {
	border-radius: var(--tm-radius-lg) !important;
	box-shadow: var(--tm-shadow-md) !important;
	border: 1px solid var(--tm-border) !important;
	padding: 1.25rem 1.5rem 1.25rem !important;
	margin-top: 0.5rem !important;
	background: #ffffff !important;
}

/* Botón "X" cerrar más limpio */
#xdatosid {
	background: transparent !important;
	border: none !important;
	border-radius: 999px !important;
	width: 36px;
	height: 36px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--tm-text-secondary) !important;
	transition: background-color .15s ease, color .15s ease;
}
#xdatosid:hover {
	background: var(--tm-primary-light) !important;
	color: var(--tm-primary) !important;
}

/* Título "Datos personales" */
#datosid #DatosPersonales {
	margin: 0 0 1.75rem !important;
	font-weight: 600;
	color: var(--tm-text);
	font-size: 1.5rem;
	position: relative;
	display: inline-block !important;
}
#datosid #DatosPersonales::after {
	content: "";
	display: block;
	height: 3px;
	width: 60%;
	margin: .4rem auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--tm-primary), transparent);
}

/* Esconder el header del collapsible vacío que deja un espacio raro */
#datosid .collapsible-header {
	display: none !important;
}
#datosid .collapsible {
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
}
#datosid .collapsible-body {
	/* mantenemos un padding horizontal para que el .row con margen negativo
	   no recorte labels e inputs por los bordes */
	padding: 0 0.75rem !important;
	margin: 0 !important;
}

/* Filas con respiración consistente */
#datosid .row {
	margin-bottom: 0.25rem !important;
}

/* Inputs con etiqueta arriba estable, no flotante (más legible y moderna) */
#datosid .input-field {
	margin-top: 0.5rem !important;
	margin-bottom: 0.25rem !important;
}

#datosid .input-field input,
#datosid .input-field .select-wrapper input.select-dropdown {
	font-size: 1rem !important;
	color: var(--tm-text) !important;
	font-weight: 500 !important;
	height: 2.4rem !important;
	border-bottom: 1px solid #d8e1ec !important;
}

#datosid .input-field label {
	color: var(--tm-text-muted) !important;
	font-size: 0.8rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0.02em !important;
}

/* Inputs deshabilitados con un fondo muy ligero */
#datosid .input-field input[disabled] {
	color: var(--tm-text) !important;
	-webkit-text-fill-color: var(--tm-text) !important;
	opacity: 0.85;
	border-bottom-style: dashed !important;
}

/* Sección de imágenes (firma + DNI) en una caja sutil */
#datosid #fotografiadiv {
	background: #f7fafd;
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-md);
	padding: 1rem;
	margin-top: 1rem !important;
}
#datosid #fotografiaid {
	color: var(--tm-text-secondary);
	margin: 1.25rem 0 0.5rem !important;
	font-size: 0.92rem;
}

/* Las filas de botones se ven uniformes y con buen gap */
#datosid .row .col[class*="m4"] p {
	margin: 0.35rem 0 !important;
}
#datosid .btn {
	width: 100% !important;
	border-radius: 999px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	height: 38px !important;
	line-height: 38px !important;
	padding: 0 1.2rem !important;
}

/* Iconos sociales con un círculo blanco discreto */
#datosid a img[src*="facebook"],
#datosid a img[src*="instagram"],
#datosid a img[src*="linkedin"] {
	transition: transform .15s ease, filter .15s ease;
}
#datosid a img[src*="facebook"]:hover,
#datosid a img[src*="instagram"]:hover,
#datosid a img[src*="linkedin"]:hover {
	transform: translateY(-2px) scale(1.05);
	filter: drop-shadow(0 4px 8px rgba(19, 47, 76, 0.15));
}

/* Móvil: una sola columna y más aire */
@media (max-width: 600px) {
	#datosid.card {
		padding: 1rem 0.75rem !important;
	}
	#datosid .collapsible-body {
		padding: 0 0.75rem !important;
	}
	#datosid .input-field.col.s6 {
		width: 100% !important;
		margin-left: 0 !important;
		left: 0 !important;
	}
	#datosid .col.s12.m4.l4 {
		width: 100% !important;
	}
}