.form-reserva {
max-width: 600px;
margin: 0 auto;
padding: 2em;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e5e7eb;
}
.form-reserva h2 {
color: #1f2937;
text-align: center;
margin-bottom: 1.5em;
font-weight: 700;
font-size: 1.8rem;
}
.form-reserva label {
display: block;
margin-bottom: 0.5em;
font-weight: 600;
color: #374151;
}
.form-reserva input,
.form-reserva textarea,
.form-reserva select {
width: 100%;
padding: 12px 16px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
box-sizing: border-box;
}
.form-reserva input:focus,
.form-reserva textarea:focus,
.form-reserva select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-reserva button[type="submit"] {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
border: none;
padding: 14px 28px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
width: 100%;
margin-top: 1em;
}
.form-reserva button[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}
.form-reserva button[type="submit"]:active {
transform: translateY(0);
} .fr-hora-caja {
padding: 10px 16px;
border: 2px solid #e5e7eb;
background: white;
color: #374151;
cursor: pointer;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
margin: 4px;
min-width: 80px;
text-align: center;
}
.fr-hora-caja:hover:not(:disabled) {
border-color: #3b82f6;
background: #f0f9ff;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}
.fr-hora-caja.seleccionada {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
border-color: #3b82f6;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.fr-hora-caja.ocupada {
background: #f3f4f6;
color: #9ca3af;
border-color: #d1d5db;
cursor: not-allowed;
opacity: 0.6;
} #fr-horas-cajas {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 1em;
padding: 16px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
max-height: 200px;
overflow-y: auto;
} #fr-modal-legal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 10000;
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.2s ease;
}
#fr-modal-legal-bg.modal-active {
opacity: 1;
}
#fr-modal-legal-content {
background: white;
padding: 2em;
border-radius: 12px;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
position: relative;
transform: translateY(-20px);
transition: transform 0.2s ease;
}
#fr-modal-legal-bg.modal-active #fr-modal-legal-content {
transform: translateY(0);
}
#fr-modal-legal-content h3 {
color: #1f2937;
margin-top: 0;
margin-bottom: 1em;
font-weight: 700;
}
#fr-cerrar-modal-legal {
position: absolute;
top: 15px;
right: 15px;
background: #f3f4f6;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
#fr-cerrar-modal-legal:hover {
background: #e5e7eb;
transform: scale(1.1);
} #fr-abrir-modal-legal {
color: #3b82f6;
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease;
}
#fr-abrir-modal-legal:hover {
color: #1d4ed8;
text-decoration: underline;
} .fr-mensaje {
padding: 12px 16px;
border-radius: 8px;
margin: 1em 0;
font-weight: 600;
}
.fr-mensaje.error {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
}
.fr-mensaje.exito {
background: #f0fdf4;
color: #16a34a;
border: 1px solid #bbf7d0;
} @media (max-width: 768px) {
.form-reserva {
padding: 1.5em;
margin: 1em;
}
.form-reserva h2 {
font-size: 1.5rem;
}
.fr-hora-caja {
min-width: 70px;
padding: 8px 12px;
font-size: 14px;
}
#fr-modal-legal-content {
padding: 1.5em;
margin: 1em;
}
} .form-reserva {
animation: fadeInUp 0.6s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .fr-loading {
position: relative;
pointer-events: none;
}
.fr-loading::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
.fr-loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
border: 3px solid #f3f4f6;
border-top: 3px solid #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 1;
} .form-reserva label.required::after {
content: ' *';
color: #ef4444;
font-weight: bold;
} #fr-hora-block {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
margin-top: 1em;
}
#fr-hora-block h3 {
color: #374151;
margin-top: 0;
margin-bottom: 1em;
font-weight: 700;
font-size: 1.2rem;
} #fr-horas-cajas::-webkit-scrollbar {
width: 6px;
}
#fr-horas-cajas::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 3px;
}
#fr-horas-cajas::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
#fr-horas-cajas::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
} #fr-horas-cajas {
min-height: 60px;
padding: 10px 0;
} #fr-horas-cajas > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
gap: 0.4em;
margin-top: 8px;
width: 100%;
} @supports not (display: grid) {
#fr-horas-cajas > div {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#fr-horas-cajas > div .fr-hora-caja {
flex: 0 0 calc(25% - 6px);
min-width: 80px;
}
}
.fr-hora-caja {
font-weight: 500;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
padding: 6px 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
text-align: center;
min-width: 0; }
.fr-hora-caja:hover:not(.ocupada) {
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transform: translateY(-1px);
border-color: #007cba;
background: #f8f9fa;
}
.fr-hora-caja.seleccionada {
box-shadow: 0 2px 8px rgba(0,124,186,0.3);
background: #007cba;
border-color: #007cba;
color: #fff;
}
.fr-hora-caja.ocupada {
box-shadow: none;
background: #f8f9fa;
color: #6c757d;
cursor: not-allowed;
border-color: #dee2e6;
} .form-reserva input[type="date"] {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.form-reserva input[type="date"]:focus {
border-color: #007cba;
outline: none;
box-shadow: 0 0 0 2px rgba(0,124,186,0.2);
} #fr-horas-cajas .loading {
text-align: center;
padding: 20px;
color: #666;
} .fr-error {
color: #e74c3c;
font-size: 12px;
margin-top: 4px;
}
.fr-error-msg {
background: #fee;
border: 1px solid #fcc;
color: #c33;
padding: 10px;
border-radius: 4px;
margin: 10px 0;
}
.fr-success-msg {
background: #efe;
border: 1px solid #cfc;
color: #3c3;
padding: 10px;
border-radius: 4px;
margin: 10px 0;
} .flatpickr-calendar {
font-family: inherit;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border: 1px solid #e5e7eb;
}
.flatpickr-day {
border-radius: 4px;
margin: 1px;
transition: all 0.2s ease;
}
.flatpickr-day.disabled {
background: #f3f4f6 !important;
color: #9ca3af !important;
border-color: #d1d5db !important;
cursor: not-allowed !important;
opacity: 0.8 !important;
text-decoration: line-through !important;
font-weight: 400 !important;
}
.flatpickr-day.disabled:hover {
background: #e5e7eb !important;
color: #6b7280 !important;
}
.flatpickr-day.disabled:focus {
background: #d1d5db !important;
color: #4b5563 !important;
}
.flatpickr-day.today {
border-color: #3b82f6;
background: #eff6ff;
color: #1d4ed8;
}
.flatpickr-day.selected {
background: #3b82f6 !important;
border-color: #3b82f6 !important;
color: white !important;
}
.flatpickr-day.selected:hover {
background: #2563eb !important;
border-color: #2563eb !important;
}
.flatpickr-day:hover:not(.disabled):not(.selected) {
background: #f0f9ff;
border-color: #3b82f6;
color: #1d4ed8;
font-weight: 600;
}
.flatpickr-day:not(.disabled):not(.selected) {
font-weight: 500;
} .flatpickr-months {
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
border-radius: 8px 8px 0 0;
}
.flatpickr-month {
color: #374151;
font-weight: 600;
}
.flatpickr-current-month {
padding: 8px 0;
}
.flatpickr-monthDropdown-months {
background: transparent;
border: none;
color: #374151;
font-weight: 600;
} .flatpickr-weekday {
color: #6b7280;
font-weight: 600;
font-size: 0.875rem;
} @media (max-width: 768px) {
.flatpickr-calendar {
font-size: 14px;
}
.flatpickr-day {
height: 35px;
line-height: 35px;
}
} .flatpickr-day.prevMonthDay.disabled,
.flatpickr-day.nextMonthDay.disabled {
background: #f9fafb !important;
color: #d1d5db !important;
border-color: #e5e7eb !important;
opacity: 0.5 !important;
}
.flatpickr-day.curMonth.disabled {
background: #f3f4f6 !important;
color: #9ca3af !important;
border-color: #d1d5db !important;
opacity: 0.8 !important;
text-decoration: line-through !important;
font-weight: 500 !important;
} .flatpickr-day.disabled::after {
content: attr(title);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #374151;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 1000;
}
.flatpickr-day.disabled:hover::after {
opacity: 1;
} .flatpickr-calendar {
background: white;
color: #374151;
}
.flatpickr-day {
color: #374151;
font-weight: 500;
}
.flatpickr-day.curMonth {
font-weight: 600;
}   .fr-privacy-checkbox {
margin: 1rem 0;
text-align: left;
}
.fr-privacy-checkbox label {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
font-size: 14px;
line-height: 1.5;
}
.fr-privacy-checkbox input[type="checkbox"] {
width: auto;
margin: 0;
margin-top: 2px;
flex-shrink: 0;
}
.fr-privacy-checkbox span {
flex: 1;
}
.fr-privacy-checkbox a {
color: #3b82f6;
text-decoration: underline;
}
.fr-privacy-checkbox a:hover {
color: #2563eb;
} .fr-whatsapp-reminder-checkbox {
margin: 1rem 0;
text-align: left;
}
.fr-whatsapp-reminder-checkbox label {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
font-size: 14px;
line-height: 1.5;
}
.fr-whatsapp-reminder-checkbox input[type="checkbox"] {
width: auto;
margin: 0;
margin-top: 2px;
flex-shrink: 0;
}
.fr-whatsapp-reminder-checkbox span {
flex: 1;
}
.fr-frontend-debug-panel {
margin: 1rem 0;
border: 1px solid #fecaca;
background: #fff7ed;
border-radius: 10px;
overflow: hidden;
}
.fr-frontend-debug-header {
padding: 0.75rem 1rem;
background: #7c2d12;
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.fr-frontend-debug-log {
max-height: 260px;
overflow: auto;
padding: 0.75rem 1rem;
font-family: Consolas, Monaco, monospace;
font-size: 12px;
line-height: 1.45;
color: #431407;
white-space: pre-wrap;
word-break: break-word;
}
.fr-frontend-debug-entry {
padding: 0.45rem 0;
border-bottom: 1px solid #fed7aa;
}
.fr-frontend-debug-entry:last-child {
border-bottom: 0;
}
.fr-frontend-debug-time {
color: #9a3412;
font-weight: 700;
margin-right: 0.4rem;
}
.fr-frontend-debug-category {
color: #7c2d12;
font-weight: 700;
margin-right: 0.4rem;
} @media (max-width: 768px) {
.fr-privacy-checkbox label {
font-size: 13px;
}
.fr-whatsapp-reminder-checkbox label {
font-size: 13px;
}
} #fr-modal-legal-content {
color: #333 !important;
}
#fr-modal-legal-content h3,
#fr-modal-legal-content h4,
#fr-modal-legal-content h5,
#fr-modal-legal-content h6 {
color: #1f2937 !important;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
#fr-modal-legal-content p {
color: #374151 !important;
margin-bottom: 1em;
line-height: 1.6;
}
#fr-modal-legal-content strong {
color: #1f2937 !important;
font-weight: 600;
}
#fr-modal-legal-content em {
color: #6b7280 !important;
font-style: italic;
}
#fr-modal-legal-content ul,
#fr-modal-legal-content ol {
color: #374151 !important;
margin-left: 1.5em;
margin-bottom: 1em;
}
#fr-modal-legal-content li {
color: #374151 !important;
margin-bottom: 0.5em;
} .fr-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0; width: 100vw; height: 100vh;
background: rgba(0,0,0,0.45);
justify-content: center;
align-items: flex-start;
}
.fr-modal-content {
background: #fff;
max-width: 600px;
width: 90vw;
max-height: 80vh;
overflow: auto;
padding: 2em 1.5em 1.5em 1.5em;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
position: relative;
margin: 10vh auto 0 auto;
}
.fr-modal-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 2em;
background: none;
border: none;
color: #374151;
cursor: pointer;
z-index: 10;
line-height: 1;
font-weight: bold;
opacity: 0.8;
transition: opacity 0.2s;
}
.fr-modal-close:hover {
opacity: 1;
color: #ef4444;
} .fr-hora-btn {
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 0.5em 0.4em;
font-size: 0.875em;
color: #374151;
cursor: pointer;
transition: background 0.2s, border 0.2s, color 0.2s;
width: 100%;
margin: 0;
outline: none;
}
.fr-hora-btn.selected,
.fr-hora-btn:active {
background: #3b82f6;
color: #fff;
border-color: #2563eb;
}
.fr-hora-btn.ocupada,
.fr-hora-btn:disabled {
background: #fca5a5;
color: #fff;
border-color: #ef4444;
cursor: not-allowed;
opacity: 0.7;
}
#fr-modal-legal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.4);
display: none;
z-index: 9999;
justify-content: center;
align-items: flex-start;
}
#fr-modal-legal[style*="display: block"] {
display: flex !important;
}
#fr-modal-legal-content {
background: #fff;
max-width: 600px;
width: 90vw;
margin: 10vh auto 0 auto;
padding: 2em 1.5em;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
max-height: 80vh;
overflow: auto;
}
#fr-modal-legal-close {
position: absolute;
top: 20px;
right: 30px;
font-size: 2em;
cursor: pointer;
z-index: 10000;
}  .fr-intro-text,
#fr-horario-base-info,
#fr-horarios-agrupados,
#fr-horarios-especiales-antes,
#fr-horarios-especiales-despues {  } .fr-intro-text,
#fr-horario-base-info,
#fr-horarios-agrupados,
#fr-horarios-especiales-antes,
#fr-horarios-especiales-despues,
.fr-intro-text *,
#fr-horario-base-info *,
#fr-horarios-agrupados *,
#fr-horarios-especiales-antes *,
#fr-horarios-especiales-despues * {
color: inherit !important;
} .fr-intro-text,
#fr-horario-base-info,
#fr-horarios-agrupados,
#fr-horarios-especiales-antes,
#fr-horarios-especiales-despues {
color: #374151 !important;
} .fr-intro-text [style*="color"],
#fr-horario-base-info [style*="color"],
#fr-horarios-agrupados [style*="color"],
#fr-horarios-especiales-antes [style*="color"],
#fr-horarios-especiales-despues [style*="color"] {
color: inherit !important;
} .fr-intro-text [style*="font-size: small"],
#fr-horario-base-info [style*="font-size: small"],
#fr-horarios-agrupados [style*="font-size: small"],
#fr-horarios-especiales-antes [style*="font-size: small"],
#fr-horarios-especiales-despues [style*="font-size: small"] {
font-size: 0.875em !important;
}
.fr-intro-text [style*="font-size: large"],
#fr-horario-base-info [style*="font-size: large"],
#fr-horarios-agrupados [style*="font-size: large"],
#fr-horarios-especiales-antes [style*="font-size: large"],
#fr-horarios-especiales-despues [style*="font-size: large"] {
font-size: 1.125em !important;
}
.fr-intro-text [style*="font-size: huge"],
#fr-horario-base-info [style*="font-size: huge"],
#fr-horarios-agrupados [style*="font-size: huge"],
#fr-horarios-especiales-antes [style*="font-size: huge"],
#fr-horarios-especiales-despues [style*="font-size: huge"] {
font-size: 1.25em !important;
} .fr-intro-text h1,
#fr-horario-base-info h1,
#fr-horarios-agrupados h1,
#fr-horarios-especiales-antes h1,
#fr-horarios-especiales-despues h1 {
font-size: 2em;
font-weight: 600;
margin: 16px 0 8px 0;
line-height: 1.3;
}
.fr-intro-text h2,
#fr-horario-base-info h2,
#fr-horarios-agrupados h2,
#fr-horarios-especiales-antes h2,
#fr-horarios-especiales-despues h2 {
font-size: 1.5em;
font-weight: 600;
margin: 16px 0 8px 0;
line-height: 1.3;
}
.fr-intro-text h3,
#fr-horario-base-info h3,
#fr-horarios-agrupados h3,
#fr-horarios-especiales-antes h3,
#fr-horarios-especiales-despues h3 {
font-size: 1.25em;
font-weight: 600;
margin: 16px 0 8px 0;
line-height: 1.3;
}
.fr-intro-text h4,
#fr-horario-base-info h4,
#fr-horarios-agrupados h4,
#fr-horarios-especiales-antes h4,
#fr-horarios-especiales-despues h4 {
font-size: 1.1em;
font-weight: 600;
margin: 16px 0 8px 0;
line-height: 1.3;
}
.fr-intro-text h5,
#fr-horario-base-info h5,
#fr-horarios-agrupados h5,
#fr-horarios-especiales-antes h5,
#fr-horarios-especiales-despues h5 {
font-size: 1em;
font-weight: 600;
margin: 16px 0 8px 0;
line-height: 1.3;
}
.fr-intro-text h6,
#fr-horario-base-info h6,
#fr-horarios-agrupados h6,
#fr-horarios-especiales-antes h6,
#fr-horarios-especiales-despues h6 {
font-size: 0.9em;
font-weight: 600;
margin: 16px 0 8px 0;
line-height: 1.3;
} .fr-intro-text p,
#fr-horario-base-info p,
#fr-horarios-agrupados p,
#fr-horarios-especiales-antes p,
#fr-horarios-especiales-despues p {
margin: 8px 0;
} .fr-intro-text blockquote,
#fr-horario-base-info blockquote,
#fr-horarios-agrupados blockquote,
#fr-horarios-especiales-antes blockquote,
#fr-horarios-especiales-despues blockquote {
border-left: 4px solid #3b82f6;
margin: 16px 0;
padding: 8px 16px;
background: #f8fafc;
font-style: italic;
} .fr-intro-text ul,
#fr-horario-base-info ul,
#fr-horarios-agrupados ul,
#fr-horarios-especiales-antes ul,
#fr-horarios-especiales-despues ul,
.fr-intro-text ol,
#fr-horario-base-info ol,
#fr-horarios-agrupados ol,
#fr-horarios-especiales-antes ol,
#fr-horarios-especiales-despues ol {
margin: 8px 0;
padding-left: 24px;
}
.fr-intro-text li,
#fr-horario-base-info li,
#fr-horarios-agrupados li,
#fr-horarios-especiales-antes li,
#fr-horarios-especiales-despues li {
margin: 4px 0;
} .fr-intro-text code,
#fr-horario-base-info code,
#fr-horarios-agrupados code,
#fr-horarios-especiales-antes code,
#fr-horarios-especiales-despues code {
background: #f1f5f9;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}
.fr-intro-text pre,
#fr-horario-base-info pre,
#fr-horarios-agrupados pre,
#fr-horarios-especiales-antes pre,
#fr-horarios-especiales-despues pre {
background: #f1f5f9;
padding: 12px;
border-radius: 6px;
margin: 16px 0;
overflow-x: auto;
} .fr-intro-text a,
#fr-horario-base-info a,
#fr-horarios-agrupados a,
#fr-horarios-especiales-antes a,
#fr-horarios-especiales-despues a {
color: #3b82f6;
text-decoration: underline;
}
.fr-intro-text a:hover,
#fr-horario-base-info a:hover,
#fr-horarios-agrupados a:hover,
#fr-horarios-especiales-antes a:hover,
#fr-horarios-especiales-despues a:hover {
color: #1e40af;
} @media (max-width: 768px) {
.fr-intro-text h1,
#fr-horario-base-info h1,
#fr-horarios-agrupados h1,
#fr-horarios-especiales-antes h1,
#fr-horarios-especiales-despues h1 {
font-size: 1.5em;
}
.fr-intro-text h2,
#fr-horario-base-info h2,
#fr-horarios-agrupados h2,
#fr-horarios-especiales-antes h2,
#fr-horarios-especiales-despues h2 {
font-size: 1.25em;
}
.fr-intro-text h3,
#fr-horario-base-info h3,
#fr-horarios-agrupados h3,
#fr-horarios-especiales-antes h3,
#fr-horarios-especiales-despues h3 {
font-size: 1.1em;
}
}