/* ============================================================ FECHAS ASTROLÓGICAS — ESTILO GENERAL ============================================================ */ /* Fallback por si no se pone ninguna clase en */ :root { --bg-page: #f5f5f7; --bg-card: #ffffff; --text-main: #111827; --text-muted: #6b7280; --accent: #4b8df8; --accent-strong: #2563eb; --accent-soft: #e5edff; --border-subtle: #e5e7eb; } /* Tema claro */ body.theme-light { --bg-page: #f5f5f7; --bg-card: #ffffff; --text-main: #111827; --text-muted: #6b7280; --accent: #4b8df8; --accent-strong: #2563eb; --accent-soft: #e5edff; --border-subtle: #e5e7eb; } /* Tema oscuro */ body.theme-dark { --bg-page: #050816; --bg-card: #111827; --text-main: #e5e7eb; --text-muted: #9ca3af; --accent: #60a5fa; --accent-strong: #3b82f6; --accent-soft: #1f2937; --border-subtle: #374151; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg-page); color: var(--text-main); -webkit-font-smoothing: antialiased; } /* Enlaces genéricos */ a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================================ BARRA SUPERIOR ============================================================ */ .topbar { max-width: 900px; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--text-muted); } .topbar-left { font-weight: 500; } .topbar-right a { margin-left: 0.75rem; font-weight: 500; } @media (max-width: 640px) { .topbar { padding: 0.6rem 1rem; flex-direction: column; align-items: flex-start; gap: 0.25rem; } .topbar-right a { margin-left: 0; margin-right: 0.75rem; } } /* ============================================================ CONTENEDOR PRINCIPAL (.main-wrapper) ============================================================ */ .main-wrapper { max-width: 720px; margin: 2.75rem auto 3rem; background: var(--bg-card); border-radius: 18px; padding: 2rem 2.5rem 2.25rem; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14); border: 1px solid var(--border-subtle); } @media (max-width: 640px) { .main-wrapper { margin: 1.5rem 1rem 2rem; padding: 1.5rem 1.25rem 1.75rem; border-radius: 14px; } } /* Títulos y textos dentro del wrapper */ .main-wrapper h1, .main-wrapper h2 { margin-top: 0; margin-bottom: 0.75rem; text-align: center; font-weight: 600; font-size: 1.55rem; } .main-wrapper .subtitle { text-align: center; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.75rem; } .main-wrapper p { font-size: 0.9rem; color: var(--text-muted); } /* ============================================================ FORMULARIO DE CHECKLIST ============================================================ */ form { margin: 0; } .checklist-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 0.75rem; align-items: center; margin-bottom: 1.5rem; } .checklist-form label { font-size: 0.9rem; font-weight: 500; margin-right: 0.25rem; } .checklist-form select, .checklist-form button, .checklist-form input[type="month"] { padding: 0.45rem 0.75rem; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-page); color: var(--text-main); font-size: 0.95rem; min-width: 120px; } .checklist-form button { cursor: pointer; background: var(--accent); color: #ffffff; border: none; padding: 0.5rem 1.2rem; font-weight: 500; border-radius: 999px; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35); transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease; } .checklist-form button:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45); } .checklist-form button:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.3); } .info-text { text-align: center; font-size: 0.9rem; color: var(--text-muted); } /* ============================================================ LISTA DE ITEMS / CHECKS ============================================================ */ .checklist-grid { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .item-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.45rem 0.25rem; border-bottom: 1px dashed var(--border-subtle); } .item-row:last-child { border-bottom: none; } .item-row input[type="checkbox"] { margin-top: 0.15rem; } .item-row label { flex: 1; font-size: 0.95rem; cursor: pointer; } .list-empty { margin-top: 1.5rem; text-align: center; font-size: 0.95rem; color: var(--text-muted); } /* Badge para mes/año si se usa */ .badge-month { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; font-weight: 500; margin-bottom: 0.75rem; } /* ============================================================ VISTA DE LOGIN (SIN SESIÓN) ============================================================ */ .login-container { max-width: 420px; margin: 4rem auto; padding: 2rem 2.25rem; background: var(--bg-card); border-radius: 16px; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14); border: 1px solid var(--border-subtle); text-align: center; } .login-container h2 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.4rem; } .login-container p { margin-top: 0; margin-bottom: 1.3rem; font-size: 0.95rem; color: var(--text-muted); } /* Botón de Google */ .google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.55rem 1.2rem; border-radius: 999px; background: #ffffff; color: #111827; border: 1px solid var(--border-subtle); font-size: 0.95rem; font-weight: 500; text-decoration: none; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); transition: box-shadow 0.15s ease, transform 0.08s ease, background 0.15s ease; } body.theme-dark .google-btn { background: var(--bg-page); color: var(--text-main); } .google-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25); background: #f9fafb; } .google-btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.3); } /* Texto pequeño bajo el login */ .login-note { margin-top: 0.85rem; font-size: 0.78rem; color: var(--text-muted); } /* ============================================================ UTILIDADES ============================================================ */ .text-center { text-align: center; } .text-muted { color: var(--text-muted); } /* ============================================================ LAYOUT PARA CHECKLIST LOGUEADA (.container) ============================================================ */ .container { max-width: 760px; margin: 3rem auto 4rem auto; padding: 2.5rem 2.5rem 3rem; background: var(--bg-card, #ffffff); border-radius: 18px; box-shadow: 0 18px 45px rgba(0,0,0,0.08); box-sizing: border-box; } .container h1 { margin-top: 0; margin-bottom: 1.5rem; text-align: center; font-size: 1.9rem; font-weight: 650; letter-spacing: 0.02em; } /* Selector de mes/año */ .selector-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem 1.2rem; margin-bottom: 1rem; } .selector-form label { font-size: 0.95rem; font-weight: 500; } .selector-form select, .selector-form button { padding: 0.45rem 0.9rem; font-size: 0.95rem; border-radius: 8px; border: 1px solid rgba(0,0,0,0.18); background: var(--bg-page, #f5f5f7); color: var(--text-main, #111827); min-width: 110px; box-sizing: border-box; } .selector-form button { background: var(--accent, #4b8df8); color: #ffffff; border: none; font-weight: 600; box-shadow: 0 6px 16px rgba(75,141,248,0.35); cursor: pointer; transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.12s; } .selector-form button:hover { background: var(--accent-strong, #2563eb); transform: translateY(-1px); box-shadow: 0 10px 25px rgba(37,99,235,0.4); } .selector-form button:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(37,99,235,0.4); } /* Texto informativo bajo el formulario */ .info-text { margin-top: 0.8rem; font-size: 0.9rem; text-align: center; color: var(--text-muted, #6b7280); } /* Contenedor donde aparecerá la checklist */ .resultado-mes { margin-top: 1.8rem; border-top: 1px solid var(--border-subtle, #e5e7eb); padding-top: 1.4rem; min-height: 3rem; } /* Si en el futuro la checklist se muestra en cuadrícula */ .checklist-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; } @media (min-width: 640px) { .checklist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .checklist-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.65rem 0.7rem; border-radius: 10px; background: var(--accent-soft, #e5edff); color: var(--text-main, #111827); font-size: 0.9rem; } /* Pequeño ajuste para modo oscuro */ body.theme-dark .container { background: #111827; box-shadow: 0 18px 45px rgba(0,0,0,0.85); } body.theme-dark .selector-form select, body.theme-dark .selector-form button { border-color: rgba(255,255,255,0.16); } /* ============================ Tablas FECHAS (usuarios / estadísticas / checklist) ============================ */ .tabla-usuarios, .tabla-estadisticas, .main-content table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.95rem; } .tabla-usuarios th, .tabla-usuarios td, .tabla-estadisticas th, .tabla-estadisticas td, .main-content table th, .main-content table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid #ddd; } .tabla-usuarios thead th, .tabla-estadisticas thead th, .main-content table thead th { background: #f5f5f5; font-weight: 600; } .tabla-usuarios tbody tr:nth-child(even), .tabla-estadisticas tbody tr:nth-child(even), .main-content table tbody tr:nth-child(even) { background: #fafafa; } .tabla-usuarios tbody tr:hover, .tabla-estadisticas tbody tr:hover, .main-content table tbody tr:hover { background: #f0f0f0; } /* ===== Ajustes cabecera y formulario de signos ===== */ .user-info { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; } .form-signos { max-width: 480px; padding: 1.5rem; border-radius: 12px; background: var(--card, #f7f9ff); box-shadow: 0 8px 24px rgba(0,0,0,.06); } .form-signos p { margin-bottom: 1rem; } /* ============================ Cabecera / bloque de usuario ============================ */ .main-header{ display:flex; justify-content:flex-end; align-items:center; padding:0.75rem 1.5rem; border-bottom:1px solid var(--border); gap:1rem; } .user-info{ display:flex; flex-direction:column; align-items:flex-end; gap:0.25rem; } .user-signos{ font-size:0.85rem; padding:0.4rem 0.75rem; border-radius:999px; background:var(--pill); border:1px solid var(--border); box-shadow:0 1px 3px var(--shadow); display:flex; flex-wrap:wrap; gap:0.35rem; } .user-signos strong{ font-weight:600; } .user-name{ font-size:0.9rem; font-weight:600; opacity:0.9; } .logout-link{ font-size:0.8rem; text-decoration:none; padding:0.2rem 0.6rem; border-radius:999px; border:1px solid var(--border); background:var(--card); } .logout-link:hover{ background:var(--btn-h); } /* Botón de tema en cabecera, si existe */ #theme-toggle{ margin-left:0.5rem; padding:0.2rem 0.6rem; border-radius:999px; border:1px solid var(--border); background:var(--btn); } /* ============================ Bloque de contexto del mes ============================ */ .context-banner{ margin:1rem auto 0.5rem auto; max-width:960px; padding:0.75rem 1rem; border-radius:0.85rem; background:var(--card); border:1px solid var(--border); font-size:0.9rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; } .context-banner-main{ font-weight:600; } .context-banner-secondary{ font-size:0.8rem; opacity:0.8; } /* ============================ Tabla / lista de predicciones ============================ */ .predicciones-list{ max-width:960px; margin:0.5rem auto 1.5rem auto; } .prediccion-item{ border-radius:0.75rem; padding:0.75rem 1rem; margin-bottom:0.6rem; background:var(--card); border:1px solid var(--border); } .prediccion-item-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:0.35rem; font-size:0.85rem; } .prediccion-signo{ font-weight:600; text-transform:uppercase; letter-spacing:0.03em; opacity:0.9; } .prediccion-check{ font-size:0.85rem; } /* Estado cumplida */ .prediccion-item.cumplida{ border-color:var(--accent); } /* ============================ Mis estadísticas (tabla) ============================ */ .stats-table{ width:100%; max-width:720px; margin:1rem auto 2rem auto; border-collapse:collapse; font-size:0.9rem; } .stats-table th, .stats-table td{ border:1px solid var(--border); padding:0.5rem 0.75rem; text-align:center; } .stats-table th{ background:var(--pill); font-weight:600; } .stats-table-caption{ max-width:720px; margin:1rem auto 0.25rem auto; font-size:0.9rem; opacity:0.85; } /* ===== Cabecera usuario FECHAS ===== */ .main-header{ padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); } .user-info{ display: flex; flex-direction: column; /* todo en columnas, no en una sola línea pegada */ align-items: flex-start; /* alineado a la izquierda */ gap: 0.35rem; /* separación entre líneas */ } .user-signos{ font-weight: 600; } .user-name{ font-weight: 500; } .user-info .logout-link, .user-info #theme-toggle, .user-info button{ margin-right: .5rem; /* separa Cambiar tema / Cerrar sesión / Desbloquear */ } /* Bloque de “estas viendo las predicciones…” un poco destacado */ .viewing-info{ background: var(--pill); border-radius: .5rem; padding: .6rem .8rem; font-size: .95rem; margin-bottom: 1rem; } /* Login WordPress (Astrolab) */ .login-wp-block{ margin-top: .5rem; } .login-button-wp{ background: #23282d; color: #ffffff; } .login-button-wp:hover{ filter: brightness(1.08); } /* =============================== LAYOUT BLOQUES FECHAS - Cabecera centrada - Bloque aviso ascendente - Bloque checklist =============================== */ .main-wrapper{ max-width: 900px; margin: 2rem auto; } /* Bloque 1: cabecera usuario + botones */ .main-header{ margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(0,0,0,.06); } .main-header .user-info{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; } /* Línea de signos arriba */ .main-header .user-signos{ font-size: 0.95rem; } /* Nombre + acciones (cerrar sesión / cambiar tema) */ .main-header .user-meta{ display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } /* Bloque 2: aviso de qué ascendente se está viendo */ .asc-info-block{ margin-bottom: 1.5rem; padding: 0.75rem 1rem; background: rgba(0,0,0,.03); border-radius: 10px; font-size: 0.95rem; } /* Por si acaso algún navegador mete márgenes raros */ .asc-info-block p{ margin: 0; } /* Bloque 3: checklist (tablas) */ .main-content{ margin-top: 0.5rem; } .resultado-mes{ margin-top: 1.5rem; } /* ============================================ 1) CENTRAR CABECERA DE IDENTIFICACIÓN ============================================ */ .main-header { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; } .main-header .user-info { width: 100%; display: flex; flex-direction: column; gap: .50rem; } .main-header .user-signos { font-size: 1rem; } .main-header .user-meta { display: flex; flex-direction: column; align-items: center; gap: .4rem; } /* Para los botones de cerrar sesión y cambiar tema */ .main-header .user-actions { display: flex; gap: 1.25rem; justify-content: center; } /* ============================================ 2) AJUSTE DEL BLOQUE AZUL DE CONFIGURAR SIGNOS ============================================ */ .config-signos-container { max-width: 480px; /* menos ancho, más estético */ margin: 0 auto; /* centrado */ padding: 1.5rem 2rem; background: rgba(0,0,0,0.04); border-radius: 12px; } /* Que el título también quede centrado */ .config-signos-container h2, .config-signos-container h3 { text-align: center; } /* === FECHAS: cabecera usuario con fondo suave === */ .main-header { /* Fondo suave complementario al resto de la paleta */ background: var(--accent-soft); border-radius: 12px; padding: 1rem 1.5rem; margin-top: -0.25rem; margin-bottom: 1.75rem; box-shadow: 0 8px 22px rgba(15,23,42,0.10); } /* Ajuste para tema oscuro: fondo un poco más oscuro pero sin desentonar */ body.theme-dark .main-header { background: #111827; box-shadow: 0 10px 26px rgba(0,0,0,0.75); } /* === Ajuste enlaces finales de la checklist === */ .checklist-extra-links { margin-top: 1.5rem; text-align: center; font-size: 0.9rem; } .checklist-extra-links a { text-decoration: none; font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.8); box-shadow: 0 0 0 1px rgba(0,0,0,0.04); display: inline-block; margin: 0 0.25rem; } .checklist-extra-links a:hover { text-decoration: underline; } /* Reducir un poco el hueco inferior bajo la tarjeta principal */ .main-card, .checklist-card { margin-bottom: 0.5rem; } /* === Ajustes para integrar mejor la app en móvil === */ @media (max-width: 768px) { .main-wrapper { max-width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } .main-card, .checklist-card { border-radius: 16px; } } /* Ligerísimo aumento de ancho también en pantallas medianas */ @media (min-width: 769px) and (max-width: 1200px) { .main-wrapper { max-width: 960px; } } /* === Modo incrustado (from_wp=1) para integrarse mejor en WordPress === */ body.embedded { background: transparent; /* que se funda con el fondo de WP */ } body.embedded .main-wrapper { max-width: 100%; margin: 0 auto; padding: 1.5rem 0; background: transparent; /* quita el “cartón” gris */ box-shadow: none; border: none; } /* ==== Checklist mensual FECHAS ==== */ .checklist-lista { list-style: none; margin: 1.5rem 0 0; padding-left: 0; } .checklist-item { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.75rem; } .checklist-item input[type="checkbox"] { margin-top: 0.25rem; } .checklist-texto { display: inline-block; line-height: 1.4; } /* ===== Pantalla de login dentro del iframe ===== */ .main-content--login { display: flex; justify-content: center; align-items: center; min-height: 70vh; } .card-login { max-width: 520px; width: 100%; margin: 0 auto; padding: 1.75rem 1.5rem; border-radius: 14px; background: var(--card-bg, #ffffff); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); } .card-title { margin: 0 0 0.5rem; font-size: 1.5rem; } .card-subtitle { margin: 0 0 0.75rem; font-size: 0.95rem; opacity: 0.9; } .card-text { font-size: 0.9rem; margin-bottom: 1.5rem; } .card-actions { margin: 0; } .btn-full { display: inline-block; width: 100%; text-align: center; } /* ===== Ajustes generales para que no desborde en móvil ===== */ html, body { margin: 0; padding: 0; overflow-x: hidden; } .main-wrapper { max-width: 980px; margin: 0 auto; } @media (max-width: 768px) { .checklist li { margin-bottom: 0.4rem; } .checklist li label { line-height: 1.35; } } /* ===== Ajustes de layout para que no desborde en iframe ===== */ /* Reducimos un poco el ancho útil y lo centramos */ .main-wrapper { max-width: 960px; width: 94%; margin: 0 auto; } /* Un poco de aire lateral para que no vaya pegado al borde del iframe */ .main-content { padding: 0 0.75rem 1.5rem; } /* Cuando la app está dentro de un iframe, que no parezca "página dentro de página" */ body.is-embedded { background: transparent; } body.is-embedded .main-wrapper { box-shadow: none; border-radius: 0; max-width: 100%; width: 100%; } /* ========= Ajustes extra para móviles / iframe ========= */ /* Que nunca haya algo más ancho que el propio viewport */ html, body { max-width: 100%; width: 100%; } /* Dentro de iframe: fuera anchos fijos, todo a 100% */ body.is-embedded .main-wrapper { max-width: 100%; width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; } /* Contenido un poco aireado pero sin forzar mínimo grande */ body.is-embedded .main-content { max-width: 100%; width: 100%; padding: 0 0.75rem 1.5rem; box-sizing: border-box; } /* En pantallas muy estrechas, todavía menos padding lateral */ @media (max-width: 600px) { body.is-embedded .main-content { padding-left: 0.5rem; padding-right: 0.5rem; } } /* Por si algún div tozudo provoca scroll horizontal */ body.is-embedded { overflow-x: hidden; } /* ========================================================== * AJUSTES EXTRA PARA IFREAME · TABLET / MÓVIL * ========================================================== */ /* Un pelín más compacto en general en pantallas medias */ @media (max-width: 1024px) { body { padding: 0.5rem 0.25rem; } .main-wrapper { max-width: 100%; margin: 0.5rem auto; padding: 1rem 0.75rem; } .main-content { max-width: 100%; } } /* Tablet: reducir “aire” lateral y compensar visualmente los bordes */ @media (max-width: 900px) { .main-wrapper { padding-left: 0.5rem; padding-right: 0.5rem; } .main-content { max-width: 100%; } } /* Móviles: evitar cualquier desborde horizontal y quitar efecto “tarjeta gorda” */ @media (max-width: 640px) { html, body { overflow-x: hidden; } .main-wrapper { max-width: 100%; margin: 0.25rem auto; padding-left: 0.5rem; padding-right: 0.5rem; /* Menos sensación de “página dentro de página” */ border-radius: 0; box-shadow: none; } .main-content { max-width: 100%; padding-left: 0.25rem; padding-right: 0.25rem; } /* Por si algún texto se pone creativo y alarga demasiado */ .checklist li label, .predicciones-lista li p { word-break: break-word; hyphens: auto; } } /* ========================================================== * AJUSTE FINO · PANTALLAS <= 800px * - Menos margen lateral * - Nada de sensación de "mínimo absoluto ancho" * ========================================================== */ @media (max-width: 700px) { .main-wrapper { max-width: 100%; margin: 0.25rem auto; padding-left: 0.4rem; padding-right: 0.4rem; } .main-content { max-width: 100%; padding-left: 0.2rem; padding-right: 0.2rem; } /* Por si algún elemento se pone chulo horizontalmente */ .checklist, .checklist li, .predicciones-wrap, .predicciones-asc, .predicciones-lista { max-width: 100%; } } /* ===== Pantalla de login dentro del iframe ===== */ .main-content--login { display: flex; justify-content: center; /* centrado horizontal */ align-items: flex-start; /* pegado arriba */ min-height: auto; /* que mida lo que necesite, nada de 70vh */ padding-top: 1.5rem; /* un poco de aire respecto al borde superior */ } .card-login { max-width: 520px; width: 100%; margin: 0 auto; padding: 1.75rem 1.5rem; border-radius: 14px; background: var(--card-bg, #ffffff); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); } .card-title { margin: 0 0 0.5rem; font-size: 1.5rem; } .card-subtitle { margin: 0 0 0.75rem; font-size: 0.95rem; opacity: 0.9; } .card-text { font-size: 0.9rem; margin-bottom: 1.5rem; } .card-actions { margin: 0; } .btn-full { display: inline-block; width: 100%; text-align: center; }