/* Pantallas de cuenta de 24DigitalWeb. Pensadas para celular primero; el tema puede sobrescribir las variables. */
.dw24-account-wrap {
	--dw24-primary: #242b5e;
	--dw24-primary-text: #ffffff;
	--dw24-accent: #fad036;
	--dw24-danger: #c62828;
	--dw24-danger-bg: #fdecea;
	--dw24-ok: #1b6b34;
	--dw24-ok-bg: #e6f4ea;
	--dw24-warn: #7a5600;
	--dw24-warn-bg: #fff4d6;
	--dw24-info: #1c4f82;
	--dw24-info-bg: #e8f1fb;
	--dw24-border: #cfd3dc;
	--dw24-text: #1d2330;
	--dw24-muted: #5b6372;
	--dw24-radius: 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	padding: 24px 16px 48px;
	color: var(--dw24-text);
}
.dw24-account-wrap *, .dw24-account-wrap *::before, .dw24-account-wrap *::after { box-sizing: border-box; }
.dw24-card { width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--dw24-border); border-radius: calc(var(--dw24-radius) + 4px); padding: 24px 20px; }
.dw24-title { margin: 0 0 16px; font-size: 1.5rem; line-height: 1.25; }
.dw24-card h2 { margin: 0 0 12px; font-size: 1.125rem; }
.dw24-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--dw24-border); }

.dw24-form { margin: 0 0 12px; }
.dw24-field { margin: 0 0 16px; border: 0; padding: 0; }
.dw24-field label, .dw24-field legend { display: block; margin: 0 0 6px; font-weight: 600; }
.dw24-field input[type="text"], .dw24-field input[type="email"], .dw24-field input[type="password"], .dw24-field input[type="tel"] {
	width: 100%; min-height: 48px; padding: 10px 12px; font-size: 1rem; color: var(--dw24-text);
	background: #fff; border: 1px solid var(--dw24-border); border-radius: var(--dw24-radius);
}
.dw24-field input:focus { outline: 3px solid var(--dw24-accent); outline-offset: 1px; border-color: var(--dw24-primary); }
.dw24-hint { margin: 6px 0 0; font-size: .875rem; color: var(--dw24-muted); }
.dw24-field--options .dw24-option { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0 0 10px; padding: 12px; border: 1px solid var(--dw24-border); border-radius: var(--dw24-radius); }
.dw24-check { margin: 0 0 16px; }
.dw24-check label { display: flex; gap: 10px; align-items: flex-start; }
.dw24-check input, .dw24-option input { margin-top: 4px; width: 20px; height: 20px; flex: none; }

.dw24-btn { display: inline-block; width: 100%; min-height: 48px; padding: 12px 18px; font-size: 1rem; font-weight: 700; text-align: center; cursor: pointer; border-radius: var(--dw24-radius); border: 2px solid var(--dw24-primary); }
.dw24-btn--primary { background: var(--dw24-primary); color: var(--dw24-primary-text); }
.dw24-btn--secondary { background: #fff; color: var(--dw24-primary); }
.dw24-btn:focus-visible { outline: 3px solid var(--dw24-accent); outline-offset: 2px; }

.dw24-links { margin: 16px 0 0; text-align: center; }
.dw24-links a { color: var(--dw24-primary); font-weight: 600; }

.dw24-alert { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--dw24-radius); border: 1px solid transparent; }
.dw24-alert ul { margin: 0; padding-left: 18px; }
.dw24-alert--error { background: var(--dw24-danger-bg); color: var(--dw24-danger); border-color: var(--dw24-danger); }
.dw24-alert--success { background: var(--dw24-ok-bg); color: var(--dw24-ok); border-color: var(--dw24-ok); }
.dw24-alert--warning { background: var(--dw24-warn-bg); color: var(--dw24-warn); border-color: var(--dw24-warn); }
.dw24-alert--info { background: var(--dw24-info-bg); color: var(--dw24-info); border-color: var(--dw24-info); }

.dw24-summary { margin: 0 0 8px; }
.dw24-summary dt { margin-top: 10px; font-size: .875rem; color: var(--dw24-muted); }
.dw24-summary dd { margin: 2px 0 0; word-break: break-word; }
.dw24-badge { display: inline-block; margin-left: 6px; padding: 3px 9px; font-size: .75rem; font-weight: 700; border-radius: 999px; }
.dw24-badge--ok { background: var(--dw24-ok-bg); color: var(--dw24-ok); }
.dw24-badge--warn { background: var(--dw24-warn-bg); color: var(--dw24-warn); }
.dw24-badge--muted { background: #eceef2; color: var(--dw24-muted); }

/* Campo trampa contra bots: fuera de pantalla, no se muestra a las personas. */
.dw24-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 600px) {
	.dw24-account-wrap { padding-top: 48px; }
	.dw24-card { padding: 32px 28px; }
}
