/* ============================================================
   AstroApp — "Tarot Celestial" (tema claro / místico)
   ============================================================ */

:root {
    --bg:         #e9e0c8;   /* beige — fondo de página */
    --bg-suave:   #f3ecda;   /* superficie suave (inputs, chips) */
    --card:       #fcf8ee;   /* crema — fondo de cards */
    --tinta:      #2a2a47;   /* índigo — texto, títulos, botones */
    --tinta-sec:  #6f6c88;   /* índigo apagado */
    --oro:        #b9934e;   /* oro claro — acento principal */
    --oro-fuerte: #9f7a22;   /* oro oscuro — hover / énfasis fuerte */
    --oro-claro:  #cdae79;   /* oro suave — rellenos */
    --linea:      #e0d4b8;   /* bordes */
    --plum:      #6b568f;
    --ok:        #6f9c6b;
    --medio:     #c79a3e;
    --bajo:      #c47e86;
    /* ── Tipografía ───────────────────────────────── */
    --serif: "Fraunces", Georgia, "Times New Roman", serif;   /* títulos */
    --sans:  "Mulish", -apple-system, system-ui, sans-serif;  /* cuerpo */
    --fs-xs:   .8rem;
    --fs-sm:   .9rem;
    --fs-base: 1rem;
    --fs-lg:   1.1rem;     /* texto de lectura cómodo */
    --fs-h4:   1.2rem;
    --fs-h3:   1.45rem;
    --fs-h2:   1.85rem;
    --fs-h1:   2.4rem;
    --lh-tight: 1.15;      /* títulos */
    --lh-snug:  1.35;
    --lh-body:  1.65;      /* lectura */
    --medida:   64ch;      /* ancho máx. de prosa para leer cómodo */

    /* ── Espaciado ────────────────────────────────── */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

    /* ── Radios ───────────────────────────────────── */
    --radio:      16px;
    --radio-sm:   10px;
    --radio-lg:   18px;
    --radio-pill: 999px;

    --max:       480px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--sans);
    color: var(--tinta);
    line-height: 1.6;
    min-height: 100vh;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background:
        radial-gradient(circle at 50% -10%, #fcf8ee, transparent 55%),
        radial-gradient(circle at 90% 100%, rgba(185,147,78,.08), transparent 45%),
        var(--bg);
}

/* ===== Escala tipográfica estándar (todo el sitio) =====
   Títulos = serif (Fraunces). Cuerpo = sans (Mulish). */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--tinta); line-height: var(--lh-tight); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

.contenedor {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 32px 20px 64px;
}

/* Marca */
.marca { text-align: center; margin-bottom: 30px; }
.marca h1 {
    font-family: var(--serif);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--tinta);
}
.marca .estrella { color: var(--oro); }
.marca-logo { display: block; width: 230px; max-width: 72%; height: auto; margin: 0 auto 2px; }
.marca p {
    font-family: var(--serif);
    font-style: italic;
    color: var(--oro);
    font-size: 1.05rem;
    margin-top: 2px;
    letter-spacing: .3px;
}

/* Tarjeta estilo carta del tarot */
.card {
    background: var(--card);
    border: 1px solid var(--oro-claro);   /* mismo contorno que la tarjeta, sin doble rebase */
    border-radius: var(--radio);
    padding: 26px 22px;
    box-shadow: 0 10px 30px rgba(46,42,69,.05);
}

.card h2 {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1.2;
}
.card h3 {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
}
.card .sub {
    color: var(--tinta-sec);
    font-size: .95rem;
    margin-top: 4px;
    margin-bottom: 18px;
}

