.ecco-app .ecco-registro {
	--ecco-ink: var(--ecco-negro);
	--ecco-label: var(--ecco-gris-700);
	--ecco-muted: var(--ecco-gris-700);
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	background: var(--ecco-tarjeta-bg);
	border-radius: var(--ecco-radius-lg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 24px 48px -28px rgba(0, 0, 0, .28);
	padding: var(--ecco-space-8) var(--ecco-space-7);
	color: var(--ecco-ink);
	position: relative;
	overflow: hidden;
}

/* Elementos que el JS oculta/muestra con el atributo [hidden] (form, dropzone,
   filepreview, summary-error, result): fijar "display: flex" directo en la
   clase base gana sobre el [hidden]{display:none} nativo del navegador y el
   bloque queda visible siempre, sin haberse mostrado. Mismo patrón que el
   modal fantasma de ecco-panel.css — base en "none", :not([hidden]) revela. */
.ecco-app .ecco-registro__form {
	display: none;
	flex-direction: column;
	gap: var(--ecco-space-6);
}

.ecco-app .ecco-registro__form:not([hidden]) {
	display: flex;
}

.ecco-app .ecco-registro__head {
	display: flex;
	flex-direction: column;
	gap: var(--ecco-space-2);
	padding-top: var(--ecco-space-4);
}

/* Aviso de modo de pruebas — ver ECCO_MODO_PRUEBAS en ecco-retos.php. Oculto
   por CSS a petición: el modo sigue activo (ECCO_MODO_PRUEBAS true), solo
   deja de avisarse visualmente. */

.ecco-app .ecco-modo-pruebas-banner {
	display: none;
	align-self: flex-start;
	align-items: center;
	gap: var(--ecco-space-2);
	margin-bottom: var(--ecco-space-4);
	padding: var(--ecco-space-1) var(--ecco-space-3);
	border-radius: var(--ecco-radius-sm);
	background: var(--ecco-negro);
	color: var(--ecco-blanco);
	font-weight: 800;
	font-size: var(--ecco-text-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: help;
}

.ecco-app .ecco-modo-pruebas-banner::before {
	content: "●";
	opacity: .6;
}

.ecco-app .ecco-registro__eyebrow {
	display: none;
	font-weight: 800;
	font-size: var(--ecco-text-xs);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ecco-gris-700);
}

.ecco-app .ecco-registro__title {
	margin: 0 0 var(--ecco-space-1);
	font-weight: 800;
	font-size: var(--ecco-text-2xl);
	line-height: 1.1;
	letter-spacing: -.03em;
}

.ecco-app .ecco-registro__subtitle {
	margin: 0;
	font-weight: 500;
	font-size: var(--ecco-text-sm);
	line-height: 1.55;
	color: var(--ecco-muted);
}

.ecco-app .ecco-registro__subtitle strong {
	color: var(--ecco-ink);
}

.ecco-app .ecco-registro__fields {
	display: flex;
	flex-direction: column;
	gap: var(--ecco-space-4);
}

.ecco-app .ecco-registro__field {
	display: flex;
	flex-direction: column;
	gap: var(--ecco-space-1);
}

.ecco-app .ecco-registro__label {
	font-weight: 600;
	font-size: var(--ecco-text-sm);
	color: var(--ecco-label);
}

.ecco-app .ecco-registro__input {
	width: 100%;
	font: 500 15px/1 var(--ecco-font);
	color: var(--ecco-ink);
	padding: 14px var(--ecco-space-4);
	border-radius: var(--ecco-radius-sm);
	border: 1.5px solid var(--ecco-gris-400);
	background: var(--ecco-campo-bg);
	outline: none;
	transition: border-color .2s var(--ecco-ease), box-shadow .2s var(--ecco-ease), background-color .2s var(--ecco-ease);
}

.ecco-app .ecco-registro__input:focus {
	border-color: var(--ecco-negro);
	background: var(--ecco-blanco);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .1);
}

.ecco-app .ecco-registro__field.has-error .ecco-registro__input {
	border-color: var(--ecco-error);
	background: #fdf2f0;
}

