/* Numerologia Apps — estilos autónomos (prefijo .napp), pensados para convivir
   con cualquier tema y con tarot-apps (.tapp), oraculo-apps (.oapp) y
   mancia-apps (.mapp). Todo fluido: ninguna medida fija de escena. */

/* El width: 100 % no sobra. Si el tema mete la app dentro de un contenedor
   flex o grid, sin él la caja se mide por su contenido y las rejillas de los
   formularios la estiran por encima de la pantalla en móvil. */
.napp { width: 100%; max-width: 820px; margin: 0 auto; font-size: 1rem; }
.napp * { box-sizing: border-box; }
.napp [hidden] { display: none !important; }

.napp .napp-intro {
  margin: 0;
  font-size: clamp(.95rem, 2.7vw, 1.08rem);
  line-height: 1.5;
  max-width: 40rem;
}

.napp .napp-btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: #1a1030;
  padding: .62rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd86b, #f0ab1e);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  transition: transform .12s ease, filter .12s ease;
}
.napp .napp-btn:hover { filter: brightness(1.07); }
.napp .napp-btn:active { transform: translateY(1px); }
.napp .napp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.napp button { -webkit-tap-highlight-color: transparent; }
.napp button:focus { outline: none; }
.napp button:focus-visible { outline: 2px solid #ffd76b; outline-offset: 3px; }

/* ── Calculadora numerológica ───────────────────────────────────── */
.napp .napp-ca {
  position: relative;
  border-radius: 14px;
  padding: 1.4rem 1.2rem 1.7rem;
  background:
    radial-gradient(1px 1px at 15% 20%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 82% 14%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 70% 76%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 50% 0%, #2c1b64 0%, #1a1140 48%, #0b0720 100%);
  color: #efe9ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}
.napp .napp-ca .napp-intro { color: #d9cfff; }

.napp .napp-ca-form { width: 100%; max-width: 34rem; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.napp .napp-ca-campo { position: relative; width: 100%; display: block; }
.napp .napp-ca-input {
  width: 100%;
  padding: .7rem 3.4rem .7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .4);
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  text-align: center;
}
.napp .napp-ca-input::placeholder { color: rgba(255, 255, 255, .6); }
.napp .napp-ca-input:focus-visible { outline: 2px solid #ffd76b; outline-offset: 2px; }
.napp .napp-ca-restantes {
  position: absolute;
  right: .9rem;
  top: 50%;
  translate: 0 -50%;
  font-size: .8rem;
  color: #b7a8ea;
  font-variant-numeric: tabular-nums;
}

.napp .napp-ca-alfabetos {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  padding: .6rem .9rem .8rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  align-items: center;
  justify-content: center;
}
.napp .napp-ca-alfabetos legend { padding: 0 .4rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #b7a8ea; }
.napp .napp-ca-alfabetos label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .95rem; }
.napp .napp-ca-tabla-btn {
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  color: #ffd86b;
  background: none;
  border: 1px solid rgba(255, 216, 107, .5);
  border-radius: 999px;
  padding: .18rem .7rem;
}
.napp .napp-ca-pie { margin: 0; font-size: .8rem; color: #a89ad8; }
.napp .napp-ca-err {
  margin: 0;
  background: rgba(150, 10, 10, .82);
  color: #fff;
  font-weight: 700;
  padding: .5rem .9rem;
  border-radius: 8px;
}

/* La tabla del alfabeto: 9 columnas de valores */
.napp .napp-ca-tabla { width: 100%; max-width: 34rem; overflow-x: auto; }
.napp .napp-ca-tabla table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.napp .napp-ca-tabla th, .napp .napp-ca-tabla td {
  border: 1px solid rgba(255, 255, 255, .16);
  padding: .3rem .2rem;
  text-align: center;
}
.napp .napp-ca-tabla th { background: rgba(255, 216, 107, .16); color: #ffd86b; font-variant-numeric: tabular-nums; }

/* Resultado */
.napp .napp-ca-resultado {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  animation: napp-entra .4s ease both;
}
@keyframes napp-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Las cifras del legacy son casi negras: se les pone un halo detrás para que
   destaquen sobre el fondo oscuro de la escena. */
.napp .napp-ca-cifra {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  position: relative;
  padding: .6rem 1.6rem;
}
.napp .napp-ca-cifra::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -60%;
  width: clamp(9rem, 38vw, 14rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 120, 255, .5) 0%, rgba(90, 200, 255, .22) 42%, rgba(0, 0, 0, 0) 68%);
  pointer-events: none;
}
.napp .napp-ca-img {
  position: relative;
  width: clamp(7rem, 30vw, 11rem);
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 3px rgba(255, 255, 255, .35));
}
.napp .napp-ca-titulo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  color: #ffd86b;
  letter-spacing: .02em;
}

.napp .napp-ca-desglose, .napp .napp-ca-textos, .napp .napp-ca-corresp {
  width: 100%;
  max-width: 40rem;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: .9rem 1rem 1rem;
  text-align: left;
}
.napp .napp-ca h4 {
  margin: 0 0 .35rem;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b7a8ea;
  font-weight: 700;
}
.napp .napp-ca-textos h4 { margin-top: .9rem; }
.napp .napp-ca-textos h4:first-child { margin-top: 0; }
.napp .napp-ca p { margin: 0; line-height: 1.55; }
.napp .napp-ca-caras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: .9rem 1.4rem; margin-top: .9rem; }
.napp .napp-ca-caras h4 { margin-top: 0; }
.napp .napp-ca-pos { color: #c8ffd8; }
.napp .napp-ca-neg { color: #ffd2d2; }

/* El desglose letra a letra */
.napp .napp-ca-letras { line-height: 2.1; }
.napp .napp-ca-letra {
  display: inline-block;
  margin: 0 .18rem .25rem 0;
  padding: .1rem .4rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  font-variant-numeric: tabular-nums;
}
.napp .napp-ca-letra b { color: #ffd86b; font-size: 1.05rem; }
.napp .napp-ca-letra i { font-style: normal; color: #8fe7ff; font-size: .8rem; }
.napp .napp-ca-pasos { margin-top: .5rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: #efe9ff; }
.napp .napp-ca-pasos b { color: #7dffa6; font-size: 1.2rem; }
.napp .napp-ca-pasos .napp-ca-flecha { color: #b7a8ea; padding: 0 .35rem; }
.napp .napp-ca-maestro { color: #ffd86b; font-weight: 700; }

/* Las correspondencias, en dos columnas */
.napp .napp-ca-lista {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: .3rem 1.4rem;
}
.napp .napp-ca-lista div {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .28rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .92rem;
}
.napp .napp-ca-lista dt { color: #a89ad8; }
.napp .napp-ca-lista dd { margin: 0; text-align: right; }

/* ── Numerología completa: cuatro lecturas ──────────────────────── */
.napp .napp-co {
  position: relative;
  border-radius: 14px;
  padding: 1.4rem 1.2rem 1.7rem;
  background:
    radial-gradient(1px 1px at 18% 12%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 76% 22%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 50% 0%, #123b5e 0%, #0e2340 48%, #060d1c 100%);
  color: #e7f2ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}
.napp .napp-co .napp-intro { color: #c8ddf3; }

.napp .napp-co-form {
  width: 100%;
  max-width: 34rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: .7rem 1rem;
  text-align: left;
}
.napp .napp-co-campo { display: flex; flex-direction: column; gap: .25rem; }
.napp .napp-co-campo span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #92b6d8; }
.napp .napp-co-campo input {
  width: 100%;
  padding: .55rem .85rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(0, 0, 0, .38);
  color: #fff;
  font: inherit;
}
.napp .napp-co-campo input:focus-visible { outline: 2px solid #ffd76b; outline-offset: 2px; }
/* El icono del calendario lo pinta el navegador, y sobre estas escenas oscuras
   salía casi negro. El color-scheme: dark hace que lo dibuje en blanco —y que
   el desplegable del calendario venga también oscuro— en Chrome, Firefox y
   Safari, sin tener que recurrir a un pseudo-elemento propio de cada motor. */
.napp .napp-co-campo input[type="date"] { color-scheme: dark; }
.napp .napp-co-acciones { grid-column: 1 / -1; margin: .3rem 0 0; text-align: center; }
.napp .napp-co-err {
  grid-column: 1 / -1;
  margin: 0;
  background: rgba(150, 10, 10, .82);
  color: #fff;
  font-weight: 700;
  padding: .5rem .9rem;
  border-radius: 8px;
  text-align: center;
}

.napp .napp-co-resultado {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1rem;
  animation: napp-entra .4s ease both;
}
.napp .napp-co-bloque {
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 1rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
/* El flex-wrap va explícito porque estas cajas son etiquetas sueltas
   (header, figure, section) y cualquier tema puede tener una regla suya
   para ellas: lo que no declaro yo, lo declara él. */
.napp .napp-co-cab { display: flex; flex-wrap: nowrap; align-items: center; gap: .9rem; }
/* Las cifras heredadas son casi negras y en pequeño se perdían sobre el fondo
   oscuro: se les pone un halo detrás (el PNG es transparente, así que el
   degradado se ve por dentro) y un contorno blanco que las despega. */
.napp .napp-co-img {
  width: clamp(3.4rem, 13vw, 4.6rem);
  height: auto;
  flex: none;
  background: radial-gradient(circle,
              rgba(235, 245, 255, .5) 0%, rgba(190, 220, 255, .2) 45%, rgba(0, 0, 0, 0) 70%);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .65)) drop-shadow(0 0 5px rgba(255, 255, 255, .85));
}
.napp .napp-co-rotulo { margin: 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #92b6d8; }
.napp .napp-co-origen { display: block; letter-spacing: 0; text-transform: none; font-size: .8rem; color: #6f92b4; font-style: italic; }
.napp .napp-co-titulo { margin: .15rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; color: #ffd86b; }
.napp .napp-co-texto { margin: 0; line-height: 1.55; }
.napp .napp-co-extra { margin: 0; font-size: .92rem; color: #bcd8f2; line-height: 1.5; }
.napp .napp-co-extra b { color: #ffd86b; }
.napp .napp-co-calculo { margin-top: auto; }
.napp .napp-co-calculo summary { cursor: pointer; font-size: .8rem; color: #92b6d8; }
.napp .napp-co-calculo summary:focus-visible { outline: 2px solid #ffd76b; outline-offset: 2px; }
.napp .napp-co-calculo p { margin: .5rem 0 0; }
.napp .napp-co-letras { line-height: 2; }
.napp .napp-co-pasos { font-variant-numeric: tabular-nums; }
.napp .napp-co-pasos b { color: #7dffa6; }

/* ── Compatibilidad: dos nombres y una barra de afinidad ────────── */
.napp .napp-cp {
  position: relative;
  border-radius: 14px;
  padding: 1.4rem 1.2rem 1.7rem;
  background:
    radial-gradient(1px 1px at 20% 14%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 74% 20%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 50% 0%, #5e1b52 0%, #360f36 48%, #14061a 100%);
  color: #ffeaf6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}
.napp .napp-cp .napp-intro { color: #f2ccdf; }
.napp .napp-cp-form {
  width: 100%;
  max-width: 34rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: .7rem 1rem;
  text-align: left;
}
.napp .napp-cp-resultado { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .9rem; animation: napp-entra .4s ease both; }
.napp .napp-cp-pareja { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 1.2rem; }
.napp .napp-cp-pareja figure { margin: 0; padding: 0; display: flex; flex-wrap: nowrap; flex-direction: column; align-items: center; gap: .2rem; }
.napp .napp-cp-pareja img {
  width: clamp(4rem, 17vw, 6rem);
  height: auto;
  background: radial-gradient(circle,
              rgba(255, 235, 250, .5) 0%, rgba(255, 190, 230, .2) 45%, rgba(0, 0, 0, 0) 70%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 5px rgba(255, 255, 255, .85));
}
.napp .napp-cp-pareja figcaption { font-size: .85rem; color: #f0b9d6; max-width: 9rem; }
.napp .napp-cp-mas { font-size: 1.6rem; color: #ff9ecd; font-weight: 700; }
.napp .napp-cp-rotulo { margin: 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #e3a3c6; }

/* La barra, como el progress bar del legacy pero sin librería */
.napp .napp-cp-barra {
  width: min(100%, 30rem);
  height: 1.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .22);
  overflow: hidden;
}
.napp .napp-cp-relleno {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5f8f, #ffb03b, #7dff9f);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: width 1.1s cubic-bezier(.2, .8, .25, 1);
}
.napp .napp-cp-pct { font-size: .8rem; font-weight: 700; color: #21102a; padding: 0 .6rem; font-variant-numeric: tabular-nums; }
.napp .napp-cp-texto { margin: 0; max-width: 34rem; font-size: clamp(1rem, 3vw, 1.12rem); font-weight: 600; line-height: 1.5; }

/* ── Numerología diaria: día, mes y año personales ──────────────── */
.napp .napp-di {
  position: relative;
  border-radius: 14px;
  padding: 1.4rem 1.2rem 1.7rem;
  background:
    radial-gradient(1px 1px at 16% 18%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 80% 12%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 50% 0%, #14523f 0%, #0d3229 48%, #05130f 100%);
  color: #e8fff5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}
.napp .napp-di .napp-intro { color: #c6ecd9; }
.napp .napp-di-form {
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  text-align: left;
}
.napp .napp-di-resultado { width: 100%; display: flex; flex-direction: column; gap: 1rem; animation: napp-entra .4s ease both; }
.napp .napp-di-hoy { margin: 0; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: #8fc9b0; }
.napp .napp-di-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1rem; }
.napp .napp-di-bloque { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .14); }
.napp .napp-di .napp-co-rotulo { color: #8fc9b0; }
.napp .napp-di .napp-co-titulo { color: #9dffd0; }
.napp .napp-di-como { margin: auto 0 0; font-size: .8rem; font-style: italic; color: #79b39a; line-height: 1.45; }

@media (max-width: 480px) {
  .napp .napp-ca, .napp .napp-co, .napp .napp-cp, .napp .napp-di { padding: 1.1rem .8rem 1.3rem; }
  .napp .napp-ca-alfabetos { flex-direction: column; align-items: flex-start; }
  .napp .napp-cp-pareja { gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .napp .napp-ca-resultado, .napp .napp-co-resultado,
  .napp .napp-cp-resultado, .napp .napp-di-resultado { animation: none; }
  .napp .napp-cp-relleno { transition-duration: .2s; }
}