/* Formularios */
.campo { margin-bottom: 17px; }
.campo label {
    display: block;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--oro);
    font-weight: 600;
    margin-bottom: 7px;
}
.campo input[type=text],
.campo input[type=email],
.campo input[type=password],
.campo input[type=date],
.campo input[type=time] {
    width: 100%;
    min-width: 0;        /* evita que date/time en iOS se desborden de la tarjeta */
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
    padding: 13px 14px;
    font-size: 1rem;
    font-family: var(--sans);
    color: var(--tinta);
    background: var(--bg-suave);
    border: 1px solid var(--linea);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.campo input:focus {
    outline: none;
    border-color: var(--oro);
    box-shadow: 0 0 0 3px rgba(176,141,76,.12);
}
.campo .ayuda { font-size: .8rem; color: var(--tinta-sec); margin-top: 5px; }

.check {
    display: flex; align-items: center; gap: 9px;
    font-size: .9rem; color: var(--tinta-sec);
    margin-top: 9px; cursor: pointer;
}
.check input { width: 18px; height: 18px; accent-color: var(--oro); }
.check-legal { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .9rem; color: var(--tinta-sec); line-height: 1.55; margin-top: 14px; cursor: pointer; }
.check-legal input { width: 18px; height: 18px; accent-color: var(--oro); margin-top: 2px; }
.check-legal a { color: var(--oro); font-weight: 600; }

/* Botón */
.btn {
    display: block; width: 100%;
    padding: 15px;
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--bg);
    background: var(--tinta);
    border: 1px solid var(--tinta);
    border-radius: 12px;
    cursor: pointer;
    margin-top: 10px;
    transition: background .15s, transform .1s;
}
.btn:hover { background: #3a3557; }
.btn:active { transform: scale(.99); }
.btn:disabled { opacity: .6; cursor: wait; }

/* Enlaces */
.link-fila { text-align: center; margin-top: 20px; font-size: .92rem; color: var(--tinta-sec); }
.link-fila a { color: var(--oro); text-decoration: none; font-weight: 700; }
.link-fila a:hover { text-decoration: underline; }

/* Avisos */
.aviso { padding: 13px 15px; border-radius: 10px; font-size: .92rem; margin-bottom: 16px; }
.aviso.error { background: #fbeceb; color: #9a3b34; border: 1px solid #efc9c4; }
.aviso.ok    { background: #eef4ea; color: #4a6b46; border: 1px solid #cfe0c6; }
.aviso.info  { background: #f6efe1; color: #7a5e26; border: 1px solid #e6d6b3; }

/* Trío de cartas del tarot: Sol / Luna / Ascendente */
.signos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
.signo-box {
    background: var(--bg-suave);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 18px 8px 14px;
    text-align: center;
    position: relative;
}
.signo-box .glifo {
    font-family: var(--serif);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--oro);
}
.signo-box .et {
    font-size: .68rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--tinta-sec); margin-top: 8px;
}
.signo-box .val {
    font-family: var(--serif);
    font-size: 1.1rem; font-weight: 600; margin-top: 1px; color: var(--tinta);
}

/* Línea resumen Sol·Luna·Asc con glifos */
.resumen-astro {
    font-size: .98rem; color: var(--tinta-sec); margin-top: 6px;
}
.resumen-astro .g { color: var(--oro); font-family: var(--serif); font-size: 1.1rem; }

/* Texto del horóscopo */
.horo-texto {
    font-family: var(--sans);
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    color: var(--tinta);
    max-width: var(--medida);
    margin: 14px 0 20px;
}

/* Barras de energía */
.energia { margin-bottom: 15px; }
.energia-top { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 6px; }
.energia-top span:last-child { color: var(--oro); font-weight: 700; }
.barra { height: 8px; background: #efe7d6; border-radius: 99px; overflow: hidden; }
.barra-fill { height: 100%; border-radius: 99px; transition: width .6s ease; }
.barra-fill.alto  { background: var(--ok); }
.barra-fill.medio { background: var(--medio); }
.barra-fill.bajo  { background: var(--bajo); }

/* Divisor ornamental */
.divisor { text-align: center; color: var(--oro); margin: 18px 0; letter-spacing: 6px; font-size: .9rem; }

/* Secciones (semanal / mensual) */
.seccion { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.seccion:last-child { border-bottom: none; }
.seccion-tit {
    font-size: .75rem; text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--oro); font-weight: 700; margin-bottom: 5px;
    display: flex; align-items: center; gap: 7px;
}
.seccion-txt { font-family: var(--sans); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--tinta-sec); max-width: var(--medida); }

/* Botones de navegación tipo menú */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.menu-item {
    display: block; text-decoration: none; text-align: center;
    background: var(--bg-suave); border: 1px solid var(--linea); border-radius: 12px;
    padding: 16px 10px; color: var(--tinta);
}
.menu-item .mi-glifo { font-family: var(--serif); font-size: 1.7rem; color: var(--oro); line-height: 1; }
.menu-item .mi-tit { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; margin-top: 6px; }
.menu-item:hover { border-color: var(--oro); }

/* Saludo del dashboard (sin tarjeta, masthead ligero) */
.saludo { text-align: center; margin-bottom: 22px; }
.saludo h2 { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; }
.saludo .resumen-astro { margin-top: 4px; }

/* Dashboard "Hoy" */
.saludo-card { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.saludo-card h2 { font-size: 1.7rem; }
@media (min-width: 600px) {
    .saludo-card { flex-direction: row; justify-content: space-between; align-items: center; }
}
.btn-sec {
    display: inline-block; padding: 9px 18px;
    font-family: var(--serif); font-size: 1rem; color: var(--tinta);
    background: transparent; border: 1px solid var(--linea); border-radius: 10px;
    text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s;
}
.btn-sec:hover { border-color: var(--oro); color: var(--oro); }

/* Pie legal + páginas legales + banner de cookies */
.pie { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea); text-align: center; }
.pie-legal { color: var(--tinta-sec); font-size: .82rem; line-height: 1.5; max-width: 540px; margin: 0 auto; }
.pie-links { margin-top: 8px; font-size: .85rem; }
.pie-links a { color: var(--oro); text-decoration: none; font-weight: 600; }
.pie-links a:hover { text-decoration: underline; }
.legal h3 { margin-top: 24px; }
.legal p, .legal li { color: var(--tinta-sec); line-height: 1.6; font-size: .95rem; margin-top: 8px; }
.legal ul { margin: 6px 0 0 18px; }
.legal .actualizado { font-style: italic; }
.legal-aviso { background: var(--bg-suave); border: 1px solid var(--oro-claro); border-radius: 12px; padding: 12px 16px; font-size: .88rem; color: var(--tinta-sec); margin-top: 14px; }

.cookie-banner { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; background: var(--card); border: 1px solid var(--oro-claro); border-radius: 14px; padding: 15px 18px; box-shadow: 0 12px 30px rgba(46,42,69,.16); display: flex; flex-direction: column; gap: 11px; }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: .88rem; color: var(--tinta-sec); margin: 0; line-height: 1.5; }
.cookie-banner a { color: var(--oro); font-weight: 600; text-decoration: none; }
.con-nav .cookie-banner { bottom: 80px; }
@media (min-width: 620px) { .cookie-banner { left: auto; right: 20px; bottom: 20px; max-width: 380px; } .con-nav .cookie-banner { bottom: 20px; } }
.acciones { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.consejo-txt { font-family: var(--sans); font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--tinta); max-width: var(--medida); margin-top: 8px; }
.card.mejora { background: var(--bg-suave); border-color: var(--oro-claro); }

/* ===== Componentes base (reutilizables en todas las secciones) ===== */
.pill { display: inline-block; background: var(--oro); color: var(--card); font-family: var(--serif); font-size: 1.2rem; font-weight: 600; padding: 6px 22px; border-radius: 999px; }
.panel { background: var(--bg-suave); border-radius: 14px; padding: 18px 20px; }
.panel-head { font-family: var(--serif); font-size: 1.15rem; color: var(--tinta); }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.chip { background: var(--card); border: 1px solid var(--oro-claro); border-radius: var(--radio-sm); padding: 8px 8px; text-align: center; font-family: var(--sans); font-size: var(--fs-sm); color: var(--tinta); }
.chip b { color: var(--oro-fuerte); font-weight: 600; }
.navcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--oro-claro); border-radius: 14px; padding: 18px; text-decoration: none; color: var(--tinta); transition: border-color .15s; }
.navcard:hover { border-color: var(--oro); }
.navcard h4 { font-size: 1.12rem; line-height: 1.25; }
.navcard .nc-sub { color: var(--tinta-sec); font-size: .9rem; margin-top: 3px; }
.navcard .nc-arrow { font-size: 1.6rem; color: var(--oro); margin-top: auto; padding-top: 12px; line-height: 1; }

