/**
 * Panel del creador y landing de postulación.
 * Sin framework: hereda tipografía y color del tema de bloques.
 */

.dmm-cre-panel,
.dmm-cre-registro { --dmm-cre-borde: #e6e6e6; --dmm-cre-suave: #f7f7f8; }

/* ---------- KPIs ---------- */
.dmm-cre-kpis {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 12px;
	margin: 0 0 24px;
}

.dmm-cre-kpi {
	border: 1px solid var( --dmm-cre-borde );
	border-radius: 10px;
	padding: 14px 16px;
	background: #fff;
}

.dmm-cre-kpi strong { display: block; font-size: 1.5rem; line-height: 1.25; margin: 2px 0; }
.dmm-cre-kpi-t { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }

/* ---------- Bloques ---------- */
.dmm-cre-bloque {
	border: 1px solid var( --dmm-cre-borde );
	border-radius: 10px;
	padding: 16px;
	background: var( --dmm-cre-suave );
	margin: 0 0 24px;
}

.dmm-cre-mini { font-size: .82rem; opacity: .7; display: block; margin-top: 4px; }

/* ---------- Copiar ---------- */
.dmm-cre-copiar { margin-bottom: 14px; }
.dmm-cre-copiar label { font-weight: 600; font-size: .88rem; display: block; margin-bottom: 4px; }
.dmm-cre-copiar > div { display: flex; gap: 8px; }

.dmm-cre-copiar input {
	flex: 1 1 auto;
	min-width: 0;              /* sin esto el input desborda el flex en móvil */
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .9rem;
	background: #fff;
}

.dmm-cre-copiar .button { flex: 0 0 auto; }
.dmm-cre-copiado { background: #1f9d55 !important; color: #fff !important; }

/* ---------- Tablas ---------- */
.dmm-cre-tabla { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: .92rem; }
.dmm-cre-tabla th,
.dmm-cre-tabla td { padding: 9px 10px; border-bottom: 1px solid var( --dmm-cre-borde ); text-align: left; }
.dmm-cre-tabla th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; opacity: .65; }

/* Ajuste por devolución: se distingue sin gritar. */
.dmm-cre-tabla tr.dmm-cre-ajuste td { background: #fff8e5; }

/* En móvil la tabla scrollea sola en vez de romper el layout. */
@media ( max-width: 600px ) {
	.dmm-cre-tabla { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- Avisos ---------- */
.dmm-cre-ok,
.dmm-cre-aviso,
.dmm-cre-error {
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0 0 20px;
	border-left: 4px solid;
}

.dmm-cre-ok    { background: #eefaf1; border-color: #1f9d55; }
.dmm-cre-aviso { background: #fff8e5; border-color: #e0a800; }
.dmm-cre-error { background: #fdeeee; border-color: #d63638; }

.dmm-cre-ok h3,
.dmm-cre-aviso h3,
.dmm-cre-error h3 { margin: 0 0 6px; font-size: 1.05rem; }

/* ---------- Formularios ---------- */
.dmm-cre-form label { font-weight: 600; font-size: .9rem; }
.dmm-cre-form input[type="text"],
.dmm-cre-form input[type="url"],
.dmm-cre-form input[type="number"],
.dmm-cre-form select,
.dmm-cre-form textarea { width: 100%; max-width: 460px; }

.dmm-cre-trato {
	border: 1px dashed var( --dmm-cre-borde );
	border-radius: 10px;
	padding: 16px;
	margin: 0 0 20px;
}