@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/*****************************************
CSS EXCLUSIVO DEL FLUJO DE REGISTRO
(registro.php, registro_confirmar.php,
registro_exito.php — mismo módulo, por
eso comparten este único archivo, ver
regla de independencia JS/CSS por módulo)

Escrito MOBILE-FIRST a propósito: el
registro es el ÚNICO flujo de la app
permitido desde dispositivos móviles
(ver index.php / index_m.php). Las reglas
base son para celular; los @media
(min-width) amplían a tablet/escritorio.
******************************************/

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{

	font-family:'Poppins', sans-serif;

	min-height:100vh;

	position:relative;

	padding:18px;

	color:var(--color-texto-general);

	/* Fondo muy claro ("casi blanco"), mismo criterio del login
	pero SIN imagen (2026-07-05): tanto los blobs de textura como
	el degradado base se aclaran mezclando cada color de la
	paleta con blanco (color-mix anidado) antes de aplicarlos, así
	el fondo se ve mayormente blanco conservando el matiz de cada
	color de config/paleta.php (mismo criterio en recovery.css/
	cambiar_pass.css/index_m.css). */

	background:
	radial-gradient(circle at 12% 18%, color-mix(in srgb, color-mix(in srgb, var(--color-fondo-degradado-inicio) 15%, white) 60%, transparent) 0%, transparent 42%),
	radial-gradient(circle at 88% 12%, color-mix(in srgb, color-mix(in srgb, var(--color-boton-fondo) 15%, white) 55%, transparent) 0%, transparent 38%),
	radial-gradient(circle at 85% 88%, color-mix(in srgb, color-mix(in srgb, var(--color-fondo-degradado-fin) 15%, white) 60%, transparent) 0%, transparent 42%),
	radial-gradient(circle at 15% 85%, color-mix(in srgb, color-mix(in srgb, var(--color-fondo-degradado-medio) 15%, white) 55%, transparent) 0%, transparent 38%),
	linear-gradient(
		135deg,
		color-mix(in srgb, var(--color-fondo-degradado-inicio) 15%, white) 0%,
		color-mix(in srgb, var(--color-fondo-degradado-medio) 15%, white) 55%,
		color-mix(in srgb, var(--color-fondo-degradado-fin) 15%, white) 100%
	);
}

.background-overlay{

	position:fixed;
	inset:0;

	z-index:0;

	background:
	radial-gradient(
		circle at 50% 30%,
		rgba(255,255,255,0.20) 0%,
		rgba(255,255,255,0.05) 32%,
		rgba(0,0,0,0) 55%,
		rgba(0,0,0,0.20) 100%
	);
}

/*****************************************
AYUDA (2026-08-29, ajustado el mismo día)

DENTRO de la tarjeta, en su esquina superior derecha, y repetida en los
dos pasos del registro (decisión de Dora). Nació fija sobre la ventana y
así no gustaba: suelta sobre el fondo no se leía como parte del
formulario.

Al ir dentro, hereda el fondo claro de la tarjeta, así que se pinta con
el color de marca y sin relleno — un enlace, no un botón que compita con
"Continuar".

La tarjeta necesita `position:relative` para que este `absolute` se
ancle a ella; se declara junto a cada tarjeta, más abajo.
******************************************/
.ayuda-link{

	position:absolute;

	top:14px;
	right:18px;

	z-index:5;

	display:inline-flex;
	align-items:center;
	gap:5px;

	padding:5px 12px;

	border:1px solid color-mix(in srgb, var(--color-boton-fondo) 45%, transparent);
	border-radius:999px;

	background:color-mix(in srgb, var(--color-boton-fondo) 8%, white);

	font-family:'Poppins', sans-serif;
	font-size:12px;
	font-weight:600;

	color:var(--color-boton-fondo);
	text-decoration:none;

	/* Es un <button> desde el 2026-09-02 (abre el modal del video, ya no
	   una pestaña): un botón no hereda la tipografía ni trae el cursor de
	   mano, así que las dos se declaran aquí. */
	cursor:pointer;

	transition:background .15s, border-color .15s;
}

.ayuda-link::before{
	content:'▶';
	font-size:9px;
}

.ayuda-link:hover{
	background:color-mix(in srgb, var(--color-boton-fondo) 16%, white);
	border-color:var(--color-boton-fondo);
}


/*****************************************
LOGO / TITULO / PASOS (compartido)
******************************************/

.company-logo{
	text-align:center;
}

.company-logo img{
	width:140px;
	margin-bottom:10px;
}

