/* Piel de consola del widget Breach Chk — marca digitalchk.
   Solo se encola cuando el filtro bc_estilo_consola devuelve true
   (mu-plugin de digitalchk); itrafa nunca ve este archivo.
   Pitch e informe: sus colores los clava el JS con setProperty('important')
   desde las opciones del widget, aqui solo se retocan los que el JS no toca. */

div.breach-checker,
.breach-checker-overlay,
.breach-checker-otp-overlay {
	--bcx-tinta: var(--bc-primary, #0b1524);
	--bcx-menta: var(--bc-consola-accent, #5eead4);
}


div.breach-checker {
	border-radius: 16px !important;
	border: 1px solid #e4e9f0;
	box-shadow: 0 12px 32px rgba(11, 21, 36, 0.1) !important;
	font-family:
		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
		sans-serif;
}

/* ── Banda de consola (ceja + titulo sobre tinta con malla de puntos) ──── */
.breach-checker .bc-consola-banda {
	position: relative;
	margin: -28px -24px 22px;
	padding: 18px 24px 16px;
	background:
		radial-gradient(color-mix(in srgb, var(--bcx-menta, #5eead4) 13%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
		radial-gradient(120% 140% at 85% -20%, color-mix(in srgb, var(--bcx-tinta, #0b1524) 82%, #6e9bd8) 0%, var(--bcx-tinta, #0b1524) 60%);
	border-radius: 16px 16px 0 0;
	overflow: hidden;
}
.breach-checker .bc-consola-ceja {
	margin: 0 0 6px !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--bcx-menta, #5eead4);
	text-transform: none;
}
.breach-checker .bc-consola-ceja::after {
	content: '\258e';
	margin-left: 4px;
	animation: bc-cursor 1.1s steps(2, jump-none) infinite;
}
@keyframes bc-cursor {
	to {
		opacity: 0;
	}
}
.breach-checker .bc-consola-banda .breach-checker__title {
	margin: 0 !important;
	color: #ffffff !important;
	text-align: left;
	font-size: 1.3rem !important;
	line-height: 1.25 !important;
	text-wrap: balance;
}

/* ── Formulario ────────────────────────────────────────────────────────── */
.breach-checker .breach-checker__input {
	background: #f7f9fb !important;
	border: 1.5px solid #e4e9f0 !important;
	border-radius: 10px !important;
	color: var(--bcx-tinta, #0b1524) !important;
}
.breach-checker .breach-checker__input:focus {
	border-color: var(--bcx-menta, #5eead4) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bcx-menta, #5eead4) 28%, transparent);
}
.breach-checker .breach-checker__btn {
	background: var(--bcx-tinta, #0b1524) !important;
	color: #ffffff !important;
	border-radius: 10px !important;
	transition:
		background 0.15s,
		color 0.15s,
		transform 0.1s;
}
.breach-checker .breach-checker__btn:hover {
	background: var(--bcx-menta, #5eead4) !important;
	color: var(--bcx-tinta, #0b1524) !important;
	opacity: 1;
}
.breach-checker .breach-checker__btn:active {
	transform: translateY(1px);
}

/* ── Terminos: interruptor menta ───────────────────────────────────────── */
/* Sin el div de Turnstile en la fila, el bloque de terminos se apinaba
   junto al boton (el formulario es flex con wrap); fila propia siempre. */
.breach-checker .breach-checker__terms {
	flex-basis: 100%;
}
.breach-checker .breach-checker__terms-switch input:checked + .breach-checker__terms-slider {
	background: var(--bcx-menta, #5eead4) !important;
}
.breach-checker .breach-checker__terms-toggle {
	color: #55677d !important;
}
.breach-checker .breach-checker__terms-toggle:hover {
	color: var(--bcx-tinta, #0b1524) !important;
}
.breach-checker .breach-checker__terms-text {
	background: #f7f9fb;
	border: 1px solid #e4e9f0;
	border-radius: 10px;
}

/* ── Resultados ────────────────────────────────────────────────────────── */
.breach-checker .breach-checker__summary,
.breach-checker .breach-checker__msg {
	border-radius: 10px;
	text-align: left;
	border-left-width: 3px;
	border-left-style: solid;
}
.breach-checker .breach-checker__msg--safe {
	background: #ecfdf5;
	border-color: #a7f3d0;
	border-left-color: #10b981;
	color: #047857;
}
.breach-checker .breach-checker__breach-card,
.breach-checker .breach-checker__paste-card {
	background: #ffffff;
	border: 1px solid #e4e9f0;
	border-left: 3px solid #e65c5c;
	border-radius: 12px;
}
.breach-checker .breach-checker__breach-name {
	color: var(--bcx-tinta, #0b1524);
}
.breach-checker .breach-checker__tag {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #eef2f7;
	color: #55677d;
	border-radius: 4px;
}

/* ── Pitch (cinta oscura via opciones; aqui lo que el JS no clava) ─────── */
.breach-checker__pitch {
	border: 1px solid color-mix(in srgb, var(--bcx-menta, #5eead4) 35%, transparent) !important;
	border-radius: 14px !important;
}
.breach-checker__pitch-contact {
	color: #b8c7d8;
	opacity: 1;
}
.breach-checker__pitch-contact a {
	color: var(--bcx-menta, #5eead4);
}

/* ── Informe PDF (panel claro via opciones) ────────────────────────────── */
.breach-checker .breach-checker__report-section {
	border: 1px solid #e4e9f0 !important;
	border-radius: 14px !important;
}
.breach-checker .breach-checker__report-email {
	background: #ffffff !important;
	border: 1.5px solid #e4e9f0 !important;
	border-radius: 10px !important;
	color: var(--bcx-tinta, #0b1524) !important;
}
/* El tema pone los botones en mayusculas con tracking; aqui no. */
.breach-checker .breach-checker__report-btn,
.breach-checker .breach-checker__report-send {
	text-transform: none !important;
	letter-spacing: normal !important;
	border-radius: 10px !important;
}
.breach-checker .breach-checker__report-email:focus {
	border-color: var(--bcx-menta, #5eead4) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bcx-menta, #5eead4) 28%, transparent);
}
.breach-checker .breach-checker__report-send:hover {
	background: var(--bcx-menta, #5eead4) !important;
	color: var(--bcx-tinta, #0b1524) !important;
}

/* ── Modal OTP (vive fuera del contenedor; hoja solo en digitalchk) ────── */
.breach-checker-otp-modal {
	border-radius: 16px !important;
}
.breach-checker-otp-submit {
	border-radius: 10px !important;
}
.breach-checker-otp-submit:hover {
	background: var(--bcx-menta, #5eead4) !important;
	color: var(--bcx-tinta, #0b1524) !important;
}

/* ── Accesibilidad y movil ─────────────────────────────────────────────── */
.breach-checker :focus-visible {
	outline: 2px solid var(--bcx-menta, #5eead4);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.breach-checker .bc-consola-ceja::after {
		animation: none;
	}
}
@media (max-width: 480px) {
	.breach-checker .bc-consola-banda {
		margin: -28px -24px 18px;
		padding: 16px 20px 14px;
	}
	.breach-checker .breach-checker__btn {
		flex: 1 1 100%;
	}
}