/* CALATHEA Demos — Frontend (estética Win10: bordes rectos, groupboxes prolijos) */
.calathea-demo-form { max-width: 760px; margin: 0 auto; }

.calathea-demo-block {
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    padding: 20px 24px 24px;
    margin-bottom: 20px;
    background: #fff;
}

/* Título del grupo ADENTRO del box, como header con filete */
.calathea-demo-block legend {
    float: left;
    width: 100%;
    margin: 0 0 16px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #e6e6e6;
    font-size: 1.05em;
    font-weight: 700;
    color: #1a1a1a;
}
.calathea-demo-block > * { clear: both; }

.calathea-field { margin-bottom: 16px; }
.calathea-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.calathea-field small { display: block; color: #767676; font-size: .85em; margin-top: 4px; }

.calathea-field input[type="text"],
.calathea-field input[type="email"],
.calathea-field input[type="url"],
.calathea-field input[type="number"],
.calathea-field textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #bfbfbf;
    border-radius: 2px;
    background: #fff;
    font-size: 1em;
}
.calathea-field input:focus,
.calathea-field textarea:focus {
    outline: 2px solid #2c5f2d;
    outline-offset: 0;
    border-color: #2c5f2d;
}

.calathea-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.calathea-field-row .calathea-field { flex: 1; min-width: 140px; }

.calathea-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.calathea-checkbox { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.calathea-radio-group { display: flex; gap: 16px; }

.req { color: #c0392b; }
.calathea-field-error { display: block; color: #c0392b; font-size: .85em; margin-top: 4px; }
.calathea-demo-error { background: #fdecea; border: 1px solid #c0392b; color: #c0392b; padding: 12px; border-radius: 2px; margin-bottom: 18px; }

.calathea-demo-success { background: #eaf7ea; border: 1px solid #2e7d32; color: #2e7d32; padding: 22px; border-radius: 2px; }

/* Contador de bio con semáforo */
.calathea-bio-counter { font-variant-numeric: tabular-nums; }
.calathea-bio-counter.ok   { color: #767676; }
.calathea-bio-counter.warn { color: #b26a00; font-weight: 600; }
.calathea-bio-counter.full { color: #c0392b; font-weight: 700; }

.calathea-demo-submit {
    display: block; width: 100%;
    padding: 13px;
    background: #1a1a1a; color: #fff;
    border: 1px solid #1a1a1a; border-radius: 1px;
    font-size: 1.02em; font-weight: 700; letter-spacing: .5px;
    cursor: pointer;
}
.calathea-demo-submit:hover { background: #333; }
.calathea-demo-submit:active { background: #000; }

/* Honeypot invisible */
.calathea-hp { position: absolute; left: -9999px; }

@media (max-width: 600px) { .calathea-field-row { flex-direction: column; } }

/* ═══════════════════════════════════════════════
   BOTÓN DE ENVÍO: BLINDAJE DE ESQUEMA DE COLOR
   Light = Win10 clásico · Dark = paleta del sello
   Forced-colors = colores del sistema (nunca negro sobre negro)
   ═══════════════════════════════════════════════ */
.calathea-demo-form {
	color-scheme: light dark;
}

/* Base light: el look original que funcionaba perfecto */
.calathea-demo-form .calathea-demo-submit {
	background: #ffffff;
	border: 2px solid #000000;
	color: #000000;
}

/* Dark mode del SO/navegador: versión diseñada, no invertida */
@media (prefers-color-scheme: dark) {
	.calathea-demo-form .calathea-demo-submit {
		background: #0f0f0f;
		border: 2px solid #ccecaf;
		color: #ccecaf;
	}
}

/* Contraste alto / forzados (Win, Mac, Linux): colores del sistema,
   siempre legibles, nunca negro sobre negro */
@media (forced-colors: active) {
	.calathea-demo-form .calathea-demo-submit {
		forced-color-adjust: none;
		background: ButtonFace;
		color: ButtonText;
		border: 2px solid ButtonText;
	}
}