.titulo-plataforma{

	margin:-4px 0 14px 0;

	font-size:11px;
	font-weight:600;

	letter-spacing:.4px;

	color:var(--color-texto-secundario);

	text-transform:uppercase;

	text-align:center;
}

.pasos{

	display:flex;
	justify-content:center;

	gap:18px;

	margin:14px 0 6px 0;

	font-size:13px;
}

.paso{

	display:flex;
	align-items:center;
	gap:6px;

	color:#9aa8a8;

	font-weight:500;
}

.paso span{

	width:22px;
	height:22px;

	border-radius:50%;

	background:#e3e6ea;
	color:#6b7d7d;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:12px;
	font-weight:700;
}

.paso.activo{
	color:var(--color-texto-titulo);
}

.paso.activo span{
	background:var(--color-boton-fondo);
	color:var(--color-boton-texto);
}

.paso.completado span{
	background:var(--color-exito);
	color:#fff;
}

/*****************************************
FOOTER (compartido)
******************************************/

.footer{

	margin-top:24px;

	font-size:11px;
	text-align:center;

	color:var(--color-texto-secundario);

	line-height:1.6;
}

.footer a{
	color:inherit;
	font-weight:600;
	text-decoration:underline;
}

.footer a:hover{
	color:var(--color-boton-fondo-hover);
}

.links{
	margin-top:18px;
	text-align:center;
	font-size:13px;
}

.links a{
	color:var(--color-texto-titulo);
	text-decoration:none;
	font-weight:500;
}

.links a:hover{
	color:var(--color-boton-fondo-hover);
}

/*****************************************
BOTON PRINCIPAL (compartido)
******************************************/

.btn-login{

	display:inline-block;

	width:100%;

	padding:16px;

	border:none;
	border-radius:14px;

	background:linear-gradient(
		135deg,
		var(--color-boton-fondo),
		color-mix(in srgb, var(--color-boton-fondo) 70%, white)
	);

	color:var(--color-boton-texto);

	font-size:16px;
	font-weight:600;

	text-align:center;
	text-decoration:none;

	cursor:pointer;

	transition:.3s;
}

.btn-login:hover{
	background:linear-gradient(
		135deg,
		var(--color-boton-fondo-hover),
		color-mix(in srgb, var(--color-boton-fondo-hover) 70%, white)
	);
	color:var(--color-boton-texto-hover);
}

.btn-login:disabled{
	opacity:.7;
	cursor:not-allowed;
}

.btn-secundario{

	width:100%;

	padding:14px;

	margin-bottom:14px;

	border:1px solid var(--color-boton-sec-borde);
	border-radius:14px;

	background:#fff;
	color:var(--color-texto-titulo);

	font-size:14px;
	font-weight:600;

	cursor:pointer;

	transition:.25s;
}

.btn-secundario:hover{
	border-color:var(--color-boton-fondo);
	color:var(--color-boton-fondo);
}

.btn-secundario:disabled{
	opacity:.7;
	cursor:not-allowed;
}

/*****************************************
INPUTS (compartido, mismo patrón del login)
******************************************/

.input-group{
	position:relative;

	/* Aire arriba desde que las etiquetas viven fuera del campo
	   (2026-09-04): sin él, la del primer campo de cada bloque se monta
	   sobre lo que tenga encima. */
	margin-top:12px;

	margin-bottom:20px;
}

.input-group input,
.input-group select{

	width:100%;
	height:52px;

	border:1px solid #d9e3e3;
	outline:none;

	padding:0 16px;

	border-radius:14px;

	background:#f5f7f8;

	color:#134040;

	font-size:15px;

	transition:.3s;
}

.input-group input:focus,
.input-group select:focus{

	border:1px solid var(--color-input-borde-foco);
	background:white;

	box-shadow:0 0 0 4px color-mix(in srgb, var(--color-boton-fondo) 10%, transparent);
}

/* ETIQUETAS SIEMPRE ARRIBA (2026-09-04, Dora) — mismo cambio que en el
   login (css/index.css), y por el mismo motivo: el autocompletado del
   navegador rellena el campo SIN disparar la re-evaluación de `:valid`,
   así que la etiqueta se quedaba dentro, encima del texto rellenado.
   Aquí lo autocompleta todo: nombre, correo, identificación.

   Nace en la posición que antes solo tenía al escribir; enfocar ya no la
   mueve, solo la enciende en el color de marca. */
