:root{ /* Paleta "Isidora Beauty Studio" — tonos extraídos del logo (rosa joya + rosa-oro) */ --bg:#FFF8F6; --rose:#D2788C; --rose-deep:#96525C; --rose-light:#F7DEE3; --ink:#3B2A2E; --gold:#B76E79; --surface:#FFFFFF; } .navbar-logo{ height:128px; width:auto; display:block; } .brand-logo-circular{ display:block; } @media(max-width:576px){ .navbar-logo{ height:96px; } } html{ overflow-x:hidden; /* evita cualquier corrimiento horizontal accidental de la página */ } body{ font-family:'Inter', sans-serif; background:var(--bg); color:var(--ink); overflow-x:hidden; width:100%; } /* Bootstrap le agrega un padding-right al cuando se abre un modal, para compensar el ancho de la barra de scroll y que el contenido no "salte" horizontalmente. En celular no hay barra de scroll visible, así que ese padding no compensa nada — solo genera un corrimiento visible del contenido de fondo al abrir cualquier modal. Se anula ese padding (siempre 0) para que abrir un modal no mueva nada detrás. */ body.modal-open{ padding-right:0 !important; } /* ===== Animación al hacer scroll ===== Cualquier elemento con la clase "reveal-on-scroll" empieza invisible y desplazado hacia abajo; en cuanto entra en pantalla al hacer scroll, aparece con un fundido suave (ver el IntersectionObserver en site.js). Con "prefers-reduced-motion" se omite la animación por accesibilidad. */ .reveal-on-scroll{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; } .reveal-on-scroll.reveal-visible{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal-on-scroll{ opacity:1; transform:none; transition:none; } } h1,h2,h3,h4,.font-serif{ font-family:'Fraunces', serif; } a{ color:var(--rose-deep); } /* ===== Botones ===== */ .btn-rose{ background:var(--rose-deep); border-color:var(--rose-deep); color:#fff; border-radius:30px; font-weight:600; padding:.65rem 1.6rem; } .btn-rose:hover{ background:#7d3646; border-color:#7d3646; color:#fff; } .btn-rose-outline{ background:transparent; border:1.5px solid var(--rose-deep); color:var(--rose-deep); border-radius:30px; font-weight:600; } .btn-rose-outline:hover{ background:var(--rose-light); color:var(--rose-deep); } /* ===== Navbar ===== */ .navbar-rose{ background:rgba(255,248,246,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--rose-light); } .navbar-rose .navbar-brand{ font-family:'Fraunces'; color:var(--rose-deep); font-weight:600; } .navbar-rose .navbar-toggler{ border-color:var(--rose-light); } .navbar-rose .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(210,120,140,.35); } /* En celular, el menú colapsado queda pegado bajo el header con fondo propio, para que los botones (ej. "Cerrar sesión") no queden apretados contra el borde de la pantalla. */ @media(max-width:991.98px){ .navbar-rose .navbar-collapse{ background:#fff; border-radius:16px; padding:1rem; margin-top:.75rem; border:1px solid var(--rose-light); box-shadow:0 8px 20px rgba(156,74,92,.08); } } /* ===== Cards de servicio ===== */ .card-servicio{ background:var(--surface); border:1px solid var(--rose-light); border-radius:20px; padding:0; overflow:hidden; transition:.2s; cursor:pointer; } .card-servicio-img{ width:100%; height:260px; object-fit:cover; display:block; } .card-servicio-body{ padding:1.25rem 1.5rem 1.5rem; } .card-servicio:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(156,74,92,.14); } .card-servicio .precio{ font-family:'Fraunces'; color:var(--rose-deep); font-weight:600; font-size:1.2rem; } .cat-chip{ padding:.45rem 1.2rem; border-radius:24px; background:#fff; border:1px solid var(--rose-light); font-size:.85rem; font-weight:600; color:var(--rose-deep); cursor:pointer; } .cat-chip.active{ background:var(--rose-deep); color:#fff; border-color:var(--rose-deep); } /* ===== Calendario de agendamiento (FullCalendar override) ===== */ .fc{ background:var(--surface); border-radius:16px; padding:1rem; border:1px solid var(--rose-light); } .fc .fc-daygrid-day.fc-day-today{ background:var(--rose-light) !important; } .fc .fc-button{ background:var(--rose-deep) !important; border-color:var(--rose-deep) !important; } .slot-hora{ padding:.6rem 0; text-align:center; border-radius:10px; border:1px solid var(--rose-light); font-size:.85rem; font-weight:600; cursor:pointer; color:var(--rose-deep); background:#fff; } .slot-hora.selected{ background:var(--rose-deep); color:#fff; border-color:var(--rose-deep); } .slot-hora.disabled{ color:#d8c6c9; border-color:#f0e2e3; cursor:not-allowed; text-decoration:line-through; } /* ===== Pills de estado ===== Las clases en español son las que realmente usa el código (pill-@Estado.ToLower() genera "pill-pendiente", "pill-confirmada", etc.). Las de en inglés se mantienen por si algún lugar las usa directamente (ej. AdminResenas). */ .pill{ padding:.3rem .8rem; border-radius:20px; font-size:.75rem; font-weight:700; } .pill-pending, .pill-pendiente{ background:#fdf0d5; color:#a8791b; } .pill-confirmed, .pill-confirmada{ background:#e3f2e6; color:#3f7a52; } .pill-cancelled, .pill-cancelada{ background:#f5e3e5; color:#a05468; } .pill-completed, .pill-completada{ background:#e3e6f2; color:#4a5a9c; } /* ===== Tarjeta-recibo "resumen" ===== Filas etiqueta+valor con estilo de recibo — usada en los popups de éxito de MisCitas (cita agendada/reagendada/cancelada) para mostrar los datos reales de la cita. */ .confirm-resumen{ text-align:left; background:var(--bg); border:1px solid var(--rose-light); border-radius:14px; padding:.9rem 1.1rem; margin:0; } .confirm-resumen-fila{ display:flex; align-items:baseline; gap:.5rem; font-size:.88rem; color:var(--ink); padding:.2rem 0; } .confirm-resumen-fila + .confirm-resumen-fila{ border-top:1px dashed var(--rose-light); } .confirm-resumen-fila .etq{ color:#8a7377; min-width:88px; flex-shrink:0; } .confirm-resumen-fila .val{ font-weight:600; } .confirm-resumen-total{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--rose-light); margin-top:.5rem; padding-top:.55rem; font-weight:700; color:var(--rose-deep); } .confirm-resumen-total .val{ font-size:1.15rem; } /* ===== Ícono de marca "grande" para popups de resultado (éxito) ===== Mismo círculo con degradado que confirm-icono-marca, pero más grande y pensado para el emoji ir SOLO (🎉, ✅), no como fondo de ícono de acción — se usa en los popups que confirman que algo ya se completó (registro, cita agendada/reagendada, cancelación), para que todos los "momentos importantes" del sitio compartan el mismo lenguaje visual. */ .exito-icono-marca{ width:72px; height:72px; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--rose-light), var(--rose) 70%, var(--gold) 140%); font-size:2.2rem; box-shadow:0 10px 24px rgba(156,74,92,.22); }