/* ==========================================================
   CAMBORIU.COM.PY - Estilos frontend base (FASE 0)
   ========================================================== */
:root {
    --cb-primary: #0e7490;      /* azul mar profundo */
    --cb-primary-dark: #155e75;
    --cb-accent: #fbbf24;       /* amarillo sol */
    --cb-sand: #fef3c7;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.cb-navbar {
    background: linear-gradient(90deg, var(--cb-primary), var(--cb-primary-dark));
}

.cb-brand-accent {
    color: var(--cb-accent);
}

.cb-hero {
    background: linear-gradient(135deg, var(--cb-primary) 0%, var(--cb-primary-dark) 60%, #0c4a6e 100%);
    min-height: 55vh;
}

.cb-footer {
    background: #0c4a6e;
}

.btn-warning {
    --bs-btn-bg: var(--cb-accent);
    --bs-btn-border-color: var(--cb-accent);
}

a { text-decoration: none; }
main a:hover { text-decoration: underline; }

/* Formularios de auth */
.cb-auth-card {
    max-width: 460px;
    margin: 3rem auto;
}

/* ==========================================================
   REDISEÑO HEADER + FOOTER (FASE UI)
   ========================================================== */

/* --- Navbar más moderno --- */
.cb-navbar {
    background: linear-gradient(90deg, var(--cb-primary), var(--cb-primary-dark));
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.cb-navbar .navbar-brand { font-size: 1.35rem; letter-spacing: -.5px; }

/* Botones de navegación con forma de pastilla y hover suave */
.cb-navbar .navbar-nav .nav-link {
    color: rgba(255,255,255,.9);
    font-weight: 500;
    padding: .5rem .85rem;
    border-radius: 999px;
    transition: background .18s ease, color .18s ease;
    white-space: nowrap;
}
.cb-navbar .navbar-nav .nav-link:hover,
.cb-navbar .navbar-nav .nav-link:focus {
    background: rgba(255,255,255,.14);
    color: #fff;
}
.cb-navbar .navbar-nav .nav-link.active {
    background: rgba(255,255,255,.18);
    color: #fff;
}
.cb-navbar .navbar-nav .nav-link i { opacity: .9; }

/* Dropdown de categorías: se despliega al pasar el mouse en escritorio */
@media (min-width: 992px) {
    .cb-navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
        animation: cbFade .16s ease;
    }
}
@keyframes cbFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cb-navbar .dropdown-menu {
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(0,0,0,.16);
    padding: .4rem;
    margin-top: .4rem;
}
.cb-navbar .dropdown-menu .dropdown-item {
    border-radius: 9px;
    padding: .5rem .8rem;
    font-size: .93rem;
}
.cb-navbar .dropdown-menu .dropdown-item:hover {
    background: var(--cb-sand);
    color: var(--cb-primary-dark);
}
.cb-navbar .dropdown-menu .dropdown-item.fw-semibold { color: var(--cb-primary-dark); }

/* Selector de idioma con banderas */
.cb-lang { display: flex; gap: .35rem; align-items: center; }
.cb-lang a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    border: 1px solid transparent;
    transition: all .16s ease;
}
.cb-lang a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.cb-lang a.active {
    background: #fff;
    color: var(--cb-primary-dark);
    border-color: #fff;
}
.cb-flag {
    width: 22px;
    height: auto;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

/* Botón de sesión (Ingresar / Mi Panel) */
.cb-navbar .cb-btn-session {
    border-radius: 999px;
    padding: .45rem 1.1rem;
    font-weight: 600;
}

/* --- Banner newsletter (flotante, redondeado, separado del footer) --- */
.cb-newsletter-banner {
    background: linear-gradient(120deg, var(--cb-primary) 0%, var(--cb-primary-dark) 55%, #0c4a6e 100%);
    border-radius: 22px;
    padding: 2rem 2.2rem;
    color: #fff;
    box-shadow: 0 14px 40px rgba(12,74,110,.28);
    position: relative;
    overflow: hidden;
}
.cb-newsletter-banner::after {
    content: "";
    position: absolute;
    right: -40px; top: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(251,191,36,.25), transparent 70%);
    border-radius: 50%;
}
.cb-newsletter-banner h3 { font-weight: 700; }

/* --- Footer profesional con columnas --- */
.cb-footer {
    background: #0c4a6e;
    color: rgba(255,255,255,.72);
    padding-top: 3rem;
}
.cb-footer h5 {
    color: #fff;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    opacity: .85;
}
.cb-footer a { color: rgba(255,255,255,.72); transition: color .15s ease; }
.cb-footer a:hover { color: var(--cb-accent); text-decoration: none; }
.cb-footer ul { list-style: none; padding: 0; margin: 0; }
.cb-footer ul li { margin-bottom: .55rem; }
.cb-footer .cb-footer-brand { font-size: 1.4rem; font-weight: 700; color: #fff; }
.cb-footer .cb-footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.08); margin-right: .4rem; font-size: 1.05rem;
}
.cb-footer .cb-footer-social a:hover { background: var(--cb-accent); color: #0c4a6e; }
.cb-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 2.5rem; padding: 1.2rem 0;
    font-size: .85rem;
}