.ecco-app .ecco-registro__field-error {
	font-weight: 600;
	font-size: var(--ecco-text-xs);
	line-height: 1.3;
	color: var(--ecco-error);
	display: none;
}

.ecco-app .ecco-registro__field-error.is-visible {
	display: block;
}

.ecco-app .ecco-registro__dropzone {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ecco-space-1);
	padding: var(--ecco-space-5) var(--ecco-space-4);
	border-radius: var(--ecco-radius-md);
	border: 2px dashed var(--ecco-gris-400);
	background: var(--ecco-campo-bg);
	cursor: pointer;
	text-align: center;
	transition: background .2s var(--ecco-ease), border-color .2s var(--ecco-ease);
}

.ecco-app .ecco-registro__dropzone:not([hidden]) {
	display: flex;
}

.ecco-app .ecco-registro__dropzone.is-dragging {
	border-color: var(--ecco-negro);
	background: var(--ecco-gris-100);
}

.ecco-app .ecco-registro__field.has-error .ecco-registro__dropzone {
	border-color: var(--ecco-error);
	background: #fdf2f0;
}

.ecco-app .ecco-registro__dropzone-text {
	font-weight: 600;
	font-size: var(--ecco-text-base);
	line-height: 1.4;
	color: var(--ecco-ink);
	margin-top: var(--ecco-space-1);
}

.ecco-app .ecco-registro__dropzone-hint {
	font-weight: 500;
	font-size: var(--ecco-text-xs);
	color: var(--ecco-gris-400);
}

.ecco-app .ecco-registro__filepreview {
	display: none;
	align-items: center;
	gap: var(--ecco-space-4);
	padding: var(--ecco-space-4);
	border-radius: var(--ecco-radius-md);
	border: 1.5px solid var(--ecco-gris-400);
	background: var(--ecco-campo-bg);
}

.ecco-app .ecco-registro__filepreview:not([hidden]) {
	display: flex;
}

.ecco-app .ecco-registro__filepreview-thumb {
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: var(--ecco-space-3);
	background: var(--ecco-gris-100);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.ecco-app .ecco-registro__filepreview-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecco-app .ecco-registro__filepreview-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}

.ecco-app .ecco-registro__filepreview-name {
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ecco-app .ecco-registro__filepreview-status {
	font-weight: 500;
	font-size: var(--ecco-text-xs);
	line-height: 1;
	color: var(--ecco-gris-700);
}

.ecco-app .ecco-registro__filepreview-clear {
	flex: none;
	background: rgba(0, 0, 0, .06);
	border-radius: 999px;
	width: 30px;
	height: 30px;
	font: 600 15px/1 var(--ecco-font);
	color: var(--ecco-label);
	transition: background .15s var(--ecco-ease);
}

.ecco-app .ecco-registro__filepreview-clear:hover {
	background: rgba(0, 0, 0, .12);
}

.ecco-app .ecco-registro__submit {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ecco-space-2);
	padding: var(--ecco-space-4);
	border-radius: var(--ecco-radius-sm);
	background: var(--ecco-negro);
	color: var(--ecco-blanco);
	font-weight: 800;
	font-size: var(--ecco-text-md);
	letter-spacing: -.01em;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
	transition: background .15s var(--ecco-ease), transform .05s var(--ecco-ease);
}

.ecco-app .ecco-registro__submit:hover {
	background: var(--ecco-grafito);
}

.ecco-app .ecco-registro__submit:active {
	transform: translateY(1px);
}

.ecco-app .ecco-registro__submit:disabled {
	opacity: .75;
	cursor: not-allowed;
}

.ecco-app .ecco-registro__submit-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: var(--ecco-blanco);
	animation: eccoSpin .7s linear infinite;
}

.ecco-app .ecco-registro__submit.is-loading .ecco-registro__submit-spinner {
	display: inline-block;
}

.ecco-app .ecco-registro__summary-error {
	display: none;
	gap: var(--ecco-space-2);
	align-items: flex-start;
	padding: 13px 15px;
	border-radius: var(--ecco-radius-sm);
	background: #fdf2f0;
	border: 1px solid rgba(192, 57, 43, .3);
}

.ecco-app .ecco-registro__summary-error:not([hidden]) {
	display: flex;
}

