/* ReservasGestioERP - motor de reservas público */
:root { --rg-c1: #0e7c63; --rg-c2: #c9a227; --rg-bg: #f4f5f7; --rg-card: #fff; --rg-text: #1f2937; --rg-muted: #6b7280; --rg-border: #e5e7eb; --rg-soft: #f3f4f6; }
.rg-dark { --rg-bg: #0f1214; --rg-card: #1a1f23; --rg-text: #eceff1; --rg-muted: #9aa3ab; --rg-border: #2b3237; --rg-soft: #232a2f; }
* { box-sizing: border-box; }
body.rg-body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; background: var(--rg-bg); color: var(--rg-text); -webkit-font-smoothing: antialiased; }
body.rg-embed { background: transparent; }
.rg-app { max-width: 560px; margin: 0 auto; padding: 16px 12px 40px; }
.rg-embed .rg-app { padding-top: 0; }
.rg-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 14px; }
.rg-brand img { height: 46px; max-width: 200px; object-fit: contain; }
.rg-brand span { font-weight: 800; font-size: 1.2rem; color: var(--rg-text); }
.rg-brand { text-decoration: none; }
.rg-langs a { display: inline-block; padding: 4px 8px; border-radius: 8px; font-size: .8rem; font-weight: 700; color: var(--rg-muted); text-decoration: none; }
.rg-langs a.on { background: var(--rg-c1); color: #fff; }
.rg-card { background: var(--rg-card); border: 1px solid var(--rg-border); border-radius: 20px; padding: 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, .08); }
.rg-center { text-align: center; }
.rg-big { font-size: 3rem; color: var(--rg-c1); margin-bottom: 12px; }
.rg-foot { text-align: center; color: var(--rg-muted); font-size: .8rem; margin-top: 16px; }
.rg-foot a { color: inherit; }
.rg-alert { background: #fef3c7; color: #92400e; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-weight: 600; }
.rg-dark .rg-alert { background: #3b2f0a; color: #fcd34d; }

/* pasos */
.rg-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.rg-steps span { flex: 1; height: 5px; border-radius: 3px; background: var(--rg-border); }
.rg-steps span.on { background: var(--rg-c1); }
.rg-title { font-size: 1.35rem; font-weight: 800; margin: 0 0 4px; }
.rg-sub { color: var(--rg-muted); margin: 0 0 16px; font-size: .95rem; }
.rg-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rg-summary button { border: 1px solid var(--rg-border); background: var(--rg-soft); color: var(--rg-text); border-radius: 999px; padding: 5px 12px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.rg-summary button i { color: var(--rg-c1); margin-right: 4px; }
.rg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-chip { border: 2px solid var(--rg-border); background: var(--rg-card); color: var(--rg-text); border-radius: 14px; padding: 12px 0; min-width: 58px; text-align: center; font-weight: 800; font-size: 1.05rem; cursor: pointer; transition: all .15s; position: relative; }
.rg-chip:hover { border-color: var(--rg-c1); }
.rg-chip.on { background: var(--rg-c1); border-color: var(--rg-c1); color: #fff; }
.rg-chip.pocas::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--rg-c2); }
.rg-chip.completo { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.rg-chip.pasado { display: none; }
.rg-hora { min-width: 72px; padding: 10px 0; font-size: 1rem; }
.rg-link { background: none; border: 0; color: var(--rg-c1); font-weight: 700; cursor: pointer; padding: 8px 0; text-decoration: underline; }
.rg-servicio { margin-bottom: 18px; }
.rg-servicio h3 { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rg-muted); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.rg-servicio h3 i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.rg-nota { font-size: .85rem; color: var(--rg-muted); margin: -4px 0 8px; }

/* calendario */
.rg-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rg-cal-head strong { font-size: 1.05rem; text-transform: capitalize; }
.rg-cal-head button { border: 1px solid var(--rg-border); background: var(--rg-card); color: var(--rg-text); border-radius: 10px; width: 36px; height: 36px; cursor: pointer; }
.rg-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rg-cal .wd { text-align: center; font-size: .7rem; color: var(--rg-muted); font-weight: 700; text-transform: uppercase; padding: 4px 0; }
.rg-day { aspect-ratio: 1; border-radius: 12px; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; background: var(--rg-soft); position: relative; }
.rg-day.libre { background: rgba(22, 163, 74, .12); color: #15803d; }
.rg-day.pocas { background: rgba(245, 158, 11, .16); color: #b45309; }
.rg-day.completo { background: rgba(220, 38, 38, .1); color: #b91c1c; text-decoration: line-through; cursor: not-allowed; }
.rg-day.cerrado, .rg-day.pasado, .rg-day.vacio { background: transparent; color: var(--rg-border); cursor: default; }
.rg-day.on { border-color: var(--rg-c1); background: var(--rg-c1); color: #fff; }
.rg-day.hoy::after { content: ''; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rg-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: .75rem; color: var(--rg-muted); }
.rg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }

/* formulario */
.rg-form label { display: block; font-weight: 700; font-size: .85rem; margin: 12px 0 4px; }
.rg-form input[type=text], .rg-form input[type=tel], .rg-form input[type=email], .rg-form textarea, .rg-form select { width: 100%; padding: 12px 14px; border: 1px solid var(--rg-border); border-radius: 12px; font-size: 1rem; background: var(--rg-card); color: var(--rg-text); font-family: inherit; }
.rg-form input:focus, .rg-form textarea:focus { outline: none; border-color: var(--rg-c1); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
.rg-row { display: flex; gap: 10px; }
.rg-row > div { flex: 1; }
.rg-chips-small .rg-chip { font-size: .85rem; font-weight: 600; padding: 8px 12px; min-width: 0; border-radius: 999px; }
.rg-check { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--rg-muted); margin-top: 14px; }
.rg-check input { margin-top: 3px; }
.rg-check a { color: var(--rg-c1); }
.rg-note { background: var(--rg-soft); border-radius: 12px; padding: 10px 12px; font-size: .85rem; margin-top: 12px; display: flex; gap: 8px; }
.rg-note i { color: var(--rg-c2); margin-top: 2px; }
.rg-error { background: #fee2e2; color: #991b1b; border-radius: 12px; padding: 10px 12px; margin-top: 12px; font-weight: 600; }
.rg-actions { display: flex; gap: 10px; margin-top: 18px; }
.rg-btn { flex: 1; border: 1px solid var(--rg-border); background: var(--rg-card); color: var(--rg-text); border-radius: 14px; padding: 14px; font-size: 1rem; font-weight: 800; cursor: pointer; text-align: center; text-decoration: none; }
.rg-btn-primary { background: var(--rg-c1); border-color: var(--rg-c1); color: #fff; }
.rg-btn-primary:disabled { opacity: .5; cursor: wait; }
.rg-btn-ghost { flex: 0 0 auto; }
.rg-btn-danger { color: #b91c1c; border-color: #fecaca; }

/* confirmación y página del cliente */
.rg-done { text-align: center; }
.rg-done .rg-big { color: #16a34a; }
.rg-code { font-family: Consolas, monospace; font-size: 1.6rem; letter-spacing: .2em; font-weight: 800; background: var(--rg-soft); border-radius: 12px; padding: 8px 14px; display: inline-block; margin: 6px 0 12px; }
.rg-resumen { background: var(--rg-soft); border-radius: 14px; padding: 14px 16px; text-align: left; margin: 10px 0; }
.rg-resumen div { display: flex; gap: 10px; padding: 4px 0; }
.rg-resumen i { width: 20px; color: var(--rg-c1); text-align: center; }
.rg-badge { display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.rg-badge.confirmada, .rg-badge.sentada, .rg-badge.terminada { background: #dcfce7; color: #166534; }
.rg-badge.pendiente, .rg-badge.espera { background: #fef3c7; color: #92400e; }
.rg-badge.cancelada, .rg-badge.noshow { background: #fee2e2; color: #991b1b; }
.rg-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.rg-links a, .rg-links button { border: 1px solid var(--rg-border); background: var(--rg-card); color: var(--rg-text); border-radius: 12px; padding: 12px 8px; font-weight: 700; font-size: .85rem; text-decoration: none; cursor: pointer; text-align: center; }
.rg-links i { color: var(--rg-c1); display: block; font-size: 1.2rem; margin-bottom: 4px; }
.rg-chat { margin-top: 20px; border-top: 1px solid var(--rg-border); padding-top: 14px; }
.rg-chat h3 { margin: 0 0 4px; font-size: 1rem; }
.rg-msgs { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; padding: 6px 0; }
.rg-msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: .9rem; background: var(--rg-soft); align-self: flex-start; }
.rg-msg.mio { align-self: flex-end; background: var(--rg-c1); color: #fff; }
.rg-msg small { display: block; opacity: .7; font-size: .7rem; margin-top: 2px; }
.rg-chat-form { display: flex; gap: 8px; margin-top: 8px; }
.rg-chat-form input { flex: 1; }
.rg-chat-form button { flex: 0 0 auto; }

/* modal */
.rg-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.rg-modal-box { background: var(--rg-card); border-radius: 18px; max-width: 420px; width: 100%; padding: 20px; }
.rg-modal-foot { display: flex; gap: 8px; margin-top: 14px; }
@media (max-width: 420px) { .rg-card { padding: 16px; } .rg-chip { min-width: 52px; } }

[hidden] { display: none !important; }
.rg-app a { color: var(--rg-c1); }
.rg-dark .rg-app a, .rg-body.rg-dark a { color: var(--rg-c2); }