/* Layout "Hoy" */
.dash-top { display: grid; grid-template-columns: 1fr; gap: 16px; }
.dash-top > .card { display: flex; flex-direction: column; }
.consejo-panel { flex: 1; }
.energia-panel { text-align: center; }
.horo-bottom { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
@media (min-width: 900px) {
    .dash-top { grid-template-columns: 300px 1fr; align-items: stretch; }
    .horo-bottom { grid-template-columns: 1.6fr 1fr 1fr; align-items: stretch; }
}

/* "Mi carta" ordenada */
.pagina-head { margin-bottom: 16px; }
.pagina-head h2 { font-size: 1.7rem; }
.carta-hero { display: grid; grid-template-columns: 1fr; gap: 18px; }
.carta-hero > .card { display: flex; flex-direction: column; }
.carta-hero > .card > .panel { flex: 1; }
.carta-hero-info { display: flex; flex-direction: column; gap: 16px; }
.carta-hero-img { display: flex; justify-content: center; align-items: flex-start; }
.areas-cta { transition: border-color .15s; }
.areas-cta:hover { border-color: var(--oro); }
.cards-masonry { margin-top: 16px; }
.cards-masonry > .card { margin-bottom: 16px; break-inside: avoid; }
@media (min-width: 900px) {
    .carta-hero { grid-template-columns: 340px 1fr; align-items: stretch; }
    .cards-masonry { columns: 2; column-gap: 16px; }
}

/* Pestañas internas (menú lateral + contenido) */
.tabs-layout { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 6px; }
.tabs-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tab-btn { text-align: center; background: var(--card); border: 1px solid var(--linea); font-family: var(--serif); font-size: 1rem; color: var(--tinta-sec); padding: 11px 12px; border-radius: 12px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tab-btn:hover { color: var(--tinta); }
.tab-btn.activo { background: var(--bg-suave); color: var(--oro-fuerte); border-color: var(--oro); }
.tab-pane { display: none; }
.tab-pane.activo { display: block; animation: paneIn .25s ease; }
.tab-pane > .panel + .panel { margin-top: 14px; }
.tab-pane h3 { margin-bottom: 4px; }
@keyframes paneIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Fase lunar con ícono */
.luna-fase { display: flex; align-items: center; gap: 18px; }
.luna-ico { flex: 0 0 auto; line-height: 0; filter: drop-shadow(0 5px 12px rgba(46,42,69,.20)); }
.luna-info { flex: 1; }
.luna-nombre { font-family: var(--serif); font-size: 1.4rem; color: var(--tinta); line-height: 1.15; }
.luna-pct { color: var(--oro-fuerte); font-weight: 600; margin-top: 2px; }

@media (min-width: 900px) {
    .tabs-layout { grid-template-columns: 230px 1fr; align-items: start; }
    .tabs-menu { display: flex; flex-direction: column; gap: 4px; }
    .tab-btn { text-align: left; font-size: 1.15rem; background: transparent; border-color: transparent; padding: 10px 16px; }
    .tab-btn.activo { background: var(--bg-suave); border-color: var(--oro-claro); }
}

/* Tarjeta natal en código (reemplaza la imagen GD) */
.tarjeta-natal { position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 2 / 3; background: var(--card); border: 1px solid var(--oro-claro); border-radius: 18px; box-shadow: 0 14px 34px rgba(46,42,69,.16); padding: 24px 22px 22px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.tarjeta-natal::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--oro-claro); border-radius: 13px; pointer-events: none; }
.tn-star { position: absolute; color: var(--oro); font-size: .8rem; line-height: 1; z-index: 1; }
.tn-star.tl { top: 15px; left: 15px; } .tn-star.tr { top: 15px; right: 15px; }
.tn-star.bl { bottom: 15px; left: 15px; } .tn-star.br { bottom: 15px; right: 15px; }
.tn-marca { font-family: var(--serif); font-weight: 600; letter-spacing: 2.5px; color: var(--tinta); font-size: .92rem; display: flex; align-items: center; gap: 6px; z-index: 1; }
.tn-marca .est { color: var(--oro); }
.tn-ilu { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; margin: 8px 0 2px; }
.tn-ilu img.full { width: 82%; max-width: 240px; height: auto; }
.tn-ilu img.mini { width: 84px; height: auto; }
.tn-ilu .tn-glifo { font-family: var(--serif); font-size: 6rem; color: var(--oro); line-height: 1; }
.tn-nombre { font-family: var(--serif); font-size: 2rem; color: var(--tinta); line-height: 1.05; }
.tn-rol { font-family: var(--serif); letter-spacing: 3px; color: var(--oro-fuerte); font-size: .78rem; margin-top: 2px; }
.tn-div { display: flex; align-items: center; justify-content: center; gap: 10px; width: 78%; margin: 14px 0 16px; color: var(--oro); font-size: .7rem; }
.tn-div::before, .tn-div::after { content: ""; flex: 1; border-top: 1px dotted var(--oro); opacity: .6; }
.tn-pie { display: flex; justify-content: center; gap: 36px; width: 100%; }
.tn-mini { text-align: center; }
.tn-mini-circ { width: 46px; height: 46px; border-radius: 50%; background: var(--oro); color: var(--card); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto; }
.tn-mini-signo { font-family: var(--serif); color: var(--tinta); font-size: .92rem; margin-top: 5px; }
.tn-mini-rol { letter-spacing: 2px; color: var(--oro-fuerte); font-size: .66rem; margin-top: 1px; }

/* Pronóstico: héroe con ilustración + cards de acceso */
.prono-hero { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; text-align: center; }
.prono-ilustracion { display: flex; justify-content: center; align-items: center; }
.prono-ilustracion img { width: 100%; height: auto; display: block; }
.prono-ilustracion img.ilu-full { max-width: 300px; }
.prono-ilustracion img.ilu-glifo { max-width: 150px; }
.prono-ilustracion .glifo-fallback { font-family: var(--serif); font-size: 7rem; color: var(--oro); line-height: 1; }
.prono-titulo { font-size: 2rem; }
.prono-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
.navcard-lock { background: var(--bg-suave); }
.nc-lock { margin-top: auto; padding-top: 12px; color: var(--oro-fuerte); font-size: .92rem; font-weight: 600; }
@media (min-width: 760px) {
    .prono-hero { grid-template-columns: 300px 1fr; text-align: left; gap: 24px; }
    .prono-titulo { font-size: 2.5rem; }
    .prono-cards { grid-template-columns: repeat(3, 1fr); }
    .prono-cards .navcard { min-height: 210px; }
}

/* Encabezado compacto para páginas de lectura (semanal/mensual/calendario) */
.horo-encabezado { text-align: center; margin-bottom: 4px; }
.horo-encabezado img { width: 120px; height: auto; margin: 0 auto 4px; display: block; }
.horo-encabezado img.he-glifo { width: 88px; }
.horo-encabezado .glifo-fallback { font-family: var(--serif); font-size: 4rem; color: var(--oro); line-height: 1; display: block; }
.horo-encabezado .he-signo { font-family: var(--serif); font-style: italic; color: var(--oro-fuerte); font-size: 1rem; }

/* Bloques de contenido (áreas semanales / secciones mensuales) */
.bloques-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
@media (min-width: 600px) { .bloques-grid.dos { grid-template-columns: 1fr 1fr; } }
.bloque { background: var(--card); border: 1px solid var(--oro-claro); border-radius: 14px; padding: 16px 18px; }
.bloque-tit { font-family: var(--serif); font-size: 1.18rem; color: var(--oro-fuerte); margin-bottom: 6px; line-height: 1.2; }
.bloque-txt { font-family: var(--sans); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--tinta-sec); }