.input-group label{

	position:absolute;

	left:12px;
	top:-9px;

	font-size:11px;

	padding:0 6px;

	background:white;
	border-radius:20px;

	color:#6b7d7d;

	pointer-events:none;

	transition:color .3s;
}

.input-group input:focus + label{

	color:var(--color-boton-fondo);
}

.modern-select select{
	appearance:auto;
}

.success-box{

	margin-top:6px;
	margin-bottom:14px;

	padding:12px 14px;

	border-radius:12px;

	background:color-mix(in srgb, var(--color-exito) 12%, white);
	color:var(--color-exito);

	font-size:13px;
	font-weight:600;
}

.error-box{

	margin-top:6px;
	margin-bottom:14px;

	padding:12px 14px;

	border-radius:12px;

	background:color-mix(in srgb, var(--color-error) 12%, white);
	color:var(--color-error);

	font-size:13px;
	font-weight:600;
}

/*****************************************
PASO 1 — registro.php
******************************************/

.registro-wrapper{
	position:relative;
	z-index:1;

	max-width:900px;
	margin:0 auto;
}

.registro-card{

	background:rgba(255,255,255,0.92);

	border-radius:24px;

	padding:28px 20px;

	box-shadow:0 15px 40px rgba(0,0,0,.15);

	text-align:center;

	/* Ancla del enlace de Ayuda, que va absolute en su esquina. */
	position:relative;
}

.registro-card h1{
	font-size:24px;
	font-weight:600;
	color:var(--color-texto-titulo);
	margin-bottom:6px;
}

.subtitle{
	font-size:13px;
	color:var(--color-texto-secundario);
	margin-bottom:4px;
}

.section-title{
	font-size:16px;
	font-weight:700;
	color:var(--color-texto-titulo);
	margin:22px 0 16px 0;
	text-align:left;
}

.registro-grid{
	text-align:left;
	margin-top:10px;
}

.registro-columna + .registro-columna{
	margin-top:6px;
}

/*****************************************
PASO 2 — registro_confirmar.php
******************************************/

.registro2-wrapper{
	position:relative;
	z-index:1;

	max-width:1400px;
	margin:0 auto;
}

.registro2-card{

	background:rgba(255,255,255,0.95);

	border-radius:24px;

	padding:22px 18px;

	box-shadow:0 15px 40px rgba(0,0,0,.15);

	/* Ancla del enlace de Ayuda, que va absolute en su esquina. */
	position:relative;
}

.header-top{
	text-align:center;
	margin-bottom:20px;
}

.header-top .logo img{
	height:44px;
	margin-bottom:12px;
}

.header-info h1{
	font-size:22px;
	font-weight:700;
	color:var(--color-texto-titulo);
	margin-bottom:6px;
}

.header-info p{
	font-size:13px;
	color:var(--color-texto-secundario);
}

.content-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:18px;
}

.section-card{

	background:#ffffff;

	border-radius:20px;

	padding:18px;

	border:1px solid var(--color-tarjeta-borde);

	box-shadow:0 5px 18px rgba(0,0,0,.05);
}

.aut-text{
	line-height:1.7;
	font-size:14px;
	color:var(--color-texto-general);
	text-align:justify;
}

.highlight{
	font-weight:700;
	color:var(--color-texto-titulo);
}

/*****************************************
FOTO CARNET
******************************************/

.upload-area{
	margin-top:20px;
}

.photo-card{
	width:100%;
}

.photo-title{
	font-size:16px;
	font-weight:700;
	color:var(--color-texto-titulo);
	margin-bottom:16px;
	/* 2026-10-06: el título comparte fila con "Ver tutorial". */
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	flex-wrap:wrap;
}

/* Botón pequeño "Ver tutorial" junto a "Foto para carnet" (2026-10-06).
   Abre el video de toma de foto en el modal de ayudas (help_abrir). */
