/* ============================================================
   Carta Numerológica Tántrica — Kaiketek
   Estilos transcritos del diseño de handoff (Claude Design):
   "Carta Numerologica.dc.html". Identidad Kaiketek:
   Montserrat / Poppins, paleta azul–turquesa–verde.
   ============================================================ */

:root {
  --azul:        #0071ed;
  --turquesa:    #5fd3c8;
  --verde:       #03905d;
  --texto:       #333333;
  --texto-suave: #5b6266;
  --tenue:       #9a9a9a;
  --borde:       #e2e6e8;
  --blanco:      #ffffff;
  --panel:       #f5f7f8;
  --chip-bg:     #eaf6f3;
  --resalte-bg:  #eef6ff;
  --maestro-bg:  #e6f7ea;
  --error-bg:    #fdecec;
  --error-txt:   #a12626;
  --radio:       16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.6;
}

h1, h2, h3, .wordmark, button {
  font-family: 'Montserrat', sans-serif;
}

@keyframes ktFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Cabecera ---------- */
.cabecera {
  position: relative;
  padding: 40px 24px 28px;
  text-align: center;
  background: linear-gradient(135deg, #eaf6f3 0%, #ffffff 55%);
}

.cabecera-marca {
  position: absolute;
  top: 20px;
  right: 24px;
  height: 34px;
  width: auto;
  opacity: 0.9;
}

.titulo-pagina {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.3px;
  color: #0573c0;
}

.subtitulo {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--texto-suave);
}

/* ---------- Layout ---------- */
.contenedor {
  max-width: 840px;
  margin: 0 auto;
  padding: 8px 20px 64px;
}

/* ---------- Formulario ---------- */
.tarjeta.formulario {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px 28px 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  margin-top: 8px;
}

.formulario h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}

.ayuda {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--texto-suave);
}

.campos-fecha {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 90px;
}

.campo-anio { flex: 1.4; min-width: 120px; }

.campo label {
  font-size: 13px;
  font-weight: 500;
}

.campo input {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  padding: 11px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  width: 100%;
}

.campo input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 113, 237, .12);
}

#btn-calcular {
  margin-top: 22px;
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blanco);
  background: linear-gradient(90deg, #0071ed, #03905d);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease;
}

#btn-calcular:not(:disabled):hover { transform: translateY(-1px); }

#btn-calcular:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.mensaje-error {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--error-bg);
  color: var(--error-txt);
  font-size: 14px;
}

/* ---------- Resultado ---------- */
.resultado {
  margin-top: 32px;
  animation: ktFadeUp 260ms ease-out;
}

.aviso-reflexiva {
  border-radius: var(--radio);
  padding: 20px 22px;
  margin-bottom: 22px;
  background: var(--chip-bg);
  border: 1px solid var(--turquesa);
}

.aviso-reflexiva h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--verde);
}

.aviso-reflexiva p {
  margin: 0;
  font-size: 14px;
}

/* ---------- Diagrama tradicional de los 5 factores ---------- */
.carta-diagrama {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "alma  regalo  mision"
    "karma destino mision";
  gap: 12px 18px;
  align-items: stretch;
  margin-bottom: 16px;
}

.area-alma    { grid-area: alma; }
.area-karma   { grid-area: karma; }
.area-regalo  { grid-area: regalo; }
.area-destino { grid-area: destino; }
.area-mision  { grid-area: mision; align-self: stretch; }

.tarjeta-numero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 12px;
  text-align: center;
}

.tarjeta-numero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radio) var(--radio) 0 0;
}
.grupo-desarrollar::before { background: var(--azul); }
.grupo-utilizar::before    { background: var(--verde); }

.tarjeta-numero .valor {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  color: var(--azul);
}
.grupo-utilizar .valor { color: var(--verde); }

/* ---------- Tooltip por aspecto ---------- */
.info-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--texto-suave);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
}

.info-btn:hover,
.info-btn:focus {
  color: var(--azul);
  border-color: var(--azul);
  outline: none;
}

.tarjeta-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 210px;
  background: #2a2f33;
  color: #ffffff;
  text-align: left;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 11px;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease;
  z-index: 20;
  pointer-events: none;
}

.tarjeta-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #2a2f33;
}

/* En escritorio basta pasar el cursor por cualquier parte de la caja.
   En táctil (sin cursor) se usa el foco del botón "i". */
