/* Progreso · estilos (Inicio colorido, pantallas internas sobrias) */
* { box-sizing: border-box; }
body { margin: 0; font-family: Poppins, system-ui, sans-serif; color: #3D3A5C; background: #F7F7FC; }
body.interna, body.login { background: #F3F3F5; color: #1E1E24; }
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 100px; position: relative; }
a { color: #5B4FB3; text-decoration: none; }
h1, h2, p { margin: 0; }
h2 { font-size: 16px; font-weight: 500; }
.pad { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sube { margin-top: -64px; position: relative; }
.card { background: #FFF; border-radius: 20px; padding: 16px; box-shadow: 0 8px 24px rgba(20,20,30,.08); display: flex; flex-direction: column; gap: 12px; }
.toast { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9; background: #1E1E24; color: #FFF; padding: 10px 16px; border-radius: 12px; font-size: 13px; box-shadow: 0 8px 20px rgba(0,0,0,.2); animation: toast 4s forwards; }
@keyframes toast { 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.error { background: #FDEBEE; color: #8E2236; padding: 10px 14px; border-radius: 12px; font-size: 13px; }
.vacio, .nota { font-size: 13px; color: #6B6B76; }
.titulo { font-size: 24px; font-weight: 500; }

/* Botones */
.btn { display: flex; align-items: center; justify-content: center; height: 52px; border: none; border-radius: 14px; background: #5B4FB3; color: #FFF; font: 500 15px Poppins, sans-serif; cursor: pointer; width: 100%; box-shadow: 0 8px 18px rgba(91,79,179,.25); }
.btn.grad, .btn-balance { background: linear-gradient(90deg, #6A82F5, #C46FE8); box-shadow: 0 10px 24px rgba(157,108,242,.3); }
.btn.suave { background: #FFF; color: #5B4FB3; box-shadow: 0 6px 18px rgba(20,20,30,.07); }
.btn.peligro { background: #C2364D; box-shadow: none; }
.mini { height: 36px; padding: 0 14px; border: none; border-radius: 10px; background: #5B4FB3; color: #FFF; font: 500 12.5px Poppins, sans-serif; cursor: pointer; }
.mini.ok { background: #E6F8F1; color: #1E7A5C; }

/* Formularios */
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #6B6B76; }
.form input:not([type=checkbox]):not([type=radio]):not([type=range]) { height: 46px; border: 1px solid #DEDEE4; border-radius: 12px; padding: 0 14px; font: 15px Poppins, sans-serif; color: #1E1E24; background: #FBFBFC; width: 100%; }
.form input:focus { outline: 2px solid #A99BF5; outline-offset: 1px; }
.form input[type=range] { accent-color: #7F75C4; width: 100%; }
output { color: #5B4FB3; font-weight: 600; }
.etq { font-size: 12.5px; color: #6B6B76; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.op { cursor: pointer; }
.op input { position: absolute; opacity: 0; pointer-events: none; }
.op span, a.op { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid #E4E4E9; background: #FFF; color: #3A3A44; font-size: 13px; }
.op.ic span { gap: 6px; }
.op input:checked + span, a.op.sel { background: #E9E7F3; border-color: #7F75C4; color: #433A8F; font-weight: 600; }
.op input:focus-visible + span { outline: 2px solid #A99BF5; }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
[hidden] { display: none !important; } /* respeta los bloques ocultos (fecha / días) */
.form label.op, .form label.diasem { display: block; position: relative; } /* chips y días no se estiran */
.diasem input { position: absolute; opacity: 0; pointer-events: none; }
.diasem span { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 20px; border: 1px solid #E4E4E9; font-size: 13px; color: #6B6B76; cursor: pointer; }
.diasem input:checked + span { background: #7F75C4; border-color: #7F75C4; color: #FFF; font-weight: 600; }
.switches { gap: 0; padding: 4px 16px; }
.switches .etq { padding: 12px 0 4px; }
.sw { flex-direction: row !important; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ECECF0; cursor: pointer; position: relative; }
.sw:last-child { border-bottom: none; }
.sw span { display: flex; flex-direction: column; }
.sw b { font-size: 14px; font-weight: 500; color: #1E1E24; }
.sw small { font-size: 11.5px; color: #6B6B76; }
.sw input { position: absolute; opacity: 0; }
.sw i { width: 48px; height: 28px; border-radius: 14px; background: #DEDEE4; position: relative; flex-shrink: 0; transition: background .2s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 11px; background: #FFF; transition: left .2s; }
.sw input:checked + i { background: #7F75C4; }
.sw input:checked + i::after { left: 23px; }
.check { flex-direction: row !important; align-items: center; gap: 8px; color: #3A3A44 !important; }

/* Cabecera interna oscura */
.top { background: linear-gradient(160deg, #22222A, #2F2B3D); border-radius: 0 0 30px 30px; padding: 24px 20px 88px; display: flex; align-items: flex-start; gap: 12px; color: #FFF; }
.top h1 { font-size: 24px; font-weight: 500; }
.top p { font-size: 13px; color: #B9B6C8; }
.top .volver { color: #C9C3EE; width: 44px; height: 44px; display: flex; align-items: center; flex-shrink: 0; }
.top .casa { margin-left: auto; color: #C9C3EE; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.top .salir { margin-left: auto; color: #C9C3EE; font-size: 13px; padding: 10px 0; }

/* Listas */
.lista { gap: 0; padding: 6px 0; }
.lista h2 { padding: 10px 16px 6px; }
.lista .vacio { padding: 6px 16px 12px; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid #ECECF0; color: #1E1E24; }
.fila div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fila b { font-size: 14px; font-weight: 500; }
.fila small { font-size: 12px; color: #6B6B76; }
.fila .meta { color: #5B4FB3; }
.tachado { text-decoration: line-through; color: #9A9AA5; }
.flecha { color: #9A9AA5; font-size: 22px; }
.tipo-ic { width: 34px; height: 34px; border-radius: 17px; background: #E9E7F3; color: #5B4FB3; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crece { flex-grow: 1; }
.aviso-admin { font-size: 13.5px; padding: 8px 12px; background: #FDF2E2; border-radius: 10px; color: #6B4E1F; }

/* Login */
.login-hero { background: linear-gradient(135deg, #6A82F5, #9D6CF2 55%, #C46FE8); color: #FFF; padding: 60px 24px 110px; border-radius: 0 0 36px 36px; }
.login-hero .marca { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; opacity: .85; }
.login-hero h1 { font-size: 30px; font-weight: 500; margin: 6px 0; }
.login-hero p { font-weight: 300; opacity: .9; }
.login-card { margin: -70px 18px 0; position: relative; }

/* Inicio */
.hero { height: 230px; background: linear-gradient(135deg, #6A82F5, #9D6CF2 55%, #C46FE8); border-radius: 0 0 36px 36px; padding: 30px 24px 0; position: relative; overflow: hidden; color: #FFF; }
.marca-fondo { position: absolute; top: 62px; left: 18px; font-size: 64px; font-weight: 600; opacity: .1; white-space: nowrap; }
.hero-fila { position: relative; display: flex; justify-content: space-between; align-items: center; }
.fecha { font-size: 13px; font-weight: 300; opacity: .9; }
.hero h1 { font-size: 26px; font-weight: 500; }
.avatar { width: 46px; height: 46px; border-radius: 23px; border: 2px solid rgba(255,255,255,.7); background: rgba(255,255,255,.18); color: #FFF; display: flex; align-items: center; justify-content: center; }
.dia { margin: -118px 18px 0; position: relative; padding: 0; gap: 0; border-radius: 22px; box-shadow: 0 12px 34px rgba(98,86,180,.14); }
.dia-fila { display: flex; gap: 14px; align-items: center; padding: 18px; }
.persona { flex-shrink: 0; }
.dia-texto { display: flex; flex-direction: column; gap: 6px; }
.dia-pct { display: flex; align-items: center; gap: 8px; }
.dia-pct strong { font-size: 30px; font-weight: 600; }
.chip { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; }
.dia-texto p { font-size: 14px; line-height: 1.45; color: #4A4668; }
.para-hoy { border-top: 1px solid #F0F0F7; padding: 14px 22px 18px; display: flex; flex-direction: column; gap: 4px; }
.para-hoy span { font-size: 11px; font-weight: 500; letter-spacing: 1px; color: #8E7CF3; }
.para-hoy p { font-size: 14.5px; font-weight: 500; font-style: italic; line-height: 1.5; color: #3D3A5C; }
.aviso { background: #FFF; border-radius: 12px; padding: 6px 6px 6px 10px; display: flex; gap: 8px; align-items: center; box-shadow: 0 4px 14px rgba(98,86,180,.07); font-size: 12px; color: #4A4668; line-height: 1.35; }
.aviso > span:nth-child(2) { flex-grow: 1; }
.aviso strong { color: #3D3A5C; }
.aviso .ico { width: 22px; height: 22px; border-radius: 11px; background: #EEF0FA; color: #6C5CE7; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; }
.aviso .ico.reloj { background: #FDF2E2; color: #9A5F0F; }
.x { width: 32px; height: 32px; border: none; background: transparent; color: #77739A; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.seccion { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; color: #3D3A5C; }
.seccion a { font-size: 13px; color: #6C5CE7; }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cel { position: relative; }
.cel form { display: block; }
.editar { position: absolute; top: 6px; right: 6px; z-index: 2; width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.85); color: #77739A; }
.tile { position: relative; height: 132px; border: none; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 6px 8px; font-family: inherit; cursor: pointer; background: #FFF; color: #8E7CF3; box-shadow: 0 6px 20px rgba(98,86,180,.10); text-align: center; width: 100%; }
.tile b { font-size: 13.5px; font-weight: 500; }
.tile small { font-size: 10.5px; opacity: .85; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile.ok { background: linear-gradient(135deg, #3FC49A, #7ED9B4); color: #FFF; box-shadow: 0 10px 24px rgba(63,196,154,.35); }
.tile.off { background: transparent; box-shadow: none; outline: 1.5px dashed #CFCBE3; outline-offset: -1.5px; color: #8F8BAB; }
.tag { position: absolute; top: 9px; font-size: 8.5px; font-weight: 600; letter-spacing: .6px; padding: 2px 7px; border-radius: 8px; background: #F1EEFE; color: #5B4BD1; }
.tile.ok .tag { background: rgba(255,255,255,.28); color: #FFF; }
.tile.off .tag { background: #EFEEF6; color: #77739A; }
.accesos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acceso { background: #FFF; border-radius: 18px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #3D3A5C; box-shadow: 0 6px 20px rgba(98,86,180,.08); }
.acceso b { font-size: 13px; font-weight: 500; }
.acceso small { font-size: 11px; color: #77739A; }
.bola { width: 42px; height: 42px; border-radius: 21px; background: linear-gradient(135deg, #8EA2FA, #B48CF6); color: #FFF; display: flex; align-items: center; justify-content: center; }
.bola.rosa { background: linear-gradient(135deg, #F27BB0, #F59AA0); }
.btn-balance { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 16px; color: #FFF; font-size: 16px; font-weight: 500; margin-top: 6px; }

/* Recomendado del día y mensaje de Paul */
.video { background: #FFF; border-radius: 18px; padding: 12px; display: flex; gap: 12px; align-items: center; box-shadow: 0 6px 20px rgba(98,86,180,.08); }
.mini-video { width: 112px; height: 74px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2F2B3D, #4A62D9) center / cover; }
.video-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.video-etq { font-size: 10px; font-weight: 600; letter-spacing: .8px; color: #3A4FBF; }
.video-txt b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #2E2A4D; }
.video-txt small { font-size: 11.5px; color: #77739A; }
.video-btns { display: flex; gap: 8px; margin-top: 4px; }
.mini.claro { background: #EEF1FE; color: #3A4FBF; }
a.mini { display: inline-flex; align-items: center; color: #FFF; background: #4A62D9; }
.aviso.paul .ico { background: #2F2B3D; color: #FFF; }

/* Etapa 2 */
.top.luna { background: linear-gradient(160deg, #CFE2F6, #DAD7F5); color: #24314A; }
.top.luna p, .top.luna .volver { color: #4F5F7A; }
.top.multi { background: radial-gradient(circle at 12% 18%, rgba(196,111,232,.9), transparent 45%), radial-gradient(circle at 88% 12%, rgba(91,141,239,.95), transparent 50%), radial-gradient(circle at 65% 105%, rgba(63,196,154,.85), transparent 50%), radial-gradient(circle at 25% 100%, rgba(242,123,176,.55), transparent 40%), linear-gradient(135deg, #6E5CF0, #4F7BE8); }
.top.multi p, .top.multi .volver { color: rgba(255,255,255,.88); }
.dato { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dato strong { font-size: 28px; font-weight: 500; }
.dato span { font-size: 13px; color: #6B6B76; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.segmento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #ECECF0; padding: 4px; border-radius: 12px; }
.segmento a { height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #6B6B76; }
.segmento a.sel { background: #FFF; color: #1E1E24; font-weight: 500; box-shadow: 0 2px 6px rgba(20,20,30,.12); }
.barras { display: flex; align-items: flex-end; gap: 10px; height: 116px; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.barra-col small { font-size: 11px; color: #6B6B76; }
.barra { width: 100%; max-width: 30px; border-radius: 8px; background: #C9D7EC; }
.barra.ok { background: linear-gradient(180deg, #9D8CEB, #7EB6E8); }
.barra-prog { height: 6px; border-radius: 3px; background: #E4E4E9; overflow: hidden; margin-top: 4px; }
.barra-prog div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #7EB6E8, #9D8CEB); }
.mensaje-multi { background: radial-gradient(circle at 90% 10%, rgba(63,196,154,.7), transparent 50%), radial-gradient(circle at 10% 100%, rgba(196,111,232,.7), transparent 50%), linear-gradient(135deg, #6E5CF0, #4F7BE8); color: #FFF; gap: 6px; }
.mensaje-multi span { font-size: 11px; letter-spacing: 1px; opacity: .85; }
.mensaje-multi p { font-size: 16px; font-weight: 600; line-height: 1.45; }
.fila-agregar { flex-direction: row; align-items: center; padding: 10px; gap: 8px; }
.fila-agregar input { flex: 1; min-width: 0; height: 46px; border: 1px solid #DEDEE4; border-radius: 12px; padding: 0 14px; font: 15px Poppins, sans-serif; }
.item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; border: none; background: none; text-align: left; font: 15px Poppins, sans-serif; color: #1E1E24; cursor: pointer; padding: 0; }
.caja { width: 20px; height: 20px; border-radius: 6px; border: 1.8px solid #C6C4D2; flex-shrink: 0; box-sizing: border-box; }
.caja.on { background: #7F75C4; border: none; }
.fila-colores { display: flex; align-items: center; gap: 8px; }
.fila-colores .mini { margin-left: auto; }
.color input { position: absolute; opacity: 0; }
.color span { display: block; width: 26px; height: 26px; border-radius: 13px; cursor: pointer; }
.color input:checked + span { box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #7F75C4; }
.form textarea { border: 1px solid #DEDEE4; border-radius: 12px; padding: 12px 14px; font: 14px Poppins, sans-serif; resize: vertical; width: 100%; }
.nota-card { position: relative; margin-top: 8px; border-radius: 0 18px 18px 18px; padding: 10px 14px 14px; box-shadow: 0 6px 18px rgba(20,20,30,.06); }
.nota-card::before { content: ""; position: absolute; top: -8px; left: 0; width: 56px; height: 10px; border-radius: 8px 8px 0 0; background: var(--tab); }
.nota-top { display: flex; align-items: center; gap: 2px; }
.nota-top small { flex-grow: 1; font-size: 11px; color: #6B6B76; }
.nota-card p { font-size: 14px; line-height: 1.5; }
.calendario summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; color: #1E1E24; min-height: 36px; }
.calendario summary::-webkit-details-marker { display: none; }
.calendario summary b { flex-grow: 1; font-weight: 500; }
.calendario summary small { color: #6B6B76; font-size: 12px; }
.cal-mes { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.cal-mes a { width: 36px; height: 36px; border-radius: 18px; background: #F3F3F5; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #3A3A44; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; text-align: center; }
.cal-dia { font-size: 11px; color: #6B6B76; }
.cal-num { height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #3A3A44; }
.cal-num.con { background: #E9E7F3; color: #433A8F; font-weight: 600; }
.cal-num.hoy { box-shadow: inset 0 0 0 1.5px #5B4FB3; }
.fecha-chip { width: 46px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.fecha-chip small { font-size: 10px; color: #6B6B76; }
.fecha-chip b { font-size: 18px; }
.sueno-btn { width: 100%; height: 116px; border-radius: 18px; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: inherit; background: #EEF3FA; color: #3B4F86; cursor: pointer; }
.sueno-btn.on { background: linear-gradient(135deg, #3B4F86, #5B5FA8); color: #FFF; }
.sueno-btn:disabled { cursor: default; }
.sueno-btn b { font-size: 13px; font-weight: 500; }
.sueno-btn small { font-size: 12px; opacity: .8; }
.sueno-card { background: linear-gradient(135deg, #C9DFF7, #D6CFF6); border: 1px solid #B7CCEB; border-radius: 18px; padding: 12px 12px 12px 16px; display: flex; align-items: center; gap: 10px; color: #24314A; box-shadow: 0 12px 26px rgba(59,79,134,.24); margin-top: 6px; }
.sueno-card a, .sueno-card .crece { display: flex; flex-direction: column; color: #24314A; min-width: 0; }
.sueno-card b { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.sueno-card small { font-size: 12px; color: #4F5F7A; }
.activo { font-size: 10px; font-weight: 600; color: #1E7A5C; background: #E6F8F1; padding: 2px 7px; border-radius: 8px; }
.redondo { width: 44px; height: 44px; border-radius: 22px; border: none; background: #FFF; color: #3B4F86; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 10px rgba(59,79,134,.1); }
.redondo.on { background: #3B4F86; color: #FFF; }
.acceso.resalta { background: #F1EEFE; box-shadow: 0 0 0 2px #B4A6F7, 0 8px 22px rgba(142,124,243,.25); }
.lista .fila form { display: flex; }

body.inicio .app { padding-bottom: 24px; } /* en Inicio no hay botón flotante */

/* Botón de inicio flotante (pantallas internas) */
.casa-flot { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 6; width: 58px; height: 58px; border-radius: 29px; background: linear-gradient(135deg, #6A82F5, #C46FE8); color: #FFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(157,108,242,.4); }

/* Barra inferior */
.barra { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: 70px; background: #FFF; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 -6px 20px rgba(98,86,180,.08); z-index: 5; }
.barra a { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #B3B0CB; }
.barra a:first-child { color: #8E7CF3; }

/* Etapa 3: macros */
.macros { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.macro { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #6B6B76; }
.macro b { font-size: 20px; font-weight: 600; color: #1E1E24; }
.macro small { font-size: 12px; }
.alerta-roja { background: #FDEBEE; color: #8E2236; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.45; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sumario { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; color: #1E1E24; }
.sumario::-webkit-details-marker { display: none; }
.sumario b { font-weight: 500; }
.sumario small { font-size: 12px; color: #6B6B76; }
.manual { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.form select, .resultado select { height: 46px; border: 1px solid #DEDEE4; border-radius: 12px; padding: 0 10px; font: 14px Poppins, sans-serif; background: #FBFBFC; color: #1E1E24; }
.resultado { flex-wrap: wrap; }
.resultado .crece { flex-basis: 100%; }
.resultado .gramos { width: 70px; height: 40px; border: 1px solid #DEDEE4; border-radius: 10px; padding: 0 8px; font: 14px Poppins, sans-serif; }
.resultado select { height: 40px; flex-grow: 1; }
.ia { display: flex; justify-content: space-between; gap: 10px; background: #FFF; border-radius: 14px; padding: 12px 14px; font-size: 12.5px; color: #3A3A44; box-shadow: 0 6px 18px rgba(20,20,30,.07); }
.ia span { color: #5B4FB3; }
.tag-manual { font-size: 9.5px; font-weight: 600; color: #4A4194; background: #E9E7F3; padding: 1px 6px; border-radius: 6px; vertical-align: middle; }

.alerta-amarilla { background: #FDF2E2; color: #6B4E1F; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.estado-dia { font-size: 13px; color: #6B6B76; padding: 0 4px; }
.consejo p { font-size: 13.5px; line-height: 1.5; color: #3A3A44; }

/* Etapa 4: Mi club (negro sobrio con detalles en blanco y violeta) */
body.club { background: #0B0B0F; color: #FFF; }
.club .top { background: linear-gradient(160deg, #000, #17151F); }
.club .card { background: #17161D; box-shadow: 0 8px 24px rgba(0,0,0,.5); color: #FFF; }
.club .fila { border-top-color: #2A2833; color: #FFF; }
.club .fila small, .club .vacio, .club .nota { color: #A3A1B0; }
.club .lista h2, .club h2 { color: #FFF; }
.sin-borde { border-top: none !important; padding: 0 !important; }
.bola-club { width: 48px; height: 48px; border-radius: 15px; background: #5B4FB3; color: #FFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bola-club.suave { background: #2A2540; color: #C9C0FF; }
.fila-link { flex-direction: row; align-items: center; gap: 12px; color: #FFF; }
.fila-link .crece { display: flex; flex-direction: column; }
.fila-link small { font-size: 12px; color: #A3A1B0; }
.vivo { background: #1E1A2E !important; border: 1px solid #3A3354; gap: 10px; }
.vivo .etq { color: #F3A3AF; display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: .6px; font-size: 11px; }
.punto { width: 8px; height: 8px; border-radius: 4px; background: #F0667A; }
.vivo b { font-size: 17px; }
.btn svg { margin-left: 6px; }
.novedad { align-items: flex-start; }
.novedad .crece { display: flex; flex-direction: column; gap: 2px; }
.punto-nov { width: 8px; height: 8px; border-radius: 4px; margin-top: 8px; flex-shrink: 0; background: transparent; }
.punto-nov.on { background: #B9B0F0; }
.tag-nov { align-self: flex-start; font-size: 10px; font-weight: 600; letter-spacing: .5px; color: #C9C0FF; background: #2A2540; padding: 2px 7px; border-radius: 6px; }
.club .flecha { color: #B9B0F0; }
.novedad-pop { background: linear-gradient(135deg, #2F2B3D, #4B3F8F); color: #FFF; border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 24px rgba(47,43,61,.3); }
.novedad-pop .etq { color: #C9C0FF; font-size: 10.5px; letter-spacing: 1px; }
.novedad-pop b { font-size: 15px; }
.novedad-pop p { font-size: 13px; opacity: .9; }
.novedad-pop .video-btns { align-items: center; justify-content: space-between; }
.novedad-pop .x { color: #C9C0FF; }

.login-hero .logo { display: block; margin-bottom: 10px; }

/* Logo traslúcido de fondo en la cabecera de Inicio */
.logo-fondo { position: absolute; right: -36px; top: -20px; width: 230px; height: 230px; opacity: .16; pointer-events: none; filter: brightness(2.2) saturate(.6); }
.club-nombre { font-size: 11.5px; font-weight: 400; letter-spacing: .5px; opacity: .7; margin-bottom: 2px; }

/* Saludo dentro de la tarjeta del día */
.saludo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 14px 18px 0; flex-wrap: wrap; }
.saludo span { font-size: 15px; font-weight: 500; color: #3D3A5C; }
.saludo small { font-size: 11.5px; color: #8A86A6; }

/* Inicio: huella grande de fondo, nombre del club entre violeta y blanco, saludo arriba del porcentaje */
.logo-fondo { position: absolute; left: 30px; right: auto; top: 28px; width: 200px; height: 200px; transform: none; opacity: .6; filter: none; pointer-events: none; } /* a la izquierda, como en la captura */
.dia { overflow: visible; }
.club-pill { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: #FFF; color: #6C5CE7; font-size: 10.5px; font-weight: 600; letter-spacing: 2px; padding: 5px 14px; border-radius: 12px; box-shadow: 0 4px 14px rgba(98,86,180,.18); white-space: nowrap; }
.hola { font-size: 22px; font-weight: 600; line-height: 1.15; background: linear-gradient(90deg, #6A82F5, #9D6CF2 55%, #C46FE8); -webkit-background-clip: text; background-clip: text; color: transparent; } /* mismo degradé que la cabecera */

/* Prueba: sin huella y con el nombre del club más destacado (para volver atrás, borrar este bloque) */
.club-pill { font-size: 14px; font-weight: 700; letter-spacing: 3px; padding: 10px 24px; border-radius: 20px; box-shadow: 0 8px 22px rgba(98,86,180,.28); }
.club-pill { background: #FFF; color: #6C5CE7; }

.paginas { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: #6B6B76; }
.paginas a { padding: 10px 14px; border-radius: 12px; background: #FFF; box-shadow: 0 4px 12px rgba(20,20,30,.07); }