.photo-tutorial-btn{
	font-family:inherit;
	font-size:12px;
	font-weight:600;
	padding:4px 10px;
	border-radius:999px;
	border:1px solid var(--color-boton-fondo, #008080);
	background:transparent;
	color:var(--color-boton-fondo, #008080);
	cursor:pointer;
	line-height:1.4;
}

.photo-tutorial-btn:hover{
	background:var(--color-boton-fondo, #008080);
	color:var(--color-boton-texto, #fff);
}

.photo-editor-area{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:20px;
}

.photo-preview-wrapper{

	width:200px;
	height:250px;

	border-radius:16px;

	overflow:hidden;

	border:4px solid var(--color-boton-fondo);

	background:#f1f5f9;

	position:relative;
}

#cropContainer{
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
	touch-action:none;
}

#cropImage{
	position:absolute;
	top:0;
	left:0;
	transform-origin:top left;
	user-select:none;
	-webkit-user-drag:none;
}

/* Guía CIRCULAR sobre la ventana de recorte (2026-07-11, pedido del
   usuario): el círculo marca el encuadre y el resto se oscurece, igual
   que el editor de foto de "Mi Perfil". La foto se sigue guardando
   RECTANGULAR (260x325); el círculo es solo guía visual. */
.photo-crop-mascara{
	position:absolute;
	inset:0;
	pointer-events:none;
}

.photo-crop-mascara::before{
	content:'';
	position:absolute;
	left:0;
	/* (250 - 200) / 2 → círculo de 200 centrado en la ventana de 200x250 */
	top:25px;
	width:200px;
	height:200px;
	border-radius:50%;
	border:2px dashed rgba(255,255,255,.85);
	box-shadow:0 0 0 9999px rgba(0,0,0,.42);
}

.photo-controls{
	display:flex;
	flex-direction:column;
	gap:14px;
	width:100%;
	max-width:280px;
}

.btn-modern{

	border:none;

	background:linear-gradient(
		135deg,
		var(--color-boton-fondo),
		color-mix(in srgb, var(--color-boton-fondo) 70%, white)
	);

	color:var(--color-boton-texto);

	padding:14px 20px;

	border-radius:14px;

	font-size:14px;
	font-weight:600;

	cursor:pointer;

	transition:.25s;
}

.btn-modern:hover{
	background:linear-gradient(
		135deg,
		var(--color-boton-fondo-hover),
		color-mix(in srgb, var(--color-boton-fondo-hover) 70%, white)
	);
	color:var(--color-boton-texto-hover);
}

.btn-modern.secondary{
	background:#4b5563;
}

#zoomRange{
	width:100%;
}

.photo-note{
	margin-top:18px;
	font-size:12px;
	color:var(--color-texto-secundario);
	text-align:center;
}

/*****************************************
FIRMA
******************************************/

.signature-tabs{
	display:flex;
	gap:10px;
	margin:20px 0 18px 0;
}

.tab-btn{

	flex:1;

	border:none;

	padding:12px 10px;

	border-radius:12px;

	font-size:13px;
	font-weight:600;

	cursor:pointer;

	background:#e2e8f0;
	color:#334155;

	transition:.25s;
}

.tab-btn.active{
	background:linear-gradient(
		135deg,
		var(--color-texto-titulo),
		color-mix(in srgb, var(--color-texto-titulo) 70%, white)
	);
	color:var(--color-boton-texto);
}

.canvas-wrap{
	display:flex;
	flex-direction:column;
	align-items:center;
}

canvas{

	background:#fff;

	/* La pizarra de firma es un CAMPO del formulario (el usuario dibuja
	   dentro), no un recuadro informativo: por eso viste el borde de la
	   familia de los inputs y no la de las tarjetas. */
	border:3px dashed var(--color-input-borde);

	border-radius:16px;

	width:100%;
	height:160px;

	touch-action:none;
}

.canvas-actions{
	margin-top:14px;
}

.upload-label{

	display:inline-flex;

	align-items:center;
	justify-content:center;

	padding:12px 20px;

	border-radius:12px;

	background:linear-gradient(
		135deg,
		var(--color-boton-fondo),
		color-mix(in srgb, var(--color-boton-fondo) 70%, white)
	);

	color:var(--color-boton-texto);

	font-weight:600;
	font-size:13px;

	cursor:pointer;

	transition:.25s;
}

.upload-label:hover{
	background:linear-gradient(
		135deg,
		var(--color-boton-fondo-hover),
		color-mix(in srgb, var(--color-boton-fondo-hover) 70%, white)
	);
	color:var(--color-boton-texto-hover);
}

input[type="file"]{
	display:none;
}

.signature-preview{
	width:100%;
	height:140px;
	object-fit:contain;
	background:#fff;
	border-radius:14px;
	/* Solo muestra la firma ya cargada: es un recuadro, no un campo. */
	border:2px dashed var(--color-tarjeta-borde);
	padding:10px;
	margin-top:12px;
}

/*****************************************
EDITOR DE FIRMA IMPORTADA (2026-07-13)

Mismo trato que el editor de foto: la firma
importada se encuadra dentro de una ventana
del MISMO tamaño que la pizarra de dibujo
(canvas), con zoom + arrastrar + rotar. Lo
que el usuario ve encuadrado es EXACTAMENTE
lo que se guarda (compuesto sobre fondo
blanco), no el archivo original.
******************************************/

.firma-import-editor{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:16px;
	margin-top:12px;
}

.firma-crop-wrapper{
	width:100%;
	height:160px;               /* igual que .canvas (la pizarra) */
	border-radius:16px;
	overflow:hidden;
	/* Mismo borde que la pizarra: las dos son la misma "casilla de firma"
	   vista en dos modos (dibujar / importar). */
	border:3px dashed var(--color-input-borde);
	background:#fff;
	position:relative;
}

#firmaCropContainer{
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
	touch-action:none;
}

