/* ============================================================
   BIBLIA DE LA MUJER — HOME (light theme)
   Sólo se carga en mujer/index.php  (body.mujer-home)
   ============================================================ */

/* ── Variables ── */
body.mujer-home {
    --mh-bg:          #ede8ff;
    --mh-card:        #ffffff;
    --mh-card-tint:   #fdf5ff;
    --mh-purple:      #6b4fa0;
    --mh-purple-md:   #9b7dd4;
    --mh-purple-pale: #ede8f5;
    --mh-rose:        #e8547a;
    --mh-rose-pale:   #fce8ef;
    --mh-text:        #3d2c5f;
    --mh-body:        #5a4a7a;
    --mh-muted:       #9080b0;
    --mh-border:      rgba(155,125,212,0.22);
    --mh-shadow:      0 2px 20px rgba(107,79,160,0.1);
    --mh-grad:        linear-gradient(135deg,#e8547a 0%,#9b7dd4 100%);

    background: linear-gradient(150deg,#ede8ff 0%,#f5e8f8 45%,#fdf0fa 100%) !important;
    color: var(--mh-text);
}

body.mujer-home::before,
body.mujer-home::after { display:none; }

/* ── Layout container ── */
.mh-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.4rem 5rem;
    position: relative;
    z-index: 1;
}

/* ── Decoraciones de fondo ── */
.mh-floral {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(35px);
    opacity: 0.45;
}
.mh-floral--bl {
    bottom: -40px; left: -40px;
    width: 320px; height: 320px;
    background: radial-gradient(ellipse at 30% 80%,rgba(232,84,122,0.5) 0%,rgba(155,125,212,0.35) 50%,transparent 75%);
}
.mh-floral--tr {
    top: -30px; right: -30px;
    width: 280px; height: 280px;
    background: radial-gradient(ellipse at 70% 20%,rgba(196,181,253,0.6) 0%,rgba(232,84,122,0.3) 55%,transparent 75%);
}

/* ── Header overrides ── */
body.mujer-home .mujer-header {
    background: rgba(255,255,255,0.9) !important;
    border-bottom: 1px solid var(--mh-border) !important;
    box-shadow: 0 2px 16px rgba(107,79,160,0.08) !important;
}
body.mujer-home .mujer-header-title {
    background: linear-gradient(135deg,#6b4fa0,#e8547a) !important;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.mujer-home .mujer-header-back        { color: var(--mh-purple) !important; }
body.mujer-home .mujer-header-back:hover  { background: rgba(107,79,160,0.1) !important; }
body.mujer-home .mujer-login-btn          { background: rgba(107,79,160,0.08) !important; border-color: rgba(107,79,160,0.2) !important; color: var(--mh-purple) !important; }

/* ── Section pills overrides ── */
body.mujer-home .section-pills {
    background: rgba(255,255,255,0.92) !important;
    border-bottom: 1px solid var(--mh-border) !important;
}
body.mujer-home .section-pill             { color: var(--mh-muted) !important; }
body.mujer-home .section-pill:hover       { background: rgba(107,79,160,0.08) !important; color: var(--mh-purple) !important; border-color: rgba(107,79,160,0.2) !important; }
body.mujer-home .section-pill.active      { background: var(--mh-grad) !important; color:#fff !important; box-shadow: 0 2px 12px rgba(107,79,160,0.28) !important; }

/* ── Bottom nav overrides ── */
body.mujer-home .mujer-bottom-nav {
    background: rgba(255,255,255,0.97) !important;
    border-top: 1px solid var(--mh-border) !important;
}
body.mujer-home .mujer-nav-btn            { color: var(--mh-muted) !important; }
body.mujer-home .mujer-nav-btn.active     { color: var(--mh-purple) !important; }
body.mujer-home .mujer-nav-btn.active::before { background: var(--mh-grad) !important; }

/* ── Chat FAB & toast overrides ── */
body.mujer-home .chat-fab { background: var(--mh-grad) !important; box-shadow: 0 6px 24px rgba(107,79,160,0.35) !important; }
body.mujer-home .mujer-toast { background: rgba(255,255,255,0.97) !important; border-color: rgba(107,79,160,0.28) !important; color: var(--mh-purple) !important; box-shadow: 0 8px 24px rgba(107,79,160,0.18) !important; }

/* Chat modal light overrides */
body.mujer-home .chat-modal { background: #fff !important; border-color: var(--mh-border) !important; box-shadow: 0 -20px 60px rgba(107,79,160,0.18) !important; }
body.mujer-home .chat-modal-header { background: rgba(107,79,160,0.04) !important; border-bottom-color: var(--mh-border) !important; }
body.mujer-home .chat-modal-name   { color: var(--mh-text) !important; }
body.mujer-home .chat-modal-sub    { color: var(--mh-muted) !important; }
body.mujer-home .chat-modal-close  { background: rgba(107,79,160,0.06) !important; border-color: var(--mh-border) !important; color: var(--mh-muted) !important; }
body.mujer-home .chat-modal-close:hover { background: rgba(107,79,160,0.12) !important; color: var(--mh-purple) !important; }
body.mujer-home .chat-msg.assistant .chat-bubble { background: rgba(107,79,160,0.06) !important; border-color: var(--mh-border) !important; color: var(--mh-body) !important; }
body.mujer-home .chat-msg.system .chat-bubble { background: rgba(232,84,122,0.06) !important; color: var(--mh-muted) !important; }
body.mujer-home .chat-input { background: rgba(107,79,160,0.05) !important; border-color: rgba(107,79,160,0.2) !important; color: var(--mh-text) !important; }
body.mujer-home .chat-input:focus { border-color: var(--mh-purple) !important; box-shadow: 0 0 0 3px rgba(107,79,160,0.12) !important; }
body.mujer-home .chat-input-row { background: rgba(255,255,255,0.9) !important; border-top-color: var(--mh-border) !important; }
body.mujer-home .chat-limit-bar { background: rgba(107,79,160,0.04) !important; border-top-color: var(--mh-border) !important; }
body.mujer-home .chat-login-link { color: var(--mh-purple) !important; }
body.mujer-home .chat-overlay { background: rgba(107,79,160,0.35) !important; }

/* ══════════════════════════════════════════════════
   NAV CARDS (4 tiles arriba)
══════════════════════════════════════════════════ */
.mh-nav-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    padding: 1.6rem 0 1.2rem;
}

.mh-nav-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--mh-card);
    border: 1px solid var(--mh-border);
    border-radius: 18px;
    padding: 1.1rem 1rem;
    text-decoration: none;
    color: var(--mh-text);
    transition: transform .22s, box-shadow .22s, border-color .22s;
    box-shadow: var(--mh-shadow);
    cursor: pointer;
}
.mh-nav-card:hover                 { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(107,79,160,0.18); border-color: rgba(155,125,212,0.45); color: var(--mh-text); }
.mh-nav-card--soon                 { opacity:.6; cursor:default; }
.mh-nav-card--soon:hover           { transform:none; box-shadow: var(--mh-shadow); }

.mh-nicon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.mh-nicon--purple  { background:rgba(107,79,160,0.12); color:#6b4fa0; border:1px solid rgba(107,79,160,0.18); }
.mh-nicon--rose    { background:rgba(232,84,122,0.1);  color:#e8547a; border:1px solid rgba(232,84,122,0.18); }
.mh-nicon--indigo  { background:rgba(76,58,130,0.12);  color:#4c3a82; border:1px solid rgba(76,58,130,0.18); }
.mh-nicon--pink    { background:rgba(252,165,192,0.18);color:#c8437a; border:1px solid rgba(252,165,192,0.35); }

.mh-nav-text h3 { font-size:.88rem; font-weight:700; color:var(--mh-text); margin:0 0 .18rem; letter-spacing:-.01em; line-height:1.2; }
.mh-nav-text p  { font-size:.73rem; color:var(--mh-muted); margin:0; line-height:1.4; }

@media (max-width:900px) { .mh-nav-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) {
    .mh-nav-grid   { gap:.65rem; }
    .mh-nav-card   { padding:.9rem .8rem; gap:.65rem; }
    .mh-nicon      { width:44px; height:44px; font-size:1.1rem; border-radius:12px; }
    .mh-nav-text h3 { font-size:.82rem; }
    .mh-nav-text p  { display:none; }
}

/* ══════════════════════════════════════════════════
   VERSE HERO
══════════════════════════════════════════════════ */
.mh-verse-section { text-align:center; padding:.4rem 0 2rem; }

.mh-verse-title {
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(1.6rem,4vw,2.4rem);
    font-weight:700;
    color:var(--mh-text);
    margin:0 0 1.5rem;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    line-height:1.2;
}
.mh-verse-title em { font-style:normal; color:var(--mh-purple-md); }

.mh-verse-card {
    background:var(--mh-card);
    border:1px solid var(--mh-border);
    border-radius:28px;
    padding:2.2rem 2.8rem 1.8rem;
    box-shadow:0 8px 40px rgba(107,79,160,0.13),0 2px 10px rgba(0,0,0,0.04);
    max-width:760px;
    margin:0 auto;
    position:relative;
    transition: opacity .3s;
}
.mh-verse-card::before {
    content:'';
    position:absolute;
    top:0; left:12%; right:12%;
    height:3px;
    background:var(--mh-grad);
    border-radius:3px;
    opacity:.55;
}

.mh-verse-ref {
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--mh-purple);
    margin-bottom:.7rem;
}

.mh-verse-body {
    background:rgba(196,181,253,0.09);
    border:1px solid rgba(196,181,253,0.22);
    border-radius:18px;
    padding:1.4rem 1.8rem;
    margin:.5rem 0 1.1rem;
    position:relative;
}

.mh-quote {
    font-family:'Playfair Display',Georgia,serif;
    font-size:3.8rem;
    line-height:1;
    color:rgba(107,79,160,0.18);
    position:absolute;
    user-select:none;
    pointer-events:none;
}
.mh-quote--open  { top:-8px;  left:12px; }
.mh-quote--close { bottom:-28px; right:12px; }

.mh-verse-text {
    font-family:'Playfair Display',Georgia,serif;
    font-style:italic;
    font-size:clamp(1rem,2.4vw,1.3rem);
    line-height:1.9;
    color:var(--mh-text);
    margin:0;
    position:relative;
    z-index:1;
}

.mh-verse-nav {
    display:flex; align-items:center; justify-content:center;
    gap:.6rem;
    margin:.4rem 0 .8rem;
}

.mh-vnav-btn {
    width:42px; height:42px;
    border-radius:50%;
    border:1.5px solid var(--mh-border);
    background:var(--mh-card);
    color:var(--mh-muted);
    font-size:.88rem;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:all .22s;
    box-shadow:0 2px 8px rgba(107,79,160,0.08);
}
.mh-vnav-btn:hover:not(:disabled) { border-color:var(--mh-purple-md); color:var(--mh-purple); box-shadow:0 4px 14px rgba(107,79,160,0.16); }
.mh-vnav-btn--main  { background:var(--mh-grad); border-color:transparent; color:#fff; box-shadow:0 4px 16px rgba(107,79,160,0.32); }
.mh-vnav-btn--main:hover:not(:disabled) { filter:brightness(1.08); box-shadow:0 6px 22px rgba(107,79,160,0.42); color:#fff; }
.mh-vnav-btn:disabled { opacity:.35; cursor:default; }

.mh-verse-actions {
    display:flex; align-items:center; justify-content:center;
    gap:.5rem;
    margin-top:.2rem;
}

.mh-act-btn {
    display:inline-flex; align-items:center; gap:.35rem;
    background:rgba(107,79,160,0.07);
    border:1.5px solid rgba(107,79,160,0.15);
    color:var(--mh-muted);
    border-radius:50px;
    padding:.46rem 1rem;
    font-size:.83rem;
    font-weight:500;
    font-family:'Inter',inherit;
    cursor:pointer;
    transition:all .22s;
    white-space:nowrap;
}
.mh-act-btn:hover:not(:disabled) { background:var(--mh-grad); border-color:transparent; color:#fff; box-shadow:0 4px 14px rgba(107,79,160,0.26); }
.mh-act-btn:disabled { opacity:.4; cursor:default; }

/* explanation panel */
.mh-explanation {
    max-height:0; overflow:hidden;
    transition:max-height .4s ease, padding .3s ease;
    max-width:760px; margin:0 auto;
}
.mh-explanation.open { max-height:520px; padding-top:.9rem; }
.mh-explanation-inner {
    background:var(--mh-card);
    border:1px solid var(--mh-border);
    border-radius:20px;
    padding:1.3rem 1.7rem;
    font-size:.91rem;
    line-height:1.85;
    color:var(--mh-body);
    text-align:left;
    white-space:pre-line;
    box-shadow:var(--mh-shadow);
}

@media (max-width:640px) {
    .mh-verse-card   { padding:1.6rem 1.2rem 1.4rem; border-radius:20px; }
    .mh-verse-body   { padding:1.1rem 1.2rem; }
    .mh-quote        { font-size:2.8rem; }
}

/* ══════════════════════════════════════════════════
   CONTENT GRID (devocionales + mi rincón)
══════════════════════════════════════════════════ */
.mh-grid {
    display:grid;
    grid-template-columns:1fr 300px;
    gap:1.5rem;
    align-items:start;
    margin-top:.4rem;
}
@media (max-width:860px) { .mh-grid { grid-template-columns:1fr; } }

/* ── Devocionales col ── */
.mh-dev-col {
    background:var(--mh-card);
    border:1px solid var(--mh-border);
    border-radius:24px;
    padding:1.5rem;
    box-shadow:var(--mh-shadow);
}
.mh-col-header {
    display:flex; align-items:flex-start;
    justify-content:space-between;
    gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap;
}
.mh-col-title {
    font-size:1rem; font-weight:700;
    color:var(--mh-purple); margin:0 0 .18rem;
    display:flex; align-items:center; gap:.42rem;
}
.mh-col-title i { color:var(--mh-rose); font-size:.9rem; }
.mh-col-sub   { font-size:.78rem; color:var(--mh-muted); margin:0; line-height:1.4; }

.mh-escribir {
    display:inline-flex; align-items:center; gap:.3rem;
    background:var(--mh-grad); color:#fff;
    border:none; border-radius:50px;
    padding:.5rem 1.1rem;
    font-size:.82rem; font-weight:700;
    text-decoration:none; white-space:nowrap; cursor:pointer;
    box-shadow:0 4px 14px rgba(232,84,122,0.3);
    transition:filter .2s, transform .2s, box-shadow .2s;
    flex-shrink:0;
}
.mh-escribir:hover { filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 6px 20px rgba(232,84,122,0.38); color:#fff; }

/* devocional item */
.mh-dev-list     { display:flex; flex-direction:column; }
.mh-dev-item     { display:flex; gap:.85rem; padding:.95rem 0; border-bottom:1px solid rgba(196,181,253,0.2); }
.mh-dev-item:last-child { border-bottom:none; }

.mh-dev-thumb {
    width:70px; height:70px;
    border-radius:12px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:1.85rem;
    overflow:hidden;
}
.mh-dev-thumb--a { background:linear-gradient(135deg,#e8d5fa,#fce8ef); }
.mh-dev-thumb--b { background:linear-gradient(135deg,#d5e8fa,#e8f5d5); }
.mh-dev-thumb--c { background:linear-gradient(135deg,#fae8d5,#fce8ef); }
.mh-dev-thumb--d { background:linear-gradient(135deg,#d5faed,#e8d5fa); }

.mh-dev-body      { flex:1; min-width:0; }
.mh-dev-title     { font-size:.94rem; font-weight:700; color:var(--mh-text); margin:0 0 .28rem; line-height:1.3; letter-spacing:-.01em; }
.mh-dev-excerpt   { font-size:.81rem; color:var(--mh-muted); line-height:1.55; margin:0 0 .48rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mh-dev-meta      { display:flex; align-items:center; gap:.42rem; font-size:.73rem; color:#b0a0c8; flex-wrap:wrap; }
.mh-dev-meta .aut { color:var(--mh-muted); font-weight:500; }
.mh-dev-meta .dot { opacity:.45; }

.mh-dev-empty {
    text-align:center; padding:2.2rem 1rem;
    color:var(--mh-muted); font-size:.9rem;
    display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.mh-dev-empty i { font-size:2rem; opacity:.3; }

.mh-ver-mas {
    display:flex; align-items:center; justify-content:center; gap:.35rem;
    color:var(--mh-purple-md); font-size:.84rem; font-weight:600;
    text-decoration:none; padding:.9rem 0 .2rem;
    transition:color .2s;
}
.mh-ver-mas:hover { color:var(--mh-purple); }
.mh-ver-mas i { font-size:.75rem; }

/* ── Mi Rincón col ── */
.mh-rincon {
    background:var(--mh-card);
    border:1px solid var(--mh-border);
    border-radius:24px;
    padding:1.5rem;
    box-shadow:var(--mh-shadow);
}
.mh-rincon-title { font-size:1rem; font-weight:700; color:var(--mh-purple); margin:0 0 .18rem; display:flex; align-items:center; gap:.42rem; }
.mh-rincon-title i { color:var(--mh-rose); font-size:.9rem; }
.mh-rincon-sub   { font-size:.78rem; color:var(--mh-muted); margin:0 0 1.15rem; }

.mh-rincon-list  { display:flex; flex-direction:column; gap:.05rem; }

.mh-rincon-row {
    display:flex; align-items:center; gap:.8rem;
    padding:.82rem .65rem; border-radius:14px;
    text-decoration:none; color:var(--mh-text);
    transition:background .2s; cursor:pointer;
}
.mh-rincon-row:hover:not(.mh-rincon-row--soon) { background:rgba(107,79,160,0.07); }
.mh-rincon-row--soon { opacity:.55; cursor:default; }

.mh-ricon {
    width:40px; height:40px;
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; flex-shrink:0;
}
.mh-ricon--rose   { background:rgba(232,84,122,0.1);  color:#e8547a; }
.mh-ricon--pink   { background:rgba(252,165,192,0.16);color:#c84370; }
.mh-ricon--purple { background:rgba(107,79,160,0.1);  color:#6b4fa0; }
.mh-ricon--indigo { background:rgba(76,58,130,0.12);  color:#4c3a82; }

.mh-rinfo       { flex:1; min-width:0; }
.mh-rname       { font-size:.88rem; font-weight:600; color:var(--mh-text); margin-bottom:.1rem; line-height:1.2; }
.mh-rcount      { font-size:.73rem; color:var(--mh-muted); }
.mh-rarrow      { color:rgba(107,79,160,0.28); font-size:.77rem; flex-shrink:0; }

/* ══════════════════════════════════════════════════
   FOOTER — Mujer Virtuosa
══════════════════════════════════════════════════ */
.mh-footer {
    display:flex; align-items:center; justify-content:space-between;
    gap:2rem; flex-wrap:wrap;
    margin-top:1.8rem;
    background:var(--mh-card);
    border:1px solid var(--mh-border);
    border-radius:24px;
    padding:1.5rem 2rem;
    box-shadow:var(--mh-shadow);
}

.mh-footer-left  { display:flex; align-items:center; gap:.9rem; }
.mh-footer-emoji { font-size:2rem; line-height:1; }
.mh-footer-left h3 {
    font-family:'Playfair Display',Georgia,serif;
    font-size:1.05rem; font-weight:700; color:var(--mh-text); margin:0 0 .18rem;
}
.mh-footer-left h3 span { color:var(--mh-rose); }
.mh-footer-left p { font-size:.8rem; color:var(--mh-muted); margin:0; }

.mh-footer-right { text-align:right; }
.mh-footer-right blockquote {
    font-family:'Playfair Display',Georgia,serif;
    font-style:italic; font-size:.94rem;
    color:var(--mh-body); margin:0 0 .3rem; line-height:1.65;
}
.mh-footer-right cite { font-size:.76rem; font-style:normal; font-weight:700; color:var(--mh-rose); }

@media (max-width:640px) {
    .mh-footer          { flex-direction:column; gap:1rem; }
    .mh-footer-right    { text-align:left; }
    .mh-verse-card      { padding:1.5rem 1rem 1.3rem; }
}