.cbase-widget {
max-width: 720px;
margin: 0 auto;
font-family: inherit;
color: inherit;
}
.cbase-widget .hidden { display: none !important; }
.cbase-loading,
.cbase-empty,
.cbase-error {
padding: 1.2rem;
text-align: center;
color: #666;
}
.cbase-error { color: #a3372e; }
.cbase-salida-card {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
justify-content: space-between;
border: 1px solid #ddd;
border-radius: 10px;
padding: 1rem 1.2rem;
margin-bottom: 0.9rem;
background: #fff;
}
.cbase-salida-info { flex: 1; min-width: 200px; }
.cbase-salida-fecha { font-weight: 700; font-size: 1.05rem; }
.cbase-salida-meta { color: #666; font-size: 0.9rem; margin-top: 0.2rem; }
.cbase-salida-plazas {
display: inline-block;
margin-top: 0.35rem;
font-size: 0.82rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
background: #e7f2e8;
color: #2f5c33;
}
.cbase-salida-price { font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.cbase-btn {
display: inline-block;
border: none;
border-radius: 8px;
padding: 0.6rem 1.1rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
background: #1d2b28;
color: #fff;
text-decoration: none;
}
.cbase-btn:hover { opacity: 0.9; }
.cbase-btn-secondary { background: transparent; color: #1d2b28; border: 1px solid #ccc; }
.cbase-booking-summary-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.7rem 0; border-bottom: 1px solid #eee; }
.cbase-booking-summary-row:last-child { border-bottom: none; }
.cbase-galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; margin-top: 1rem; }
.cbase-galeria-item { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; display: block; }
.cbase-galeria-item img { width: 100%; height: 140px; object-fit: cover; display: block; }
.cbase-galeria-video-placeholder { width: 100%; height: 140px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: #F5F3EC; }
.cbase-galeria-item-label { padding: 0.4rem 0.6rem; font-size: 0.78rem; color: #666; word-break: break-all; }
.cbase-aviso-box { background: #FFF6E8; border: 1px solid #E8CC9A; border-radius: 8px; padding: 0.8rem 1rem; color: #8A5A1E; margin-bottom: 1rem; }
.cbase-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.cbase-form-wrap, .cbase-confirm-wrap {
border: 1px solid #ddd;
border-radius: 10px;
padding: 1.4rem;
background: #fff;
}
.cbase-form-summary {
background: #f7f5ef;
border-radius: 8px;
padding: 0.8rem 1rem;
margin-bottom: 1.2rem;
font-size: 0.92rem;
}
.cbase-field { margin-bottom: 1rem; }
.cbase-field label {
display: block;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: #666;
margin-bottom: 0.3rem;
}
.cbase-field input,
.cbase-field select,
.cbase-field textarea {
width: 100%;
box-sizing: border-box;
padding: 0.6rem 0.7rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 0.95rem;
}
.cbase-form-actions { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.cbase-field-checkbox label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
text-transform: none;
font-weight: 400;
font-size: 0.85rem;
color: #444;
}
.cbase-field-checkbox input[type="checkbox"] {
width: auto;
margin-top: 0.15rem;
flex-shrink: 0;
}
.cbase-form-error {
color: #a3372e;
font-size: 0.88rem;
margin-top: 0.6rem;
}
.cbase-confirm-wrap { text-align: center; }
.cbase-confirm-code {
display: inline-block;
margin: 1rem 0;
padding: 0.5rem 1rem;
border-radius: 8px;
background: #eaf3f1;
color: #2c7a7b;
font-weight: 700;
font-family: monospace;
font-size: 1.1rem;
letter-spacing: 0.05em;
} .cbase-mireserva-widget { max-width: 640px; margin: 0 auto; font-family: inherit; color: inherit; }
.cbase-mireserva-widget .hidden { display: none !important; }
.cbase-card {
border: 1px solid #ddd;
border-radius: 10px;
padding: 1.4rem;
background: #fff;
margin-bottom: 1rem;
}
.cbase-card-error { border-color: #f0d6d2; }
.cbase-card h3 { margin-top: 0; }
.cbase-hint { font-size: 0.85rem; color: #666; }
.cbase-pago-realizado { color: #2f5c33; font-weight: 600; margin: 0.4rem 0 0; }
.cbase-code-form { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.cbase-code-form input {
flex: 1;
min-width: 160px;
padding: 0.6rem 0.7rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 0.95rem;
}
.cbase-summary-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.cbase-nivel-badge {
display: inline-block; background: #eaf3f1; color: #2c7a7b; font-size: 0.78rem; font-weight: 600;
padding: 0.2rem 0.6rem; border-radius: 4px; margin-left: 0.5rem; text-transform: uppercase;
}
.cbase-plazas-info { font-size: 0.85rem; color: #666; }
.cbase-hora-info { margin-top: 0.4rem; font-size: 0.85rem; color: #666; }
.cbase-punto-encuentro { margin-top: 0.5rem; font-size: 0.85rem; padding: 0.5rem 0.7rem; background: #eaf3f1; border-radius: 6px; }
.cbase-punto-encuentro a { color: #2c7a7b; font-weight: 600; }
.cbase-pago-info { margin-top: 0.5rem; font-size: 0.9rem; padding: 0.6rem 0.8rem; background: #f7f5ef; border: 1px solid #ddd; border-radius: 6px; }
.cbase-pay-btn { display: inline-block; margin-top: 0.6rem; background: #1d2b28; color: #fff; padding: 0.6rem 1.1rem; border-radius: 6px; font-weight: 600; text-decoration: none; font-size: 0.9rem; }
.cbase-code-reminder { margin: 0.75rem 0 0; font-size: 0.85rem; color: #666; }
.cbase-participant-row {
display: flex; justify-content: space-between; align-items: center;
padding: 0.6rem 0; border-bottom: 1px solid #eee; gap: 0.6rem;
}
.cbase-participant-row:last-child { border-bottom: none; }
.cbase-field-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 480px) { .cbase-field-grid { grid-template-columns: 1fr 1fr; } }
.cbase-neoprene-box { background: #f7f5ef; border: 1px solid #ddd; border-radius: 8px; padding: 0.9rem 1rem; margin-top: 1.5rem; }
.cbase-neoprene-box > label { font-size: 0.85rem; font-weight: 600; }
.cbase-radio-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.9rem; }
.cbase-neoprene-result { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.cbase-neoprene-chip { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.4rem 0.8rem; border-radius: 6px; background: #fff; border: 1px solid #ddd; min-width: 4.5rem; }
.cbase-neoprene-chip span { font-size: 0.65rem; text-transform: uppercase; color: #666; font-weight: 600; }
.cbase-neoprene-chip strong { font-size: 1rem; }
.cbase-neoprene-chip.ideal { border-color: #2c7a7b; background: #eaf3f1; }
.cbase-neoprene-chip.ideal strong { color: #2c7a7b; }
.cbase-neoprene-empty { font-size: 0.82rem; color: #666; }
.cbase-checkbox-row, .cbase-radio-row-block {
display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.8rem; font-size: 0.9rem; cursor: pointer;
}
.cbase-checkbox-row input, .cbase-radio-row-block input { margin-top: 0.2rem; flex-shrink: 0; }
.cbase-signature-canvas {
width: 100%;
height: 160px;
border: 1px dashed #ccc;
border-radius: 6px;
background: #fff;
touch-action: none;
cursor: crosshair;
display: block;
}
.cbase-final-accept { background: #f7f5ef; padding: 0.8rem; border-radius: 8px; margin-top: 1.2rem; }
.cbase-actividad-filtro { margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cbase-actividad-filtro label { font-size: 0.85rem; font-weight: 600; }
.cbase-actividad-filtro select { padding: 0.4rem 0.6rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9rem; }
.cbase-calendar-toggle { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.cbase-view-btn.active { background: #2c7a7b; color: #fff; border-color: #2c7a7b; }
.cbase-calendar { margin-bottom: 1rem; }
.cbase-calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.cbase-calendar-label { font-weight: 700; text-transform: capitalize; }
.cbase-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.cbase-cal-day-header { text-align: center; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; color: #888; padding-bottom: 0.2rem; }
.cbase-cal-day { text-align: center; padding: 0.4rem 0.1rem; border-radius: 6px; border: 1px solid #eee; font-size: 0.8rem; }
.cbase-cal-day.other-month { opacity: 0.35; }
.cbase-cal-day.today { border-color: #2c7a7b; border-width: 2px; }
.cbase-cal-day.selected { background: #eaf3f1; }
.cbase-cal-day.has-salidas { cursor: pointer; font-weight: 700; }
.cbase-cal-day-number { display: block; }
.cbase-cal-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: #2c7a7b; margin: 2px auto 0; } .cbase-guias-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .cbase-guias-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cbase-guias-grid { grid-template-columns: repeat(3, 1fr); } }
.cbase-guia-card { background: #fff; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.cbase-guia-foto { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.cbase-guia-foto-placeholder { display: flex; align-items: center; justify-content: center; background: #f7f5ef; font-size: 2.5rem; color: #888; }
.cbase-guia-info { padding: 1rem 1.1rem 1.25rem; }
.cbase-guia-nombre { margin: 0 0 0.4rem; font-size: 1.05rem; color: #1d2b28; }
.cbase-guia-descripcion { font-size: 0.9rem; color: #262421; margin: 0 0 0.75rem; }
.cbase-guia-meta-label { font-size: 0.72rem; text-transform: uppercase; color: #888; font-weight: 600; margin-right: 0.4rem; }
.cbase-guia-chips { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.cbase-guia-chip { display: inline-block; background: #f7f5ef; border: 1px solid #ddd; border-radius: 20px; padding: 0.15rem 0.65rem; font-size: 0.78rem; }
.cbase-guia-chip-idioma { background: #eaf3f1; border-color: #2c7a7b; color: #2c7a7b; }
.cbase-guia-instagram { margin: 0.75rem 0 0; }
.cbase-guia-instagram a { color: #2c7a7b; font-weight: 600; text-decoration: none; font-size: 0.9rem; }
.cbase-guia-instagram a:hover { text-decoration: underline; }