#firmaCropImage{
	position:absolute;
	top:0;
	left:0;
	transform-origin:top left;
	user-select:none;
	-webkit-user-drag:none;
}

.firma-controls{
	display:flex;
	flex-direction:column;
	gap:12px;
	width:100%;
	max-width:320px;
}

.firma-controls label{
	font-size:12px;
	font-weight:600;
	color:var(--color-texto-secundario);
}

.firma-controls input[type="range"]{
	width:100%;
}

.signature-guide{

	margin-top:16px;

	background:#f8fafc;

	border-radius:14px;

	padding:14px;

	font-size:12px;

	line-height:1.7;

	color:var(--color-texto-secundario);
}

/*****************************************
CONFIRMACION DE CONTACTO
******************************************/

.contact-confirmation{
	margin-top:24px;
}

.contact-box{

	background:color-mix(in srgb, var(--color-boton-fondo) 5%, white);

	border:1px solid var(--color-tarjeta-borde);

	border-radius:16px;

	padding:18px;
}

.contact-title{
	font-size:16px;
	font-weight:700;
	color:var(--color-texto-titulo);
	margin-bottom:12px;
	text-align:center;
}

.contact-content{
	font-size:13px;
	line-height:1.6;
	color:var(--color-texto-general);
}

.contact-data{
	margin-top:14px;
	display:flex;
	flex-direction:column;
	gap:10px;
}

.contact-item{

	display:flex;
	flex-direction:column;

	padding:10px 14px;

	background:#fff;

	border-radius:12px;

	border:1px solid var(--color-tarjeta-borde);

	font-size:13px;
}

.contact-item .label{
	font-weight:700;
	color:var(--color-texto-titulo);
	font-size:11px;
	text-transform:uppercase;
}

.contact-item .value{
	font-weight:600;
	color:var(--color-texto-general);
	word-break:break-word;
}

/*****************************************
SERVICIOS A PRESTAR (2026-10-02)
******************************************/

.servicios-box{

	margin-top:24px;

	background:color-mix(in srgb, var(--color-boton-fondo) 5%, white);

	border:1px solid var(--color-tarjeta-borde);

	border-radius:16px;

	padding:18px;
}

.servicios-title{
	font-size:16px;
	font-weight:700;
	color:var(--color-texto-titulo);
	margin-bottom:12px;
	text-align:center;
}