.tarjeta-numero:hover .tarjeta-tooltip,
.info-btn:focus + .tarjeta-tooltip {
  opacity: 1;
  visibility: visible;
}

.tarjeta-numero .etiqueta {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.badge-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}
.carta-diagrama.con-maestros .badge-slot {
  min-height: 24px;
  margin-top: 8px;
}

.tarjeta-numero .badge-maestro {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--verde);
  background: var(--maestro-bg);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ---------- Guía utilizar / desarrollar ---------- */
.carta-guia {
  margin-bottom: 28px;
}

.carta-guia-texto {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--texto-suave);
  text-align: center;
}
.carta-guia-texto strong { color: var(--texto); font-weight: 600; }
.carta-guia-texto em { font-style: normal; font-weight: 600; }

.carta-leyenda {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.leyenda-item {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--texto-suave);
}

.leyenda-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
.dot-desarrollar { background: var(--azul); }
.dot-utilizar    { background: var(--verde); }

/* ---------- Números repetidos ---------- */
.repetidos {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px 24px 24px;
  margin-bottom: 32px;
  background: var(--panel);
}

.repetidos h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--verde);
}

.repetidos-intro {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--texto-suave);
}

.repetido {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 14px 16px;
}

.repetido + .repetido { margin-top: 10px; }

.repetido-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.repetido-numero {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--verde);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 14px;
}

.repetido-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.repetido-factores {
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--azul);
}

.repetido-texto {
  margin: 6px 0 0;
  font-size: 13.5px;
}

.repetido-apoyo {
  margin: 10px 0 0;
  font-size: 13px;
  background: var(--maestro-bg);
  color: #2b6b4f;
  border-radius: 10px;
  padding: 8px 12px;
}

.pill-infinito {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--verde);
  background: var(--maestro-bg);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- Detalle por número ---------- */
.detalle-numeros {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.detalle-numero {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px 24px 26px;
  background: var(--blanco);
}

.detalle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.detalle-head h2 {
  margin: 0;
  font-size: 18px;
}

.detalle-head .cuerpo-nombre {
  font-size: 13px;
  color: var(--texto-suave);
  font-weight: 500;
}

.pill-maestro {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--verde);
  background: var(--maestro-bg);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
}

.blurb {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--texto-suave);
  font-style: italic;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.chip {
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--verde);
}

.cualidad {
  margin: 16px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  background: var(--resalte-bg);
  border-radius: 10px;
  padding: 10px 14px;
}

.descripcion {
  margin: 16px 0 0;
  font-size: 14px;
}

.frase-clave {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--azul);
}

.frase-clave strong {
  letter-spacing: 0.4px;
}

/* Teaser del contenido bloqueado (Nivel 1). No es contenido premium: solo el
   gancho que invita a desbloquear la carta completa. */
.candado-adelanto {
  margin: 18px 0 0;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--texto-suave);
  background: var(--resalte-bg);
  border-radius: 10px;
  border: 1px dashed var(--borde);
}

.bloque {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}

.bloque--simple { margin-top: 14px; }

