/* ============================================================
   Escorts Col — Registro (wizard 11 pasos)
   ============================================================ */

.ecr {
	--ecr-brand: #c33c61;
	--ecr-dark: #8e2d55;
	--ecr-darker: #4a173e;
	--ecr-soft: #fef2f5;
	--ecr-ink: #0f172a;
	--ecr-muted: #64748b;
	--ecr-border: #e2e8f0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	width: 100%;
	max-width: 1560px;
	margin: 28px auto 60px;
	padding: 0 clamp(16px, 3vw, 40px);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	color: var(--ecr-ink);
	line-height: 1.55;
}
@media (min-width: 900px)  { .ecr { grid-template-columns: 250px 1fr; gap: 40px } }
@media (min-width: 1400px) { .ecr { grid-template-columns: 280px 1fr; gap: 52px } }

.ecr *, .ecr *::before, .ecr *::after { box-sizing: border-box }

/* ---------- Nav lateral ---------- */
.ecr-nav { position: sticky; top: 90px; align-self: start }
@media (max-width: 899px) { .ecr-nav { position: static } }
.ecr-nav-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ecr-muted); margin-bottom: 14px }
.ecr-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px }
@media (max-width: 899px) { .ecr-nav-list { flex-direction: row; overflow-x: auto; padding-bottom: 8px; gap: 6px } }
.ecr-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--ecr-muted); white-space: nowrap; transition: background .15s, color .15s }
.ecr-nav-item.is-active { background: var(--ecr-soft); color: var(--ecr-dark); font-weight: 600 }
.ecr-nav-item.is-done { color: #059669 }
.ecr-nav-num { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f1f5f9; font-size: 11px; font-weight: 700 }
.ecr-nav-item.is-active .ecr-nav-num { background: var(--ecr-brand); color: #fff }
.ecr-nav-item.is-done .ecr-nav-num { background: #d1fae5; color: #059669 }
.ecr-nav-item.is-done .ecr-nav-num::after { content: '✓' }
.ecr-nav-item.is-done .ecr-nav-num { font-size: 0 }
.ecr-nav-item.is-done .ecr-nav-num::after { font-size: 12px }
.ecr-nav-help { margin-top: 24px; padding: 14px; background: #f8fafc; border-radius: 10px; font-size: 12.5px; color: var(--ecr-muted); line-height: 1.5 }
@media (max-width: 899px) { .ecr-nav-help { display: none } }

/* ---------- Main ---------- */
.ecr-main { min-width: 0 }
.ecr-progress { height: 5px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin-bottom: 28px }
.ecr-progress-bar { height: 100%; background: linear-gradient(90deg, var(--ecr-brand), var(--ecr-darker)); border-radius: 999px; transition: width .35s ease }

.ecr-step { display: none; animation: ecr-in .25s ease }
.ecr-step.is-active { display: block }
@keyframes ecr-in { from { opacity: 0; transform: translateY(8px) } }

.ecr-eyebrow { display: inline-block; padding: 4px 11px; background: var(--ecr-soft); color: var(--ecr-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; margin-bottom: 12px }
.ecr-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.9rem; font-weight: 700; margin: 0 0 8px; line-height: 1.2; color: var(--ecr-ink) }
.ecr-desc { color: var(--ecr-muted); font-size: 14.5px; margin: 0 0 26px }

/* ---------- Campos ---------- */
.ecr-field { margin-bottom: 22px }
.ecr-field > label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px }
.ecr-req { color: var(--ecr-brand) }
.ecr-hint { font-size: 12.5px; color: var(--ecr-muted); margin-top: 6px; line-height: 1.5 }
.ecr-counter { font-size: 12px; color: var(--ecr-muted); text-align: right; margin-top: 5px }
.ecr-counter.is-low { color: #dc2626 }

.ecr input[type=text], .ecr input[type=email], .ecr input[type=date],
.ecr input[type=tel], .ecr input[type=number], .ecr select, .ecr textarea {
	width: 100%; padding: 11px 14px; border: 1.5px solid var(--ecr-border);
	border-radius: 9px; font-size: 14.5px; font-family: inherit; color: var(--ecr-ink);
	background: #fff; transition: border-color .15s, box-shadow .15s;
}
.ecr input:focus, .ecr select:focus, .ecr textarea:focus {
	outline: none; border-color: var(--ecr-brand); box-shadow: 0 0 0 3px rgba(195,60,97,.12);
}
.ecr input:disabled, .ecr select:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed }
.ecr textarea { resize: vertical; min-height: 130px; line-height: 1.6 }

.ecr-grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 18px }
@media (min-width: 620px) { .ecr-grid-2 { grid-template-columns: 1fr 1fr } }

.ecr-money, .ecr-phone { display: flex; align-items: stretch; border: 1.5px solid var(--ecr-border); border-radius: 9px; overflow: hidden; background: #fff }
.ecr-money:focus-within, .ecr-phone:focus-within { border-color: var(--ecr-brand); box-shadow: 0 0 0 3px rgba(195,60,97,.12) }
.ecr-money > span, .ecr-phone > span { display: flex; align-items: center; padding: 0 13px; background: #f8fafc; color: var(--ecr-muted); font-size: 14px; font-weight: 600; border-right: 1.5px solid var(--ecr-border) }
.ecr-money input, .ecr-phone input { border: none !important; box-shadow: none !important; border-radius: 0 }

/* ---------- Checks y radios ---------- */
.ecr-checks { display: flex; flex-wrap: wrap; gap: 8px }
.ecr-checks-grid { display: grid; grid-template-columns: 1fr; gap: 8px }
@media (min-width: 560px) { .ecr-checks-grid { grid-template-columns: 1fr 1fr } }
.ecr-check {
	display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px;
	border: 1.5px solid var(--ecr-border); border-radius: 9px; cursor: pointer;
	font-size: 13.5px; background: #fff; transition: border-color .15s, background .15s;
}
.ecr-check:hover { border-color: #cbd5e1 }
.ecr-check input { margin: 2px 0 0; accent-color: var(--ecr-brand); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer }
.ecr-check:has(input:checked) { border-color: var(--ecr-brand); background: var(--ecr-soft) }
.ecr-check-legal { align-items: flex-start; margin-bottom: 10px; line-height: 1.55 }
.ecr-check-legal a { color: var(--ecr-dark); text-decoration: underline }

.ecr-radios { display: flex; flex-wrap: wrap; gap: 8px }
.ecr-radio { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--ecr-border); border-radius: 999px; cursor: pointer; font-size: 13.5px; background: #fff }
.ecr-radio input { accent-color: var(--ecr-brand); cursor: pointer }
.ecr-radio:has(input:checked) { border-color: var(--ecr-brand); background: var(--ecr-soft); font-weight: 600 }

/* ---------- Upload ---------- */
.ecr-upload {
	border: 2px dashed var(--ecr-border); border-radius: 12px; padding: 28px 20px;
	text-align: center; cursor: pointer; background: #fafbfc; transition: border-color .2s, background .2s;
}
.ecr-upload:hover, .ecr-upload.is-drag { border-color: var(--ecr-brand); background: var(--ecr-soft) }
.ecr-upload.is-done { border-style: solid; border-color: #10b981; background: #f0fdf4 }
.ecr-upload-icon { font-size: 32px; margin-bottom: 8px }
.ecr-upload-text { font-size: 13.5px; color: var(--ecr-muted); line-height: 1.5 }
.ecr-upload-text strong { color: var(--ecr-ink); font-size: 14.5px }
.ecr-upload-status { margin-top: 10px; font-size: 13px; font-weight: 600 }
.ecr-upload-status.is-ok { color: #059669 }
.ecr-upload-status.is-error { color: #dc2626 }
.ecr-upload-status.is-loading { color: var(--ecr-brand) }

.ecr-fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 14px }
.ecr-foto { position: relative; aspect-ratio: 3/4; border-radius: 9px; overflow: hidden; background: #f1f5f9; border: 2px solid transparent }
.ecr-foto img { width: 100%; height: 100%; object-fit: cover; display: block }
.ecr-foto.is-main { border-color: var(--ecr-brand) }
.ecr-foto-main-tag { position: absolute; top: 6px; left: 6px; padding: 3px 8px; background: var(--ecr-brand); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 4px }
.ecr-foto-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: none; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center }
.ecr-foto-del:hover { background: #dc2626 }

/* ---------- Cajas informativas ---------- */
.ecr-legal-box, .ecr-privacy-box, .ecr-rules-box {
	padding: 14px 17px; border-radius: 10px; font-size: 13px; line-height: 1.6; margin-top: 18px;
}
.ecr-legal-box { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d }
.ecr-privacy-box { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a5f }
.ecr-rules-box { background: #fffbeb; border: 1px solid #fde68a; color: #713f12 }
.ecr-rules-box ul { margin: 8px 0 0; padding-left: 20px }
.ecr-rules-box li { margin-bottom: 4px }

.ecr-age-box { margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600 }
.ecr-age-box.is-ok { background: #f0fdf4; border: 1px solid #86efac; color: #166534 }
.ecr-age-box.is-bad { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b }

.ecr-error { padding: 13px 17px; background: #fef2f2; border: 1.5px solid #fca5a5; border-radius: 10px; color: #991b1b; font-size: 13.5px; margin-bottom: 20px; line-height: 1.5 }

/* ---------- Días ---------- */
.ecr-dias { display: flex; flex-direction: column; gap: 9px }
.ecr-dia { display: grid; grid-template-columns: 1fr; gap: 8px }
@media (min-width: 560px) { .ecr-dia { grid-template-columns: 190px 1fr; align-items: center } }
.ecr-dia .ecr-check { margin: 0 }

/* ---------- Planes ---------- */
.ecr-planes { display: grid; grid-template-columns: 1fr; gap: 10px }
@media (min-width: 700px) { .ecr-planes { grid-template-columns: repeat(5, 1fr); gap: 8px } }
.ecr-plan {
	position: relative; display: flex; flex-direction: column; gap: 3px;
	padding: 18px 14px; border: 2px solid var(--ecr-border); border-radius: 12px;
	cursor: pointer; background: #fff; text-align: center; transition: border-color .15s, transform .15s;
}
.ecr-plan:hover { border-color: #cbd5e1; transform: translateY(-2px) }
.ecr-plan input { position: absolute; opacity: 0; pointer-events: none }
.ecr-plan:has(input:checked) { border-color: var(--ecr-brand); background: var(--ecr-soft); box-shadow: 0 4px 14px rgba(195,60,97,.15) }
.ecr-plan.is-featured { border-color: #fcd34d }
.ecr-plan-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 3px 10px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; white-space: nowrap }
.ecr-plan-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; font-weight: 700; color: var(--ecr-dark) }
.ecr-plan-fotos { font-size: 12px; font-weight: 600; color: var(--ecr-ink) }
.ecr-plan-desc { font-size: 11.5px; color: var(--ecr-muted); line-height: 1.4 }

/* ---------- Resumen ---------- */
.ecr-resumen { border: 1px solid var(--ecr-border); border-radius: 12px; overflow: hidden; margin-bottom: 24px }
.ecr-res-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ecr-border); font-size: 13.5px }
.ecr-res-row:last-child { border-bottom: none }
.ecr-res-row > span:first-child { color: var(--ecr-muted); font-weight: 600 }
@media (max-width: 560px) { .ecr-res-row { grid-template-columns: 1fr; gap: 3px } }

/* ---------- Acciones ---------- */
.ecr-actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ecr-border) }
.ecr-btn {
	padding: 13px 26px; border: none; border-radius: 10px; font-size: 14.5px; font-weight: 600;
	font-family: inherit; cursor: pointer; text-decoration: none; display: inline-flex;
	align-items: center; justify-content: center; transition: box-shadow .2s, transform .1s, opacity .2s;
}
.ecr-btn-primary { background: linear-gradient(135deg, var(--ecr-brand), var(--ecr-dark)); color: #fff; margin-left: auto }
.ecr-btn-primary:hover { box-shadow: 0 8px 20px rgba(195,60,97,.32); color: #fff }
.ecr-btn-primary:disabled { opacity: .55; cursor: not-allowed; box-shadow: none }
.ecr-btn-ghost { background: #f1f5f9; color: var(--ecr-muted) }
.ecr-btn-ghost:hover { background: #e2e8f0; color: var(--ecr-ink) }

/* ---------- Éxito ---------- */
.ecr-success { text-align: center; padding: 20px 0 }
.ecr-success-icon { width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%; background: #d1fae5; color: #059669; font-size: 34px; display: flex; align-items: center; justify-content: center; font-weight: 700 }
.ecr-success-next { text-align: left; max-width: 520px; margin: 28px auto; padding: 20px 24px; background: #f8fafc; border-radius: 12px }
.ecr-success-next h3 { font-size: 15px; margin: 0 0 12px }
.ecr-success-next ol { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ecr-muted); line-height: 1.7 }

.ecr-notice { padding: 20px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; text-align: center; font-size: 14px }

/* ============================================================
   Grupos de checkboxes (perfil / servicios / lugar)
   ============================================================ */
.ecx-grupos { display: grid; grid-template-columns: 1fr; gap: 12px }
@media (min-width: 640px)  { .ecx-grupos { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1000px) { .ecx-grupos { grid-template-columns: repeat(3, 1fr) } }
@media (min-width: 1350px) { .ecx-grupos { grid-template-columns: repeat(4, 1fr) } }

.ecx-grupo {
	margin: 0; padding: 14px 16px;
	border: 1.5px solid var(--ecr-border); border-radius: 11px;
	background: #fff; transition: border-color .18s, background .18s;
}
.ecx-grupo.is-req { border-left: 3px solid var(--ecr-brand) }
.ecx-grupo.has-error { border-color: #dc2626; background: #fef2f2 }
.ecx-grupo-t {
	padding: 0; margin: 0 0 10px;
	font-size: 13px; font-weight: 700; color: var(--ecr-ink);
	display: block; width: 100%;
}
.ecx-req { color: var(--ecr-brand) }
.ecx-opt {
	font-size: 10px; font-weight: 600; color: var(--ecr-muted);
	background: #f1f5f9; padding: 2px 7px; border-radius: 999px;
	text-transform: uppercase; letter-spacing: .04em; margin-left: 4px;
}
.ecx-opts { display: flex; flex-direction: column; gap: 5px }
.ecx-opt-lbl {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 9px; border-radius: 7px; cursor: pointer;
	font-size: 13.5px; color: #334155; transition: background .12s;
}
.ecx-opt-lbl:hover { background: var(--ecr-soft) }
.ecx-opt-lbl input { accent-color: var(--ecr-brand); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0 }
.ecx-opt-lbl:has(input:checked) { background: var(--ecr-soft); font-weight: 600; color: var(--ecr-dark) }
.ecx-grupo-err { margin-top: 8px; font-size: 11.5px; color: #dc2626; font-weight: 600 }


/* Desplegable dentro de un grupo */
.ecx-grupo.is-select { display: flex; flex-direction: column }
.ecx-select {
	width: 100%; padding: 10px 12px;
	border: 1.5px solid var(--ecr-border); border-radius: 8px;
	font-size: 13.5px; font-family: inherit; color: var(--ecr-ink);
	background: #fff; cursor: pointer;
}
.ecx-select:focus { outline: none; border-color: var(--ecr-brand); box-shadow: 0 0 0 3px rgba(195,60,97,.12) }
.ecx-grupo.has-error .ecx-select { border-color: #dc2626 }

/* Alineación uniforme: todos los bloques con la misma caja */
.ecx-grupos { align-items: start }
.ecx-grupo { display: flex; flex-direction: column; height: 100% }
.ecx-opts { flex: 1 }

/* En pantallas anchas, los checks del formulario también en varias columnas */
@media (min-width: 1000px) {
	.ecr-checks-grid { grid-template-columns: repeat(3, 1fr) }
}
@media (min-width: 1350px) {
	.ecr-checks-grid { grid-template-columns: repeat(4, 1fr) }
}


/* ============================================================
   Refinamiento visual: cajas ordenadas y ancho completo
   ============================================================ */

/* El panel de cada paso vive dentro de una tarjeta */
.ecr-step {
	background: #fff;
	border: 1px solid var(--ecr-border);
	border-radius: 16px;
	padding: clamp(20px, 3vw, 34px);
	box-shadow: 0 1px 3px rgba(15,23,42,.04);
}

/* Encabezado del paso, separado del contenido */
.ecr-title { margin-bottom: 6px }
.ecr-desc {
	margin-bottom: 0;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--ecr-border);
}
.ecr-desc + * { margin-top: 24px }

/* Campos con más aire y agrupados en tarjetas suaves */
.ecr-field { margin-bottom: 24px }
.ecr-field > label {
	font-size: 14px;
	margin-bottom: 9px;
}
.ecr-grid-2 { gap: 4px 22px }
@media (min-width: 1100px) { .ecr-grid-2 { grid-template-columns: repeat(4, 1fr) } }

/* Las cajas de grupos: bordes suaves y altura pareja */
.ecx-grupo {
	border-radius: 13px;
	padding: 16px 18px;
	background: #fcfcfd;
	border-color: #e9edf2;
}
.ecx-grupo:hover { border-color: #dbe2ea; background: #fff }
.ecx-grupo.is-req { border-left-width: 3px }
.ecx-grupo-t {
	font-size: 12.5px;
	letter-spacing: .01em;
	padding-bottom: 9px;
	margin-bottom: 10px;
	border-bottom: 1px solid #eef1f5;
}

/* Cajas informativas más contenidas */
.ecr-legal-box, .ecr-privacy-box, .ecr-rules-box {
	border-radius: 12px;
	padding: 15px 18px;
}

/* Subidas: caja más alta y clara */
.ecr-upload {
	border-radius: 13px;
	padding: 30px 22px;
	background: #fcfcfd;
}

/* Botones al pie, dentro de la tarjeta */
.ecr-actions {
	margin-top: 28px;
	padding-top: 22px;
}

/* Planes: mejor respiración */
.ecr-plan { border-radius: 13px; padding: 20px 16px }
@media (min-width: 700px) and (max-width: 1099px) {
	.ecr-planes { grid-template-columns: repeat(3, 1fr) }
}

/* Nav lateral: tarjeta también */
.ecr-nav-list {
	background: #fff;
	border: 1px solid var(--ecr-border);
	border-radius: 14px;
	padding: 10px;
}
@media (max-width: 899px) {
	.ecr-nav-list { background: none; border: none; padding: 0; border-radius: 0 }
	.ecr-step { padding: 20px 18px; border-radius: 14px }
}

/* Progreso arriba de la tarjeta */
.ecr-progress { margin-bottom: 20px }

/* Días de disponibilidad: caja pareja */
.ecr-dias {
	background: #fcfcfd;
	border: 1px solid #e9edf2;
	border-radius: 13px;
	padding: 16px 18px;
	gap: 10px;
}

/* Resumen del último paso */
.ecr-resumen { border-radius: 13px }
.ecr-res-row { padding: 13px 18px }

/* Éxito */
.ecr-success-next { border-radius: 13px }

/* ============================================================
   Aprovechar el ancho completo
   ============================================================ */

/* Sin límite propio: el contenedor de la página ya lo pone */
.ecr { max-width: none; padding: 0 }

@media (min-width: 1100px) {
	.ecr { grid-template-columns: 260px 1fr; gap: 44px }
}
@media (min-width: 1500px) {
	.ecr { grid-template-columns: 280px 1fr; gap: 56px }
}

/* Campos de texto en más columnas cuando hay espacio */
@media (min-width: 900px)  { .ecr-grid-2 { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1200px) { .ecr-grid-2 { grid-template-columns: repeat(3, 1fr) } }
@media (min-width: 1500px) { .ecr-grid-2 { grid-template-columns: repeat(4, 1fr) } }

/* Grupos de categorías: más columnas en pantallas anchas */
@media (min-width: 1200px) { .ecx-grupos { grid-template-columns: repeat(4, 1fr) } }
@media (min-width: 1600px) { .ecx-grupos { grid-template-columns: repeat(5, 1fr) } }

/* Los campos de una sola línea no deben estirarse a todo el ancho */
.ecr-field > input[type=text],
.ecr-field > input[type=email],
.ecr-field > input[type=date],
.ecr-field > select { max-width: 520px }
.ecr-field > textarea { max-width: 900px }
.ecr-phone, .ecr-money { max-width: 300px }

/* La descripción del paso también con ancho de lectura */
.ecr-desc { max-width: 760px }

/* Zonas de subida: repartidas en columnas */
@media (min-width: 1000px) {
	.ecr-step[data-step="2"] .ecr-field { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start }
	.ecr-step[data-step="2"] .ecr-field > label { grid-column: 1 / -1 }
	.ecr-step[data-step="2"] .ecr-upload { grid-column: 1 }
	.ecr-step[data-step="2"] .ecr-hint { grid-column: 2; align-self: center; margin-top: 0 }
}

/* Planes: los cinco en fila en pantallas anchas */
@media (min-width: 1100px) { .ecr-planes { grid-template-columns: repeat(5, 1fr) } }

/* Fotos: más miniaturas por fila */
@media (min-width: 1200px) {
	.ecr-fotos-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) }
}

/* Resumen a dos columnas */
@media (min-width: 1000px) {
	.ecr-resumen { columns: 2; column-gap: 0; }
	.ecr-res-row { break-inside: avoid }
}

/* ============================================================
   Grupos de categorías: mismo lenguaje que los campos normales.
   Sin recuadro, sin línea de color: etiqueta arriba, campo abajo.
   ============================================================ */
.ecx-grupo,
.ecx-grupo.is-req,
.ecx-grupo.is-select {
	background: none;
	border: none;
	border-left: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.ecx-grupo:hover { background: none; border: none }

.ecx-grupo-t {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ecr-ink);
	letter-spacing: 0;
	text-transform: none;
	padding-bottom: 0;
	margin-bottom: 9px;
	border-bottom: none;
}
.ecx-req { color: var(--ecr-brand); font-weight: 600 }
.ecx-opt {
	font-size: 10px;
	font-weight: 600;
	color: #94a3b8;
	background: none;
	border: none;
	padding: 0 0 0 6px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* El desplegable ocupa el ancho de su columna, como los inputs */
.ecx-select {
	padding: 11px 13px;
	border: 1.5px solid var(--ecr-border);
	border-radius: 9px;
	font-size: 14px;
	background: #fff;
}

/* Las opciones múltiples: lista limpia, sin fondo de caja */
.ecx-opts { gap: 2px }
.ecx-opt-lbl {
	padding: 7px 9px;
	border-radius: 8px;
	font-size: 13.5px;
	border: 1px solid transparent;
}
.ecx-opt-lbl:hover { background: #f8fafc; border-color: var(--ecr-border) }
.ecx-opt-lbl:has(input:checked) {
	background: var(--ecr-soft);
	border-color: #f0cdd8;
	color: var(--ecr-dark);
	font-weight: 600;
}

/* Estado de error: solo el borde del control, no de una caja */
.ecx-grupo.has-error { background: none }
.ecx-grupo.has-error .ecx-select { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.08) }
.ecx-grupo.has-error .ecx-opts {
	border: 1.5px solid #dc2626;
	border-radius: 9px;
	padding: 4px;
	background: #fef2f2;
}
.ecx-grupo-err { margin-top: 7px; font-size: 12px }

/* Separación entre grupos, ahora que no hay caja que los delimite */
.ecx-grupos { gap: 22px 26px; align-items: start }

/* Grupos con muchas opciones: no dejar que estiren la fila */
.ecx-grupo .ecx-opts { max-height: 260px; overflow-y: auto; padding-right: 2px }
.ecx-grupo .ecx-opts::-webkit-scrollbar { width: 5px }
.ecx-grupo .ecx-opts::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px }

/* Precio dentro de la tarjeta de plan */
.ecr-plan-precio {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.35rem; font-weight: 700; color: var(--ecr-ink);
	line-height: 1.1; margin: 4px 0 2px;
}
.ecr-plan-precio small { display: block; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 500; color: var(--ecr-muted); margin-top: 2px }
.ecr-plan:has(input:checked) .ecr-plan-precio { color: var(--ecr-dark) }

/* ============================================================
   Bloques horizontales de categorías
   ============================================================ */
.ecx-wrap { display: flex; flex-direction: column; gap: 14px }

.ecx-bloque {
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #e9edf2;
	border-radius: 13px;
	transition: border-color .18s, box-shadow .18s;
}
.ecx-bloque:hover { border-color: #dbe2ea }
.ecx-bloque.has-error { border-color: #dc2626; background: #fef7f7 }

.ecx-bloque-head {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin-bottom: 14px; padding-bottom: 12px;
	border-bottom: 1px solid #f1f5f9;
}
.ecx-bloque-t {
	margin: 0; font-family: 'Inter', system-ui, sans-serif;
	font-size: 14.5px; font-weight: 700; color: var(--ecr-ink); letter-spacing: -.01em;
}
.ecx-tag {
	font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
	letter-spacing: .01em;
}
.ecx-tag-req { background: var(--ecr-soft); color: var(--ecr-dark) }
.ecx-tag-opt { background: #f1f5f9; color: #64748b }

/* Opciones como etiquetas en fila */
.ecx-pills { display: flex; flex-wrap: wrap; gap: 8px }
.ecx-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 15px;
	background: #f8fafc; border: 1.5px solid #e9edf2; border-radius: 999px;
	font-size: 13.5px; color: #475569; cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
	user-select: none;
}
.ecx-pill:hover { background: #fff; border-color: #cbd5e1 }
.ecx-pill input { accent-color: var(--ecr-brand); width: 15px; height: 15px; cursor: pointer; margin: 0 }
.ecx-pill:has(input:checked) {
	background: var(--ecr-soft); border-color: var(--ecr-brand);
	color: var(--ecr-dark); font-weight: 600;
}

/* Desplegable dentro del bloque */
.ecx-bloque .ecx-select {
	width: 100%; max-width: 460px;
	padding: 11px 14px;
	border: 1.5px solid var(--ecr-border); border-radius: 10px;
	font-size: 14px; font-family: inherit; background: #fff; cursor: pointer;
}
.ecx-bloque .ecx-select:focus { outline: none; border-color: var(--ecr-brand); box-shadow: 0 0 0 3px rgba(195,60,97,.1) }
.ecx-bloque.has-error .ecx-select { border-color: #dc2626 }

.ecx-bloque-err { margin-top: 10px; font-size: 12.5px; color: #dc2626; font-weight: 600 }

/* Encabezado de sección (Cómo sos / Qué ofrecés / Dónde atendés) */
.ecx-seccion {
	display: flex; align-items: center; gap: 12px;
	margin: 26px 0 14px;
}
.ecx-seccion:first-child { margin-top: 0 }
.ecx-seccion-t {
	margin: 0; font-family: 'Inter', sans-serif;
	font-size: 11px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ecr-brand); white-space: nowrap;
}
.ecx-seccion::after { content: ''; flex: 1; height: 1px; background: var(--ecr-border) }

@media (max-width: 620px) {
	.ecx-bloque { padding: 15px 16px }
	.ecx-pill { padding: 8px 13px; font-size: 13px }
}

/* ============ DATOS DE PAGO EN EL REGISTRO ============ */
.ecr-pago-box {
	margin: 22px 0;
	padding: 20px 22px;
	background: #f8fbff;
	border: 1px solid #bfdbfe;
	border-radius: 13px;
}
.ecr-pago-box[hidden] { display: none }
.ecr-pago-box h4 {
	margin: 0 0 6px; font-family: 'Inter', sans-serif;
	font-size: 14.5px; font-weight: 700; color: #1e40af;
}
.ecr-pago-intro { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: #475569 }

.ecr-cuentas { display: grid; grid-template-columns: 1fr; gap: 11px; margin-bottom: 16px }
@media (min-width: 640px) { .ecr-cuentas { grid-template-columns: repeat(3, 1fr) } }
.ecr-cuenta {
	display: flex; flex-direction: column; gap: 3px;
	padding: 13px 15px; background: #fff;
	border: 1px solid var(--ecr-border); border-radius: 10px;
}
.ecr-cuenta-t {
	font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--ecr-brand);
}
.ecr-cuenta-n {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.1rem; font-weight: 700; color: var(--ecr-ink);
	letter-spacing: .5px; word-break: break-all;
}
.ecr-cuenta-d { font-size: 11.5px; color: var(--ecr-muted) }

.ecr-pago-total {
	padding: 13px 16px; background: #fff;
	border: 1px solid var(--ecr-border); border-radius: 10px;
	font-size: 14px; color: var(--ecr-ink);
}
.ecr-pago-total strong {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.25rem; color: var(--ecr-dark);
}
.ecr-pago-desc { display: block; margin-top: 5px; font-size: 12px; color: var(--ecr-muted) }
.ecr-pago-nota { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: #64748b }

/* Bloque de pago en la pantalla de éxito */
.ecr-success-pago {
	margin-top: 22px; padding: 20px;
	background: #f8fbff; border: 1px solid #bfdbfe; border-radius: 13px;
	text-align: center;
}
.ecr-success-pago[hidden] { display: none }
.ecr-success-pago h4 { margin: 0 0 7px; font-size: 15px; font-weight: 700; color: #1e40af }
.ecr-success-pago p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: #475569 }
.ecr-btn-primary {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 26px; border-radius: 10px;
	background: linear-gradient(135deg, var(--ecr-brand), var(--ecr-dark));
	color: #fff; font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.ecr-btn-primary:hover { box-shadow: 0 7px 18px rgba(195,60,97,.3); color: #fff }

/* Categorías: cada una dice a quién atiende, para que nadie
   elija la que no le corresponde */
.ecr-radios-cat {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}
@media (min-width: 560px) {
	.ecr-radios-cat { grid-template-columns: repeat(2, 1fr) }
}
.ecr-radio-cat {
	align-items: flex-start;
	padding: 12px 14px;
}
.ecr-radio-cat span {
	display: flex; flex-direction: column; gap: 2px;
}
.ecr-radio-cat strong { font-size: 14.5px; font-weight: 600 }
.ecr-radio-cat small {
	font-size: 12px; line-height: 1.4; color: #6b7280; font-weight: 400;
}
.ecr-radio-cat input:checked ~ span small { color: #4b5563 }

/* ============================================================
   AVISO DE SPAM

   El correo con las credenciales es lo único que le permite entrar
   al panel. Si cae en spam y no lo busca, queda afuera de su propia
   cuenta, así que el aviso va destacado y antes de los pasos.
   ============================================================ */

.ecr-spam {
	display: flex; gap: 14px; align-items: flex-start;
	margin: 0 0 22px;
	padding: 18px 20px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 12px;
	text-align: left;
}
.ecr-spam-ico { font-size: 24px; line-height: 1; flex-shrink: 0 }
.ecr-spam strong {
	display: block; margin-bottom: 5px;
	font-size: 15px; color: #78350f;
}
.ecr-spam p {
	margin: 0;
	font-size: 13.5px; line-height: 1.65; color: #92400e;
}
.ecr-spam em { font-style: normal; font-weight: 600 }

@media (max-width: 520px) {
	.ecr-spam { flex-direction: column; gap: 10px; padding: 16px }
}

/* ============================================================
   AGREGAR UNA ZONA QUE NO ESTÁ

   Si su barrio no aparece, lo escribe y sigue. Bloquearla acá
   significaría perder el registro entero por un barrio faltante.
   ============================================================ */

.ecr-link {
	display: inline-block;
	margin-top: 7px; padding: 2px 0;
	background: none; border: none;
	font-family: inherit; font-size: 13px; color: #c33c61;
	text-decoration: underline; cursor: pointer;
}
.ecr-link:hover { color: #8e2d55 }

.ecr-zona-nueva {
	margin-top: 12px;
	padding: 14px;
	background: #fdf6f8;
	border: 1px solid #f5d5e0;
	border-radius: 10px;
}
.ecr-zona-nueva > label {
	display: block; margin-bottom: 8px;
	font-size: 13.5px; font-weight: 600; color: #8e2d55;
}
.ecr-zona-fila { display: flex; gap: 8px }
.ecr-zona-fila input {
	flex: 1; min-width: 0;
	padding: 10px 12px;
	border: 1px solid #d1d5db; border-radius: 8px;
	font-family: inherit; font-size: 14.5px;
}
.ecr-zona-fila input:focus {
	outline: none; border-color: #c33c61;
	box-shadow: 0 0 0 3px rgba(195,60,97,.12);
}
.ecr-btn-sm { padding: 10px 18px; font-size: 14px; white-space: nowrap }

.ecr-zona-msg {
	margin-top: 9px; padding: 9px 12px;
	border-radius: 8px; font-size: 13px;
}
.ecr-zona-msg.is-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d }
.ecr-zona-msg.is-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c }

@media (max-width: 480px) {
	.ecr-zona-fila { flex-direction: column }
	.ecr-btn-sm { width: 100% }
}

/* ============================================================
   PASO 10 · PLANES
   ============================================================ */

/* ---------- Cómo funcionan ---------- */
.ecr-planes-como {
	margin-top: 22px;
	padding: 20px 22px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}
.ecr-planes-como h3 {
	margin: 0 0 14px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.15rem; color: #0f172a;
}
.ecr-planes-como ol {
	margin: 0; padding-left: 20px;
	display: flex; flex-direction: column; gap: 9px;
}
.ecr-planes-como li {
	font-size: 14px; line-height: 1.6; color: #475569;
}
.ecr-planes-como li::marker { color: #c33c61; font-weight: 700 }
.ecr-planes-nota {
	margin: 14px 0 0; padding-top: 13px;
	border-top: 1px solid #e2e8f0;
	font-size: 13.5px; line-height: 1.6; color: #64748b;
}

/* ---------- Datos de pago ---------- */
.ecr-pago-datos {
	margin-top: 18px;
	padding: 22px;
	background: #fff;
	border: 2px solid #c33c61;
	border-radius: 12px;
}
.ecr-pago-datos[hidden] { display: none }

.ecr-pago-datos h3 {
	margin: 0 0 10px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.15rem; color: #8e2d55;
}

/* La vigencia es lo que más se pregunta: va grande y arriba */
.ecr-pago-vigencia {
	margin-bottom: 20px;
	padding: 16px 18px;
	background: linear-gradient(135deg, #fdf6f8, #fbeef2);
	border-left: 4px solid #c33c61;
	border-radius: 0 10px 10px 0;
	font-size: 16px; line-height: 1.55; color: #5c1f38;
}
.ecr-pago-vigencia strong {
	display: block; margin-bottom: 3px;
	font-size: 18px; font-weight: 700; color: #8e2d55;
}

.ecr-pago-instr {
	margin: 0 0 16px;
	font-size: 14px; line-height: 1.65; color: #475569;
}

.ecr-cuentas {
	display: grid; grid-template-columns: 1fr; gap: 10px;
	margin-bottom: 18px;
}
@media (min-width: 620px) { .ecr-cuentas { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 900px) { .ecr-cuentas { grid-template-columns: repeat(3, 1fr) } }

.ecr-cuenta {
	display: flex; flex-direction: column; gap: 3px;
	padding: 13px 15px;
	background: #f8fafc;
	border: 1px solid #e2e8f0; border-radius: 10px;
}
.ecr-cuenta-banco {
	font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: #8e2d55;
}
.ecr-cuenta-num {
	font-family: ui-monospace, 'SF Mono', monospace;
	font-size: 16px; font-weight: 700; color: #0f172a;
	letter-spacing: .5px;
	user-select: all;
}
.ecr-cuenta-tit, .ecr-cuenta-tipo { font-size: 12.5px; color: #64748b }

/* Aviso de cuándo pagar: evita que pague antes de ser aprobada */
.ecr-pago-cuando {
	padding: 14px 16px;
	background: #fffbeb;
	border: 1px solid #fde68a; border-radius: 10px;
	font-size: 13.5px; line-height: 1.65; color: #78350f;
}
.ecr-pago-cuando strong { color: #92400e }

/* ============================================================
   AYUDA POR WHATSAPP
   ============================================================ */

.ecr-nav-help p {
	margin: 5px 0 12px;
	font-size: 13px; line-height: 1.55;
}

/* El selector es largo a propósito: los estilos de enlace del tema
   cargan después y pisaban el color y el subrayado. Con esta
   especificidad gana sin recurrir a !important. */
.ecr .ecr-nav-help a.ecr-wa-ayuda,
a.ecr-wa-ayuda {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%;
	margin-top: 4px;
	padding: 12px 16px;
	background: #0e7c39;
	color: #ffffff;
	border: none;
	border-radius: 9px;
	font-family: inherit;
	font-size: 13.5px; font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-sizing: border-box;
	transition: background .18s, box-shadow .2s, transform .16s;
}

.ecr .ecr-nav-help a.ecr-wa-ayuda:hover,
.ecr .ecr-nav-help a.ecr-wa-ayuda:focus,
a.ecr-wa-ayuda:hover,
a.ecr-wa-ayuda:focus {
	background: #128c3e;
	color: #ffffff;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(14,124,57,.32);
	transform: translateY(-1px);
}

.ecr .ecr-nav-help a.ecr-wa-ayuda:visited,
a.ecr-wa-ayuda:visited { color: #ffffff }

.ecr-wa-ayuda svg { flex-shrink: 0; fill: currentColor }

/* ============================================================
   MODAL DE CONFIRMACIÓN

   No se cierra al descuido: el correo con las credenciales es lo
   único que le permite entrar al panel, y si lo cierra sin leerlo
   y ese correo cayó en spam, queda afuera de su propia cuenta.
   ============================================================ */

.ecr-modal {
	/* Se repiten acá porque el modal vive fuera de .ecr */
	--ecr-brand: #c33c61;
	--ecr-dark: #8e2d55;
	--ecr-ink: #0f172a;
	--ecr-muted: #64748b;
	--ecr-border: #e2e8f0;

	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	background: rgba(15,10,18,.82);
	backdrop-filter: blur(4px);
	overflow-y: auto;
}
.ecr-modal-caja {
	width: 100%; max-width: 500px;
	margin: auto;
	padding: 32px 30px 28px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(0,0,0,.35);
	text-align: center;
}

.ecr-modal-ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; margin-bottom: 16px;
	background: #dcfce7; color: #15803d;
	border-radius: 50%;
	font-size: 30px; font-weight: 700;
}
.ecr-modal-caja h2 {
	margin: 0 0 6px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.6rem; color: #0f172a;
}
.ecr-modal-sub {
	margin: 0 0 22px;
	font-size: 14.5px; color: #64748b;
}

.ecr-modal-mail {
	padding: 16px 18px; margin-bottom: 14px;
	background: #fdf6f8;
	border-left: 4px solid #c33c61;
	border-radius: 0 10px 10px 0;
	text-align: left;
}
.ecr-modal-mail strong { display: block; margin-bottom: 5px; font-size: 15px; color: #8e2d55 }
.ecr-modal-mail p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #475569 }
.ecr-modal-email {
	display: inline-block; margin-top: 3px;
	font-family: ui-monospace, monospace; font-size: 14px;
	font-weight: 600; color: #0f172a;
	word-break: break-all;
}

.ecr-modal-spam {
	padding: 16px 18px; margin-bottom: 18px;
	background: #fffbeb;
	border: 1px solid #fde68a; border-radius: 10px;
	text-align: left;
}
.ecr-modal-spam strong { display: block; margin-bottom: 8px; font-size: 14px; color: #92400e }
.ecr-modal-spam ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px }
.ecr-modal-spam li { font-size: 13px; line-height: 1.55; color: #78350f }

.ecr-modal-nota {
	margin: 0 0 20px;
	font-size: 13px; line-height: 1.6; color: #64748b;
	text-align: left;
}

/* El modal se inyecta en <body>, fuera de .ecr, donde viven las
   variables de color. Sin colores literales el gradiente no resuelve
   y el botón sale blanco sobre blanco. */
.ecr-modal-btn,
a.ecr-modal-btn,
.ecr-modal .ecr-btn-primary {
	display: block;
	width: 100%;
	margin: 0;
	padding: 15px 22px;
	background: linear-gradient(135deg, #c33c61, #8e2d55);
	color: #ffffff;
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15.5px; font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	box-shadow: 0 4px 14px rgba(195,60,97,.28);
	transition: box-shadow .2s, transform .16s;
}
.ecr-modal-btn:hover,
a.ecr-modal-btn:hover,
.ecr-modal-btn:focus,
a.ecr-modal-btn:focus {
	color: #ffffff;
	text-decoration: none;
	box-shadow: 0 7px 20px rgba(195,60,97,.38);
	transform: translateY(-1px);
}
.ecr-modal-btn:visited,
a.ecr-modal-btn:visited { color: #ffffff }

/* El botón de envío bloqueado hasta aceptar las declaraciones */
.ecr-btn.is-bloqueado,
#ecr-submit:disabled {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
}
.ecr-falta-aceptar {
	margin-top: 10px;
	font-size: 13px; color: #b45309;
	text-align: center;
}

@media (max-width: 520px) {
	.ecr-modal-caja { padding: 26px 20px 22px }
	.ecr-modal-caja h2 { font-size: 1.35rem }
}

/* ============================================================
   PROGRESO DE SUBIDA

   Una foto de 2 MB en 4G tarda unos veinte segundos. Sin nada en
   pantalla, la persona vuelve a tocar el botón pensando que no
   pasó nada, y termina subiendo la misma foto tres veces.
   ============================================================ */

.ecr-subidas {
	display: flex; flex-direction: column; gap: 8px;
	margin-top: 12px;
}

.ecr-subida {
	padding: 12px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	transition: opacity .35s, transform .35s, border-color .2s, background .2s;
}

.ecr-subida-info {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-bottom: 8px;
}
.ecr-subida-nombre {
	font-size: 13.5px; font-weight: 600; color: #334155;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ecr-subida-pct {
	flex-shrink: 0;
	font-family: ui-monospace, monospace;
	font-size: 13px; font-weight: 700; color: #c33c61;
}

.ecr-subida-barra {
	height: 6px;
	background: #e2e8f0;
	border-radius: 999px;
	overflow: hidden;
}
.ecr-subida-fill {
	height: 100%; width: 0;
	background: linear-gradient(90deg, #c33c61, #8e2d55);
	border-radius: 999px;
	transition: width .25s ease-out;
}

.ecr-subida-estado {
	margin-top: 7px;
	font-size: 12px; color: #64748b;
}

/* Mientras el servidor procesa, la barra respira: comunica que
   sigue trabajando aunque el porcentaje ya no avance */
.ecr-subida.is-procesando .ecr-subida-fill {
	background: linear-gradient(90deg, #c33c61, #e07a9a, #c33c61);
	background-size: 200% 100%;
	animation: ecr-pulso 1.4s linear infinite;
}
@keyframes ecr-pulso {
	from { background-position: 200% 0 }
	to   { background-position: -200% 0 }
}

.ecr-subida.is-ok {
	background: #f0fdf4;
	border-color: #bbf7d0;
}
.ecr-subida.is-ok .ecr-subida-fill { background: #22c55e; animation: none }
.ecr-subida.is-ok .ecr-subida-pct { color: #15803d }
.ecr-subida.is-ok .ecr-subida-estado { color: #15803d }

.ecr-subida.is-error {
	background: #fef2f2;
	border-color: #fecaca;
}
.ecr-subida.is-error .ecr-subida-fill { background: #ef4444; width: 100%; animation: none }
.ecr-subida.is-error .ecr-subida-pct { color: #b91c1c }
.ecr-subida.is-error .ecr-subida-estado { color: #b91c1c; font-weight: 500 }

.ecr-subida.is-saliendo {
	opacity: 0;
	transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
	.ecr-subida.is-procesando .ecr-subida-fill { animation: none }
	.ecr-subida-fill { transition: none }
}

/* ============================================================
   BOTONES · CORRECCIONES

   Los estilos de enlace del tema cargan después y le imponían
   color y subrayado a cualquier <a> con clase de botón.
   ============================================================ */

.ecr .ecr-btn,
button.ecr-btn,
a.ecr-btn {
	background: linear-gradient(135deg, #c33c61, #8e2d55);
	color: #ffffff;
	text-decoration: none;
}
.ecr .ecr-btn:hover,
button.ecr-btn:hover,
a.ecr-btn:hover {
	color: #ffffff; text-decoration: none;
	box-shadow: 0 8px 20px rgba(195,60,97,.32);
}
.ecr a.ecr-btn:visited { color: #ffffff }

.ecr .ecr-btn.ecr-btn-ghost,
button.ecr-btn.ecr-btn-ghost,
a.ecr-btn.ecr-btn-ghost {
	background: #f1f5f9; color: #64748b; box-shadow: none;
}
.ecr .ecr-btn.ecr-btn-ghost:hover { background: #e8edf3; color: #0f172a }

.ecr .ecr-btn-sm,
button.ecr-btn-sm,
a.ecr-btn-sm {
	padding: 10px 18px; font-size: 14px;
	background: linear-gradient(135deg, #c33c61, #8e2d55);
	color: #ffffff;
}

/* Aviso de cuenta existente: se devuelve antes del contenedor,
   así que la regla no puede depender de un ancestro */
.ecr-notice {
	max-width: 520px; margin: 40px auto;
	padding: 36px 30px;
	background: #fff;
	border: 1px solid #e2e8f0; border-radius: 16px;
	text-align: center;
}
.ecr-notice p {
	margin: 0 0 20px;
	font-size: 15px; color: #475569;
}

/* ---------- Comprobante de pago ----------

   Aparece solo con un plan pago. Va junto a los datos de la
   cuenta: pagar y adjuntar es un solo momento, y separarlos
   en dos pantallas hace que la mitad se olvide del segundo. */

.ecr-comprobante {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--linea, #e2e8f0);
}
.ecr-comprobante h3 {
	margin: 0 0 6px;
	font-size: 15px; font-weight: 600;
}

.ecr-drop {
	display: flex; align-items: center; gap: 14px;
	margin-top: 12px;
	padding: 18px;
	background: #fafbfc;
	border: 2px dashed var(--linea, #e2e8f0);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .18s, background .18s;
}
.ecr-drop:hover {
	border-color: var(--brand, #c33c61);
	background: #fdf6f8;
}
.ecr-drop input[type="file"] {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	overflow: hidden;
}

.ecr-drop-ico {
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 46px; height: 46px;
	background: #fff;
	border: 1px solid var(--linea, #e2e8f0);
	border-radius: 12px;
	color: var(--brand, #c33c61);
}

.ecr-drop-txt { display: flex; flex-direction: column; gap: 2px }
.ecr-drop-txt strong { font-size: 14.5px; color: var(--tinta, #1e293b) }
.ecr-drop-txt span { font-size: 12.5px; color: var(--gris, #64748b) }

.ecr-comp-elegido {
	display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
	margin-top: 12px;
	padding: 11px 14px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	font-size: 13.5px;
	color: #166534;
}
.ecr-comp-elegido.is-error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #b32d2e;
}
.ecr-comp-ok { color: #16a34a; font-weight: 700 }
.ecr-comp-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis }
.ecr-comp-peso { font-size: 12px; color: #94a3b8 }