.servicios-lista{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.servicio-item{

	display:flex;
	align-items:center;
	gap:10px;

	padding:10px 14px;

	background:#fff;

	border-radius:12px;

	border:1px solid var(--color-tarjeta-borde);

	font-size:13px;
	font-weight:600;
	color:var(--color-texto-general);

	cursor:pointer;

	transition:border-color .15s, background .15s;
}

.servicio-item:hover{
	border-color:var(--color-boton-fondo);
}

.servicio-item input{
	width:18px;
	height:18px;
	margin:0;
	flex-shrink:0;
	accent-color:var(--color-boton-fondo);
	cursor:pointer;
}

.servicio-item:has(input:checked){
	border-color:var(--color-boton-fondo);
	background:color-mix(in srgb, var(--color-boton-fondo) 10%, white);
	color:var(--color-texto-titulo);
}

/*****************************************
CIUDAD DE RESIDENCIA (2026-10-02). El buscador es el componente
compartido css/ciudad_buscador.css; aquí solo el aspecto del campo,
igual al de los .input-group del paso 1.
******************************************/

.ciudad-reg{
	margin-top:24px;
}

.ciudad-reg-input{
	height:52px;
	border:1px solid #d9e3e3;
	outline:none;
	padding:0 16px;
	border-radius:14px;
	background:#f5f7f8;
	color:#134040;
	font-size:15px;
	font-family:inherit;
	transition:.3s;
}

.ciudad-reg-input:focus{
	border:1px solid var(--color-input-borde-foco);
	background:white;
	box-shadow:0 0 0 4px color-mix(in srgb, var(--color-boton-fondo) 10%, transparent);
}

/*****************************************
BARRA INFERIOR
******************************************/

.bottom-bar{
	margin-top:24px;
	padding-top:20px;
	/* Línea interna de la tarjeta del paso 2, no un borde de campo. */
	border-top:1px solid var(--color-tarjeta-borde);
}

.note{
	font-size:12px;
	color:var(--color-texto-secundario);
	line-height:1.6;
	margin-bottom:16px;
	text-align:center;
}

.buttons-bottom{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.buttons-bottom a{
	text-decoration:none;
}

.btn{
	width:100%;
	border:none;
	padding:14px;
	border-radius:14px;
	font-size:14px;
	font-weight:600;
	cursor:pointer;
	transition:.25s;
}

.btn-secondary{
	background:#e5e7eb;
	color:#111827;
}

.btn-secondary:hover{
	background:#d1d5db;
}

.btn-success{
	background:linear-gradient(
		135deg,
		var(--color-exito),
		color-mix(in srgb, var(--color-exito) 70%, white)
	);
	color:var(--color-boton-texto);
}

.btn-success:hover{
	filter:brightness(0.92);
	color:var(--color-boton-texto-hover);
}

.btn-success:disabled{
	opacity:.7;
	cursor:not-allowed;
}

/*****************************************
PASO 3 — registro_exito.php
******************************************/

.exito-wrapper{
	position:relative;
	z-index:1;

	max-width:520px;
	margin:0 auto;

	display:flex;
	min-height:calc(100vh - 36px);
	align-items:center;
}

.exito-card{

	width:100%;

	background:rgba(255,255,255,0.95);

	border-radius:24px;

	padding:32px 22px;

	box-shadow:0 15px 40px rgba(0,0,0,.15);

	text-align:center;
}

.exito-icono{

	width:84px;
	height:84px;

	margin:14px auto 18px auto;

	border-radius:50%;

	background:var(--color-exito);

	display:flex;
	align-items:center;
	justify-content:center;

	box-shadow:0 10px 25px color-mix(in srgb, var(--color-exito) 45%, transparent);
}

.exito-card h1{
	font-size:22px;
	font-weight:700;
	color:var(--color-texto-titulo);
	margin-bottom:14px;
}

.exito-texto{
	font-size:14px;
	line-height:1.7;
	color:var(--color-texto-general);
	margin-bottom:14px;
}

.exito-mail{

	display:inline-block;

	padding:10px 16px;

	border-radius:12px;

	background:color-mix(in srgb, var(--color-boton-fondo) 10%, white);

	color:var(--color-texto-titulo);

	font-weight:700;

	font-size:14px;

	margin-bottom:16px;

	word-break:break-word;
}

.exito-nota{
	font-size:12px;
	color:var(--color-texto-secundario);
	line-height:1.6;
	margin-bottom:22px;
}

/*****************************************
TABLET (min-width: 700px)
******************************************/

@media (min-width:700px){

	body{
		padding:30px;
	}

	.registro-card{
		padding:40px 45px;
	}

	.registro-grid{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:30px;
	}

	.registro-columna + .registro-columna{
		margin-top:0;
	}

	.registro2-card{
		padding:32px;
	}

	.header-top{
		display:flex;
		align-items:center;
		justify-content:flex-start;
		gap:20px;
		text-align:left;
	}

	.header-top .logo img{
		height:56px;
		margin-bottom:0;
	}

	.header-info .pasos{
		justify-content:flex-start;
	}

	.buttons-bottom{
		flex-direction:row;
		justify-content:flex-end;
	}

	.buttons-bottom button{
		width:auto;
		min-width:180px;
	}

	.note{
		text-align:left;
	}

	.bottom-bar{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:20px;
	}

	.note{
		margin-bottom:0;
	}
}

/*****************************************
ESCRITORIO (min-width: 1100px)
******************************************/

@media (min-width:1100px){

	.content-grid{
		grid-template-columns:1.1fr 0.9fr;
	}

	.photo-editor-area{
		flex-direction:row;
		align-items:center;
		justify-content:flex-start;
	}

	canvas{
		height:190px;
	}

	.firma-crop-wrapper{
		height:190px;   /* sigue igualando a la pizarra en escritorio */
	}
}