/* Identidad visual del backoffice: negro / amarillo / chocolate,
   siguiendo la misma paleta del tema (lgs21). */

:root {
	--lg-contraste: #000000;
	--lg-base: #FFFFFF;
	--lg-crema: #F7F1E6;
	--lg-amarillo: #FFC814;
	--lg-chocolate: #8B5A2B;
	--lg-chocolate-oscuro: #5C3A1E;
	--lg-cacao: #241608;
}

.lg-acceso-miembros,
.lg-perfil-miembro {
	max-width: 620px;
	margin: 0 auto;
	font-family: inherit;
}

/* --- Guía en video: "¿no sabes cómo entrar?" arriba de las pestañas --- */

.lg-acceso-guia {
	background: var(--lg-crema);
	border: 1px solid var(--lg-chocolate);
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.lg-acceso-guia summary {
	margin: 0;
	font-weight: 600;
	color: var(--lg-chocolate-oscuro);
	text-decoration: underline;
	cursor: pointer;
	list-style: none;
}

.lg-acceso-guia summary::-webkit-details-marker {
	display: none;
}

.lg-acceso-guia summary:hover {
	color: var(--lg-cacao);
}

.lg-acceso-guia[open] summary {
	margin-bottom: 0.75rem;
}

.lg-acceso-guia-video {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: 4px;
	background: #000000;
}

/* --- Pestañas de acceso-miembros --- */

.lg-acceso-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 2px solid var(--lg-chocolate);
}

.lg-acceso-tabs .lg-tab {
	padding: 0.75rem 1.25rem;
	font-family: var(--wp--preset--font-family--titulos, inherit);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--lg-chocolate);
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}

.lg-acceso-tabs .lg-tab.is-active {
	color: var(--lg-contraste);
	border-bottom-color: var(--lg-amarillo);
}

/* --- Menú del panel de staff --- */

.lg-panel-staff-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}

.lg-panel-staff-nav .lg-tab {
	padding: 0.6rem 0;
	font-family: var(--wp--preset--font-family--titulos, inherit);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--lg-chocolate-oscuro);
	border-bottom: 2px solid transparent;
}

.lg-panel-staff-nav .lg-tab:hover,
.lg-panel-staff-nav .lg-tab.is-active {
	color: var(--lg-contraste);
	border-bottom-color: var(--lg-chocolate);
}

.lg-acceso-mensaje {
	padding: 0.85rem 1.1rem;
	border-radius: 4px;
	margin-bottom: 1.25rem;
	font-size: 0.95rem;
}

.lg-acceso-mensaje--ok {
	background: #eaf7ea;
	border: 1px solid #4caf50;
	color: #1e4620;
}

.lg-acceso-mensaje--error {
	background: #fbeaea;
	border: 1px solid #c0392b;
	color: #7a1f16;
}

/* --- Formularios (login, activación, perfil) --- */

.lg-acceso-miembros form,
.lg-perfil-miembro form {
	background: var(--lg-crema);
	border: 1px solid var(--lg-chocolate);
	border-radius: 6px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.lg-acceso-miembros form p,
.lg-perfil-miembro form p {
	margin: 0 0 1rem;
}

.lg-acceso-miembros label,
.lg-perfil-miembro label {
	display: block;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--titulos, inherit);
	text-transform: uppercase;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: var(--lg-chocolate-oscuro);
	margin-bottom: 0.35rem;
}

.lg-acceso-miembros input[type="text"],
.lg-acceso-miembros input[type="email"],
.lg-acceso-miembros input[type="password"],
.lg-perfil-miembro input[type="text"],
.lg-perfil-miembro input[type="email"],
.lg-perfil-miembro input[type="password"],
.lg-perfil-miembro input[type="file"],
.lg-perfil-miembro input[type="date"],
.lg-perfil-miembro input[type="search"],
.lg-perfil-miembro select,
.lg-perfil-miembro textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--lg-chocolate);
	border-radius: 4px;
	background: var(--lg-base);
	font-size: 1rem;
	box-sizing: border-box;
}

.lg-perfil-miembro textarea {
	min-height: 5rem;
}

.lg-acceso-miembros .button,
.lg-acceso-miembros input[type="submit"],
.lg-perfil-miembro .button,
.lg-perfil-miembro button[type="submit"] {
	display: inline-block;
	background: var(--lg-amarillo);
	color: var(--lg-contraste) !important;
	border: none;
	border-radius: 3px;
	padding: 0.75rem 1.5rem;
	font-family: var(--wp--preset--font-family--titulos, inherit);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.85rem;
	white-space: nowrap;
	text-decoration: none !important;
	cursor: pointer;
}

