/* ===== Theme ===== */ :root{ --primary:#e85b7d; --accent:#ffdfe9; --bg:#fff9fb; /* fondo liso */ --ink:#2b2230; --muted:#7a6f76; --radius:22px; } /* ===== Fondo con imagen (opcional) ===== */ /* Para activarlo: agregar clase 'bg-photo' al (ver comentario en index.php) y subir tu archivo a public/assets/img/bg.jpg */ body.bg-photo{ background: #f2e8e9eb url('../img/bg.jpg') center/cover fixed no-repeat; background-blend-mode: color-burn; } /* ===== Base ===== */ *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial} h1,h2{margin:0 0 8px} .muted{color:var(--muted)} .small{font-size:12px} /* ===== Layout ===== */ .app{min-height:100vh;display:flex;flex-direction:column} .container{max-width:760px;margin:0 auto;padding:16px} /* ← un poco más ancho */ .app-header{display:flex;justify-content:center;align-items:center;padding:22px 16px;background:linear-gradient(180deg,var(--accent),transparent)} .logo{width:200px;height:60px} /* ← logo grande y centrado */ .app-footer{margin-top:auto;padding:14px;text-align:center;color:#948891} /* ===== Panel (tarjeta única) ===== */ .card{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:0 14px 34px rgba(0,0,0,.08)} .center{text-align:center} .hero.center p{margin-top:4px} /* ===== Tiles (home y Sí/No) ===== */ .tiles{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px} .tile{ display:flex;flex-direction:column;align-items:center;gap:10px; background:#fff;border:1px dashed var(--accent);border-radius:18px;padding:14px; box-shadow:0 8px 18px rgba(0,0,0,.04); } .tile:active{transform:scale(.99)} .tile-ico{width:80px;height:80px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,#fff,#fff7fb);border:1px solid #f4dbe5} .tile-ico img{width:60px;height:60px} .tile-tit{font-weight:800} /* ===== Dashboard de Usuario ===== */ /* Aplicar 2 columnas por defecto en todos los dispositivos */ .tiles.user-dashboard-tiles { grid-template-columns: 1fr 1fr; /* 🚀 CORRECCIÓN: Dos columnas para móvil y base */ gap: 12px; } /* Ajustar el tamaño del icono para que quepa mejor */ .tiles.user-dashboard-tiles .tile-ico { width: 60px; height: 60px; } .tiles.user-dashboard-tiles .tile-ico img { width: 40px; height: 40px; } /* ===== Form ===== */ .form-block{margin-top:10px} .input, textarea{width:100%;border:1px solid #eee;border-radius:14px;padding:12px;font-size:12px;background:#fff} .label{display:block;font-size:13px;margin:8px 0 4px;color:var(--muted)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media (max-width:640px){.grid-2{grid-template-columns:1fr}} .form-actions{display:flex;justify-content:center;margin-top:10px} /* ===== Buttons ===== */ .btn{ appearance:none;border:none;border-radius:15px;background:var(--primary);color:#fff; padding:8px 14px;font-weight:800;font-size:14px;text-align:center; box-shadow:0 8px 18px rgba(232,91,125,.22); /* sombra más leve */ transition:transform .06s ease, box-shadow .2s ease, filter .2s ease } .btn:hover{transform:translateY(-1px);box-shadow:0 12px 22px rgba(232,91,125,.28)} .btn:active{transform:translateY(0);filter:saturate(.95)} .btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--primary);box-shadow:none} .btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--accent);box-shadow:none} .btn.small{padding:10px 12px;font-size:14px} .btn.back{background:#fff;color:var(--primary);border:1px solid var(--accent);box-shadow:0 6px 14px rgba(0,0,0,.06)} /* volver, sombra suave */ /* ===== Acciones abajo-centro (siempre al final de cada vista) ===== */ .actions-bottom{display:flex;justify-content:center;margin-top:14px} .actions-bottom.no-gap{margin-top:0} /* ===== Uploads ===== */ .upload-row{display:flex;align-items:center;gap:10px;margin-top:10px;} .thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .thumb{position:relative;width:70px;height:70px;border-radius:12px;overflow:hidden;border:1px solid #eee;background:#fafafa} .thumb img{width:100%;height:100%;object-fit:cover} .thumb .x{position:absolute;top:2px;right:2px;width:22px;height:22px;border:none;border-radius:50%;background:#0008;color:#fff;font-size:12px} /* ===== Calendario ===== */ .calendar-wrap{margin-top:8px} .cal-head{display:flex;align-items:center;justify-content:space-between} .cal-title{font-weight:900} .cal-nav{border:1px solid #eee;background:#fff;border-radius:12px;width:44px;height:38px;font-size:18px} .daynames,.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;margin-top:8px} .dayname{font-size:13px;color:#555;font-weight:800} .day{border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;border:1px solid #eee;background:#fff;height:44px} .day.disabled{opacity:.35;text-decoration:line-through} /* ESTILOS DE DÍAS CLAVE: Se aumenta la especificidad con .calendar */ .calendar .day.blocked{ background:#ffd4d4; border-color:#ffb3b3; color:#a00; } .calendar .day.available{ background:#e9ffe9; border-color:#b6f3b6; color:#08681c; } .calendar .day.disabled { color: #ccc !important; /* Texto gris */ background-color: #f5f5f5; /* Fondo ligeramente gris para distinguirlo */ opacity: 1; /* Sobrescribe la opacidad base de .day.disabled */ text-decoration: none; /* Elimina la línea si se aplica opacidad .35 */ pointer-events: none; } .legend{display:flex;gap:10px;align-items:center;justify-content:center;font-size:12px;color:var(--muted);margin-top:8px} .dot{width:10px;height:10px;border-radius:50%} .dot.gray{background:#d0d0d0}.dot.red{background:#ff9e9e}.dot.green{background:#6fd36f} /* ===== Estilos de Fidelidad (Sellos) (NUEVO) ===== */ .loyalty-wrap { padding: 20px 0; } .loyalty-stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; max-width: 320px; margin: 0 auto 25px; } @media (min-width: 400px) { .loyalty-stamps { grid-template-columns: repeat(6, 1fr); max-width: 480px; } } .stamp { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 800; transition: all 0.3s ease; border: 3px dashed var(--accent); color: var(--muted); background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.05); } .stamp.completed { background: var(--primary); border: 3px solid #fff; color: #fff; box-shadow: 0 6px 14px rgba(232,91,125,.35); transform: scale(1.05); } .loyalty-status-box { padding: 18px; border-radius: 16px; text-align: center; } .loyalty-status-box h3 { margin: 0 0 5px; font-size: 24px; margin-bottom: -15px; } .loyalty-status-box.pending { background: var(--accent); color: var(--ink); border: 1px solid #ffcccc; } .loyalty-status-box.available { background: #c3ffc3; /* Verde claro de oferta */ color: #005500; border: 2px solid #00aa00; } /* ===== FAQ acordeón ===== */ .accordion{display:flex;flex-direction:column;gap:10px} .acc-item{border:1px solid #f0e0e7;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.04)} .acc-q{width:100%;text-align:left;background:linear-gradient(180deg,#fff, #fff8fb);border:none;padding:12px 14px;font-weight:900;letter-spacing:.2px;border-bottom:1px dashed #f2d8e2;border-radius:14px 14px 0 0} .acc-a{max-height:0;overflow:hidden;transition:max-height .25s ease} .acc-a.open{max-height:500px} .acc-a-inner{padding:12px 14px;color:var(--muted)} /* ===== Music dock (debajo del panel) ===== */ .music-dock{display:flex;justify-content:center;margin:14px 0 4px} .music-btn{ width:58px;height:58px;border-radius:999px;border:2px solid var(--accent); background:#fff;color:var(--primary);display:grid;place-items:center; box-shadow:0 10px 22px rgba(0,0,0,.10); } .music-btn.playing{ background:var(--primary);color:#fff; animation:float 2.2s ease-in-out infinite, pulse 3s ease-out infinite; } @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @keyframes pulse{ 0%{box-shadow:0 10px 22px rgba(232,91,125,.10)} 50%{box-shadow:0 14px 30px rgba(232,91,125,.22)} 100%{box-shadow:0 10px 22px rgba(232,91,125,.10)} } /* ===== Toasts ===== */ .toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px); background: #333; color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 15px; opacity: 0; transition: opacity .4s ease, transform .4s ease; z-index: 999999 !important; /* Siempre arriba de todo */ pointer-events: none; } /* Cuando se muestra */ .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Error visual */ .toast.err { background: #d04444; } /* Mantener visible más tiempo (8 segundos) */ .toast.show { animation: toastHide 8s forwards; } @keyframes toastHide { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(20px); } } /* ---------- Fidelidad ---------- */ .loyalty-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; } .loyalty-stamps { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; /* espacio entre círculos */ margin: 20px 0; } .stamp { width: 52px; height: 52px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 18px; transition: all .25s ease; border: 2px dashed #f4a3b4; color: #f4a3b4; background: #fff; box-sizing: border-box; } .stamp.completed { background: #f98ea4; color: #fff; border: none; box-shadow: 0 0 8px rgba(249,142,164,0.45); } .loyalty-status-box { background: #ffe6ec; color: #b23b56; border-radius: 12px; padding: 14px 18px; width: 100%; max-width: 280px; text-align: center; margin-top: 8px; } .loyalty-status-box.available { background: #e1f8eb; color: #1c7744; } /* --- Footer principal --- */ .app-footer { text-align: center; font-size: 14px; color: #9a8e94; padding: 10px 0 30px; background: transparent; /* mantiene fondo original */ } .app-footer small { display: block; margin-bottom: 6px; } .app-footer .gosmay-link { display: inline-block; color: #e85b7d; text-decoration: none; font-weight: 600; transition: opacity 0.25s; } .app-footer .gosmay-link:hover { opacity: 0.8; } /* --- Modal Gosmay --- */ .gosmay-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 9999; } .gosmay-content { background: #fff; padding: 28px 22px; border-radius: 16px; text-align: center; max-width: 420px; width: 90%; box-shadow: 0 6px 26px rgba(0,0,0,0.25); animation: fadeIn .3s ease; position: relative; } .gosmay-content h3 { color: #e85b7d; font-size: 20px; margin-bottom: 10px; } .gosmay-content p { color: #4d3c44; font-size: 15px; line-height: 1.5; margin-bottom: 20px; } .gosmay-btn { background: #e85b7d; color: #fff; padding: 10px 24px; border-radius: 10px; text-decoration: none; font-weight: 600; display: inline-block; transition: background .25s; } .gosmay-btn:hover { background: #d94c6e; } .close-modal { position: absolute; top: 10px; right: 16px; background: none; border: none; font-size: 24px; color: #aaa; cursor: pointer; } .close-modal:hover { color: #e85b7d; } @keyframes fadeIn { from {opacity: 0; transform: scale(0.9);} to {opacity: 1; transform: scale(1);} } input:focus::placeholder, textarea:focus::placeholder { color: transparent; } /* ===== Modal ===== */ .x-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(1.01); transition:all .18s ease; z-index:9999; padding:20px; } .x-modal-overlay.show{ opacity:1; transform:scale(1); } .x-modal-overlay.hide{ opacity:0; transform:scale(1.01); } .x-modal-card{ width:min(520px, 96vw); background:#fff9fb; color:#2b2230; border:1px solid #ffdfe9; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.08); padding:20px 18px 16px; position:relative; } .x-modal-title{ margin:2px 0 8px; font-size:20px; font-weight:700; text-align:center; color:#e85b7d; } .x-modal-body{ font-size:15px; line-height:1.4; margin-top: 0.6em; margin-bottom: 0.6em; white-space: normal;} .x-modal-actions{ display:flex; gap:10px; justify-content:center; margin-top:14px; } .x-modal-close{ position:absolute; top:8px; right:10px; border:0; background:transparent; font-size:22px; line-height:1; color:#e85b7d; cursor:pointer; padding:6px 8px; } /* === Modal de pedido: menos separación vertical === */ .order-modal .dialog{ padding:18px 20px; } /* antes era más grande */ .order-modal .head h3{ margin:0 24px 8px 0; font-size:20px; } .order-modal .body p{ margin:6px 0; line-height:1.35; } /* menos margen y altura */ .order-modal .foot{ margin-top:14px; } /* (Compat) si tu wrapper fuera .modal en lugar de .order-modal */ .modal .dialog{ padding:18px 20px; } .modal .head h3{ margin:0 24px 8px 0; } .modal .body p{ margin:6px 0; line-height:1.35; } .modal .foot{ margin-top:14px; } /* === Listas (Mis pedidos / Mis pagos): más espacio entre cards === */ .list{ display:flex; flex-direction:column; gap:16px; } /* agrega separación */ .list .card{ margin:0; } /* por si alguna tenía margen propio */ @media (min-width:768px){ .list{ gap:18px; } } /* Modal compacto */ .x-modal-card { max-width: 640px; padding: 20px 22px; } .x-modal-title { margin: 6px 0 10px; } .x-modal-body p { margin: 6px 0; line-height: 1.35; } /* Listas más “apretadas” para pedidos/pagos */ .list.tight-cards .card { margin: 10px 0; } .cupcake-icon { width: 32px; height: 32px; display: block; margin-top: -3px; } /* ===== Ajuste general para uniformar el ancho en móviles ===== */ @media (max-width: 768px) { body { margin: 0; padding: 0 10px; /* margen lateral uniforme */ } .app, .container, .card, .tiles, .form-block, .calendar-wrap, .accordion, .loyalty-wrap { max-width: 420px; /* ancho uniforme para todas las secciones */ margin: 0 auto !important; /* centrado horizontal */ width: 100%; } .app-header, .app-footer { max-width: 420px; margin: 0 auto; } /* Evita que algunos bloques se estiren fuera del ancho */ img, video, iframe { max-width: 100%; height: auto; } } /* ===== Ajuste de ancho para notificaciones (toast) ===== */ .toast { max-width: 90vw; /* ancho relativo a la pantalla, más amplio */ min-width: 240px; /* evita que quede demasiado angosto */ text-align: center; padding: 12px 18px; /* más respiración interna */ font-size: 14px; /* texto legible */ white-space: normal; /* permite saltos de línea si es necesario */ } .footer-security { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: #8e8c8d; } .footer-security img { width: 18px; height: auto; display: block; }