.grupo-titulo {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.grupo-titulo.verde { color: var(--verde); }
.grupo-titulo.gris  { color: var(--texto-suave); }

.lista {
  margin: 0 0 4px;
  padding-left: 20px;
  font-size: 13.5px;
}

.lista li { margin-bottom: 4px; }

.lista.gris { color: var(--texto-suave); }

.no-documentado {
  margin: 0;
  font-size: 12.5px;
  color: var(--tenue);
  font-style: italic;
}

.decreto {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 500;
  background: var(--resalte-bg);
  border-radius: 10px;
  padding: 10px 14px;
}

/* ---------- Pie ---------- */
.pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 20px 44px;
  border-top: 3px solid;
  border-image: linear-gradient(90deg, #037BEC, #2FA9DA, #56CFC0, #50BA56, #4DA207) 1;
  margin-top: 8px;
}

.pie-logo {
  height: 28px;
  width: auto;
  opacity: 0.85;
}

.pie-credito {
  margin: 0;
  font-size: 12px;
  color: var(--tenue);
  text-align: center;
}

.wordmark-inline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.wordmark-inline .wm-kai { color: #0573c0; }
.wordmark-inline .wm-ke  { color: #5fd3c8; }
.wordmark-inline .wm-tek { color: #03905d; }

.pie-tagline {
  margin: 0;
  font-size: 12px;
  color: var(--tenue);
  font-style: italic;
  text-align: center;
}

.pie-tagline strong {
  font-weight: 700;
  font-style: normal;
}

.pie-tagline .txt-azul  { color: #0071ed; font-style: normal; }
.pie-tagline .txt-verde { color: #03905d; font-style: normal; }

@media (max-width: 560px) {
  .carta-diagrama {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "alma   regalo"
      "karma  destino"
      "mision mision";
  }
  .area-mision { align-self: stretch; }
}

/* ============================================================
   Cuenta / Autenticación (Bloque 3) — identidad Kaiketek
   ============================================================ */

/* ---------- Barra de cuenta (cabecera) ---------- */
.cuenta-barra {
  position: absolute;
  top: 18px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.cuenta-btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--blanco);
  background: var(--azul);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}
.cuenta-btn:hover { background: #005fc4; }
.cuenta-btn:active { transform: translateY(1px); }

.cuenta-btn-salir {
  background: transparent;
  color: var(--azul);
  border: 1px solid var(--borde);
  padding: 7px 14px;
}
.cuenta-btn-salir:hover { background: var(--panel); }

.cuenta-email {
  font-size: 13px;
  color: var(--texto-suave);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuenta-nota { font-size: 12px; color: var(--tenue); }

/* ---------- Overlay del modal ---------- */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 40, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  animation: ktFadeUp .18s ease;
}
.auth-overlay[hidden] { display: none; }
body.auth-abierto { overflow: hidden; }

.auth-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 30px 28px 26px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}

.auth-cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--tenue);
  font-size: 18px;
  cursor: pointer;
  border-radius: 8px;
  line-height: 1;
}
.auth-cerrar:hover { background: var(--panel); color: var(--texto); }

.auth-marca {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  margin: 4px auto 14px;
  background: linear-gradient(90deg, var(--azul), var(--turquesa) 55%, var(--verde));
}

.auth-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 22px;
  text-align: center;
  color: #0573c0;
  margin: 0 0 18px;
}

/* ---------- Mensajes ---------- */
.auth-mensaje {
  font-size: 13.5px;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.auth-error { background: var(--error-bg); color: var(--error-txt); }
.auth-ok { background: var(--maestro-bg); color: var(--verde); }

/* ---------- Botones sociales ---------- */
.auth-social { display: flex; flex-direction: column; gap: 8px; }
.auth-social-btn {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background .15s ease;
}
.auth-social-btn:hover:not(:disabled) { background: var(--panel); }
.auth-social-off { opacity: .5; cursor: not-allowed; }
.auth-social-nota {
  font-size: 12px;
  color: var(--tenue);
  text-align: center;
  margin: 4px 0 0;
}

/* ---------- Separador ---------- */
.auth-sep {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--tenue);
  font-size: 12px;
  margin: 16px 0;
}
.auth-sep::before, .auth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);
}
.auth-sep span { padding: 0 12px; }

/* ---------- Formulario ---------- */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-campo { display: flex; flex-direction: column; gap: 6px; }
.auth-campo label {
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-suave);
}
.auth-campo input {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--blanco);
  color: var(--texto);
}
.auth-campo input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 113, 237, .12);
}

.auth-hint { font-size: 12px; color: var(--tenue); margin: -6px 0 0; }
.auth-intro { font-size: 14px; color: var(--texto-suave); margin: 0 0 16px; }

/* ---------- Consentimiento Ley 1581 ---------- */
.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--texto-suave);
  line-height: 1.45;
  cursor: pointer;
}
.auth-consent input { margin-top: 3px; flex-shrink: 0; }
.auth-consent a { color: var(--azul); }

/* ---------- Botón primario ---------- */
.auth-primario {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--blanco);
  background: var(--azul);
  border: none;
  border-radius: 10px;
  padding: 13px 16px;
  cursor: pointer;
  margin-top: 4px;
  transition: background .15s ease;
}
.auth-primario:hover:not(:disabled) { background: #005fc4; }
.auth-primario:disabled { background: #a9cbf3; cursor: not-allowed; }

/* ---------- Pie del modal (enlaces) ---------- */
.auth-pie {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
  text-align: center;
}
.auth-enlace {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--azul);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}
.auth-enlace:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .cuenta-barra { top: 14px; left: 16px; }
  .auth-modal { padding: 26px 20px 22px; }
}