/* ============================================================================
   Editor del portal cautivo.

   Solo lo usa la pestaña «Portal» de Hotspot y portal, así que vive aparte de
   shell.css, que es lo común a todo el panel. Se apoya en los mismos tokens.
   ============================================================================ */

.editor-portal {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 332px;
	gap: 1.1rem;
	align-items: start;
}

@media (max-width: 1100px) {
	.editor-portal {
		grid-template-columns: 1fr;
	}
}

.editor-portal__vista {
	position: sticky;
	top: calc(var(--alto-barra, 3.8rem) + 1rem);
}

@media (max-width: 1100px) {
	.editor-portal__vista {
		position: static;
	}
}

/* ── Plantillas de color ─────────────────────────────────────────────── */

.plantillas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.6rem;
}

@media (max-width: 700px) {
	.plantillas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.plantilla {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-surface);
	padding: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	transition: border-color 0.12s ease, transform 0.12s ease;
}

.plantilla:hover:not(:disabled) {
	border-color: var(--color-border-strong);
	transform: translateY(-1px);
}

.plantilla[aria-pressed='true'] {
	border-color: var(--color-primary);
	box-shadow: var(--ring);
}

.plantilla:disabled {
	cursor: default;
}

.plantilla__muestra {
	height: 48px;
	display: grid;
	place-items: center;
	color: var(--color-sobre-relleno);
}

.plantilla__pie {
	padding: 0.45rem 0.55rem;
}

.plantilla__nombre {
	font-size: 0.75rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.plantilla__puntos {
	display: flex;
	gap: 0.25rem;
}

.plantilla__puntos span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}

@media (prefers-reduced-motion: reduce) {
	.plantilla:hover:not(:disabled) {
		transform: none;
	}
}

/* ── Logo ────────────────────────────────────────────────────────────── */

.logo-fila {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}

.logo-caja {
	width: 84px;
	height: 84px;
	flex: none;
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius);
	display: grid;
	place-items: center;
	background: var(--color-surface-alt);
	overflow: hidden;
	color: var(--color-muted);
}

.logo-caja img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── Selector de color (rueda + texto) ───────────────────────────────── */

.color-campo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.color-campo input[type='color'] {
	width: 42px;
	flex: none;
}

.color-campo input[type='text'] {
	font-family: var(--font-mono);
	text-transform: uppercase;
}

/* ── Vista previa en un teléfono ─────────────────────────────────────── */

.vista-previa {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1rem;
}

.vista-previa__pestanas {
	display: flex;
	gap: 0.15rem;
	background: var(--color-surface-alt);
	border-radius: 8px;
	padding: 3px;
	margin-bottom: 0.9rem;
}

.vista-previa__pestanas button {
	flex: 1;
	min-height: 26px;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--color-muted);
	font: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	border-radius: 5px;
}

.vista-previa__pestanas button[aria-selected='true'] {
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: var(--shadow-sm);
}

.telefono {
	width: 232px;
	margin: 0 auto;
	padding: 8px;
	border-radius: 30px;
	background: var(--color-obsidiana);
	box-shadow: 0 0 0 1px rgb(255 255 255 / 7%), 0 10px 30px -10px rgb(0 0 0 / 50%);
}

.telefono__pantalla {
	border-radius: 23px;
	overflow: hidden;
	height: 428px;
	position: relative;
}

.telefono__estado {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 15px 3px;
	font-size: 10px;
	font-weight: 700;
}

.telefono__contenido {
	padding: 13px 15px;
	height: calc(100% - 25px);
	overflow: auto;
}

/* Nota sobre los colores de la vista previa
   -----------------------------------------
   Dentro de `.telefono` se simula el portal CIUDADANO, no el panel. Sus colores
   los elige el operador por router y los inyecta la vista en línea, así que no
   siguen el tema del panel: el blanco del texto sobre el color de marca es del
   portal, no de aquí. Se expresa con `--color-sobre-relleno` —que es blanco en
   los dos temas— porque es exactamente eso: texto encima de un relleno de marca.
*/

/* Piezas del portal simulado dentro del teléfono. */
.pv-hero {
	border-radius: 15px;
	padding: 19px 15px;
	text-align: center;
	color: var(--color-sobre-relleno);
	overflow: hidden;
}

.pv-logo {
	width: 50px;
	height: 50px;
	border-radius: 13px;
	background: rgb(255 255 255 / 18%);
	display: grid;
	place-items: center;
	margin: 0 auto 11px;
	overflow: hidden;
}

.pv-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pv-titulo {
	font-weight: 700;
	font-size: 14.5px;
}

.pv-mensaje {
	font-size: 11px;
	opacity: 0.86;
	margin-top: 3px;
}

.pv-tarjeta {
	border-radius: 13px;
	margin-top: 11px;
	padding: 13px;
}

.pv-campo {
	height: 33px;
	border-radius: 8px;
	margin-top: 8px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	font-size: 11px;
}

.pv-boton {
	height: 35px;
	border-radius: 8px;
	margin-top: 11px;
	display: grid;
	place-items: center;
	color: var(--color-sobre-relleno);
	font-weight: 700;
	font-size: 12px;
}

/*
 * Un solo campo, como en el portal. Antes eran cuatro casillas bajo un rotulo
 * que decia «6 digitos»: la maqueta contradecia al portal por partida doble.
 */
.pv-otp-uno {
	height: 38px;
	margin: 13px 0;
	border-radius: 8px;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.34em;
	padding-left: 0.34em;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}


.pv-exito {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin: 4px auto 11px;
	font-size: 24px;
	color: var(--color-sobre-relleno);
}

.pv-terminos {
	display: flex;
	gap: 7px;
	align-items: flex-start;
	font-size: 10px;
	margin-top: 9px;
	padding: 8px;
	border-radius: 7px;
}

.pv-check {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	flex: none;
	display: grid;
	place-items: center;
	font-size: 9px;
	color: var(--color-sobre-relleno);
}