.button-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: var(--lg-chocolate);
	text-decoration: underline;
	font-size: inherit;
	font-family: inherit;
	cursor: pointer;
}

.button-link:hover {
	color: var(--lg-contraste);
}

.lg-acceso-miembros .button:hover,
.lg-acceso-miembros input[type="submit"]:hover,
.lg-perfil-miembro .button:hover,
.lg-perfil-miembro button[type="submit"]:hover {
	background: var(--lg-chocolate);
	color: var(--lg-base);
}

.lg-acceso-miembros a {
	color: var(--lg-chocolate);
}

.lg-acceso-miembros a:hover {
	color: var(--lg-amarillo);
}

/* --- Perfil: cabecera --- */

.lg-perfil-cabecera {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--lg-contraste);
	color: var(--lg-base);
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.lg-perfil-cabecera h2 {
	margin: 0 0 0.4rem;
	color: var(--lg-amarillo);
	font-family: var(--wp--preset--font-family--titulos, inherit);
	text-transform: uppercase;
}

.lg-perfil-cabecera p {
	margin: 0.15rem 0;
	font-size: 0.9rem;
	color: var(--lg-crema);
}

.lg-perfil-foto {
	border-radius: 50%;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border: 3px solid var(--lg-amarillo);
	flex-shrink: 0;
}

.lg-perfil-foto-form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.lg-perfil-foto-form label {
	margin: 0;
}

/* --- Estado (activo/inactivo) --- */

.lg-estado {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 3px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.lg-estado--activo {
	background: #e3f6e3;
	color: #1e4620;
}

.lg-estado--inactivo {
	background: #f7e3e3;
	color: #7a1f16;
}

.lg-bloqueada {
	color: #b32d2e;
	font-weight: 700;
}

/* --- Tablas de saldo / transacciones --- */

.lg-perfil-miembro h3 {
	font-family: var(--wp--preset--font-family--titulos, inherit);
	text-transform: uppercase;
	color: var(--lg-chocolate-oscuro);
	border-bottom: 2px solid var(--lg-amarillo);
	padding-bottom: 0.3rem;
	margin-top: 2rem;
}

.lg-tabla-saldos,
.lg-tabla-transacciones {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	background: var(--lg-base);
}

.lg-tabla-saldos th,
.lg-tabla-saldos td,
.lg-tabla-transacciones th,
.lg-tabla-transacciones td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid #e0d8c8;
	font-size: 0.9rem;
}

.lg-tabla-saldos thead th,
.lg-tabla-transacciones thead th {
	background: var(--lg-cacao);
	color: var(--lg-amarillo);
	font-family: var(--wp--preset--font-family--titulos, inherit);
	text-transform: uppercase;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
}

/* El nombre completo y la cédula se veían apretados (el nombre se
   partía en 3-4 líneas, la cédula partía el número a la mitad) —
   les damos más espacio y evitamos que la cédula se corte. */
.lg-tabla-saldos .lg-col-nombre {
	min-width: 11rem;
}

.lg-tabla-saldos .lg-col-cedula {
	white-space: nowrap;
}

.lg-tabla-saldos tfoot th {
	background: var(--lg-chocolate);
	color: var(--lg-base);
}

/* --- Comunicados --- */

.lg-comunicados {
	margin-bottom: 2rem;
}