/* Layout del dashboard: móvil = columna; escritorio = rejilla */
.dash { display: flex; flex-direction: column; gap: 16px; }
.dash-aside { display: flex; flex-direction: column; gap: 16px; }

/* Carta completa: planetas personales, barras de elemento, rueda */
.barra-fill.oro { background: var(--oro-claro); }
.planeta { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.planeta-glifo { font-family: var(--serif); font-size: 1.8rem; color: var(--oro); line-height: 1; min-width: 26px; text-align: center; }
.planeta-cuerpo { flex: 1; }
.planeta-top { font-family: var(--serif); font-size: 1.16rem; color: var(--tinta); margin-bottom: 3px; }
.planeta-casa { color: var(--tinta-sec); font-size: .9rem; font-family: var(--sans); }
.rueda { width: 100%; max-width: 420px; display: block; margin: 14px auto 0; border-radius: 12px; background: #fff; padding: 10px; border: 1px solid var(--linea); }

/* ===== Navegación (móvil: barra inferior) ===== */
.nav {
    position: fixed; z-index: 50; bottom: 0; left: 0; right: 0;
    display: flex;
    background: var(--card);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -4px 20px rgba(46,42,69,.06);
}
.nav-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 2px; text-decoration: none; color: var(--tinta-sec);
}
.nav-ico { font-family: var(--serif); font-size: 1.4rem; line-height: 1; }
.nav-lbl { font-size: .67rem; letter-spacing: .2px; }
.nav-item.activo { color: var(--oro); }
.con-nav .contenedor { padding-bottom: 90px; }

/* Topbar (móvil) y marca del sidebar (escritorio) */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--card); border-bottom: 1px solid var(--linea); text-align: center; padding: 12px; }
.topbar-brand { display: inline-block; line-height: 0; }
.topbar-brand img { height: 22px; width: auto; display: block; }
.nav-brand { display: none; }

