/* Estilos de los portales de cliente y asesora. Mobile-first: pensado primero para el móvil (es donde se usa el diario, varias veces al día, muchas veces de noche). Nórdico y cálido a la vez: mucho blanco, líneas finas, azul marino como color principal, y un poco de color donde ayuda a distinguir de un vistazo (tipos de entrada del diario, tipos de evento del calendario). */ @import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600&family=Inter:wght@400;500;600&display=swap'); :root { --mc-navy: #1F4C73; --mc-navy-dark: #163A58; --mc-teal: #5E9C8C; --mc-gold: #D9A441; --mc-terra: #C36A45; --mc-gris: #A8A296; --mc-bg: #F7F5F0; --mc-ink: #2E2C29; --mc-muted: #8C8779; --mc-line: #E7E3DA; --mc-sombra: 0 1px 2px rgba(46,44,41,.05), 0 4px 14px rgba(46,44,41,.06); } #mc-portal-cliente-app, #mc-portal-asesora-app { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 480px; margin: 0 auto; padding: 20px 16px 100px; color: var(--mc-ink); font-size: 15px; line-height: 1.5; background: var(--mc-bg); min-height: 100vh; box-sizing: border-box; position: relative; transition: background .25s ease, color .25s ease; } @media (min-width: 560px) { #mc-portal-cliente-app, #mc-portal-asesora-app { margin: 24px auto; min-height: auto; border-radius: 24px; box-shadow: var(--mc-sombra); border: 1px solid var(--mc-line); } } #mc-portal-cliente-app.mc-noche { background: #14212C; color: #EDF2F6; } #mc-portal-cliente-app.mc-noche .mc-card, #mc-portal-cliente-app.mc-noche .mc-campo-fijo, #mc-portal-cliente-app.mc-noche .mc-sheet-panel, #mc-portal-cliente-app.mc-noche .mc-tipo-btn { background: #1C2E3C; color: #EDF2F6; border-color: #2C4258; } #mc-portal-cliente-app.mc-noche .mc-btn-icono { border-color: #2C4258; color: #EDF2F6; } .mc-marca { color: var(--mc-navy); font-family: 'Lora', Georgia, serif; font-size: 15px; font-weight: 600; margin: 0 0 18px; display: flex; align-items: center; gap: 8px; } .mc-marca::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--mc-navy); border-right-color: transparent; transform: rotate(45deg); display: inline-block; } /* El botón "← Inicio" antes era un simple enlace de texto (mc-btn-texto) y se perdía visualmente — ahora tiene aspecto de botón de verdad (fondo, borde, más contraste) para que se note claramente que se puede tocar. */ .mc-btn-inicio { display: inline-flex; align-items: center; gap: 4px; background: #EAF0F5; color: var(--mc-navy); border: 1px solid #D5E2EC; border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; margin-bottom: 10px; } .mc-btn-inicio:hover { background: #DCE8F1; } #mc-portal-cliente-app.mc-noche .mc-btn-inicio { background: #1B2E3E; color: #EDF2F6; border-color: #2C4258; } .mc-etiqueta { font-size: 12px; color: var(--mc-muted); margin: 0 0 5px; text-transform: uppercase; letter-spacing: .04em; } .mc-valor { font-family: 'Lora', Georgia, serif; font-size: 17px; font-weight: 600; margin: 0 0 12px; } /* margin explícito (no confiar en el margen por defecto del navegador para

): el tema de WordPress de la web real resetea los márgenes de los párrafos a 0, así que sin esto los textos y los botones que vienen justo debajo se quedan pegados. */ .mc-muted { color: var(--mc-muted); font-size: 13px; margin: 0 0 12px; line-height: 1.5; } .mc-seccion { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mc-muted); margin: 20px 0 10px; } /* Espaciado de las tarjetas de la pantalla de Inicio: título, texto y botón necesitan aire entre ellos incluso si el tema del sitio anula los márgenes por defecto de párrafo. */ .mc-card > .mc-btn-primario, .mc-card > a.mc-btn-primario { margin-top: 4px; } .mc-card > .mc-etiqueta + .mc-muted { margin-top: 2px; } .mc-card { background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 18px; margin-bottom: 14px; box-shadow: var(--mc-sombra); } .mc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mc-row-between { justify-content: space-between; margin-bottom: 12px; } .mc-btn-primario { display: inline-flex; align-items: center; justify-content: center; background: var(--mc-navy); color: #fff; border: none; border-radius: 10px; padding: 13px 16px; font-size: 14px; font-weight: 500; font-family: inherit; text-decoration: none; width: 100%; box-sizing: border-box; cursor: pointer; min-height: 46px; transition: background .15s ease, transform .1s ease; } .mc-btn-primario:hover { background: var(--mc-navy-dark); } .mc-btn-primario:active { transform: scale(.98); } .mc-btn-texto { background: none; border: none; color: var(--mc-navy); font-size: 13px; font-weight: 500; padding: 6px 0; cursor: pointer; text-decoration: none; } /* Bloque "Contacta con tu asesora": la próxima sesión se destaca como una tarjeta propia (icono + fecha + hora) en vez de una línea de texto suelta, y el botón de WhatsApp pasa de enlace de texto plano a un botón con su propio color de marca, a la misma altura visual que el botón de videollamada. */ /* FIX: el emoji 📅 suelto (sin ningún fondo/contenedor) se renderiza de forma distinta según el sistema — en algunos (p.ej. macOS) sale como un icono de calendario con un número de día dibujado encima, que sin contexto puede parecer un elemento roto en vez de un simple adorno. Ahora va dentro de una insignia circular de tamaño fijo, a juego con el resto de iconos redondeados del portal. */ .mc-contacto-sesion { display: flex; align-items: center; gap: 14px; background: var(--mc-bg); border-radius: 12px; padding: 14px; } .mc-contacto-sesion-icono { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-size: 18px; line-height: 1; box-shadow: 0 0 0 1px var(--mc-line) inset; } .mc-contacto-sesion-fecha { margin: 0; font-size: 14px; font-weight: 600; } .mc-contacto-sesion-hora { margin: 2px 0 0; font-size: 13px; color: var(--mc-muted); } #mc-portal-cliente-app.mc-noche .mc-contacto-sesion { background: #14212C; } #mc-portal-cliente-app.mc-noche .mc-contacto-sesion-icono { background: #1F2E3A; box-shadow: 0 0 0 1px #2A3B49 inset; } .mc-btn-whatsapp { display: flex; align-items: center; justify-content: center; gap: 7px; background: #EAF7F1; color: #1F7A54; border: 1px solid #CDEBDD; border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 500; text-decoration: none; width: 100%; box-sizing: border-box; margin-top: 10px; transition: background .15s ease; } .mc-btn-whatsapp:hover { background: #DCF2E7; } #mc-portal-cliente-app.mc-noche .mc-btn-whatsapp { background: #173226; color: #7FD9AE; border-color: #204436; } .mc-btn-icono { background: #fff; border: 1px solid var(--mc-line); border-radius: 10px; width: 36px; height: 36px; font-size: 15px; cursor: pointer; color: var(--mc-ink); display: flex; align-items: center; justify-content: center; } /* Barra de progreso del cuestionario paso a paso (ver renderCuestionario en portal.js) — un carril de fondo con un relleno que crece según el paso actual / total de secciones. */ .mc-progreso-barra { height: 6px; background: var(--mc-line); border-radius: 3px; overflow: hidden; } .mc-progreso-relleno { height: 100%; background: var(--mc-navy); border-radius: 3px; transition: width .25s ease; width: 0%; } #mc-portal-cliente-app.mc-noche .mc-progreso-barra { background: #2C4258; } .mc-campo-fijo { border: 1px solid var(--mc-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: #fff; } .mc-campo-fijo label { display: block; font-size: 11px; color: var(--mc-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .03em; } .mc-campo-fijo input, .mc-campo-fijo textarea, .mc-campo-fijo select { width: 100%; box-sizing: border-box; border: none; padding: 0; font-size: 15px; font-family: inherit; color: inherit; background: transparent; -webkit-appearance: none; appearance: none; } .mc-campo-fijo select { background-image: linear-gradient(45deg, transparent 50%, var(--mc-muted) 50%), linear-gradient(135deg, var(--mc-muted) 50%, transparent 50%); background-position: calc(100% - 4px) 8px, calc(100% - 9px) 8px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 16px; } .mc-campo-fijo strong { font-size: 17px; font-family: 'Lora', Georgia, serif; } /* Checkboxes de varias opciones a la vez (p.ej. "Para beber utiliza"). .mc-campo-fijo label ya tiene estilos pensados para la ETIQUETA del campo (mayúsculas, 11px) — hay que reiniciarlos aquí porque, al ser un selector descendiente, también alcanzaría a estos labels de cada casilla si no se sobreescriben explícitamente. */ .mc-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 2px; } .mc-campo-fijo .mc-checkbox-item { display: flex !important; align-items: center; gap: 6px; text-transform: none !important; font-size: 15px !important; letter-spacing: normal !important; margin-bottom: 0 !important; width: auto; cursor: pointer; } .mc-checkbox-item input[type="checkbox"] { width: auto !important; flex-shrink: 0; } /* Cabecera fija del cuestionario: se queda pegada arriba al hacer scroll por un formulario largo, para que siempre haya una forma visible de volver a la pantalla principal. */ .mc-cuestionario-cabecera { position: sticky; top: 0; z-index: 30; background: var(--mc-bg); display: flex; align-items: center; gap: 12px; padding: 10px 0; margin: -20px -16px 14px; padding-left: 16px; padding-right: 16px; border-bottom: 1px solid var(--mc-line); } #mc-portal-cliente-app.mc-noche .mc-cuestionario-cabecera { background: #14212C; border-color: #2C4258; } .mc-seccion-cuestionario { border-top: 3px solid var(--mc-teal); } .mc-vacio { text-align: center; padding: 18px 8px; } .mc-vacio .mc-btn-primario { margin-top: 12px; } /* FIX: antes .mc-entrada-hora llevaba white-space:nowrap + un min-width fijo de 92px, pensado para una hora simple ("07:30"). En cuanto la entrada es de un tipo con rango ("22:45 – 23:04 · Despertar"), ese texto ya no cabía en 92px pero seguía sin poder partirse en dos líneas — se salía por encima del texto libre de al lado y los dos se solapaban (visto en pantallas de móvil estrechas). Ahora hora y texto van en una columna propia (mc-entrada-contenido) debajo/al lado del punto de color, cada una en su propia línea, así que nunca pueden pisarse sin importar lo larga que sea la etiqueta. */ .mc-entrada { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--mc-line); font-size: 14px; } .mc-entrada-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; } .mc-entrada-dot-despertar, .mc-entrada-dot-acostarse, .mc-entrada-dot-levantarse { background: var(--mc-navy); } .mc-entrada-dot-siesta { background: var(--mc-teal); } .mc-entrada-dot-comida { background: var(--mc-gold); } .mc-entrada-dot-nota { background: var(--mc-terra); } .mc-entrada-contenido { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .mc-entrada-hora { font-weight: 600; } .mc-entrada-texto { color: var(--mc-muted); word-break: break-word; } .mc-fab { position: fixed; right: 20px; bottom: 26px; width: 56px; height: 56px; border-radius: 50%; background: var(--mc-navy); color: #fff; border: none; font-size: 28px; line-height: 1; box-shadow: 0 4px 16px rgba(31,76,115,.4); cursor: pointer; z-index: 50; display: flex; align-items: center; justify-content: center; transition: transform .15s ease; } .mc-fab:active { transform: scale(.94); } .mc-sheet-overlay { position: fixed; inset: 0; background: rgba(20,20,18,.45); display: flex; align-items: flex-end; z-index: 100; animation: mc-fade .15s ease; } .mc-sheet-panel { width: 100%; max-width: 480px; margin: 0 auto; background: #fff; border-radius: 22px 22px 0 0; padding: 22px 18px 26px; box-sizing: border-box; animation: mc-subir .2s ease; } @keyframes mc-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes mc-subir { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .mc-tipo-btn { flex: 1; border: 1.5px solid var(--mc-line); background: #fff; border-radius: 12px; padding: 12px 4px; font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color .12s ease, background .12s ease; } .mc-tipo-btn-activo { border-color: var(--mc-navy); background: #EAF0F5; } .mc-sheet-panel input[type=text] { width: 100%; box-sizing: border-box; margin: 14px 0; height: 44px; border: 1px solid var(--mc-line); border-radius: 10px; padding: 0 12px; font-size: 15px; } /* La caja de notas es un