/* estilos.css — la página del paciente (agenda.odontosys.com / agenda.clinicsys.uy). Pensada para el celular. La marca (Odontosys azul, Clinicsys violeta) sólo cambia el acento: app.js pone data-marca en . */ :root { --acento: #014990; --acento-oscuro: #013a73; --acento-suave: #e8f0fa; --texto: #1f2937; --texto-suave: #4b5563; --texto-tenue: #6b7280; --borde: #e5e7eb; --fondo: #f3f4f6; --tarjeta: #ffffff; --peligro: #b91c1c; --peligro-suave: #fef2f2; --ok: #15803d; --ok-suave: #f0fdf4; --aviso: #92400e; --aviso-suave: #fffbeb; --radio: 14px; --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html[data-marca="clinicsys"] { --acento: #6d2e77; --acento-oscuro: #5a2660; --acento-suave: #f5ecf7; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--fuente); font-size: 17px; line-height: 1.45; color: var(--texto); background: var(--fondo); -webkit-text-size-adjust: 100%; } .pagina { max-width: 520px; margin: 0 auto; padding: 20px 16px 32px; min-height: 100vh; display: flex; flex-direction: column; } /* ── Encabezado: la clínica manda ─────────────────────────────────────────── */ .clinica { text-align: center; padding: 8px 0 20px; } .clinica img.logo { max-width: 180px; max-height: 80px; object-fit: contain; display: block; margin: 0 auto 10px; } .clinica h1 { margin: 0; font-size: 26px; line-height: 1.2; color: var(--acento-oscuro); overflow-wrap: anywhere; } .clinica .telefono { margin: 6px 0 0; color: var(--texto-suave); font-size: 15px; } .clinica .telefono a { color: inherit; } .saludo { font-size: 20px; margin: 0 0 14px; font-weight: 600; } /* ── Tarjetas ─────────────────────────────────────────────────────────────── */ .tarjeta { background: var(--tarjeta); border-radius: var(--radio); padding: 18px 16px; margin: 0 0 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); } .tarjeta h2 { margin: 0 0 8px; font-size: 19px; } .tarjeta p { margin: 0 0 10px; } .tarjeta p:last-child { margin-bottom: 0; } .tarjeta.invitacion { border-top: 5px solid var(--acento); } .seccion { margin: 22px 0 10px; font-size: 15px; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; } .cita .cuando { font-size: 20px; font-weight: 600; margin: 0 0 2px; } .cita .detalle { color: var(--texto-suave); margin: 0 0 12px; } .cita .nota-plazo { color: var(--texto-suave); font-size: 15px; margin: 0; } .tenue { color: var(--texto-tenue); font-size: 15px; } /* ── Botones ──────────────────────────────────────────────────────────────── */ .boton { display: block; width: 100%; min-height: 50px; padding: 12px 16px; border: 0; border-radius: 12px; font: inherit; font-weight: 600; text-align: center; cursor: pointer; text-decoration: none; background: var(--acento); color: #fff; } .boton:hover { background: var(--acento-oscuro); } .boton:focus-visible, .dia-boton:focus-visible, .hora-boton:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; } .boton:disabled { opacity: .55; cursor: default; } .boton.secundario { background: var(--acento-suave); color: var(--acento-oscuro); } .boton.secundario:hover { background: #dde7f3; } html[data-marca="clinicsys"] .boton.secundario:hover { background: #ecdcef; } .boton.peligro { background: var(--peligro); } .boton.peligro:hover { background: #991b1b; } .boton + .boton { margin-top: 10px; } .botones-cita { display: flex; gap: 10px; } .botones-cita .boton { margin: 0; font-size: 16px; min-height: 46px; } .volver { align-self: flex-start; background: none; border: 0; padding: 8px 0; margin: 0 0 8px; font: inherit; color: var(--acento); cursor: pointer; font-weight: 600; } /* ── Elegir día y hora ────────────────────────────────────────────────────── */ .dias { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .dia-boton { flex: 0 0 auto; width: 72px; padding: 8px 4px; border: 2px solid var(--borde); border-radius: 12px; background: var(--tarjeta); font: inherit; color: var(--texto); cursor: pointer; text-align: center; scroll-snap-align: start; line-height: 1.2; } .dia-boton .nombre { display: block; font-size: 13px; color: var(--texto-tenue); text-transform: capitalize; } .dia-boton .numero { display: block; font-size: 22px; font-weight: 700; } .dia-boton .mes { display: block; font-size: 13px; color: var(--texto-tenue); } .dia-boton[aria-pressed="true"] { border-color: var(--acento); background: var(--acento); color: #fff; } .dia-boton[aria-pressed="true"] .nombre, .dia-boton[aria-pressed="true"] .mes { color: #fff; } .dia-boton.mas { color: var(--acento); font-weight: 600; font-size: 14px; border-style: dashed; } .dia-elegido { font-size: 18px; font-weight: 600; margin: 4px 0 10px; } .dia-elegido::first-letter { text-transform: uppercase; } .horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; } .hora-boton { min-height: 48px; border: 2px solid var(--acento-suave); border-radius: 12px; background: var(--acento-suave); color: var(--acento-oscuro); font: inherit; font-weight: 600; cursor: pointer; } .hora-boton:hover { border-color: var(--acento); } /* ── Confirmar ────────────────────────────────────────────────────────────── */ .resumen { font-size: 20px; font-weight: 600; margin: 4px 0 6px; } .antes { color: var(--texto-tenue); text-decoration: line-through; margin: 0 0 4px; } /* ── Mensajes ─────────────────────────────────────────────────────────────── */ .mensaje { border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; font-size: 16px; } .mensaje.error { background: var(--peligro-suave); color: var(--peligro); } .mensaje.ok { background: var(--ok-suave); color: var(--ok); } .mensaje.aviso { background: var(--aviso-suave); color: var(--aviso); } .listo { text-align: center; } .listo .icono { width: 64px; height: 64px; border-radius: 50%; margin: 4px auto 12px; display: flex; align-items: center; justify-content: center; background: var(--ok-suave); color: var(--ok); font-size: 36px; font-weight: 700; } .listo .icono.gris { background: var(--fondo); color: var(--texto-suave); } .cargando { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 80px 0; color: var(--texto-suave); } .cargando.chico { padding: 24px 0; } .ruedita { width: 34px; height: 34px; border: 4px solid var(--acento-suave); border-top-color: var(--acento); border-radius: 50%; animation: girar .8s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ruedita { animation-duration: 2.4s; } } /* ── Pie: la marca, chica ─────────────────────────────────────────────────── */ .pie { margin-top: auto; padding-top: 28px; text-align: center; font-size: 13px; color: var(--texto-tenue); } .pie a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .pie img { width: 18px; height: 18px; border-radius: 4px; } .sin-js { max-width: 520px; margin: 40px auto; padding: 0 16px; } .oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }