/* La página del teléfono web: SOLO lo que no trae la capa común de Niulis
   (vendor/css/sleek.min.css, bloque «NIULIS: CAPA COMÚN»): el teclado, la
   pantalla de la llamada, la barra de abajo del móvil, las filas de las
   listas… Las tarjetas, chapas, puntos de estado, avatares, pestañas
   segmentadas, modales, estados de carga y vacío son los de allí y aquí no
   se redefinen.

   Los colores salen SIEMPRE de los tokens del tema (var(--n-surface),
   var(--n-border), var(--n-text), var(--primary)…): así el modo oscuro sale
   solo. Ni un color escrito a mano, ni un !important. */

/* ---- Base ---- */

.wp-body {
	min-height: 100vh;
	min-height: 100dvh;
	overflow-wrap: break-word;
}

/* Un icono del sprite (img/icons.svg): hereda el color del texto. */
.wp-icon {
	display: inline-block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
	vertical-align: -0.25em;
}

.wp-spin {
	animation: wp-spin 1s linear infinite;
}

@keyframes wp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* El tema quita el contorno de foco a todo; con el teclado tiene que verse
   dónde se está. */
.wp-body button:focus-visible,
.wp-body a:focus-visible,
.wp-body select:focus-visible,
.wp-body audio:focus-visible,
.wp-body input[type="range"]:focus-visible,
.wp-body .custom-control-input:focus-visible~.custom-control-label::before {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* Fuera de la vista pero en la página (para copiar, para los gestores de
   contraseñas). */
.wp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Una pantalla entera con una sola cosa en el centro: la carga, «se ha
   abierto en otra pantalla». */
.wp-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 1rem;
}

.wp-screen-card {
	width: 100%;
	max-width: 30rem;
}

.wp-screen-text {
	margin: 0.5rem 0 1.5rem;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Los iconos de los bloques de la capa común: allí son de fuente (.mdi),
   aquí son SVG. */
.n-loading>.wp-icon {
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.75rem;
	color: var(--primary);
}

.n-loading.n-loading-sm>.wp-icon {
	width: 2rem;
	height: 2rem;
	margin-bottom: 0.4rem;
}

.empty-state>.wp-icon {
	display: block;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 0.5rem;
	opacity: 0.35;
}

.wp-empty-text {
	font-size: 0.85rem;
	line-height: 1.5;
}

.wp-retry {
	margin-top: 1rem;
}

.n-section>.wp-icon,
.card-title>.wp-icon {
	width: 1.15rem;
	height: 1.15rem;
	vertical-align: -0.2em;
}

.card-title>.wp-icon {
	margin-right: 0.35rem;
	color: var(--n-muted);
}

.n-chip>.wp-icon {
	width: 0.95rem;
	height: 0.95rem;
}

.btn>.wp-icon+span,
.btn>span+.wp-icon {
	margin-left: 0.35rem;
}

/* Un botón que es solo un icono. */
.wp-icon-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: var(--n-muted);
	border-radius: 50%;
}

.wp-icon-btn:hover {
	color: var(--n-text);
	background: var(--n-bg-soft);
}

.wp-icon-btn>.wp-icon {
	width: 1.35rem;
	height: 1.35rem;
	vertical-align: 0;
}

.btn-sm.wp-icon-btn {
	width: 2rem;
	height: 2rem;
	border-radius: var(--n-radius-sm);
}

/* Una tabla no descuadra nunca la página: si no cabe, se desplaza ella. */
.wp-scroll {
	overflow: auto;
	max-width: 100%;
	margin-bottom: 0.75rem;
}

.wp-scroll>.wp-table {
	margin-bottom: 0;
}

/* La celda que sí se parte en líneas (una ristra de chapas): así la tabla
   cabe casi siempre sin tener que desplazarla. */
.wp-table td.wp-wrap {
	min-width: 9rem;
	white-space: normal;
}

.wp-table td.wp-wrap>.n-chip {
	margin: 0.1rem 0.25rem 0.1rem 0;
}

/* ---- Entrada ---- */

.wp-login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 1rem;
	background: linear-gradient(60deg, var(--indigo) 0%, var(--cyan) 100%);
}

html[data-theme="dark"] .wp-login {
	background: linear-gradient(60deg, var(--n-code-bg) 0%, var(--n-surface-2) 100%);
}

.wp-login-card {
	width: 100%;
	max-width: 27rem;
	border: 0;
	box-shadow: var(--n-shadow-lg);
}

.wp-login-head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.25rem 1.75rem;
	border-bottom: 0;
}

.wp-login-title {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	color: inherit;
}

.wp-login-card>.card-body {
	padding: 2rem 1.75rem 1.75rem;
}

.wp-login .input-group-text {
	justify-content: center;
	min-width: 3rem;
}

.wp-login .input-group-text>.wp-icon {
	width: 1.35rem;
	height: 1.35rem;
	vertical-align: 0;
}

.wp-login-remember {
	margin-bottom: 1.25rem;
}

.wp-login .alert {
	font-size: 0.9rem;
}

/* Sin enlace: la contraseña la da quien administra la centralita. */
.wp-login-forgot {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	text-align: center;
}

/* ---- El marco: barra de arriba, dos columnas, barra de abajo ---- */

.wp-app {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-top {
	position: sticky;
	top: 0;
	z-index: 1020;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3.5rem;
	padding: 0.4rem 1rem;
	background: var(--n-surface);
	border-bottom: 1px solid var(--n-border);
}

.wp-top-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.wp-top-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--n-text);
}

.wp-top-pbx {
	min-width: 0;
	overflow: hidden;
	color: var(--n-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wp-top-me {
	display: none;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.wp-top-actions {
	display: flex;
	gap: 0.25rem;
	margin-left: auto;
}

.wp-me-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.wp-me-name {
	overflow: hidden;
	font-weight: 600;
	line-height: 1.3;
	color: var(--n-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wp-me-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.3rem;
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--n-muted);
}

.wp-me-sub>.n-dot {
	margin-right: 0;
}

/* Sin conexión con el servidor. */
.wp-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.45rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--n-warning-ink);
	text-align: center;
	background: var(--n-tint-warning);
	border-bottom: 1px solid var(--n-border);
}

.wp-layout {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	align-content: start;
	width: 100%;
	max-width: 84rem;
	margin: 0 auto;
	padding: 0.75rem;
}

.wp-side,
.wp-main {
	min-width: 0;
}

.wp-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
	display: none;
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--n-surface);
	border-top: 1px solid var(--n-border);
}

.wp-bar-btn {
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 3.5rem;
	color: var(--n-muted);
	transition: color 0.15s ease-in-out;
}

.wp-bar-btn>.wp-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.wp-bar-btn.active {
	color: var(--primary);
}

.wp-bar-btn.active::before {
	position: absolute;
	top: -1px;
	right: 22%;
	left: 22%;
	height: 3px;
	content: "";
	background: var(--primary);
	border-radius: 0 0 3px 3px;
}

.wp-bar-badge {
	position: absolute;
	top: 0.45rem;
	left: 50%;
	margin-left: 0.5rem;
}

/* Escritorio y tableta: el teléfono a la izquierda, siempre a la vista, y
   los apartados a la derecha. */
@media (min-width: 768px) {
	.wp-layout {
		grid-template-columns: 19.5rem minmax(0, 1fr);
		gap: 1.25rem;
		padding: 1.25rem;
	}

	/* Se queda quieto mientras lo de la derecha se desplaza. Si no cabe en la
	   ventana (una llamada con el teclado de tonos abierto en una pantalla
	   baja), se desplaza él; el relleno es para que no se le corte la sombra. */
	.wp-side {
		position: sticky;
		top: 4.25rem;
		max-height: calc(100vh - 4.25rem);
		margin: -0.5rem;
		padding: 0.5rem;
		overflow-y: auto;
	}

	.wp-sub-head {
		display: none;
	}

	.wp-menu {
		display: none;
	}
}

@media (min-width: 992px) {
	.wp-layout {
		grid-template-columns: 22.5rem minmax(0, 1fr);
		gap: 1.5rem;
		padding: 1.5rem;
	}

	.wp-top {
		padding-right: 1.5rem;
		padding-left: 1.5rem;
	}
}

/* Tableta: la columna del teléfono es estrecha y las seis pestañas no caben
   en una línea: van en dos filas iguales, en vez de partirse por donde caiga. */
@media (min-width: 768px) and (max-width: 991.98px) {
	.wp-tabs {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Móvil: una columna, lo que se elige en la barra de abajo. Quién soy sube
   a la barra de arriba, porque la tarjeta del teléfono solo está en «Teclado». */
@media (max-width: 767.98px) {
	.wp-top-brand,
	.wp-top-actions,
	.wp-tabs-row,
	.wp-phone>.card-header {
		display: none;
	}

	.wp-top-me {
		display: flex;
		flex: 1 1 auto;
	}

	.wp-layout {
		padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
	}

	.wp-bar {
		display: flex;
	}

	.wp-side {
		display: none;
	}

	/* Con una llamada la tarjeta tiene que estar: la pantalla de la llamada
	   vive dentro de ella (y lo tapa todo). */
	.wp-app[data-dial] .wp-side,
	.wp-app[data-call] .wp-side {
		display: block;
	}

	.wp-app[data-dial] .wp-main {
		display: none;
	}

	.wp-phone {
		background: none;
		border: 0;
		box-shadow: none;
	}

	.wp-phone>.card-body {
		padding: 0.25rem 0 0;
	}

	.wp-in-call {
		overflow: hidden;
	}
}

/* ---- Marcar ---- */

/* Quién soy: el retrato, el nombre con la extensión y, debajo, cómo está el
   registro. En su propia línea: «Registro rechazado (403)» no cabe al lado
   del nombre, y no se corta ni el uno ni el otro. */
.wp-me {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
}

.wp-me>.wp-me-text {
	flex-basis: calc(100% - 3.5rem);
}

.wp-me>.wp-reg {
	margin-left: 3.5rem;
}

.wp-avatar-md {
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1rem;
}

.wp-avatar-xl {
	width: 6rem;
	height: 6rem;
	font-size: 2.1rem;
}

.n-avatar>.wp-icon {
	width: 60%;
	height: 60%;
	vertical-align: 0;
}

.wp-reg {
	flex: none;
	margin: 0;
}

.wp-reg>.n-dot {
	margin-right: 0;
}

.wp-dial {
	max-width: 24rem;
	margin: 0 auto;
}

.wp-number-box {
	position: relative;
	margin-bottom: 0.75rem;
}

.form-control.wp-number {
	height: 3.25rem;
	padding: 0.25rem 3rem;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--n-text);
	text-align: center;
	letter-spacing: 0.02em;
}

.form-control.wp-number::placeholder {
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
}

.wp-number-back {
	position: absolute;
	top: 50%;
	right: 0.35rem;
	margin-top: -1.25rem;
}

/* El teclado: tres columnas, teclas de 56 px como poco. */
.wp-pad {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.wp-key {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 3.5rem;
	padding: 0.2rem;
	line-height: 1.1;
	color: var(--n-text);
	background: var(--n-bg-soft);
	border: 1px solid var(--n-border);
	border-radius: var(--n-radius);
	/* El tema da a todo botón una transición de 0,3 s: una tecla tiene que
	   responder al momento. */
	transition: background-color 0.08s linear, border-color 0.08s linear;
	touch-action: manipulation;
	user-select: none;
}

.wp-key:hover {
	border-color: var(--primary);
}

.wp-key:active {
	background: var(--n-tint-primary);
	border-color: var(--primary);
}

.wp-key-digit {
	font-size: 1.5rem;
	font-weight: 600;
}

.wp-key-letters {
	min-height: 0.75rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--n-muted);
}

/* El asterisco de la tipografía es pequeño y va arriba, como un superíndice:
   se agranda y se baja para que haga juego con las cifras. */
.wp-key[data-key="*"]>.wp-key-digit {
	height: 1.65rem;
	padding-top: 0.5rem;
	font-size: 2.4rem;
	line-height: 1;
}

.wp-call-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.5rem;
	margin-top: 0.75rem;
	font-weight: 600;
	border-radius: var(--n-radius);
}

.wp-call-btn>.wp-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.wp-dial-note {
	margin-top: 0.6rem;
	font-size: 0.8rem;
	color: var(--n-muted);
	text-align: center;
}

@media (max-width: 767.98px) {
	/* Teclas más grandes si la pantalla da para ello, y claras sobre el fondo
	   de la página (aquí no hay tarjeta debajo). */
	.wp-key {
		min-height: clamp(3.5rem, 11vh, 5.5rem);
		background: var(--n-surface);
	}

	.wp-call .wp-key {
		background: var(--n-bg-soft);
	}

	.wp-key-digit {
		font-size: 1.7rem;
	}
}

/* ---- La llamada ---- */

.wp-call {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-align: center;
}

.wp-call-status {
	min-height: 1.4em;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--n-muted);
}

.wp-call[data-state="incoming"] .wp-call-status {
	color: var(--n-success-ink);
}

.wp-call[data-state="ended"] .wp-call-status {
	font-size: 1.05rem;
	color: var(--n-text);
}

.wp-call-who {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 0.5rem 0;
}

.wp-call-ring {
	position: relative;
	display: inline-flex;
	margin-bottom: 0.6rem;
}

/* Mientras suena, dos ondas alrededor de quien llama. */
.wp-call[data-state="incoming"] .wp-call-ring::before,
.wp-call[data-state="incoming"] .wp-call-ring::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
	border: 2px solid var(--success);
	border-radius: 50%;
	animation: wp-wave 1.8s ease-out infinite;
}

.wp-call[data-state="incoming"] .wp-call-ring::after {
	animation-delay: 0.9s;
}

@keyframes wp-wave {
	from {
		opacity: 0.8;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(1.65);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-call[data-state="incoming"] .wp-call-ring::before,
	.wp-call[data-state="incoming"] .wp-call-ring::after {
		animation: none;
		opacity: 0;
	}
}

/* Sin servidor, lo que sonaba se ha callado: ni verde ni ondas. */
.wp-call[data-offline] .wp-call-status {
	color: var(--n-warning-ink);
}

.wp-call[data-offline] .wp-call-ring::before,
.wp-call[data-offline] .wp-call-ring::after {
	animation: none;
	opacity: 0;
}

.wp-call-name {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--n-text);
	overflow-wrap: anywhere;
}

.wp-call-number {
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	color: var(--n-muted);
	overflow-wrap: anywhere;
}

.wp-call-timer {
	margin-top: 0.2rem;
	font-size: 1.7rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	color: var(--n-text);
}

.wp-call-flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.wp-call-flags>.n-chip {
	margin: 0.15rem;
}

.wp-call-alert {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

/* «Sin audio»: el aviso y su botón, en lo que ocupe una línea si cabe. */
.alert.wp-call-alert {
	flex-flow: row wrap;
	justify-content: center;
	padding: 0.6rem 0.75rem;
	font-size: 0.85rem;
	line-height: 1.4;
}

.wp-call-dtmf {
	width: 100%;
	max-width: 22rem;
	margin: 0 auto;
}

.wp-call-digits {
	min-height: 1.6rem;
	margin-bottom: 0.4rem;
	overflow: hidden;
	font-size: 1.15rem;
	color: var(--n-text);
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.wp-call-actions,
.wp-call-answer {
	display: flex;
	justify-content: center;
}

.wp-call-answer {
	justify-content: space-evenly;
	padding-top: 0.25rem;
}

/* Un botón redondo con su rótulo debajo. Los cinco de una llamada van en
   una fila: se reparten el ancho que haya. */
.wp-act {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
	padding: 0.4rem 0.2rem;
	color: var(--n-text);
	touch-action: manipulation;
}

.wp-call-actions>.wp-act {
	flex: 1 1 0;
	padding-right: 0;
	padding-left: 0;
}

.wp-call-actions .wp-round {
	width: 3.25rem;
	height: 3.25rem;
}

.wp-call-actions .wp-round>.wp-icon {
	width: 1.45rem;
	height: 1.45rem;
}

.wp-call-actions .wp-act-label {
	font-size: 0.74rem;
}

/* Con el teclado de tonos abierto el sitio es para las teclas: sobra el
   retrato y, de los botones, quedan el de quitar el teclado y el de colgar,
   uno al lado del otro. Así cabe todo sin tener que desplazar. */
.wp-call[data-pad] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	align-content: space-between;
	align-items: center;
}

.wp-call[data-pad]>* {
	grid-column: 1 / -1;
}

.wp-call[data-pad]>.wp-call-actions {
	grid-column: 1;
	width: auto;
	margin: 0;
}

.wp-call[data-pad]>.wp-call-hang {
	grid-column: 2;
	width: auto;
	margin: 0;
	padding-top: 0;
}

.wp-call[data-pad] .wp-call-ring,
.wp-call[data-pad] .wp-call-actions>.wp-act:not([data-act="pad"]) {
	display: none;
}

.wp-call[data-pad] .wp-call-actions .wp-round {
	width: 4.5rem;
	height: 4.5rem;
}

.wp-call[data-pad] .wp-call-actions .wp-round>.wp-icon {
	width: 2rem;
	height: 2rem;
}

.wp-call[data-pad] .wp-call-actions .wp-act-label {
	font-size: 0.78rem;
}

.wp-act:disabled {
	cursor: default;
	opacity: 0.5;
}

.wp-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	/* Sin color: el de la clase de botón del tema (btn-success, btn-danger)
	   o el de .wp-round-soft. */
	border-style: solid;
	border-width: 1px;
	border-radius: 50%;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.wp-round>.wp-icon {
	width: 1.6rem;
	height: 1.6rem;
}

.wp-round-lg {
	width: 4.5rem;
	height: 4.5rem;
}

.wp-round-lg>.wp-icon {
	width: 2rem;
	height: 2rem;
}

.wp-round-soft {
	color: var(--n-text);
	background: var(--n-bg-soft);
	border-color: var(--n-border);
}

.wp-act:not(:disabled):hover>.wp-round-soft {
	border-color: var(--primary);
}

.wp-act[aria-pressed="true"]>.wp-round-soft {
	color: var(--n-text-inverse);
	background: var(--primary);
	border-color: var(--primary);
}

.wp-act-label {
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--n-muted);
}

/* En el móvil la llamada lo ocupa todo: quién es arriba, los botones abajo. */
@media (max-width: 767.98px) {
	.wp-call {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1035;
		gap: 0.75rem;
		padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
		overflow-y: auto;
		background: var(--n-surface);
	}

	.wp-call-who {
		flex: 1 1 auto;
		justify-content: center;
	}

	.wp-call-actions,
	.wp-call-answer {
		width: 100%;
		max-width: 26rem;
		margin: 0 auto;
	}

	/* Tan grandes como deje el ancho, cinco en fila. */
	.wp-call-actions .wp-round {
		width: clamp(3rem, 15vw, 4rem);
		height: clamp(3rem, 15vw, 4rem);
	}

	.wp-call-actions .wp-act-label {
		font-size: clamp(0.66rem, 3.2vw, 0.8rem);
	}

	.wp-round-lg {
		width: 4.75rem;
		height: 4.75rem;
	}
}

/* En el escritorio la llamada va dentro de la tarjeta del teléfono, que
   tiene que caber en la ventana con sus avisos («Sin audio», «Activar el
   sonido»): algo más prieta, y en una ventana baja, sin el retrato. */
@media (min-width: 768px) {
	.wp-call {
		gap: 0.75rem;
	}

	.wp-call-who {
		padding: 0.25rem 0;
	}

	.wp-avatar-xl {
		width: 4.75rem;
		height: 4.75rem;
		font-size: 1.7rem;
	}
}

@media (min-width: 768px) and (max-height: 700px) {
	.wp-call:not([data-state="incoming"]) .wp-call-ring {
		display: none;
	}
}

/* En la tableta la columna del teléfono es estrecha: los cinco, más pequeños. */
@media (min-width: 768px) and (max-width: 991.98px) {
	.wp-call-actions .wp-round {
		width: 2.75rem;
		height: 2.75rem;
	}

	.wp-call-actions .wp-act-label {
		font-size: 0.68rem;
	}
}

/* ---- Los apartados ---- */

.wp-tabs-row {
	margin-bottom: 1rem;
}

.wp-tabs>.btn {
	position: relative;
}

/* Cuántos mensajes nuevos hay, en la pestaña del buzón. */
.wp-count {
	margin-left: 0.35rem;
	vertical-align: 0.05em;
}

.wp-view {
	display: none;
}

.wp-app[data-tab="phonebook"] .wp-view[data-view="phonebook"],
.wp-app[data-tab="peers"] .wp-view[data-view="peers"],
.wp-app[data-tab="history"] .wp-view[data-view="history"],
.wp-app[data-tab="voicemail"] .wp-view[data-view="voicemail"],
.wp-app[data-tab="recordings"] .wp-view[data-view="recordings"],
.wp-app[data-tab="more"] .wp-view[data-view="more"] {
	display: block;
}

/* Un aviso de la página (activar los avisos emergentes). */
.wp-notice {
	margin-bottom: 1rem;
	border-color: var(--primary);
}

.wp-notice>.card-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
}

.wp-notice-icon {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--primary);
}

.wp-notice-text {
	display: flex;
	flex: 1 1 14rem;
	flex-direction: column;
	min-width: 0;
	font-size: 0.85rem;
	line-height: 1.4;
}

.wp-notice-text>strong {
	color: var(--n-text);
}

.wp-inline-alert {
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
}