.ecco-app .ecco-registro__summary-error-icon {
	font-weight: 800;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ecco-error);
}

.ecco-app .ecco-registro__summary-error span[data-error-summary-text] {
	font-weight: 500;
	font-size: var(--ecco-text-sm);
	line-height: 1.5;
	color: var(--ecco-error);
}

/* Result states: primera_vez / recurrente / duplicado */

.ecco-app .ecco-registro__result {
	position: relative;
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--ecco-space-4);
	padding: var(--ecco-space-6) var(--ecco-space-1) var(--ecco-space-2);
}

.ecco-app .ecco-registro__result:not([hidden]) {
	display: flex;
}

.ecco-app .ecco-registro__confetti {
	position: absolute;
	top: 0;
	border-radius: 2px;
	animation: eccoFall linear infinite;
}

.ecco-app .ecco-registro__result-icon {
	width: 80px;
	height: 80px;
	border-radius: 999px;
	background: var(--ecco-negro);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5);
	animation: eccoPop .55s cubic-bezier(.2, 1.2, .3, 1) both;
}

.ecco-app .ecco-registro__result-icon.is-duplicado {
	background: var(--ecco-gris-700);
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .4);
}

.ecco-app .ecco-registro__result-title {
	margin: 0;
	font-weight: 800;
	font-size: var(--ecco-text-2xl);
	line-height: 1.12;
	letter-spacing: -.03em;
	text-wrap: pretty;
	animation: eccoRise .5s .12s both;
}

.ecco-app .ecco-registro__result-text {
	margin: 0;
	font-weight: 500;
	font-size: var(--ecco-text-base);
	line-height: 1.6;
	color: var(--ecco-gris-700);
	max-width: 400px;
	text-wrap: pretty;
	animation: eccoRise .5s .2s both;
}

.ecco-app .ecco-registro__result-stats {
	display: flex;
	gap: var(--ecco-space-3);
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--ecco-space-2);
	animation: eccoRise .5s .26s both;
}

.ecco-app .ecco-registro__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--ecco-space-3) var(--ecco-space-5);
	border-radius: var(--ecco-radius-sm);
	background: var(--ecco-gris-050);
	border: 1px solid var(--ecco-gris-400);
	min-width: 116px;
}

.ecco-app .ecco-registro__stat-value {
	font-weight: 800;
	font-size: var(--ecco-text-lg);
	letter-spacing: -.02em;
	color: var(--ecco-ink);
}

.ecco-app .ecco-registro__stat-label {
	font-weight: 600;
	font-size: var(--ecco-text-xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ecco-gris-700);
}

.ecco-app .ecco-registro__reset {
	margin-top: var(--ecco-space-2);
	display: flex;
	align-items: center;
	gap: var(--ecco-space-2);
	border: 1.5px solid var(--ecco-gris-400);
	background: var(--ecco-blanco);
	padding: 13px var(--ecco-space-6);
	border-radius: 999px;
	font-weight: 700;
	font-size: var(--ecco-text-base);
	color: var(--ecco-ink);
	transition: border-color .15s var(--ecco-ease), color .15s var(--ecco-ease), background-color .15s var(--ecco-ease);
	animation: eccoRise .5s .32s both;
}

.ecco-app .ecco-registro__reset:hover,
.ecco-app .ecco-registro__reset:focus,
.ecco-app .ecco-registro__reset:active {
	background: var(--ecco-negro);
	border-color: var(--ecco-negro);
	color: var(--ecco-blanco);
}

@keyframes eccoFall {
	0% { transform: translateY(-40px) rotate(0); opacity: 0; }
	12% { opacity: 1; }
	100% { transform: translateY(360px) rotate(540deg); opacity: 0; }
}

@keyframes eccoPop {
	0% { transform: scale(.5); opacity: 0; }
	60% { transform: scale(1.08); }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes eccoRise {
	0% { transform: translateY(10px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes eccoSpin {
	to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
	.ecco-app .ecco-registro {
		padding: var(--ecco-space-6) var(--ecco-space-4);
		border-radius: var(--ecco-radius-md);
	}
	.ecco-app .ecco-registro__title {
		font-size: var(--ecco-text-xl);
	}
}