/* ===================================================================
   LP — hoja unificada y saneada
   =================================================================== */

/* -------- Variables y resets locales -------- */
:root{
  --accent: #ffd97d;
  --ink:    #0f1222;
  --muted:  #6b7280;
  --card:   #0b1220;  /* fondo tarjetas en oscuro */
}
#lpRoot, #lpRoot * { box-sizing: border-box; }

/* -------- Layout general -------- */
.lp-wrap{ max-width:min(1100px,95vw); margin:0 auto; padding:16px; }
.lp-card{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; box-shadow:0 6px 22px rgba(0,0,0,.06);
  padding:16px;
}
.lp-header{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.lp-pill{
  width:48px; height:48px; border-radius:10px; display:grid; place-items:center;
  font-weight:900; background:linear-gradient(90deg,#ffcf76,#ffb36b); color:#071223;
}
.lp-h1{ margin:0; font-size:22px; color:#b27a00; }
.lp-muted{ color:#4b5563; font-size:13px; }
.lp-sub{   color:#6b7280; font-size:13px; }

/* -------- Tabs -------- */
.lp-tabs{ display:flex; gap:8px; margin:14px 0 18px; }
.lp-tabs button{
  padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.12);
  background:#fff; color:#0f1222; font-weight:700; cursor:pointer;
}
.lp-tabs button.active{
  background:linear-gradient(90deg,var(--accent),#f7c96b);
  color:#081223; border-color:transparent; box-shadow:0 2px 10px rgba(0,0,0,.15);
}
@media (max-width:760px){
  .lp-tabs{ display:grid; grid-template-columns:1fr 1fr; }
  .lp-tabs button{ width:100%; }
}

/* -------- Columnas -------- */
.lp-cols{ display:grid; grid-template-columns:420px 1fr; gap:16px; }
@media (max-width:920px){ .lp-cols{ grid-template-columns:1fr; } }

/* -------- Lista de signos -------- */
.lp-sign-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:480px){ .lp-sign-list{ grid-template-columns:1fr; } }
.lp-sign{
  background:rgba(0,0,0,.04); padding:12px; border-radius:10px;
  border:1px solid rgba(0,0,0,.08); cursor:pointer;
}
.lp-sign.selected{ outline:2px solid rgba(255,217,125,.35); }
.lp-sign h4{ margin:0 0 6px; font-size:15px; }
.lp-sign p{ margin:0; color:#6b7280; font-size:13px; }

/* -------- Formularios -------- */
label{
  display:block; font-weight:700; color:#6b7280; font-size:13px; margin:8px 0 6px;
}
input[type=text], select, input[type=date], textarea{
  width:100%; padding:9px 10px; border-radius:10px;
  border:1px solid rgba(0,0,0,.12); background:#fff; color:#111;
}
textarea{ min-height:140px; resize:vertical; }

/* -------- Botones -------- */
.lp-btn{
  display:inline-block; background:var(--accent); color:#081223;
  padding:9px 12px; border-radius:10px; font-weight:800; border:none; cursor:pointer;
}
.lp-btn.ghost{ background:transparent; border:1px solid rgba(0,0,0,.14); color:#111; }

/* -------- Resultados / listas -------- */
.lp-result{
  margin-top:12px; padding:12px; background:rgba(0,0,0,.04);
  border-radius:10px; border:1px solid rgba(0,0,0,.08);
}
.lp-entry{
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.02));
  padding:10px; border-radius:10px; border:1px solid rgba(0,0,0,.08);
  margin-bottom:8px;
}
.lp-events{ display:flex; flex-direction:column; gap:8px; }
.lp-event{
  padding:8px; border-radius:10px; background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.08); display:flex; justify-content:space-between; align-items:center;
}
.lp-tag{ padding:6px 8px; border-radius:6px; background:rgba(255,217,125,.22); color:#081223; font-weight:700; margin-right:8px; }

/* -------- Modo oscuro (se activa cuando #lpRoot NO tiene .lp-light) -------- */
#lpRoot:not(.lp-light) .lp-card{ background:var(--card); color:#f1f5f9; }
#lpRoot:not(.lp-light) .lp-muted,
#lpRoot:not(.lp-light) .lp-sub{ color:rgba(255,255,255,.92); }

#lpRoot:not(.lp-light) .lp-tabs button{
  background:rgba(255,255,255,.06); color:#f1f5f9; border-color:rgba(255,255,255,.18);
}
#lpRoot:not(.lp-light) .lp-tabs button.active{
  background:linear-gradient(90deg,var(--accent),#f7c96b); color:#081223; border-color:transparent;
}

#lpRoot:not(.lp-light) input[type=text],
#lpRoot:not(.lp-light) input[type=date],
#lpRoot:not(.lp-light) select,
#lpRoot:not(.lp-light) textarea{
  background:rgba(255,255,255,.06); color:#f8fafc; border:1px solid rgba(255,255,255,.28);
}
#lpRoot:not(.lp-light) input::placeholder,
#lpRoot:not(.lp-light) textarea::placeholder{ color:rgba(255,255,255,.70); }

#lpRoot:not(.lp-light) .lp-result,
#lpRoot:not(.lp-light) .lp-entry,
#lpRoot:not(.lp-light) .lp-event{
  color:#f1f5f9; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22);
}

#lpRoot:not(.lp-light) .lp-sign{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#f8fafc;
}
#lpRoot:not(.lp-light) .lp-sign p{ color:rgba(255,255,255,.90); }

/* -------- Modal -------- */
.lp-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.lp-modal.is-open{ display:block; }
.lp-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.lp-modal__dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(680px,92vw); max-height:85vh; overflow:auto;
  background:#fff; color:#0f1222; border:1px solid rgba(0,0,0,.12);
  border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); padding:18px;
}
#lpRoot:not(.lp-light) .lp-modal__dialog{
  background:#0b1220; color:#e6eef6; border-color:rgba(255,255,255,.18);
}
.lp-modal__title{ margin:0 36px 10px 0; font-size:20px; }
.lp-modal__grid{ display:grid; grid-template-columns:1fr; gap:8px; }
@media(min-width:600px){ .lp-modal__grid{ grid-template-columns:1fr 1fr; } }
.lp-modal__item{
  padding:10px; border-radius:10px;
  background:#fafafa; border:1px solid rgba(0,0,0,.08);
}
#lpRoot:not(.lp-light) .lp-modal__item{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);
}
.lp-modal__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.lp-modal__close{
  position:absolute; right:10px; top:10px; width:34px; height:34px; border-radius:8px;
  background:transparent; color:currentColor; border:1px solid currentColor; opacity:.6; cursor:pointer;
}
.lp-modal__close:hover{ opacity:1; }

/* -------- Utilidad: bloquear scroll cuando modal está abierto -------- */
.lp-no-scroll{ overflow:hidden; }

/* ===== Banner de login visible y pegadizo ===== */
.lp-login-banner{
  position: sticky;       /* se queda pegado arriba del pane */
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  margin: 0 0 12px 0;
  border: 1px solid #f59e0b;
  background: #fff7ed;      /* claro */
  color: #7c2d12;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}
.lp-login-banner__icon{ font-size: 18px; line-height: 1; }
.lp-login-banner__text{ flex: 1; }
.lp-login-banner__btn{ white-space: nowrap; }

.lp-wrap:not(.lp-light) .lp-login-banner{   /* oscuro */
  background: #3b2a12;
  color: #fde68a;
  border-color: #f59e0b;
}