:root {
    --bs-primary: #0369a1;
    --bs-primary-rgb: 3, 105, 161;
    --bs-primary-bg-subtle: #e0f2fe;
    --bs-primary-border-subtle: #bae6fd;
}

body {
    background-color: #f6f7f9;
}

.btn-primary {
    --bs-btn-bg: #0369a1;
    --bs-btn-border-color: #0369a1;
    --bs-btn-hover-bg: #075985;
    --bs-btn-hover-border-color: #075985;
    --bs-btn-active-bg: #075985;
    --bs-btn-active-border-color: #075985;
    --bs-btn-disabled-bg: #0369a1;
    --bs-btn-disabled-border-color: #0369a1;
    --bs-btn-focus-shadow-rgb: 3, 105, 161;
}

.btn-outline-primary {
    --bs-btn-color: #0369a1;
    --bs-btn-border-color: #0369a1;
    --bs-btn-hover-bg: #0369a1;
    --bs-btn-hover-border-color: #0369a1;
    --bs-btn-active-bg: #0369a1;
    --bs-btn-active-border-color: #0369a1;
    --bs-btn-disabled-color: #0369a1;
    --bs-btn-disabled-border-color: #0369a1;
    --bs-btn-focus-shadow-rgb: 3, 105, 161;
}

.card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.navbar {
    box-shadow: 0 2px 6px rgba(10, 30, 66, 0.25);
}

.bg-navbar-gradient {
    background: linear-gradient(135deg, #0a1e42 0%, #0c4a6e 60%, #0369a1 100%);
}

.navbar-brand {
    font-weight: 600;
}

.nav-link.active {
    color: #0369a1 !important;
    font-weight: 600;
}

.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: #ffffff !important;
}

.navbar-dark .nav-link.active {
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.map-container {
    width: 100%;
    height: calc(100vh - 180px);
    min-height: 360px;
    border-radius: 0.75rem;
    overflow: hidden;
}

.section-title {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.4rem;
}

@media (max-width: 576px) {
    html {
        font-size: 17.5px;
    }
}

/* Overlay de navegación (brújula) */
.pescaapp-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.pescaapp-nav-nombre {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.pescaapp-brujula {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #0f3a5f 0%, #08243e 100%);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), inset 0 0 24px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.35);
}

.pescaapp-brujula-dial {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.pescaapp-brujula-ticks {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 255, 255, 0.85) 0deg 1.5deg, transparent 1.5deg 30deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
}

.pescaapp-brujula-letra {
    position: absolute;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    opacity: 0.85;
}

.pescaapp-brujula-n { top: 10px; left: 50%; transform: translateX(-50%); color: #fca5a5; }
.pescaapp-brujula-e { top: 50%; right: 10px; transform: translateY(-50%); }
.pescaapp-brujula-s { bottom: 10px; left: 50%; transform: translateX(-50%); }
.pescaapp-brujula-o { top: 50%; left: 10px; transform: translateY(-50%); }

.pescaapp-brujula-aguja {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform-origin: 50% 50%;
    transition: transform 0.2s ease;
}

.pescaapp-brujula-punta {
    position: absolute;
    left: -9px;
    top: -72px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 72px solid #ef4444;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

.pescaapp-brujula-cola {
    position: absolute;
    left: -7px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 46px solid #cbd5e1;
}

.pescaapp-brujula-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
}

.pescaapp-nav-distancia {
    font-size: 2.2rem;
    font-weight: 700;
    margin-top: 1.25rem;
}

/* Gráfica de barras de Estadísticas — dibujada con divs, sin ninguna
   librería de gráficos (el proyecto no usa npm ni build step). */
.pescaapp-grafica-barras {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    height: 160px;
    padding-top: 1.5rem;
}

.pescaapp-barra-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

.pescaapp-barra {
    width: 60%;
    min-height: 3px;
    background: #0369a1;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
}

.pescaapp-barra-valor {
    color: #64748b;
    white-space: nowrap;
}

.pescaapp-barra-label {
    margin-top: 0.35rem;
    text-transform: capitalize;
}

/* Tutorial guiado (primera vez que inician sesión) */
.pescaapp-tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: linear-gradient(180deg, #0a1e42 0%, #0369a1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.pescaapp-tutorial-tarjeta {
    color: #fff;
    text-align: center;
    max-width: 360px;
}

.pescaapp-tutorial-tarjeta i {
    font-size: 3rem;
}

.pescaapp-tutorial-saltar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.pescaapp-tutorial-puntos {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.4rem;
    justify-content: center;
}

.pescaapp-tutorial-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.pescaapp-tutorial-punto.activo {
    background: #fff;
}

/* Modo nocturno: dos capas fijas con mix-blend-mode tiñen toda la pantalla
   de rojo y la oscurecen (mapa, fotos, modales, todo incluido) sin tener
   que redefinir colores componente por componente — cuida la vista de
   noche en altamar, igual que las luces rojas de cabina en barcos. */
#pescaapp-nocturno-hue,
#pescaapp-nocturno-dim {
    position: fixed;
    inset: 0;
    z-index: 2050;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

#pescaapp-nocturno-hue {
    background: #ff1a1a;
    mix-blend-mode: hue;
}

#pescaapp-nocturno-dim {
    background: #000;
    mix-blend-mode: multiply;
}

html.pescaapp-modo-nocturno #pescaapp-nocturno-hue {
    opacity: 1;
}

html.pescaapp-modo-nocturno #pescaapp-nocturno-dim {
    opacity: 0.55;
}

@media (max-width: 767.98px) {
    .navbar-collapse .nav-link {
        display: block;
        padding: 0.9rem 1rem;
        border-radius: 0.5rem;
        background: rgba(255, 255, 255, 0.08);
    }

    .navbar-collapse .nav-link.active {
        background: rgba(255, 255, 255, 0.16);
    }

    .navbar-collapse form {
        width: 100%;
    }

    .navbar-collapse .btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}