/* ═══════════════════════════════════════════════
   Kin Maya — soyespiritual.top
   Tema PASTEL claro (coherente con el sitio), mobile-first (360px base).
   Autocontenido: no depende del tema ni de fuentes externas.
   Acentos: los 4 colores de clan (rojo, blanco, azul, amarillo) en version suave.
   ═══════════════════════════════════════════════ */

:root {
	--km-bg:        #ffffff;
	--km-surface:   #fdfaff;
	--km-ink:       #3f3a4f;
	--km-ink-soft:  #6b6580;
	--km-line:      #e8e1f2;
	--km-lila:      #ece4f8;
	--km-rosa:      #fbe6ee;
	--km-crema:     #fff6e3;
	--km-accent:    #7b5ea7;
	--km-accent-dk: #624888;
	--km-radius:    16px;
	--km-shadow:    0 6px 22px rgba(123, 94, 167, 0.10);
	--km-font-head: Georgia, 'Times New Roman', serif;
	--km-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	/* Colores de clan, version suave (fondo / tinta / borde) */
	--km-rojo-bg:     #fbdada;
	--km-rojo-ink:    #a33a3a;
	--km-rojo-line:   #efb3b3;
	--km-blanco-bg:   #f5f3ef;
	--km-blanco-ink:  #655e53;
	--km-blanco-line: #d6cfc2;
	--km-azul-bg:     #d9e7f9;
	--km-azul-ink:    #34609f;
	--km-azul-line:   #a9c5ea;
	--km-amarillo-bg:   #fbf0c4;
	--km-amarillo-ink:  #7f6200;
	--km-amarillo-line: #ecd783;
}

/* ─── Raiz ─── */
.km-root {
	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 0 24px;
	color: var(--km-ink);
	font-family: var(--km-font-body);
	font-size: 16px;
	line-height: 1.65;
}
.km-root *, .km-root *::before, .km-root *::after { box-sizing: border-box; }
.km-root [hidden] { display: none !important; }
.km-root p { margin: 0 0 12px; }

/* Color de clan: cada contenedor con .km-c-<color> define --km-c-* */
.km-c-rojo     { --km-c-bg: var(--km-rojo-bg);     --km-c-ink: var(--km-rojo-ink);     --km-c-line: var(--km-rojo-line); }
.km-c-blanco   { --km-c-bg: var(--km-blanco-bg);   --km-c-ink: var(--km-blanco-ink);   --km-c-line: var(--km-blanco-line); }
.km-c-azul     { --km-c-bg: var(--km-azul-bg);     --km-c-ink: var(--km-azul-ink);     --km-c-line: var(--km-azul-line); }
.km-c-amarillo { --km-c-bg: var(--km-amarillo-bg); --km-c-ink: var(--km-amarillo-ink); --km-c-line: var(--km-amarillo-line); }

/* ─── Tarjetas ─── */
.km-card {
	background: linear-gradient(160deg, var(--km-surface) 0%, var(--km-bg) 70%);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	box-shadow: var(--km-shadow);
	padding: 20px 18px;
	margin: 0 0 16px;
}

.km-eyebrow {
	margin: 0 0 12px;
	color: var(--km-ink-soft);
	font-size: 14px;
	letter-spacing: 0.02em;
}

/* ─── Cabecera de kin: circulo del sello + tono + titulo ─── */
.km-kin-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-radius: 14px;
	background: var(--km-c-bg, var(--km-lila));
	border: 1px solid var(--km-c-line, var(--km-line));
	color: var(--km-c-ink, var(--km-accent));
}

.km-seal {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--km-bg);
	border: 4px solid var(--km-c-ink, var(--km-accent));
	box-shadow: inset 0 0 0 5px var(--km-c-bg, var(--km-lila));
}
.km-seal-n {
	font-family: var(--km-font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
}

.km-tone { flex: 0 0 auto; display: block; max-width: 52px; height: auto; }

.km-kin-title { min-width: 0; }
.km-kin-num {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.km-kin-name {
	margin: 0;
	font-family: var(--km-font-head);
	font-size: clamp(22px, 6vw, 30px);
	line-height: 1.15;
	font-weight: 700;
	color: var(--km-ink);
	overflow-wrap: anywhere;
}
.km-kin-tone { margin: 4px 0 0; font-size: 15px; color: var(--km-ink); }

.km-wave { margin: 14px 0 4px; color: var(--km-ink-soft); font-size: 15px; }

/* ─── Texto editorial (solo si existe) ─── */
.km-text { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--km-line); }
.km-text-title {
	margin: 0 0 8px;
	font-family: var(--km-font-head);
	font-size: 18px;
	color: var(--km-ink);
}
.km-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.km-chips li {
	margin: 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--km-lila);
	color: var(--km-accent-dk);
	font-size: 13px;
}
.km-more-text summary, .km-how summary {
	cursor: pointer;
	color: var(--km-accent-dk);
	font-weight: 600;
	padding: 8px 0;
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* ─── Enlaces y "como se calcula" ─── */
.km-link { color: var(--km-accent-dk); text-decoration: underline; text-underline-offset: 3px; }
.km-link:hover, .km-link:focus { color: var(--km-ink); }
.km-more { margin: 4px 0 12px; }

.km-how {
	margin-top: 8px;
	padding: 4px 16px;
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	background: var(--km-crema);
}
.km-how-body { padding-bottom: 6px; font-size: 15px; color: var(--km-ink); }

/* ─── Formulario ─── */
.km-form {
	background: linear-gradient(160deg, var(--km-rosa) 0%, var(--km-lila) 100%);
	border-radius: var(--km-radius);
	padding: 20px 18px;
	margin: 0 0 16px;
	box-shadow: var(--km-shadow);
}
.km-fieldset { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.km-fieldset legend {
	padding: 0;
	margin-bottom: 10px;
	font-family: var(--km-font-head);
	font-size: 18px;
	color: var(--km-ink);
}
.km-row { display: grid; grid-template-columns: 1fr 1.7fr 1.2fr; gap: 10px; }
.km-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.km-field label { font-size: 13px; color: var(--km-ink-soft); }
.km-field select, .km-field input {
	width: 100%;
	height: 50px;
	padding: 0 12px;
	border: 1px solid var(--km-line);
	border-radius: 12px;
	background: var(--km-bg);
	color: var(--km-ink);
	font: inherit;
	font-size: 16px; /* evita el zoom automatico de iOS */
}
.km-field select:focus, .km-field input:focus, .km-btn:focus-visible, .km-btn-ghost:focus-visible {
	outline: 3px solid var(--km-accent);
	outline-offset: 2px;
}
.km-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 14px; color: var(--km-ink); }
.km-check input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--km-accent); }
.km-error {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--km-rojo-bg);
	color: var(--km-rojo-ink);
	font-size: 14px;
}
.km-noscript { padding: 12px; background: var(--km-crema); border-radius: 10px; }

