/*
 * Barra lateral de webinars. Colores y tipografía tomados del propio kit de
 * Elementor de la web: #0E1626 (primario/texto) y #3C8C9C (secundario/acento),
 * fuente Ubuntu, y el marco fino que ya usan sus tarjetas de webinar.
 *
 * OJO CON EL TEAL EN TEXTO PEQUEÑO: #3C8C9C sobre blanco da 3,87 de contraste y
 * NO pasa el mínimo de accesibilidad (4,5). Para texto pequeño se usa #357b89,
 * que da 4,83 y mantiene el mismo matiz — es el mismo cambio que se hizo en
 * agosto en toda la web. El #3C8C9C se queda solo donde es decoración o texto
 * grande (la cifra), donde el mínimo es 3.
 */

.admwb-fila { display: flex; gap: 46px; align-items: flex-start; }
.admwb-texto { flex: 1 1 auto; min-width: 0; hyphens: auto; -webkit-hyphens: auto; }
.admwb-lado { flex: 0 0 352px; position: sticky; top: 24px; font-family: Ubuntu, sans-serif; }

.admwb { border: 2px solid #0E1626; background: #fff; }

.admwb__banda { background: #0E1626; padding: 14px 20px; display: flex; align-items: center; gap: 10px; }
.admwb__banda svg { flex: 0 0 auto; display: block; }
.admwb__banda span { color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; line-height: 1; }

.admwb__cuerpo { padding: 22px 22px 20px; }

.admwb__cifra { display: flex; align-items: baseline; gap: 9px; margin: 0 0 8px; }
.admwb__cifra b { font-size: 44px; font-weight: 700; color: #3C8C9C; line-height: .95; letter-spacing: -.02em; }
.admwb__cifra i { font-style: normal; font-size: 18px; font-weight: 700; color: #0E1626; line-height: 1.2; }

.admwb__sub { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #3f4a5a; }

.admwb__lista { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid #3C8C9C; }
.admwb__lista li { font-size: 13px; line-height: 1.4; color: #0E1626; margin: 0 0 8px; }
.admwb__lista li:last-child { margin: 0; }
.admwb__mas { margin: 9px 0 18px; padding-left: 17px; font-size: 12.5px; color: #357b89; font-weight: 700; }

.admwb__campo {
	display: block; width: 100%; box-sizing: border-box;
	font-family: inherit; font-size: 15px; color: #0E1626;
	padding: 11px 13px; margin: 0 0 9px;
	border: 1.5px solid #c9d1da; border-radius: 0; background: #fff; line-height: 1.2;
}
.admwb__campo::placeholder { color: #8a94a1; opacity: 1; }
.admwb__campo:focus { outline: 0; border-color: #3C8C9C; box-shadow: 0 0 0 3px rgba(60,140,156,.18); }
.admwb__campo[aria-invalid="true"] { border-color: #b3261e; }

.admwb__legal { display: flex; gap: 9px; align-items: flex-start; margin: 3px 0 14px; font-size: 11.5px; line-height: 1.4; color: #5b6674; cursor: pointer; }
.admwb__legal input { flex: 0 0 auto; margin: 1px 0 0; width: 15px; height: 15px; accent-color: #3C8C9C; }
.admwb__legal a { color: #357b89; text-decoration: underline; }

.admwb__boton {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%; box-sizing: border-box;
	background: #0E1626; color: #fff; border: 0;
	font-family: inherit; font-size: 15.5px; font-weight: 700;
	padding: 14px 16px; cursor: pointer; transition: background .18s ease;
}
.admwb__boton:hover { background: #1c3050; }
.admwb__boton:focus-visible { outline: 3px solid #3C8C9C; outline-offset: 2px; }
.admwb__boton[disabled] { opacity: .6; cursor: default; }
.admwb__boton svg { transition: transform .18s ease; }
.admwb__boton:hover:not([disabled]) svg { transform: translateX(3px); }

.admwb__aviso { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: #b3261e; }
.admwb__aviso[hidden] { display: none; }

.admwb__pie { margin: 11px 0 0; font-size: 11px; line-height: 1.45; color: #7b8593; text-align: center; }

/* Etiquetas para quien navega con lector de pantalla: el «placeholder» solo no
   es una etiqueta, y sin esto los dos campos se anuncian como «campo de texto». */
.admwb__oculto {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* La trampa de robots: fuera de la vista sin usar display:none, que algunos
   rellenadores automáticos detectan y esquivan. */
.admwb__trampa { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Sustituye al formulario cuando el alta ha ido bien. Lleva un tic dibujado
   en CSS: una imagen mas seria una peticion mas por una palomita. */
.admwb__ok { margin: 4px 0 0; padding: 16px 16px 18px; background: #f2f7f8; border-left: 3px solid #3C8C9C; }
.admwb__ok strong { display: block; font-size: 15.5px; color: #0E1626; margin: 0 0 5px; }
.admwb__ok strong::before {
	content: ""; display: inline-block; width: 15px; height: 8px; margin-right: 9px;
	border-left: 2.5px solid #357b89; border-bottom: 2.5px solid #357b89;
	transform: rotate(-45deg) translateY(-3px);
}
.admwb__ok span { display: block; font-size: 13.5px; line-height: 1.5; color: #3f4a5a; }

@media (max-width: 1024px) {
	.admwb-fila { display: block; }
	.admwb-lado { position: static; max-width: 520px; margin: 30px auto 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.admwb__boton, .admwb__boton svg { transition: none; }
}