/* ==========================================================
   LOGO (imagen) — reemplaza el texto de marca
   ========================================================== */
.cb-logo-img {
    height: 46px;
    width: auto;
    display: block;
    /* Píldora blanca sutil para que el logo (con azules oscuros) resalte sobre el navbar azul */
    background: #fff;
    border-radius: 12px;
    padding: 5px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
@media (max-width: 575.98px) {
    .cb-logo-img { height: 38px; padding: 4px 9px; }
}
.cb-footer-logo {
    height: 66px;
    width: auto;
    display: block;
    background: #fff;
    border-radius: 12px;
    padding: 8px 14px;
}

/* ==========================================================
   Botón "Continuar con Google" (estilo oficial: fondo blanco, borde gris)
   ========================================================== */
.cb-btn-google {
    background: #fff;
    border: 1px solid #dadce0;
    color: #3c4043;
    font-weight: 500;
    border-radius: 8px;
    padding: .6rem 1rem;
    transition: box-shadow .15s ease, background .15s ease;
}
.cb-btn-google:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(60,64,67,.2);
    color: #3c4043;
}
.cb-btn-google img { display: block; }

/* ==========================================================
   Recortador de imágenes (cb-cropper / Cropper.js)
   ========================================================== */
.cb-crop-overlay {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(15, 23, 42, .7);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.cb-crop-box {
    background: #fff; border-radius: 12px; width: 100%; max-width: 640px;
    max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.cb-crop-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #e2e8f0;
}
.cb-crop-x { border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #64748b; }
.cb-crop-body { padding: 12px; background: #f1f5f9; overflow: hidden; }
.cb-crop-body img { display: block; max-width: 100%; }
.cb-crop-body .cropper-container { max-height: 60vh; }
.cb-crop-hint { padding: 0 18px 8px; font-size: .8rem; color: #64748b; }
.cb-crop-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid #e2e8f0; }
.cb-crop-ready { display: none; color: #16a34a; font-size: .8rem; margin-left: 6px; }

/* ==========================================================
   Banner del Kit de viaje (fichas de playa/atracción)
   ========================================================== */
.cb-travelkit-banner {
    background: linear-gradient(120deg, var(--cb-primary, #0e7490), var(--cb-primary-dark, #155e75));
    color: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.cb-travelkit-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(14, 116, 144, .35);
}
.cb-tk-weather { display: flex; align-items: center; gap: 8px; }
.cb-tk-icon { font-size: 2.2rem; line-height: 1; }
.cb-tk-temp { font-size: 1.8rem; font-weight: 700; }
.cb-tk-title { font-size: 1.05rem; font-weight: 700; }
.cb-tk-sub { font-size: .85rem; opacity: .9; }

/* ==========================================================
   Directorio mobile: tarjetas de categoría (grid tocable)
   ========================================================== */
.cb-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 16px 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    color: #0f172a;
    height: 100%;
    position: relative;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cb-cat-tile:active { transform: scale(.97); }
.cb-cat-tile:hover { border-color: var(--cb-primary, #0e7490); box-shadow: 0 4px 14px rgba(14,116,144,.12); color: #0f172a; }
.cb-cat-tile i { font-size: 1.8rem; color: var(--cb-primary, #0e7490); }
.cb-cat-tile .cb-cat-name { font-size: .85rem; font-weight: 600; line-height: 1.2; }
.cb-cat-tile .cb-cat-count {
    position: absolute; top: 6px; right: 8px;
    font-size: .68rem; background: #f1f5f9; color: #64748b;
    border-radius: 10px; padding: 0 7px; font-weight: 600;
}
/* Imagen de empresa: más baja en mobile para que entren 2 por fila */
.cb-biz-img { height: 110px; object-fit: cover; }
@media (min-width: 768px) { .cb-biz-img { height: 160px; } }

/* ==========================================================
   Ocultar el badge flotante de reCAPTCHA (tapa el botón del chat).
   Google lo permite SI se muestra el aviso legal en el texto (está en el footer).
   ========================================================== */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Franja fina de registro del viajero (bajo el hero) */
.cb-traveler-strip {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    color: #422006;
    padding: 8px 0;
    font-size: .9rem;
    font-weight: 500;
}
.cb-traveler-strip i { font-size: 1.1rem; }
/* Tarjetas de eleccion de tipo (onboarding) */
.cb-onb-card { transition: transform .12s ease, box-shadow .12s ease; }
.cb-onb-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(14,116,144,.15); }