/* Menú vertical: barra lateral en escritorio (≥992px); barra superior + barra inferior + hoja «Más» en móvil.
   Paleta de nubelfon.com */
:root {
	--nf-green: #037B63;
	--nf-green-dark: #025E4B;
	--nf-green-deep: #014A3B;
	--nf-mint: #4FD1B5;
	--nf-green-soft: #DDF6F0;
	--nf-on: #FFFFFF;
	--nf-on-2: rgba(255, 255, 255, .78);
	--nf-hover: rgba(255, 255, 255, .10);
	--nf-line: rgba(255, 255, 255, .14);
	--nf-side-w: 248px;
	--nf-top-h: 56px;
	--nf-tab-h: 64px;
}

/* ---------- Común ---------- */
#nf-sidebar, #nf-tabbar, #nf-more {
	background: var(--nf-green);
	color: var(--nf-on);
}
#nf-sidebar { position: fixed; z-index: 1030; display: flex; }
.nf-head { display: flex; align-items: center; gap: 2px; }
.nf-brand { margin-right: auto; }
.nf-brand img { height: 28px; width: auto !important; margin: 0 !important; display: block; } /* anula #logo-menu de custom.css/movil.css */

.nf-icon-btn {
	width: 36px; height: 36px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	color: var(--nf-on) !important;
	font-size: 17px;
	text-decoration: none !important;
	transition: background-color .15s;
}
.nf-icon-btn:hover { background: var(--nf-hover); }

/* Herramientas (notificaciones, ayuda) */
.nf-tools { display: flex; }
.nf-tool { width: 100%; background: none; border: 0; text-align: left; font-family: inherit; }
.nf-tool .notification-icon-wrapper { position: relative; width: 20px; text-align: center; font-size: 16px; line-height: 1; }
.nf-tool .nf-ext { width: auto; font-size: 11px; margin-left: auto; opacity: .6; }
.nf-tool #unread-count {
	top: -7px; right: -8px;
	min-width: 17px; padding: 3px 4px;
	border-radius: 999px;
	background: #FF6B6B;
	border: 2px solid var(--nf-green);
	font-size: 10px; font-weight: 700;
}

/* Enlaces del menú */
.nf-menu, .nf-menu ul, .nf-user ul { list-style: none; margin: 0; padding: 0; }
.nf-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	margin: 2px 0;
	border-radius: 12px;
	color: var(--nf-on-2) !important;
	font-size: 14px;
	text-decoration: none !important;
	cursor: pointer;
	list-style: none;
	transition: background-color .15s, color .15s;
}
.nf-link::-webkit-details-marker, .nf-profile summary::-webkit-details-marker { display: none; }
.nf-link > i { width: 20px; text-align: center; font-size: 16px; }
.nf-link:hover { background: var(--nf-hover); color: var(--nf-on) !important; }
.nf-link.active { background: var(--nf-on); color: var(--nf-green-dark) !important; font-weight: 600; }

/* Grupos plegables (<details>) */
.nf-group > summary > span { flex: 1; }
.nf-group > summary::after {
	content: "\f078"; /* chevron-down de Font Awesome */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 11px;
	margin-left: auto;
	transition: transform .15s;
}
.nf-group[open] > summary::after { transform: rotate(180deg); }
.nf-group[open] > summary { color: var(--nf-on) !important; }
.nf-group ul { margin-left: 22px !important; padding-left: 10px !important; border-left: 1px solid var(--nf-line); }
.nf-group ul .nf-link { padding: 7px 12px; font-size: 13px; }

/* Pie: idioma + perfil */
.nf-user { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--nf-line); }

.nf-langs {
	display: flex;
	padding: 3px;
	border-radius: 999px;
	background: var(--nf-green-deep);
}
.nf-lang {
	flex: 1;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 5px 8px;
	border-radius: 999px;
	font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
	color: var(--nf-on-2) !important;
	text-decoration: none !important;
	transition: background-color .15s, color .15s;
}
.nf-lang img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.nf-lang:hover { color: var(--nf-on) !important; background: var(--nf-hover); }
.nf-lang.active { background: var(--nf-on); color: var(--nf-green-dark) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }

.nf-profile { position: relative; }
.nf-profile summary {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 10px;
	border-radius: 14px;
	background: var(--nf-hover);
	cursor: pointer;
	list-style: none;
	transition: background-color .15s;
}
.nf-profile summary:hover, .nf-profile[open] summary { background: rgba(255, 255, 255, .18); }
.nf-avatar {
	width: 34px; height: 34px; flex: none;
	border-radius: 50%;
	background: var(--nf-on);
	color: var(--nf-green-dark);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700;
}
.nf-profile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nf-profile-name { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-profile-role { font-size: 11px; color: var(--nf-on-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-profile-caret { font-size: 11px; transition: transform .15s; }
.nf-profile[open] .nf-profile-caret { transform: rotate(180deg); }
/* Opciones flotando encima de la tarjeta */
.nf-profile ul {
	position: absolute;
	left: 0; right: 0; bottom: calc(100% + 8px);
	padding: 6px !important;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(4, 6, 6, .22);
	z-index: 5;
}
.nf-profile ul a {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	color: #434C4F !important;
	font-size: 13px;
	text-decoration: none !important;
}
.nf-profile ul a i { width: 18px; text-align: center; color: var(--nf-green); }
.nf-profile ul a:hover, .nf-profile ul a.active { background: var(--nf-green-soft); color: var(--nf-green-dark) !important; }

/* El layout ya no tiene navbar superior: anula el hueco antiguo de custom.css */
body { padding-top: 24px; }

/* Pie: va tras el contenido y, si la página es corta, baja al fondo de la pantalla (min-height = alto visible menos los paddings del body) */
#app { display: flex; flex-direction: column; padding-bottom: 0; min-height: calc(100vh - 24px); }
.nf-main { flex: 1 0 auto; }
#footer.fixed-bottom { display: none !important; }
footer.nf-footer {
	margin: 32px 0 0;
	padding: 16px;
	border-top: 1px solid var(--nubelfon-border-clr);
	display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px;
	font-size: 12px;
	color: var(--bs-secondary-color);
}
.nf-footer a { color: inherit !important; text-decoration: none; }
.nf-footer a:hover { color: var(--nf-green) !important; }
#notification-container { z-index: 1040 !important; }

/* ---------- Escritorio: barra lateral ---------- */
@media (min-width: 992px) {
	body:not(.nf-guest) { padding-left: var(--nf-side-w); }
	body:not(.nf-guest) #nf-sidebar {
		top: 0; bottom: 0; left: 0;
		width: var(--nf-side-w);
		flex-direction: column;
		padding: 16px 12px 14px;
	}
	body:not(.nf-guest) .nf-head { padding: 2px 6px 20px; }
	body:not(.nf-guest) .nf-tools { flex-direction: column; padding: 8px 0; border-top: 1px solid var(--nf-line); }
	body:not(.nf-guest) .nf-brand img { height: 30px; }
	/* Solo la lista hace scroll: así el desplegable de notificaciones no queda recortado */
	.nf-scroll { flex: 1; overflow-y: auto; margin: 0 -4px 12px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: var(--nf-line) transparent; }
	#nf-tabbar, #nf-more { display: none !important; }
}

/* ---------- Móvil e invitado: la <aside> pasa a barra superior ---------- */
@media (max-width: 991.98px) {
	body { padding-top: calc(var(--nf-top-h) + 12px); }
	body:not(.nf-guest) { padding-bottom: calc(var(--nf-tab-h) + env(safe-area-inset-bottom)); }
	#app { min-height: calc(100vh - var(--nf-top-h) - 12px); }
	body:not(.nf-guest) #app { min-height: calc(100vh - var(--nf-top-h) - 12px - var(--nf-tab-h) - env(safe-area-inset-bottom)); }
	#notification-container { bottom: calc(var(--nf-tab-h) + 16px) !important; }
	/* Barra de acciones masivas de Provisión (sticky) por encima de la barra inferior */
	.prov-detail .prov-bulk { bottom: calc(var(--nf-tab-h) + 12px); }
	/* Tablas anchas: scroll horizontal propio en vez de desbordar la página.
	   Las que tienen desplegables se excluyen para que el menú no quede recortado. */
	table.table:not(:has(.dropdown, .dropdown-menu, [data-bs-toggle="dropdown"], [data-toggle="dropdown"])) {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
	.paginacio { flex-wrap: wrap; gap: 6px; }
	/* Tablas con desplegables (Usuarios): el scroll va en un contenedor y los menús usan posición fija */
	.nf-table-scroll { overflow-x: auto; clear: both; }
	/* Buscar DIDs: el logo de la CNMC no cabe en su columna */
	a.cnmc img { max-width: 100%; height: auto; }

	#nf-sidebar { top: 0; left: 0; right: 0; height: var(--nf-top-h); align-items: center; padding: 0 8px 0 14px; }
	#nf-sidebar .nf-head { flex: 1; }
	#nf-sidebar .nf-scroll, body:not(.nf-guest) #nf-sidebar .nf-user { display: none; }
	.nf-brand img { height: 24px; }
	/* Barra superior: herramientas como iconos a la derecha */
	#nf-sidebar .nf-tool { width: 40px; height: 40px; padding: 0; margin: 0; justify-content: center; border-radius: 50%; color: var(--nf-on) !important; }
	#nf-sidebar .nf-tool > span:not(.notification-icon-wrapper), #nf-sidebar .nf-tool .nf-ext { display: none; }
	#nf-sidebar .nf-tool > i, #nf-sidebar .nf-tool .notification-icon-wrapper { font-size: 18px; }
}
body.nf-guest #nf-sidebar .nf-tool { width: 40px; height: 40px; padding: 0; margin: 0; justify-content: center; border-radius: 50%; }
body.nf-guest #nf-sidebar .nf-tool > span:not(.notification-icon-wrapper), body.nf-guest #nf-sidebar .nf-tool .nf-ext { display: none; }

/* ---------- Panel de notificaciones (offcanvas) ---------- */
#nf-notifs { width: 400px; max-width: 100%; border: 0; box-shadow: -10px 0 30px rgba(4, 6, 6, .18); }
#nf-notifs .offcanvas-header { background: var(--nf-green); color: var(--nf-on); padding: 18px 20px; }
#nf-notifs .offcanvas-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; margin: 0; }
#nf-notifs .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .8; }
#nf-notifs .offcanvas-body { padding: 0; display: flex; flex-direction: column; }
#nf-notifs #notification-dropdown-container { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#nf-notifs .notification-dropdown-header { padding: 14px 16px; border-bottom: 1px solid #E3E8E7; }
#nf-notifs .notification-dropdown-header > .d-flex { display: none !important; } /* título duplicado del componente */
#nf-notifs .notification-search { margin: 0; }
#nf-notifs #notification-search { border-radius: 999px; padding: 8px 16px; font-size: 13px; background: #F4F7F6; border-color: transparent; }
#nf-notifs #notification-search:focus { background: #fff; border-color: var(--nf-mint); box-shadow: 0 0 0 3px rgba(79, 209, 181, .25); }
#nf-notifs .notification-list-container { flex: 1; overflow-y: auto; }
#nf-notifs #notification-list { max-height: none; overflow: visible; }
#nf-notifs .notification-item { padding: 14px 44px 14px 30px; border-bottom: 1px solid #EEF2F1; }
#nf-notifs .notification-item.unread { background: #fff; }
#nf-notifs .notification-item.unread::before { content: ""; position: absolute; left: 14px; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--nf-green); }
#nf-notifs .notification-item:hover { background: #F4F7F6; }
#nf-notifs .notification-title { font-size: 14px; color: #040606; }
#nf-notifs .notification-message { font-size: 13px; color: #434C4F; }
#nf-notifs .notification-meta { margin-top: 6px; color: #7D8886; }
#nf-notifs .notification-category { background: #F4F7F6; color: #434C4F; }
#nf-notifs .notification-meta .btn { background: none; border: 0; padding: 0; color: var(--nf-green); font-weight: 600; font-size: 12px; }
#nf-notifs .notification-mark-read { color: var(--nf-green); top: 14px; right: 16px; }
#nf-notifs #notification-empty { padding: 48px 16px !important; }
#nf-notifs .notification-dropdown-footer { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #E3E8E7; }
#nf-notifs .notification-pagination { padding: 0 0 10px; color: #7D8886; }
#nf-notifs .notification-pagination .btn-link { color: var(--nf-green); text-decoration: none; font-size: 12px; }
#nf-notifs .dropdown-divider { display: none; }
#nf-notifs .button-container { display: flex; gap: 8px; }
#nf-notifs .button-container > * {
	flex: 1;
	padding: 9px 12px;
	border-radius: 999px;
	font-size: 13px; font-weight: 500;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}
#nf-notifs .button-container > a { border: 1px solid #D1D8D6; color: #434C4F; background: #fff; }
#nf-notifs .button-container > button { border: 0; background: var(--nf-green); color: #fff !important; }
#nf-notifs .button-container > a:hover { background: #F4F7F6; }
#nf-notifs .button-container > button:hover { background: var(--nf-green-dark); }
body.nf-guest { padding-top: calc(var(--nf-top-h) + 12px); }
body.nf-guest #nf-sidebar { top: 0; left: 0; right: 0; height: var(--nf-top-h); align-items: center; padding: 0 12px 0 14px; gap: 12px; }
body.nf-guest #nf-sidebar .nf-head { flex: 1; }
body.nf-guest #nf-sidebar .nf-scroll { display: none; }
body.nf-guest #nf-sidebar .nf-user { border: 0; padding: 0; }
/* Login en mòbil: logo + icones + idiomes no hi cabien; idiomes només amb bandera */
@media (max-width: 991.98px) {
	body.nf-guest #nf-sidebar { gap: 8px; padding: 0 8px 0 12px; }
	body.nf-guest #nf-sidebar .nf-head { min-width: 0; }
	body.nf-guest #nf-sidebar .nf-brand img { max-width: 100%; }
	body.nf-guest .nf-lang { padding: 5px; }
	body.nf-guest .nf-lang-code { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* amagat però llegible per lectors de pantalla */
}

/* Barra inferior */
#nf-tabbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 1030;
	height: calc(var(--nf-tab-h) + env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	display: flex;
	box-shadow: 0 -2px 10px rgba(4, 6, 6, .12);
}
.nf-tab {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	background: none; border: 0; padding: 0;
	color: var(--nf-on-2) !important;
	font-size: 11px;
	text-decoration: none !important;
}
.nf-tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-tab > i { font-size: 18px; padding: 4px 16px; border-radius: 999px; transition: background-color .15s; }
.nf-tab.active { color: var(--nf-on) !important; font-weight: 600; }
.nf-tab.active > i { background: var(--nf-on); color: var(--nf-green-dark); }

/* Hoja «Más» (offcanvas de Bootstrap 5) */
#nf-more.offcanvas-bottom {
	height: auto;
	max-height: 85vh;
	border-radius: 20px 20px 0 0;
	border: 0;
}
#nf-more .nf-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--nf-line); margin: 10px auto 4px; cursor: pointer; }
#nf-more .offcanvas-body { padding: 4px 14px calc(14px + env(safe-area-inset-bottom)); }
#nf-more .nf-primary { display: none; }
#nf-more .nf-user { margin-top: 8px; }
/* En la hoja las opciones del perfil van debajo de la tarjeta y no flotando: con pocos
   menús (sin ASTPP/Sistema) no hay sitio encima y el scroll de la hoja las recortaba */
#nf-more .nf-profile ul { position: static; margin-top: 8px !important; box-shadow: none; }
#nf-more .nf-profile-caret { transform: rotate(180deg); }
#nf-more .nf-profile[open] .nf-profile-caret { transform: none; }