/* Variables definidas también en .gel-rep-modal: el modal se inserta en , fuera de .gel-rep, y sin esto los botones quedaban invisibles (texto blanco sobre fondo transparente) */ .gel-rep,.gel-rep-modal{--p:#2563eb;--g:#16a34a;--r:#dc2626;--gr:#64748b; font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#1f2937} .gel-rep{max-width:560px;margin:0 auto;padding-bottom:96px;overflow-x:clip;font-size:1rem} .gel-rep *,.gel-rep-modal *{box-sizing:border-box} /* Refuerzo con colores explícitos por si el tema pisa las variables */ .gel-rep-modal .gel-blue{background:#2563eb} .gel-rep-modal .gel-gray{background:#64748b} .gel-rep-modal .gel-green{background:#16a34a} .gel-rep-modal .gel-red{background:#dc2626} /* Barra superior tipo app: color de marca, título blanco */ .gel-rep-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px; background:linear-gradient(135deg,#0e343c,#123F48);border-bottom:2px solid #F26430; padding:13px 16px;border-radius:0 0 14px 14px} .gel-rep-title{flex:1;text-align:center;font-size:1.12rem;font-weight:700;margin:0;color:#fff} .gel-rep-back,.gel-rep-menu{background:none;border:0;font-size:1.35rem;line-height:1;cursor:pointer;color:#fff;width:34px;height:34px} .gel-rep-main{padding:16px 16px 158px} /* espacio para pie de acciones + barra de pestañas */ .gel-rep-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:0 1px 3px rgba(15,23,42,.05)} .gel-rep-row{display:flex;align-items:center;justify-content:space-between;gap:10px} .gel-rep-earn{background:linear-gradient(135deg,#eff6ff,#fff);border:1px solid #dbeafe;border-radius:16px;padding:14px 16px;margin-bottom:14px;font-size:1.02rem} .gel-rep-earn b{color:var(--p);font-size:1.05rem} .gel-rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .gel-rep-kpi{background:#fff;border:1px solid #e5e7eb;border-top:4px solid var(--c);border-radius:16px; padding:22px 8px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:transform .08s} .gel-rep-kpi:active{transform:scale(.97)} .gel-rep-kpi b{font-size:1.9rem;color:var(--c);line-height:1} .gel-rep-kpi span{color:#374151;font-size:.84rem;font-weight:700;line-height:1.25;overflow-wrap:anywhere} .gel-sw{position:relative;display:inline-block;width:48px;height:27px;flex:none} .gel-sw input{opacity:0;width:0;height:0} .gel-sw span{position:absolute;inset:0;background:#cbd5e1;border-radius:30px;transition:.2s} .gel-sw span:before{content:'';position:absolute;height:21px;width:21px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)} .gel-sw input:checked+span{background:var(--g)} .gel-sw input:checked+span:before{transform:translateX(21px)} .gel-rep-item{display:flex;align-items:center;gap:12px} .gel-rep-item-b{flex:1;cursor:pointer;min-width:0} .gel-rep-item-b b{display:block;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gel-rep-item-b small{color:#4b5563;font-size:.92rem} .gel-rep-chip{background:var(--p);color:#fff;border:0;border-radius:10px;padding:11px 16px;font-size:.92rem;cursor:pointer;flex:none} .gel-pick{width:20px;height:20px;accent-color:var(--p);flex:none} .gel-num{width:28px;height:28px;border-radius:50%;background:#eef2ff;color:var(--p);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex:none} .gel-rep-empty{text-align:center;color:#9ca3af;padding:48px 0} .gel-rep-hint{color:#4b5563;font-size:.95rem;margin:0 0 10px} /* Pie de acciones: SIEMPRE pegado a la pantalla. Lleva sus propias variables de color porque el JS lo mueve a (si un tema aplica transform al contenido, position:fixed se rompe dentro de ese contenedor). */ .gel-rep-foot{--p:#2563eb;--g:#16a34a;--r:#dc2626;--gr:#64748b; position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom, 0px)); z-index:99990;display:flex;gap:8px;padding:10px 12px; background:#fff;border-top:1px solid #e5e7eb;max-width:560px;margin:0 auto; box-shadow:0 -2px 8px rgba(15,23,42,.06);font-family:-apple-system,Segoe UI,Roboto,sans-serif} /* Barra de pestañas inferior (tipo app) */ .gel-rep-tabs-nav{position:fixed;left:0;right:0;bottom:0;z-index:99991;display:flex; background:#fff;border-top:1px solid #e5e7eb;max-width:560px;margin:0 auto; padding-bottom:env(safe-area-inset-bottom,0px);height:calc(60px + env(safe-area-inset-bottom,0px)); box-shadow:0 -3px 12px rgba(15,23,42,.1);font-family:-apple-system,Segoe UI,Roboto,sans-serif} .gel-rep-tabs-nav button{flex:1;background:none;border:0;padding:8px 2px 6px;display:flex; flex-direction:column;align-items:center;justify-content:center;gap:2px; font-size:.7rem;font-weight:700;color:#94a3b8;cursor:pointer} .gel-rep-tabs-nav button .ic{font-size:1.4rem;line-height:1} .gel-rep-tabs-nav button.on{color:#F26430} .gel-rep-tabs-nav .bdg{position:absolute;top:5px;right:18%;background:#dc2626;color:#fff; border-radius:10px;font-size:.62rem;font-weight:800;padding:1px 5px;line-height:1.3} /* Botón RUTA central resaltado (círculo naranja elevado) */ .gel-rep-tabs-nav button.ctr{overflow:visible;position:relative} .gel-rep-tabs-nav button.ctr .icc{position:absolute;top:-22px;left:50%;transform:translateX(-50%); width:54px;height:54px;border-radius:50%;background:#F26430;display:flex;align-items:center;justify-content:center; font-size:1.55rem;box-shadow:0 4px 14px rgba(242,100,48,.45),0 0 0 5px #fff} .gel-rep-tabs-nav button.ctr .lbl{margin-top:26px;color:#F26430;font-weight:800} .gel-rep-tabs-nav button.ctr.on .icc{filter:brightness(1.08)} .gel-rep-fbtn{flex:1;border:0;border-radius:12px;padding:16px;color:#fff;font-weight:700;font-size:1.06rem;cursor:pointer} .gel-rep-fbtn:active{filter:brightness(.95)} .gel-green{background:var(--g)}.gel-red{background:var(--r)}.gel-gray{background:var(--gr)}.gel-blue{background:var(--p)} .gel-rep-map{width:100%;height:200px;border:0;border-radius:16px;margin-bottom:12px} .gel-rep-sec h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin:0 0 10px;font-weight:700} .gel-rep-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px} .gel-rep-btns a,.gel-rep-btns button{display:block;text-align:center;text-decoration:none;border:0;border-radius:11px;padding:14px;font-weight:700;font-size:.98rem;cursor:pointer;color:#fff} .gel-wa{background:#22c55e}.gel-call{background:#475569}.gel-nav{background:#334155;grid-column:1/-1} .gel-kv{font-size:1rem;line-height:1.6} .gel-badge2{display:inline-block;padding:5px 12px;border-radius:20px;font-size:.84rem;font-weight:600;background:#eef2ff;color:#3730a3} .gel-rep-modal{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:99999;display:flex;align-items:flex-end;justify-content:center} .gel-rep-sheet{background:#fff;width:100%;max-width:560px;border-radius:20px 20px 0 0;padding:18px 18px 22px;max-height:94vh;overflow:auto;animation:gelup .2s ease} @keyframes gelup{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}} .gel-rep-opt{display:flex;align-items:center;gap:10px;border:1px solid #e5e7eb;border-radius:11px;padding:14px;margin-bottom:8px;cursor:pointer;font-size:1rem} .gel-rep-opt input{accent-color:var(--p);width:18px;height:18px} .gel-firma{border:2px dashed #cbd5e1;border-radius:12px;width:100%;height:190px;touch-action:none;background:#fff;display:block} .gel-tabs{display:flex;justify-content:space-around;margin:16px 0 12px;color:#9ca3af} .gel-tabs button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.84rem;color:inherit;cursor:pointer} .gel-tabs button.on{color:var(--p);font-weight:600} .gel-tabs .ic{font-size:1.45rem} .gel-ta{width:100%;border:1px solid #e5e7eb;border-radius:11px;padding:12px;font-family:inherit;font-size:1rem} .gel-thumb{max-width:100%;border-radius:12px;margin-top:8px} .gel-login{max-width:380px;margin:48px auto;text-align:center} .gel-login .ic{font-size:2.6rem} .gel-login .gel-rep-card{padding:30px} .gel-login .gel-rep-fbtn{margin-top:14px} input[type=file]{font-size:.9rem} .gel-rep img,.gel-rep canvas{max-width:100%} .gel-rep-top img{max-height:40px}