.lg-comunicado {
	background: var(--lg-cacao);
	color: var(--lg-base);
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 1rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.lg-comunicado h4 {
	margin: 0 0 0.3rem;
	color: var(--lg-amarillo);
	font-family: var(--wp--preset--font-family--titulos, inherit);
	text-transform: uppercase;
}

.lg-comunicado-fecha {
	font-size: 0.78rem;
	color: var(--lg-chocolate);
	margin: 0 0 0.6rem;
}

.lg-comunicado-cuerpo {
	font-size: 0.95rem;
	line-height: 1.6;
}

/* --- Header y footer de los paneles (miembro y staff) --- */

.lg-panel-header {
	background: linear-gradient(135deg, #000000 0%, #241608 100%);
	border-bottom: 3px solid var(--lg-amarillo);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.lg-panel-nav-bar {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	position: relative;
	z-index: 1;
}

.lg-panel-footer {
	background: linear-gradient(135deg, #241608 0%, #5C3A1E 100%);
	border-top: 3px solid var(--lg-amarillo);
}

.lg-panel-footer-link a {
	color: var(--lg-amarillo) !important;
	text-decoration: none !important;
	font-weight: 600;
	transition: opacity 0.15s ease;
}

.lg-panel-footer-link a:hover {
	opacity: 0.75;
	text-decoration: underline !important;
}

.lg-boton-regresar,
.lg-boton-sesion {
	display: inline-block;
	padding: 0.45rem 1rem;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lg-boton-regresar {
	background: transparent;
	color: var(--lg-base) !important;
	border: 1.5px solid var(--lg-base);
}

.lg-boton-regresar::before {
	content: "← ";
}

.lg-boton-regresar:hover {
	background: var(--lg-base);
	color: var(--lg-contraste) !important;
	transform: translateY(-1px);
}

.lg-boton-sesion {
	background: var(--lg-amarillo);
	color: var(--lg-contraste) !important;
	border: 1.5px solid var(--lg-amarillo);
	box-shadow: 0 2px 6px rgba(255, 200, 20, 0.25);
}

.lg-boton-sesion:hover {
	background: var(--lg-contraste);
	color: var(--lg-amarillo) !important;
	border-color: var(--lg-amarillo);
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(255, 200, 20, 0.35);
}

.lg-header-banner {
	margin: 0;
	flex-shrink: 0;
}

.lg-header-banner img {
	display: block;
	width: 56px;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Título "Fundación Legendarios Scout 21" centrado de verdad en los
   headers de los paneles (miembro y staff) — la fila usa space-between
   con elementos de ancho distinto a cada lado, así que un simple
   text-align:center no lo centra en la página completa. Esta clase es
   propia del backoffice (no se comparte con el header del sitio
   público) para no repetir el problema que rompió el home. */
.lg-panel-header-row {
	position: relative;
	align-items: center;
	/* El logo/título quedan en position:absolute (ver regla de abajo) para
	   centrarlos de verdad en la página, así que por sí solo el logo NO
	   cuenta para el alto real de esta fila — sin este min-height, la fila
	   se dimensiona solo por el banner/botones del lado derecho y el logo
	   (más alto que ancho, 773×1000px) se sale de la franja amarilla. */
	min-height: 84px;
}

.lg-header-emblema {
	margin: 0;
	flex-shrink: 0;
}

.lg-header-emblema img {
	display: block;
	max-height: 72px;
	width: auto;
	height: auto;
}

/* Marca de agua del emblema, repetida en los espacios vacíos a los
   lados del contenido principal (id="wp--skip-link--target") — el
   contenido real va en .lg-panel-main-content, con z-index por encima
   de este ::before para que la marca de agua quede detrás, nunca
   estorbando el formulario/tablas. */
.lg-panel-main-watermark {
	position: relative;
}

.lg-panel-main-watermark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		url("/wp-content/themes/lgs21/assets/images/emblema-circular.png"),
		url("/wp-content/themes/lgs21/assets/images/emblema-circular.png");
	background-repeat: repeat-y, repeat-y;
	background-position: left top, right top;
	background-size: 54px auto, 54px auto;
	opacity: 0.1;
	pointer-events: none;
	z-index: 0;
}

.lg-panel-main-content {
	position: relative;
	z-index: 1;
}

@media (max-width: 900px) {
	.lg-panel-main-watermark::before {
		display: none;
	}
}

.lg-panel-header-titulo-pill {
	margin: 0 !important;
	padding: 0.5rem 1.1rem;
	border: 1.5px solid var(--lg-amarillo);
	border-radius: 999px;
	background: rgba(255, 200, 20, 0.08);
}

@media (min-width: 783px) {
	.lg-panel-header-row .lg-panel-header-title {
		position: absolute;
		left: 50%;
		top: 50%;
		/* Un poco corrido a la izquierda del centro exacto, a pedido. */
		transform: translate(calc(-50% - 18px), -50%);
		white-space: nowrap;
	}
}

@media (max-width: 782px) {
	.lg-header-banner {
		display: none;
	}
}

@media (max-width: 600px) {
	.lg-perfil-cabecera {
		flex-direction: column;
		text-align: center;
	}
	/* En pantalla angosta las tablas (miembros, auditoría, comunicados,
	   mayor, saldos) no caben con todas sus columnas — en vez de
	   desbordar la página entera, que la tabla misma se desplace
	   horizontalmente dentro de su propio ancho. Solo aquí: en escritorio
	   "display:block" en un <table> rompe su layout normal de columnas. */
	.lg-tabla-saldos,
	.lg-tabla-transacciones {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		font-size: 0.8rem;
	}
	.lg-acceso-tabs .lg-tab {
		padding: 0.6rem 0.75rem;
		font-size: 0.8rem;
	}
}