/* Overlay de carga */
.cargando-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(244,238,226,.93); }
.cargando-overlay.visible { display: flex; }
.cargando-box { text-align: center; }
.cargando-estrella { display: inline-block; width: 56px; height: 56px; animation: girar 1.7s ease-in-out infinite; }
.cargando-msg { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--tinta-sec); }
@keyframes girar { 0% { transform: rotate(0) scale(1); opacity: .6; } 50% { transform: rotate(180deg) scale(1.15); opacity: 1; } 100% { transform: rotate(360deg) scale(1); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .cargando-estrella { animation: none; } }

/* Bloques bloqueados (planes) */
.candado {
    text-align: center;
    background: var(--bg-suave);
    border: 1px dashed var(--oro-claro);
    border-radius: 14px;
    padding: 28px 20px;
    margin: 10px 0;
}
.candado-ico { font-family: var(--serif); font-size: 2rem; color: var(--oro); }
.candado-tit { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 6px 0 4px; }
.candado-sub { color: var(--tinta-sec); font-size: .95rem; margin-bottom: 6px; }
.candado-plan { color: var(--tinta-sec); font-size: .9rem; margin-bottom: 14px; }
.candado .btn { max-width: 240px; margin: 0 auto; }

/* Tarjetas de plan */
.afin-resultado { text-align: center; margin-bottom: 22px; }
.afin-pct { font-family: var(--serif); font-size: 4rem; font-weight: 600; color: var(--oro); line-height: 1; }
.afin-resultado h2 { margin-top: 8px; }

.planes-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.planes-grid .plan-card { margin-bottom: 0; min-width: 0; display: flex; flex-direction: column; }
.planes-grid .plan-lista { flex: 1; }
@media (min-width: 760px) { .planes-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.plan-card { border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.plan-card.plan-actual { border-color: var(--oro); background: var(--bg-suave); }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.plan-nombre { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.15; }
.plan-precio-bloque { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; white-space: nowrap; }
.plan-precio { color: var(--oro); font-weight: 700; }
.plan-precio-antes { color: var(--tinta-sec); font-weight: 400; font-size: .85rem; text-decoration: line-through; }
.plan-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.plan-lista li { font-size: .95rem; color: var(--tinta-sec); padding: 4px 0 4px 20px; position: relative; }
.plan-lista li::before { content: "✦"; color: var(--oro); position: absolute; left: 0; }
.plan-badge { text-align: center; color: var(--oro); font-weight: 700; font-size: .9rem; margin-top: 12px; }
.btn:disabled { background: var(--linea); border-color: var(--linea); color: var(--tinta-sec); cursor: default; }

/* ===== Panel de administración ===== */
.adm-seccion-tit { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--tinta); margin: 0 0 12px; }
.adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (min-width: 700px) { .adm-grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .adm-grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.adm-card { background: var(--bg-suave); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; }
.adm-num { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--tinta); line-height: 1.1; }
.adm-num.oro { color: var(--oro-fuerte); }
.adm-lbl { font-family: var(--sans); font-size: .82rem; color: var(--tinta-sec); margin-top: 4px; }
.adm-sub { font-size: .78rem; color: var(--oro); margin-top: 2px; }
.adm-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.adm-tabla th { text-align: left; font-family: var(--sans); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; color: var(--tinta-sec); padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.adm-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--linea); color: var(--tinta-sec); }
.adm-tabla tr:last-child td { border-bottom: none; }
.adm-tabla td b { color: var(--tinta); font-weight: 600; }
.adm-medidor { margin-bottom: 16px; }
.adm-medidor:last-child { margin-bottom: 0; }
.adm-medidor-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; margin-bottom: 6px; }
.adm-medidor-top b { color: var(--tinta); font-weight: 600; }
.adm-pill { display: inline-block; font-family: var(--sans); font-size: .75rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--card); border: 1px solid var(--oro-claro); color: var(--oro-fuerte); }

