: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%;
    /* Alto de respaldo antes de que el JS de mapa/index.php calcule el alto
       real disponible (ajustarAlturaMapa) — ese cálculo es dinámico porque
       la barra de botones de arriba puede ocupar 1, 2 o 3 líneas según el
       tamaño de pantalla, así que un número fijo aquí siempre se quedaba
       corto o largo en algún caso. */
    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;
}

/* Título de tarjeta de nivel superior (Clima, Mis puntos, Estadísticas...) —
   consistente en toda la app: ícono + texto en negrita, tamaño uniforme.
   Distinto de .section-title, que es para subtítulos dentro de una tarjeta. */
.card-title-icon {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title-icon i {
    color: var(--bs-primary);
    font-size: 1.1rem;
}

/* Botón de ayuda "?" — 28px quedaba por debajo del mínimo táctil
   recomendado (44x44 iOS / 48x48 Material); con manos mojadas o guantes
   en un bote, es justo el tipo de botón chico que más falla al tocar. */
.btn-ayuda {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Ícono de estado vacío ("aún no tienes X") — repetido antes como
   style="font-size: 1.5rem" suelto en cada vista. */
.icono-vacio {
    font-size: 1.75rem;
    color: #94a3b8;
}

/* Placeholder de carga (skeleton) para contenido que tarda en resolver
   desde IndexedDB — evita que una tarjeta se vea vacía/rota por 1-2
   segundos mientras carga. */
.pescaapp-skeleton-linea {
    height: 0.9rem;
    border-radius: 0.35rem;
}

@media (max-width: 991.98px) {
    html {
        font-size: 17px;
    }
}

@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;
}

/* Aviso de "hay una actualización disponible" — barra fija abajo de la
   pantalla, visible en cualquier página, para no depender de que el
   pescador cierre y reabra la app para notar cambios. */
#pescaapp-aviso-actualizacion {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
}

.pescaapp-guest-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #e0f2fe 0%, #f6f7f9 320px);
}

/* Tarjeta de "instalar la app" en el login — a propósito muy distinta a un
   botón suelto: la app está pensada para usarse instalada (funciona sin
   señal, ícono propio), así que este paso no debería verse como opcional
   ni pasar desapercibido debajo del formulario. */
.pescaapp-pwa-card {
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: 10px;
    padding: 1rem;
}

/* Indicador de "sin conexión" — badge fijo en la esquina, discreto, solo
   visible cuando de verdad no hay señal (toda la app está pensada para
   funcionar así, esto es solo para que el pescador lo sepa con certeza). */
#pescaapp-offline-badge {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1060;
}

/* Leaflet le da a sus controles (zoom, capas) el mismo z-index que Bootstrap
   usa por defecto para los menús desplegables (1000 los dos) — al empatar,
   gana el que aparece después en el HTML, que es el mapa: los botones +/-
   del zoom terminaban viéndose encima de un menú abierto (ej. "Pegar enlace
   de Maps" o "Escribir coordenadas" en /mapa). Con esto, el menú siempre
   gana. */
.dropdown-menu {
    z-index: 1100;
}

@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;
    }
}