.km-btn, .km-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 22px;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}
.km-btn { width: 100%; border: 0; background: var(--km-accent); color: #fff; }
.km-btn:hover { background: var(--km-accent-dk); }
.km-btn-ghost { border: 1px solid var(--km-accent); background: var(--km-bg); color: var(--km-accent-dk); font-weight: 600; }
.km-btn-ghost:hover { background: var(--km-lila); }

/* ─── Resultados de la calculadora ─── */
.km-results { margin-top: 4px; }
.km-results .km-card + .km-card { margin-top: 0; }
.km-h3 {
	margin: 0 0 10px;
	font-family: var(--km-font-head);
	font-size: 20px;
	color: var(--km-ink);
}
.km-sub { margin: -4px 0 12px; font-size: 14px; color: var(--km-ink-soft); }

.km-oracle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.km-oracle li { margin: 0; min-width: 0; }
.km-oracle .km-o-destino { grid-column: 1 / -1; }
.km-o-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--km-c-bg);
	border: 1px solid var(--km-c-line);
	color: var(--km-c-ink);
}
.km-o-card .km-seal { width: 40px; height: 40px; border-width: 3px; box-shadow: inset 0 0 0 3px var(--km-c-bg); }
.km-o-card .km-seal-n { font-size: 13px; }
.km-o-card .km-tone { max-width: 34px; }
.km-o-card > div { flex: 1 1 100%; min-width: 0; }
.km-o-role { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.km-o-name { display: block; color: var(--km-ink); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.km-o-kin  { display: block; color: var(--km-ink-soft); font-size: 13px; }

.km-dl { margin: 0; display: grid; gap: 4px; }
.km-dl dt { font-size: 13px; color: var(--km-ink-soft); }
.km-dl dd { margin: 0 0 8px; color: var(--km-ink); font-weight: 600; }

.km-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.km-note { font-size: 13px; color: var(--km-ink-soft); }

/* ─── Relacion personal (kin de hoy) ─── */
.km-personal { background: linear-gradient(160deg, var(--km-crema) 0%, var(--km-bg) 80%); }
.km-personal .km-h3 { font-size: 18px; }

/* ─── Animacion suave, respetando preferencias ─── */
@media (prefers-reduced-motion: no-preference) {
	.km-results .km-card { animation: km-in 0.35s ease-out both; }
	@keyframes km-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ─── Pantallas anchas ─── */
@media (min-width: 640px) {
	.km-card, .km-form { padding: 26px 28px; }
	.km-btn { width: auto; min-width: 240px; }
	.km-oracle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.km-seal { width: 64px; height: 64px; }
}

/* Pantallas muy angostas */
@media (max-width: 359px) {
	.km-row { grid-template-columns: 1fr 1fr; }
	.km-field-a { grid-column: 1 / -1; }
}

/* Blindaje frente al tema (medido con getComputedStyle en soyespiritual.top local, 2026-10-12):
   el tema daba padding-left 40px a las listas, margin-top 64px a los h2 y color al 62 % a los p. */
.km-root ul.km-chips { padding-left: 0 !important; margin-left: 0 !important; }
.km-root h2.km-kin-name { margin: 0 !important; }
.km-root .km-text p { color: var(--km-ink) !important; }/* El tema imponía color rgb(122,74,160) sobre el fondo rgb(123,94,167) del botón (contraste ~1:1, ilegible)
   y mayúsculas con espaciado. Medido en soyespiritual.top local, 2026-10-12. */
.km-root .km-btn, .km-root .km-btn:hover, .km-root .km-btn:focus, .km-root .km-btn:visited {
	color: #ffffff !important; text-transform: none !important; letter-spacing: normal !important;
}