/* Eventos del calendario astral */
.evento { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.evento:last-child { border-bottom: none; }
.evento-fecha { min-width: 94px; font-family: var(--serif); color: var(--oro); font-size: .98rem; font-weight: 600; }
.evento-cuerpo { flex: 1; }
.evento-tit { font-family: var(--serif); font-size: 1.12rem; color: var(--tinta); }
.evento-det { color: var(--tinta-sec); font-size: .92rem; }

/* ===== Navegación (escritorio: barra lateral) ===== */
@media (min-width: 900px) {
    body.con-nav { padding-left: 208px; }
    .topbar { display: none; }
    .nav-brand { display: block; text-align: center; padding: 2px 0 18px; line-height: 0; }
    .nav-brand img { width: 132px; max-width: 100%; height: auto; display: inline-block; }
    .nav {
        top: 0; bottom: 0; left: 0; right: auto;
        width: 208px; flex-direction: column; justify-content: flex-start; gap: 6px;
        padding: 30px 16px;
        border-top: none; border-right: 1px solid var(--linea);
        box-shadow: none;
    }
    .nav-item {
        flex: none; flex-direction: row; justify-content: flex-start; gap: 13px;
        padding: 12px 14px; border-radius: 10px;
    }
    .nav-ico { font-size: 1.3rem; }
    .nav-lbl { font-size: 1rem; }
    .nav-item.activo { background: var(--bg-suave); }
    .con-nav .contenedor { padding-bottom: 64px; }
}

.cargando { text-align: center; color: var(--tinta-sec); padding: 40px 0; }

/* ===== Escritorio: dashboard de varias columnas ===== */
@media (min-width: 900px) {
    .contenedor { padding-top: 40px; }
    .contenedor.amplio { max-width: 1060px; }

    .marca h1 { font-size: 2.5rem; }
    .marca p { font-size: 1.15rem; }

    .dash {
        display: grid;
        grid-template-columns: 1.7fr 1fr;
        gap: 22px;
        align-items: start;
    }
    .dash-aside { position: sticky; top: 32px; }

    .horo-texto { font-size: 1.18rem; line-height: var(--lh-body); }
    .card { padding: 30px 28px; }

    /* Páginas de lectura (semanal/mensual) un poco más anchas y cómodas */
    .contenedor.lectura { max-width: 620px; }
}