/* El buscador: la lupa dentro del campo (.n-input-icon es de la capa común). */
.wp-search {
	position: relative;
	flex: 1 1 14rem;
	min-width: 0;
}

.wp-search>.form-control {
	padding-left: 2.4rem;
}

.wp-chips {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.wp-chips:empty {
	display: none;
}

/* Una lista de personas o de llamadas: filas cortas, toda la fila se pulsa. */
.wp-list {
	display: flex;
	flex-direction: column;
}

.wp-row {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	border-bottom: 1px solid var(--n-border);
}

.wp-row:last-child,
.wp-msg:last-child {
	border-bottom: 0;
}

.wp-row-hit {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	padding: 0.55rem 0.5rem;
	color: inherit;
	text-align: left;
	border-radius: var(--n-radius-sm);
	transition: background-color 0.15s ease-in-out;
}

button.wp-row-hit:hover {
	background: var(--n-bg-soft);
}

.wp-row-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.wp-row-title {
	font-weight: 600;
	line-height: 1.35;
	color: var(--n-text);
	overflow-wrap: anywhere;
}

.wp-row-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.1rem 0.6rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--n-muted);
}

.wp-row-sub>.n-chip {
	margin: 0;
}

/* Un número de teléfono en una fila: se lee bien y sus cifras no bailan. Uno
 * larguísimo (los 40 caracteres que deja marcar la página) se parte donde
 * haga falta: es un hijo flexible, y el overflow-wrap que hereda no cuenta
 * para su ancho mínimo; anywhere sí, y la fila ya no se sale de la pantalla. */
.wp-num {
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	color: var(--n-text);
	overflow-wrap: anywhere;
}

.wp-state {
	white-space: nowrap;
}

.wp-row-call {
	width: 1.35rem;
	height: 1.35rem;
	margin: 0 0.35rem;
	color: var(--n-success-ink);
}

/* Qué fue una llamada (entrante, saliente, perdida), en un redondel. */
.wp-kind {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: var(--n-bg-soft);
	border-radius: 50%;
}

.wp-kind>.wp-icon {
	width: 1.15rem;
	height: 1.15rem;
	vertical-align: 0;
}

/* Un mensaje del buzón o una grabación: su cabecera y, debajo, el reproductor. */
.wp-msg {
	padding: 0.7rem 0.5rem;
	border-bottom: 1px solid var(--n-border);
}

.wp-msg-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
}

.wp-msg-head>.wp-row-main {
	flex-basis: 9rem;
}

/* Sus botones van juntos: si no caben al lado del texto, bajan todos a la vez. */
.wp-msg-actions {
	display: flex;
	flex: none;
	gap: 0.25rem;
	margin-left: auto;
}

.wp-msg>audio {
	display: block;
	width: 100%;
	max-width: 30rem;
	height: 2.5rem;
	margin-top: 0.5rem;
}

.wp-msg-text {
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--n-text);
	white-space: pre-wrap;
	background: var(--n-bg-soft);
	border-radius: var(--n-radius-sm);
}

.wp-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding-top: 0.75rem;
}

.wp-pager-text {
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

/* ---- Más ---- */

.wp-more-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

@media (min-width: 1200px) {
	.wp-more-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.wp-sec-wide {
		grid-column: 1 / -1;
	}
}

.wp-sec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 3.25rem;
}

.wp-sec-head>.n-chip {
	margin: 0;
}

.wp-sec-head>.wp-icon-btn {
	margin: -0.35rem -0.5rem -0.35rem 0;
}

.wp-sec-text {
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--n-text);
}

.wp-sec-text:last-child {
	margin-bottom: 0;
}

.wp-sec-form {
	margin-top: 1rem;
}

.wp-options {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0.75rem 0;
}

.wp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.wp-actions:empty {
	display: none;
}

/* Ajustes: cada cosa en su bloque; en ancho, de dos en dos. */
.wp-settings {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem 2rem;
}

@media (min-width: 992px) {
	.wp-settings {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wp-set {
	min-width: 0;
}

.wp-set>.form-group:last-child {
	margin-bottom: 0;
}

.wp-set .custom-select {
	width: 100%;
}

.wp-set-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
	line-height: 1.5;
}

.wp-set-line>.n-chip {
	margin: 0;
}

.wp-inline {
	display: flex;
	gap: 0.5rem;
}

.wp-inline>.custom-select {
	flex: 1 1 auto;
	min-width: 0;
}

.wp-inline>.btn {
	flex: none;
}

/* La lista del móvil con lo que cuelga de «Más». */
.wp-menu {
	flex-direction: column;
	overflow: hidden;
	background: var(--n-surface);
	border: 1px solid var(--n-border);
	border-radius: var(--n-radius);
	box-shadow: var(--n-shadow);
}

.wp-menu-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 3.5rem;
	padding: 0.5rem 0.75rem 0.5rem 1rem;
	color: var(--n-text);
	text-align: left;
	border-bottom: 1px solid var(--n-border);
}

.wp-menu-item:last-child {
	border-bottom: 0;
}

.wp-menu-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--primary);
}

/* Si no caben los dos en la línea, se parte el título por sus palabras
   antes que lo que dice al lado por la mitad de una. */
.wp-menu-title {
	flex: 0 1 auto;
	font-weight: 600;
}

.wp-menu-sum {
	flex: 1 0 4.75rem;
	font-size: 0.8rem;
	color: var(--n-muted);
	text-align: right;
}

.wp-menu-go {
	color: var(--n-muted);
}

.wp-sub-head {
	align-items: center;
	gap: 0.25rem;
	margin: -0.25rem 0 0.5rem -0.5rem;
}

.wp-sub-title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--n-text);
}

@media (max-width: 767.98px) {
	.wp-menu {
		display: flex;
	}

	.wp-sub-head {
		display: none;
	}

	/* Dentro de «Más» se ve la lista o, elegida una cosa, solo esa. */
	.wp-more-grid>.wp-sec {
		display: none;
	}

	.wp-app[data-sub="forward"] .wp-sec[data-sec="forward"],
	.wp-app[data-sub="followme"] .wp-sec[data-sec="followme"],
	.wp-app[data-sub="parked"] .wp-sec[data-sec="parked"],
	.wp-app[data-sub="callbacks"] .wp-sec[data-sec="callbacks"],
	.wp-app[data-sub="hotdesk"] .wp-sec[data-sec="hotdesk"],
	.wp-app[data-sub="settings"] .wp-sec[data-sec="settings"] {
		display: flex;
	}

	.wp-app[data-tab="more"]:not([data-sub=""]) .wp-menu {
		display: none;
	}

	.wp-app[data-tab="more"]:not([data-sub=""]) .wp-sub-head,
	.wp-app[data-tab="voicemail"] .wp-sub-head,
	.wp-app[data-tab="recordings"] .wp-sub-head {
		display: flex;
	}

	.wp-view>.card>.card-body,
	.wp-sec>.card-body {
		padding: 0.85rem;
	}

	/* El título ya lo dice la cabecera con la vuelta: en la tarjeta queda
	   solo lo que lleve además (cómo está, el botón de actualizar). */
	.wp-sec-head>.card-title,
	.wp-sec-head-plain {
		display: none;
	}

	/* Y si no lleva nada más, sobra entera. En regla aparte: un navegador
	   que no entienda :has() la tira, y solo se queda con una franja vacía. */
	.wp-sec-head:not(:has(> :not(.card-title):not([hidden]))) {
		display: none;
	}

	.wp-sec-head {
		justify-content: flex-end;
		min-height: 0;
		padding: 0.5rem 0.85rem;
	}

	/* El aviso de arriba: el texto con su aspa, y debajo el botón a lo ancho. */
	.wp-notice>.card-body {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 0.5rem 0.6rem;
		align-items: start;
		padding: 0.75rem;
	}

	.wp-notice-text {
		font-size: 0.82rem;
	}

	.wp-notice>.card-body>.wp-icon-btn {
		grid-row: 1;
		grid-column: 3;
		margin: -0.35rem -0.35rem 0 0;
	}

	.wp-notice>.card-body>.btn-primary {
		grid-column: 1 / -1;
	}
}

/* ---- Modales ---- */

.wp-info-body {
	color: var(--n-text);
}

.wp-info-text {
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
	line-height: 1.55;
	white-space: pre-wrap;
}

.wp-info-text:last-child {
	margin-bottom: 0;
}

.wp-steps {
	margin: 0 0 0.75rem;
	padding-left: 1.4rem;
	font-size: 0.9rem;
	line-height: 1.55;
}

.wp-steps>li {
	margin-bottom: 0.3rem;
	padding-left: 0.2rem;
	list-style: decimal;
}

.wp-transfer-section {
	margin-top: 1rem;
}