/* ============================================================
   SISTEMA VISUAL — CAFactivities (Dirección visual v1 · 2026)
   Tokens = única fuente de la paleta. Cambia aquí y cambia en todo.
   Cuaderno de bitácora: papel cálido, tinta, rojo de acento y los
   DATOS en monoespaciada (coordenadas, grados, cotas, distancias).
   Lora (títulos) · Inter (interfaz) · IBM Plex Mono (datos).
   ============================================================ */
:root {
    /* Papel (fondos) */
    --paper-base: #F1EFE8;
    --paper-card: #FBFAF6;
    --paper-relief: #E8E5DB;
    --paper-soft: #EFEDE6;
    --paper-tint: #F3F1EA;

    /* Líneas y bordes */
    --line: #D3D1C7;
    --line-soft: var(--line-soft);
    --line-strong: #B4B2A9;

    /* Tinta (texto) */
    --ink: #2C2C2A;
    --ink-soft: #5F5E5A;
    --ink-faint: #888780;
    --ink-mute: #A8A69D;

    /* Rojo (acento de marca) */
    --red: #E24B4A;
    --red-deep: #A32D2D;
    --red-press: #C73E3D;
    --red-chip-bg: #FAECE7;

    /* Chips por familia de disciplina (calcado del mockup) */
    --disc-climb-bg: #FAECE7;   --disc-climb-fg: #712B13;   --disc-climb-solid: #A32D2D;
    --disc-mtn-bg: #F5EAD2;     --disc-mtn-fg: #6B4E12;     --disc-mtn-solid: #9A6A1B;
    --disc-winter-bg: #E4EAEC;  --disc-winter-fg: #324047;  --disc-winter-solid: #4F6470;
    --disc-trek-bg: #E7EFE6;    --disc-trek-fg: #33503A;    --disc-trek-solid: #4F7A52;

    /* Tipografía */
    --font-display: 'Lora', Georgia, serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-data: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* Utilidad: DATOS "de instrumento" en monoespaciada — coordenadas, grados,
   cotas, distancias, duraciones. Da la lectura de aparato del mockup. */
.u-data {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ui);
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper-base);
    display: flex;
    min-height: 100vh;
}

/* ========== SIDEBAR DE NAVEGACIÓN (DRAWER) ========== */
.app-sidebar {
    width: 240px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--ink);
    color: var(--line);
    display: flex;
    flex-direction: column;
    z-index: 1500;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
}

.app-sidebar.open {
    transform: translateX(0);
}

/* Overlay cuando el drawer está abierto */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1400;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid var(--ink);
}

.sidebar-logo i {
    font-size: 1.5rem;
    color: var(--red);
}

.sidebar-logo span {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.sidebar-nav {
    list-style: none;
    padding: 12px 8px;
    flex: 1;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-mute);
}

.sidebar-nav-item:hover {
    background: var(--ink);
    color: #fff;
}

.sidebar-nav-item.active {
    background: var(--red);
    color: #fff;
}

.sidebar-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.sidebar-bottom {
    padding: 8px;
    border-top: 1px solid var(--ink);
    list-style: none;
}

.sidebar-bottom .sidebar-nav-item {
    margin-bottom: 0;
}

/* Botón toggle sidebar */
.sidebar-toggle {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1300;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    font-size: 18px;
    transition: opacity 0.2s ease;
}

.sidebar-toggle:hover {
    background: var(--ink);
}

/* ========== CONTENIDO PRINCIPAL ========== */
.app-content {
    flex: 1;
    min-height: 100vh;
    width: 100%;
    padding-top: 56px;
}

/* ========== SISTEMA DE VISTAS ========== */
.view {
    display: none;
}

.view.active {
    display: block;
}

/* ========== HEADER DE VISTA ========== */
.view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    padding: 20px 0;
    border-bottom: 2px solid var(--line);
}

.view-header h2 {
    font-size: 1.5rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.view-header h2 i {
    color: var(--red);
}

/* ========== VISTA TABLA ========== */
.table-responsive {
    overflow-x: auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ========== VISTA AJUSTES ========== */
.settings-cards {
    display: grid;
    /* min(350px, 100%): si la pantalla baja de 350px, la columna encoge
       en vez de desbordar la página (movil estrecho). */
    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
    gap: 20px;
}

.settings-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.settings-card h3 {
    color: var(--ink);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-card h3 i {
    color: var(--red);
}

.settings-help {
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: -10px 0 18px;
}

/* ============================================
   Fase 3: Login / sincronización en la nube
   ============================================ */

/* Item del sidebar cuando el usuario está logueado: avatar verde */
.sidebar-nav-item.logged-in i {
    color: #4F7A52;
}

/* ─── Modal de login ─── */
.auth-modal,
.user-menu-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
}

.auth-modal-content,
.user-menu-content {
    position: relative;
    background: var(--paper-card);
    border-radius: 16px;
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.auth-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 26px;
    color: var(--ink-mute);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}
.auth-modal-close:hover { color: var(--ink); }

.auth-modal-content h2 {
    margin: 0 0 6px;
    font-size: 1.4rem;
    color: var(--ink);
}

.auth-modal-help {
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 20px;
}

.auth-btn-google {
    width: 100%;
    padding: 12px 16px;
    background: var(--paper-card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-btn-google:hover { background: var(--paper-card); border-color: var(--ink-mute); }
.auth-btn-google i { color: #ea4335; font-size: 18px; }

.auth-divider {
    text-align: center;
    margin: 18px 0 14px;
    position: relative;
    color: var(--ink-mute);
    font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--line);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }

.auth-email-form input[type="email"],
.auth-email-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.95rem;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.auth-email-form input:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.15);
}

.auth-form-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.auth-btn-primary,
.auth-btn-secondary {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-btn-primary {
    background: var(--red);
    color: #ffffff;
}
.auth-btn-primary:hover { background: var(--red-deep); }
.auth-btn-secondary {
    background: var(--paper-card);
    color: var(--ink);
    border-color: var(--line);
}
.auth-btn-secondary:hover { background: var(--paper-card); }

.auth-btn-block {
    width: 100%;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-error {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 0.88rem;
}

/* Mismo recuadro en verde para confirmaciones (recuperar contraseña, etc.). */
.auth-error.is-ok {
    background: #eaf0e6;
    color: #33503A;
    border-color: #c2d2b5;
}

/* Enlace de texto dentro del modal de login («¿Olvidaste tu contraseña?»). */
.auth-link {
    display: inline-block;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    color: var(--red-deep);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}
.auth-link:hover { color: #7a1f1f; }

/* Botón «Borrar mi cuenta» del menú de usuario: discreto pero en rojo, para
   que se distinga de «Cerrar sesión» sin gritar. */
.user-menu-delete {
    margin-top: 8px;
    color: #b91c1c;
    border-color: #f3c9c9;
}
.user-menu-delete:hover {
    background: #fef2f2;
    border-color: #e8a8a8;
    color: #991b1b;
}

/* ─── Indicador de estado de sincronización ─── */
.sync-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    cursor: default;
}

.sync-status-badge .sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-mute);
    flex-shrink: 0;
}

.sync-status-badge[data-status="pushing"] .sync-dot,
.sync-status-badge[data-status="pulling"] .sync-dot,
.sync-status-badge[data-status="attachments"] .sync-dot {
    background: var(--red);
    animation: sync-pulse 1s ease-in-out infinite;
}
.sync-status-badge[data-status="synced"] .sync-dot { background: #4F7A52; }
.sync-status-badge[data-status="error"]  .sync-dot { background: var(--red); }
.sync-status-badge[data-status="offline"] .sync-dot { background: #9A6A1B; }

/* Texto del badge: no parta a media palabra cuando dice "Subiendo 5 adjuntos…" */
.sync-status-badge .sync-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes sync-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* ─── Menú de usuario ─── */
.user-menu-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}
.user-menu-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.user-menu-avatar-fallback {
    font-size: 48px;
    color: var(--ink-mute);
}
.user-menu-id strong {
    display: block;
    color: var(--ink);
    font-size: 1rem;
    margin-bottom: 2px;
}
.user-menu-id .muted { color: var(--ink-soft); font-size: 0.85rem; }

.settings-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-actions .btn {
    justify-content: center;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .app-sidebar {
        width: 280px;
    }

    .sidebar-toggle {
        top: 12px;
        left: 12px;
        padding: 8px 10px;
        font-size: 16px;
    }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
header {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink) 100%);
    color: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

header h1 i {
    margin-right: 15px;
    color: var(--red);
}

header p {
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 300;
}

/* Main content */
.main-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

/* Las celdas de un grid no bajan del ancho intrínseco de su contenido
   (min-width: auto): un título nowrap de una tarjeta ensancha la página
   entera en móvil (el WebView desencuadra la app). Con min-width: 0 la
   celda encoge y el text-overflow: ellipsis del título hace su trabajo. */
.main-content > * {
    min-width: 0;
}

/* Nueva actividad section */
.new-activity-section {
    grid-column: 1 / -1;
    margin-bottom: 30px;
}

.activity-form {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
}

.form-header {
    background: linear-gradient(135deg, #4F7A52 0%, #3E6342 100%);
    color: white;
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}

.form-header:hover {
    background: linear-gradient(135deg, #3E6342 0%, #33503A 100%);
}

.form-header h2 {
    font-size: 1.3rem;
    font-weight: 600;
}

.form-header i {
    transition: transform 0.3s ease;
}

.form-header.active i {
    transform: rotate(180deg);
}

/* Formulario */
#activityForm {
    padding: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--ink);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Coordenadas */
.coordinates {
    display: inline-block;
    width: calc(50% - 10px);
    margin-right: 20px;
}

.coordinates:last-child {
    margin-right: 0;
}

/* Sistema de filas reutilizable */
.form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 20px;
}

.form-row .form-group {
    flex: 1;
    min-width: 170px;
    margin: 0;
}

.form-row.cols-2 .form-group {
    flex: 1 1 240px;
}

.form-row.cols-3 .form-group {
    flex: 1 1 200px;
}

.form-row.cols-4 .form-group {
    flex: 1 1 160px;
}

/* Input con etiqueta visual de unidad (km, m) */
.input-with-unit {
    position: relative;
    display: flex;
    align-items: center;
}
.input-with-unit input {
    width: 100%;
    padding-right: 44px;
}
.unit-label {
    position: absolute;
    right: 12px;
    color: var(--ink-mute);
    font-size: 0.8rem;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}

/* Input de tiempo HH:MM */
.time-input:invalid {
    border-color: #f87171 !important;
}

.zone-coords-row .zone-field {
    flex: 2;
    min-width: 200px;
    position: relative;
}

.zone-coords-row .coord-field {
    flex: 1;
    min-width: 100px;
}

.zone-coords-row .coord-field input {
    width: 100%;
}

/* Sistema de duración */
.duration-row {
    align-items: flex-end;
}

.duration-row .duration-type-field {
    flex: 0 0 140px;
    min-width: 120px;
}

.duration-row .duration-value-field {
    flex: 1;
    min-width: 180px;
}

.duration-hours-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.duration-hours-inputs input[type="number"] {
    width: 60px;
    text-align: center;
}

.duration-hours-inputs select {
    width: 70px;
}

.duration-separator {
    color: #64748b;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Sección de Material (formulario) */
.material-section {
    background: var(--paper-base);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.material-section h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.material-section h4 i {
    color: var(--ink-soft);
}

.material-item {
    margin-bottom: 12px;
}

/* Fase 2 (2026-08-08): la casilla medía 18 px. Toda la fila (casilla + texto)
   es la etiqueta, así que darle 44 px de alto la vuelve fácil de pulsar. */
.material-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
    font-weight: 500;
    color: var(--ink);
}

.material-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: none;
    cursor: pointer;
}

.material-notes {
    margin-top: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 50px;
}

.material-rope-extra {
    margin-top: 8px;
    padding: 12px;
    background: var(--paper-card);
    border-radius: 6px;
    border: 1px solid var(--line);
}

.material-rope-extra .form-row {
    margin-bottom: 0;
}

.material-rope-extra input[type="number"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.material-rope-extra textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    resize: vertical;
    min-height: 50px;
}

.material-custom {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.material-custom-list {
    margin-top: 12px;
}

.material-custom-item {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.material-custom-item .material-checkbox {
    justify-content: space-between;
}

.btn-remove-mat {
    background: none;
    border: none;
    color: var(--ink-mute);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.btn-remove-mat:hover {
    color: var(--red);
}

/* Material en detalles de actividad */
.material-details {
    background: var(--paper-base);
    border-radius: 10px;
    padding: 16px;
    margin-top: 16px;
}

.material-details h4 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.material-details h4 i {
    color: var(--ink-soft);
}

.material-legacy {
    background: #fffbeb;
    border: 1px dashed #9A6A1B;
}


/* Select de grado */
.grade-select {
    cursor: pointer;
}

/* Campo sector con sugerencias */
#sectorField {
    position: relative;
}

#sectorSuggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

/* Preview de foto de sector en formulario */
.sector-image-preview {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    display: none;
}

.sector-image-preview.has-image {
    display: block;
}

.sector-image-preview img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.sector-image-preview .sector-image-label {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sector-image-preview .sector-image-label i {
    color: #4F7A52;
}

/* Foto de sector en popup del mapa */
.sector-popup-image {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* ========== POPUPS DE ESCALADA EN MAPA ========== */

.climbing-marker {
    background: transparent;
    border: none;
}

/* ── Marcador de actividad: punto de color por familia de disciplina,
   como un mapa temático. El color lo pone script.js (MAP_FAMILIES); el
   tamaño, Leaflet (iconSize). Con varias actividades muestra el número. ── */
.activity-marker {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--red); /* respaldo; el color real llega inline desde JS */
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(44, 44, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.15s;
}
.activity-marker:hover {
    filter: brightness(0.8);
}

/* Triángulo de cima: punto que agrupa disciplinas distintas (un pico) */
.peak-marker {
    cursor: pointer;
    filter: drop-shadow(0 1px 1px rgba(44, 44, 42, 0.4));
}

/* Grupo de puntos cercanos (markercluster): papel con borde tinta.
   Al hacer clic o acercar el zoom, se separa en sus puntos. */
.cluster-marker {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--paper-card);
    border: 2px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.cluster-marker:hover {
    background: var(--paper-base);
}

/* Punto de previsualización al elegir coordenadas: hueco, aún sin guardar */
.session-preview-marker {
    background: transparent;
    border: none;
}
.session-marker-dot {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--paper-card);
    border: 3px solid var(--red);
    box-shadow: 0 0 0 1px rgba(44, 44, 42, 0.45);
}

.climbing-popup .leaflet-popup-content-wrapper {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.climbing-popup .leaflet-popup-content {
    margin: 12px;
    overflow-x: hidden;
}

.climbing-zone-popup {
    min-width: 200px;
    width: 240px;
    overflow: hidden;
}

.climbing-zone-popup h3 {
    margin: 0 0 8px 0;
    color: var(--ink);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.climbing-zone-popup h3 i {
    color: #e74c3c;
}

.climbing-zone-popup .zone-stats {
    color: var(--ink-soft);
    font-size: 13px;
    margin: 0 0 12px 0;
}

.climbing-zone-popup .zone-altitude {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 8px 0;
}

.climbing-zone-popup .zone-altitude i {
    color: #4F7A52;
    margin-right: 4px;
}

.zone-activities-list {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
}

.zone-activity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 4px 0;
    background: var(--paper-card);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.zone-activity-item:hover {
    background: var(--line);
}

.zone-activity-item.completed {
    border-left: 3px solid #4F7A52;
}

.zone-activity-item.pending {
    border-left: 3px solid #9A6A1B;
}

.zone-activity-item .route-status {
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.zone-activity-item.completed .route-status {
    color: #4F7A52;
}

.zone-activity-item.pending .route-status {
    color: #9A6A1B;
}

.activity-discipline-tag {
    margin-left: auto;
    background: var(--line);
    color: var(--ink-soft);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.climbing-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.climbing-section h4 {
    display: flex;
    align-items: center;
    gap: 6px;
}

.climbing-zone-popup h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Lista de sectores */
.sectors-list {
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sector-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 3px 0;
    background: var(--paper-card);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 13px;
    color: var(--ink);
}

.sector-item:hover {
    background: var(--paper-base);
}

.sector-item i {
    color: #9A6A1B;
    flex-shrink: 0;
}

.sector-count {
    margin-left: auto;
    color: var(--ink-mute);
    font-size: 11px;
    flex-shrink: 0;
}

/* Lista de rutas */
.routes-list {
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
}

.route-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 4px 0;
    background: var(--paper-card);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.route-item:hover {
    background: var(--line);
}

.route-item.completed {
    border-left: 3px solid #4F7A52;
}

.route-item.pending {
    border-left: 3px solid #9A6A1B;
}

.route-status {
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.route-item.completed .route-status {
    color: #4F7A52;
}

.route-item.pending .route-status {
    color: #9A6A1B;
}

.route-name {
    flex: 1;
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.route-grade {
    background: var(--red);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.route-length {
    color: var(--ink-soft);
    font-size: 11px;
}

/* Breadcrumb de navegación */
.popup-breadcrumb {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.breadcrumb-back,
.breadcrumb-back-sector {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--red);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.breadcrumb-back:hover,
.breadcrumb-back-sector:hover {
    color: var(--red-deep);
}

/* Detalles de ruta */
.route-detail h3 {
    margin-bottom: 12px;
}

.route-details {
    background: var(--paper-card);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    color: var(--ink-soft);
    font-size: 13px;
}

.detail-value {
    font-weight: 500;
    color: var(--ink);
    font-size: 13px;
}

.detail-value.grade {
    background: var(--red);
    color: white;
    padding: 2px 10px;
    border-radius: 4px;
}

.detail-value.status-completed {
    color: #4F7A52;
}

.detail-value.status-pending {
    color: #9A6A1B;
}

.route-description {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;
    padding: 10px;
    background: #fef3c7;
    border-radius: 6px;
    border-left: 3px solid #9A6A1B;
}

/* Botón del popup que abre la ficha completa de la actividad */
.popup-open-detail {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    background: var(--red);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

/* Fecha */
.date-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Fase 2 (2026-08-08): la casilla medía 13 px. Ahora la casilla es de 20 px y
   la fila entera (casilla + etiqueta «Fecha») ocupa 44 px de alto, así que se
   puede pulsar en cualquier punto — la etiqueta ya alterna la casilla por el
   atributo for. */
.date-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}

.date-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
}

.date-checkbox label {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0; /* las etiquetas del formulario traen 8px abajo: aquí sobran */
    cursor: pointer;
}

.date-input {
    flex: 1;
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.form-buttons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.form-buttons .btn {
    flex: 1;
}

.btn-primary {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--red-deep) 0%, #8E2C1F 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(226, 75, 74, 0.3);
}

.btn-secondary {
    background: var(--ink-soft);
    color: white;
}

.btn-secondary:hover {
    background: var(--ink-soft);
}

.btn-cancel {
    background: #9A6A1B;
    color: white;
}

.btn-cancel:hover {
    background: #7E5614;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--ink-mute);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}

.btn-primary:disabled:hover,
.btn-primary.disabled:hover {
    background: var(--ink-mute);
    transform: none;
    box-shadow: none;
}

/* Fase 2 (2026-08-08): los botones «pequeños» medían 30 px de alto. Para el
   dedo hacen falta 40. Afecta a «Limpiar ficha», «Quitar imágenes/ruta»,
   «Nueva sesión», «+ Añadir» de material y a Restaurar/Descargar de las copias
   automáticas de Ajustes. */
.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 14px;
    font-size: 0.85rem;
    margin-top: 8px;
}

.btn-nueva-sesion {
    background: linear-gradient(135deg, #4F7A52 0%, #3E6342 100%);
    color: white;
}
.btn-nueva-sesion:hover {
    background: linear-gradient(135deg, #3E6342 0%, #33503A 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 122, 82, 0.35);
}

.session-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(79, 122, 82, 0.08);
    border: 1px solid rgba(79, 122, 82, 0.25);
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 0.875rem;
    color: #4F7A52;
}
.session-hint span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.session-hint .btn-nueva-sesion {
    margin-top: 0;
    flex-shrink: 0;
}

.muted {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin-top: 6px;
}

/* Sidebar */
.sidebar {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    height: fit-content;
}

.activity-list h2 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Búsqueda en Mis Actividades */
.search-box {
    position: relative;
    margin-bottom: 15px;
}

.search-box input {
    width: 100%;
    min-height: 44px; /* Fase 2 (2026-08-08): medía 39 px */
    padding: 10px 12px 10px 35px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.search-box input:focus {
    outline: none;
    border-color: var(--red);
}

.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-mute);
}

/* Filtros */
.filters {
    margin-bottom: 20px;
}

/* min-height 44px (Fase 2, 2026-08-08): los tres filtros de Inicio medían
   36 px, igual que los del Diario. */
.filters select,
.filters input {
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
}

/* Lista de actividades */
#activitiesList {
    max-height: 400px;
    overflow-y: auto;
}

.activity-item {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.activity-item:hover {
    background: var(--paper-soft);
    border-color: var(--line);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.activity-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.activity-item-title {
    flex: 1;
    min-width: 0;
}

.activity-item h3 {
    font-size: 1rem;
    margin-bottom: 2px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-item-zone {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.activity-item-zone i {
    font-size: 0.7rem;
    margin-right: 3px;
    color: var(--ink-mute);
}

/* Grid de campos de la ficha */
.card-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
    margin-bottom: 10px;
}

.card-field {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.card-field .field-label {
    font-size: 0.7rem;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.card-field .field-value {
    font-size: 0.85rem;
    color: var(--ink);
    font-weight: 500;
}

/* Editar / Eliminar de las tarjetas. Fase 2 (2026-08-08): medían ~30 px y
   estaban a 4 px uno del otro — imposible de acertar con el dedo. Ahora 40x40
   con el icono centrado y más separación. */
.btn-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    color: var(--ink-soft);
    transition: all 0.2s;
}

.btn-edit:hover {
    background: var(--red);
    color: white;
    border-color: var(--red);
}

.activity-item-actions {
    display: flex;
    gap: 10px;
}

.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    color: var(--ink-soft);
    transition: all 0.2s;
}

.btn-delete:hover {
    background: var(--red);
    color: white;
    border-color: var(--red);
}

.activity-item p {
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin-bottom: 3px;
}

/* Mapa */
.map-container {
    position: relative;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 15px;
    display: flex;
    flex-direction: column;
}

#map {
    flex: 1;
    min-height: 600px;
    border-radius: 10px;
    width: 100%;
}

.map-controls {
    position: absolute;
    top: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}

/* min-height 44px (Fase 2, 2026-08-08): «Centrar» y «Marcadores» medían 33 px
   y flotan sobre el mapa, donde el dedo ya va justo. */
.map-controls .btn {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    background: white;
    border: 1px solid var(--line);
    color: var(--ink);
}

.map-controls .btn:hover {
    background: var(--paper-soft);
}

.map-controls .btn.active {
    background: var(--red);
    color: white;
    border-color: var(--red);
}

/* Leyenda de familias de color (el contenido lo genera script.js) */
.map-legend {
    position: absolute;
    bottom: 25px;
    left: 25px;
    z-index: 1000;
    background: var(--paper-card);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ink);
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(44, 44, 42, 0.25);
    flex-shrink: 0;
}

.legend-peak {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid var(--ink);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .map-legend {
        bottom: 20px;
        left: 20px;
        padding: 6px 9px;
        font-size: 10px;
    }
}

/* Estadísticas */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.stat-card.clickable {
    cursor: pointer;
}

.stat-card i {
    font-size: 2rem;
    color: var(--red);
    margin-bottom: 15px;
}

.stat-card h3 {
    font-size: 1rem;
    color: var(--ink-soft);
    margin-bottom: 10px;
    font-weight: 500;
}

.stat-card p {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ink);
}

/* Ajustes */
.settings-section {
    text-align: center;
    margin-top: 40px;
}

.dropdown-menu {
    position: relative;
    display: inline-block;
}

.menu-toggle-btn {
    background: var(--ink-soft);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: white;
    min-width: 200px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-radius: 10px;
    z-index: 1000;
    right: 0;
    top: 100%;
    margin-top: 5px;
}

.dropdown-content.show {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--paper-soft);
    cursor: pointer;
    transition: background 0.3s ease;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: var(--paper-card);
}

.file-import-label {
    cursor: pointer;
}

.settings-description {
    margin-top: 15px;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .main-content {
        grid-template-columns: 1fr;
    }

    .map-container {
        order: 2;
    }

    .sidebar {
        order: 1;
    }
}

@media (max-width: 768px) {
    .main-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sidebar {
        order: 3;
    }

    .stats {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }

    .coordinates {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .date-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    /* Responsive: filas de formulario se apilan. OJO: hay que repetir las
       variantes .cols-N porque su regla base (flex: 1 1 240px, etc.) tiene
       más especificidad que ".form-row .form-group" y ganaría aquí; y con la
       fila en columna, esa base de 240px deja de ser ANCHO y pasa a ser
       ALTURA → campos de 240px de alto con un input de 43px dentro (los
       huecos gigantes que reportó Daniel en el móvil, 2026-07-31). */
    .form-row {
        flex-direction: column;
    }

    .form-row .form-group,
    .form-row.cols-2 .form-group,
    .form-row.cols-3 .form-group,
    .form-row.cols-4 .form-group {
        width: 100%;
        flex: none;
        min-width: 0;
    }
}

/* Navegación lateral (menú hamburguesa) - legacy, hidden */
.nav-toggle {
    display: none;
}

.activity-navigation { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100vh; 
    width: 320px; 
    background: var(--paper-card); 
    box-shadow: 2px 0 16px rgba(0,0,0,.12); 
    transform: translateX(-100%); 
    transition: transform .25s ease; 
    z-index: 1200; 
    display: flex; 
    flex-direction: column;
    overflow: hidden;
}

.activity-navigation.open { 
    transform: translateX(0); 
}

.activity-navigation .nav-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 16px; 
    border-bottom: 1px solid var(--line); 
    background: var(--paper-card);
}

.activity-navigation .nav-header h3 { 
    margin: 0; 
    font-size: 16px; 
    color: var(--ink);
}

.activity-navigation .nav-close { 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    color: var(--ink); 
    padding: 4px;
    border-radius: 4px;
}

.activity-navigation .nav-close:hover { 
    background: var(--line); 
}

.activity-navigation .nav-search { 
    position: relative; 
    padding: 12px 16px; 
    border-bottom: 1px solid var(--paper-soft); 
    background: var(--paper-card);
}

.activity-navigation .nav-search input { 
    width: 100%; 
    border: 1px solid var(--line); 
    border-radius: 8px; 
    padding: 10px 32px 10px 12px; 
    font-size: 14px;
    box-sizing: border-box;
}

.activity-navigation .nav-search input:focus { 
    outline: none; 
    border-color: var(--red-deep); 
    box-shadow: 0 0 0 3px rgba(163, 45, 45, 0.1);
}

.activity-navigation .nav-search i { 
    position: absolute; 
    right: 26px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: var(--ink-mute); 
    pointer-events: none;
}

.activity-navigation .nav-static { 
    padding: 8px 8px 0 8px; 
    border-bottom: 1px solid var(--paper-soft); 
    background: var(--paper-card);
}

.activity-navigation .nav-link { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 10px 12px; 
    border-radius: 8px; 
    color: var(--ink); 
    text-decoration: none; 
    transition: background-color 0.2s ease;
}

.activity-navigation .nav-link:hover { 
    background: var(--paper-soft); 
}

.activity-navigation .nav-link i { 
    width: 16px; 
    text-align: center; 
    color: var(--ink-soft);
}

.activity-navigation .nav-activities { 
    flex: 1; 
    overflow: auto; 
    padding: 8px; 
    background: var(--paper-card);
}

.activity-navigation .nav-item { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 8px; 
    padding: 10px 12px; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: background-color 0.2s ease;
    margin-bottom: 4px;
}

.activity-navigation .nav-item:hover { 
    background: var(--paper-soft); 
}

.activity-navigation .nav-item-content { 
    display: flex; 
    flex-direction: column; 
    flex: 1;
}

.activity-navigation .nav-item-title { 
    font-weight: 600; 
    font-size: 14px; 
    color: var(--ink);
    margin-bottom: 2px;
}

.activity-navigation .nav-item-subtitle { 
    font-size: 12px; 
    color: var(--ink-soft); 
    line-height: 1.3;
}

.activity-navigation .nav-item i { 
    color: var(--ink-mute); 
    font-size: 12px;
}

/* Ajustes para el contenido principal cuando el menú está abierto */
@media (max-width: 768px) {
    .nav-toggle {
        top: 12px;
        left: 12px;
        padding: 8px 10px;
        font-size: 16px;
    }
    
    .activity-navigation {
        width: 280px;
    }
}

/* Asegurar que el menú no interfiera con el contenido existente */
.container {
    position: relative;
    z-index: 1;
}

header {
    position: relative;
    z-index: 1;
}

/* Estilos adicionales para sugerencias de zona */
.suggestions-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--paper-soft);
    transition: background-color 0.2s ease;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: var(--paper-card);
}

/* Estilos para estados de actividades */
.status-completed {
    color: #4F7A52;
    font-weight: 600;
}

.status-pending {
    color: #9A6A1B;
    font-weight: 600;
}

/* Sección de completaciones en fichas */
.completions-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.completions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.completions-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.completions-status.status-completed {
    color: #4F7A52;
}

.completions-status.status-pending {
    color: #92400e;
}

/* Fase 2 (2026-08-08): los tres botones redondos de las tarjetas pasan de
   28 px a 40 px (antes había que apuntar mucho con el dedo). */
.btn-add-completion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--red);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.btn-add-completion:hover {
    background: var(--red-deep);
    transform: scale(1.1);
}

.completions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.completion-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #eaf0e6;
    color: #33503A;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.completion-remove {
    cursor: pointer;
    font-size: 9px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.completion-remove:hover {
    opacity: 1;
    color: var(--red-deep);
}

/* Intentos para escalada deportiva */
.completions-status.status-attempts {
    color: #92400e;
}

.btn-add-attempt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #9A6A1B;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.btn-add-attempt:hover {
    background: #7E5614;
    transform: scale(1.1);
}

.attempt-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.attempt-remove {
    cursor: pointer;
    font-size: 9px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.attempt-remove:hover {
    opacity: 1;
    color: var(--red-deep);
}

/* Botón encadenar (check verde) para escalada */
.btn-send-completion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #4F7A52;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.btn-send-completion:hover {
    background: #3E6342;
    transform: scale(1.1);
}

/* Estilos para notificaciones */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* Estilos para el mapa */
.marker-popup {
    text-align: center;
    min-width: 200px;
}

.marker-popup h4 {
    margin-bottom: 8px;
    color: var(--ink);
}

.marker-popup p {
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--ink-soft);
}

/* Estilos para actividades sin datos */
.no-activities {
    text-align: center;
    color: var(--ink-soft);
    font-style: italic;
    padding: 20px;
}

/* Mensaje de bienvenida (primer uso, sin ninguna actividad todavía). */
.welcome-empty {
    text-align: center;
    padding: 28px 18px;
    color: var(--ink-soft);
}
.welcome-empty .welcome-empty-icon {
    font-size: 2.4rem;
    color: var(--red-deep);
    margin-bottom: 10px;
}
.welcome-empty h3 {
    margin: 0 0 10px;
    color: var(--ink);
}
.welcome-empty p {
    margin: 0 auto 8px;
    max-width: 360px;
    line-height: 1.5;
}

/* Estilos para filtros de escalada */
.climb-filters {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.filter-combo {
    position: relative;
    margin-bottom: 10px;
}

.filter-combo i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-mute);
}

.filter-combo input {
    padding-left: 35px;
}

/* Estilos para el header de la vista Diario (#view-diario) */
.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.export-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-success {
    background: #4F7A52;
    color: white;
}

.btn-success:hover {
    background: #3E6342;
}

.btn-danger {
    background: var(--red);
    color: white;
}

.btn-danger:hover {
    background: var(--red-deep);
}

/* Estilos para la tabla de actividades */

/* El Diario no usa el grid de dos columnas de .main-content (eso es el
   layout de Inicio: sidebar 300px + mapa). Aquí todo fluye en bloque. */
.log-main {
    display: block;
}

/* Permite al contenedor del Diario encogerse por debajo del ancho de su
   tabla, para que esta se deslice dentro de .table-container (overflow-x)
   en vez de ensanchar la página. (Herencia de cuando era página aparte con
   body flex; dentro de la vista sigue siendo inofensivo y protege en
   pantallas estrechas.) */
.log-page {
    width: 100%;
    min-width: 0;
}

.global-search {
    margin-bottom: 20px;
}

.search-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.search-container i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-mute);
}

/* padding derecho 52px (Fase 2, 2026-08-08): deja sitio a la X de 40 px para
   que el texto escrito no pase por debajo del botón. */
.search-container input {
    width: 100%;
    padding: 12px 52px 12px 45px;
    border: 2px solid var(--line);
    border-radius: 10px;
    font-size: 16px;
}

/* La X de borrar la búsqueda medía ~22 px (Fase 2, 2026-08-08): ahora 40x40
   con el icono centrado. */
.btn-clear-search {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--ink-mute);
    cursor: pointer;
    padding: 0;
}

.table-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-weight: 500;
    color: var(--ink);
    font-size: 14px;
}

/* min-height 44px (Fase 2, 2026-08-08): los filtros del Diario medían 35-37 px
   y en el móvil se fallaba al abrirlos. */
.filter-group input,
.filter-group select {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
}

.metrics-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.metric-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.metric-card i {
    font-size: 1.5rem;
    color: var(--red);
    margin-bottom: 10px;
}

.metric-card h4 {
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 8px;
    font-weight: 500;
}

.metric-card p {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
}

.view-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* min-height 44px (Fase 2, 2026-08-08): el par Diario/Tabla medía 38 px. */
.view-btn {
    min-height: 44px;
    padding: 10px 20px;
    border: 2px solid var(--line);
    background: white;
    color: var(--ink-soft);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-btn.active,
.view-btn:hover {
    border-color: var(--red);
    background: var(--red);
    color: white;
}

/* La tabla del Diario tiene 10 columnas: en pantallas estrechas se desplaza
   horizontalmente en lugar de aplastarse. */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.table-container .activities-table {
    min-width: 1000px;
}

.activities-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.activities-table th,
.activities-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--paper-soft);
}

.activities-table th {
    background: var(--paper-card);
    font-weight: 600;
    color: var(--ink);
    font-size: 14px;
}

.activities-table td {
    font-size: 14px;
    color: var(--ink-soft);
}

.sortable {
    cursor: pointer;
    user-select: none;
}

.sortable:hover {
    background: var(--paper-soft);
}

.sortable i {
    margin-left: 5px;
    color: var(--ink-mute);
}

.activities-cards {
    display: grid;
    /* min(300px, 100%): en móviles < 300px la columna encoge en vez de desbordar
       el lienzo (misma trampa que la lección 2026-06-12). */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 20px;
}

.activity-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.activity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-header h3 {
    font-size: 1.1rem;
    color: var(--ink);
    margin: 0;
}

.card-date {
    font-size: 12px;
    color: var(--ink-soft);
    background: var(--paper-soft);
    padding: 4px 8px;
    border-radius: 6px;
}

.card-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.info-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-soft);
}

.info-label i {
    width: 14px;
    color: var(--ink-mute);
}

.card-metrics {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.metric {
    background: var(--paper-soft);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--ink);
    font-weight: 500;
}

.card-description {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Descripción en la tabla: recortada a 2 líneas. El texto completo está en
   el detalle de la actividad (click en la fila). */
.cell-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 320px;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-numbers {
    display: flex;
    gap: 5px;
}

.page-btn {
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: white;
    color: var(--ink-soft);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-btn:hover,
.page-btn.active {
    background: var(--red);
    color: white;
    border-color: var(--red);
}

.table-info {
    display: flex;
    justify-content: space-around;
    padding: 15px;
    background: var(--paper-card);
    border-radius: 8px;
    margin-top: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-soft);
}

.info-item i {
    color: var(--ink-mute);
}

/* ======================================================
   Vista detalle de actividad (#view-detalle en index.html)
   Layout 2 columnas: sidebar (4/12) + content (8/12)
   ====================================================== */

.detail-page-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 16px;
}

/* Header compacto */
.detail-page-container header {
    padding: 24px 28px;
    margin-bottom: 20px;
}

.detail-page-container header h1 {
    font-size: 1.8rem;
}

/* Chips / etiquetas */
.detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    background: var(--paper-soft);
    color: var(--ink);
}

.detail-chip i { font-size: 12px; }

.chip-season     { background: var(--paper-soft); color: var(--ink-soft); }
.chip-discipline { background: #eaf0e6; color: #33503A; }
.chip-completed  { background: #eaf0e6; color: #33503A; }
.chip-pending    { background: #fef3c7; color: #92400e; }
.chip-date       { background: var(--paper-soft); color: var(--ink-soft); }

/* ── Layout 2 columnas (12-col grid) ── */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

@media (min-width: 960px) {
    .detail-layout {
        grid-template-columns: 4fr 8fr;  /* 4/12 + 8/12 */
    }
}

/* Sidebar: Datos generales + Estado */
.detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sidebar fields always single column */
.detail-sidebar .detail-fields {
    grid-template-columns: 1fr;
}

@media (min-width: 960px) {
    .detail-sidebar {
        position: sticky;
        top: 24px;
        align-self: start;
    }
}

/* Content: Stats + Disciplina + Ruta + Descripción + Galería */
.detail-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;  /* evitar overflow en grid */
}

/* ── Card base (cada sección) ── */
.detail-section {
    background: white;
    border-radius: 15px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    width: 100%;
}

.detail-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 0;
    font-size: 1.05rem;
    color: var(--ink);
}

.detail-section-title i {
    color: var(--red);
    font-size: 1rem;
}

/* ── Stats card (resumen técnico) ── */
.detail-stats-card {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink) 100%);
    color: white;
}

.detail-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
}

.detail-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 4px;
}

.detail-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}

.detail-stat-label {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Grid de campos dentro de cada sección ── */
.detail-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px 24px;
}

.detail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detail-field-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-field-value {
    font-size: 15px;
    color: var(--ink);
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 1px solid var(--paper-soft);
    min-height: 32px;
}

/* Campo de descripción (ancho completo) */
.detail-field-full {
    grid-column: 1 / -1;
}

.detail-description {
    font-size: 15px;
    color: var(--ink);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
    padding: 12px 16px;
    background: var(--paper-card);
    border-radius: 10px;
}

/* ── Subsección (material, etc.) ── */
.detail-subsection {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.detail-subsection h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: var(--ink);
}

.detail-subsection h4 i {
    color: var(--ink-soft);
}

.detail-subsection .detail-field {
    margin-left: 8px;
}

/* ── Botón eliminar ── */
.btn-danger {
    background: var(--red);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.btn-danger:hover {
    background: var(--red-deep);
}

/* ── Responsive: móvil ── */
@media (max-width: 959px) {
    .detail-page-container header {
        padding: 20px 16px;
    }

    .detail-page-container header h1 {
        font-size: 1.4rem;
    }

    .detail-section {
        padding: 18px;
    }

    .detail-fields {
        grid-template-columns: 1fr;
    }

    .detail-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Galería de imágenes (activity-details) */
.image-gallery-section {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.image-gallery-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--ink);
}

.image-gallery-section h3 i {
    color: var(--red);
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.image-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--paper-card);
}

.image-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.image-item img:hover {
    transform: scale(1.03);
}

.image-item .image-name {
    display: block;
    padding: 6px 8px;
    font-size: 0.75rem;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.legacy-links {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.legacy-links h4 {
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin-bottom: 10px;
}

.legacy-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legacy-links li {
    margin-bottom: 6px;
}

.legacy-links a {
    color: var(--red);
    word-break: break-all;
}

/* Sección de archivo de ruta (activity-details) */
.route-file-section {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.route-file-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--ink);
}

.route-file-section h3 i {
    color: var(--red);
}

.route-download {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.route-download a.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.legacy-route {
    background: var(--paper-card);
    border-radius: 10px;
    padding: 16px;
}

.legacy-route h4 {
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin-bottom: 10px;
}

.legacy-route p {
    color: var(--ink);
    white-space: pre-wrap;
}

/* Header de la vista detalle. OJO: .header-content tambien se define mas
   arriba (header del Diario); ambos bloques se mezclan en cascada desde
   siempre (las dos antiguas paginas cargaban este mismo CSS completo). */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.activity-header {
    flex: 1;
}

.activity-header h1 {
    margin-bottom: 5px;
}

.activity-header p {
    margin: 0;
    opacity: 0.8;
}

.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Estilos para el estado de las actividades */
.status-completed {
    color: #4F7A52;
    font-weight: 600;
}

.status-pending {
    color: #9A6A1B;
    font-weight: 600;
}

.status-in_progress {
    color: var(--red);
    font-weight: 600;
}

/* Estilos para las sugerencias de zona */
.suggestions-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--paper-soft);
    transition: background-color 0.2s ease;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: var(--paper-card);
}

/* Estilos para el menú en diferentes páginas */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .header-actions {
        justify-content: center;
    }
}

/* Tramos extra — Escalada Deportiva */
.extra-pitch-row {
    background: var(--paper-base);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.extra-pitch-row .form-row {
    margin-bottom: 8px;
}

.required-star {
    color: var(--red);
}

.btn-remove-extra {
    background: none;
    border: none;
    color: var(--ink-mute);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 0;
}

.btn-remove-extra:hover {
    color: var(--red);
}

.btn-add-extra {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 16px;
    background: #faece7;
    border: 2px dashed #EC7D6F;
    border-radius: 10px;
    color: var(--red);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
}

.btn-add-extra:hover {
    background: #f3c9c9;
}

/* Sección colapsable Sector y Foto */
.sector-foto-collapsible {
    margin-top: 20px;
}

.btn-collapsible-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: var(--paper-base);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.btn-collapsible-toggle:hover {
    background: var(--paper-base);
}

.btn-collapsible-toggle i {
    color: var(--ink-soft);
    width: 14px;
    transition: transform 0.2s;
}

.collapsible-content {
    padding: 12px 0 0 0;
}

/* Fila botón + icono info del Sector colapsable */
.sector-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.sector-toggle-row .btn-collapsible-toggle {
    flex: 1;
    min-width: 0;
}

/* Wrapper del tooltip */
.tooltip-wrapper {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    position: static;
}

.tooltip-icon {
    color: var(--ink-mute);
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
    display: flex;
}

.tooltip-icon:hover {
    color: var(--ink-soft);
    background: var(--paper-soft);
}

/* Bocadillo del tooltip */
.tooltip-text {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--ink);
    color: var(--paper-card);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.55;
    padding: 10px 13px;
    border-radius: 8px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 200;
    white-space: normal;
    word-break: break-word;
}

/* Flecha del bocadillo apuntando al icono (abajo-derecha) */
.tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 12px;
    border: 7px solid transparent;
    border-top-color: var(--ink);
}

/* Visible en hover (PC) o clase activa (móvil) */
.tooltip-wrapper:hover .tooltip-text,
.tooltip-wrapper.tooltip-active .tooltip-text {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ========== VISTA ESTADÍSTICAS (resumen anual, récords, pirámide) ========== */
.stats-block-title {
    font-size: 1.2rem;
    color: var(--ink);
    margin: 30px 0 6px;
}

.stats-block-title i {
    color: var(--red);
    margin-right: 8px;
}

.stats-block-help {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.stat-caption {
    display: block;
    margin-top: 6px;
    color: var(--ink-soft);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-empty {
    color: var(--ink-soft);
    text-align: center;
    padding: 14px;
}

.grade-pyramid {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 40px;
}

.grade-pyramid-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}

.grade-pyramid-grade {
    width: 48px;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
}

.grade-pyramid-bar {
    background: linear-gradient(90deg, var(--red), #EC7D6F);
    color: white;
    font-weight: 600;
    border-radius: 6px;
    padding: 4px 10px;
    min-width: 32px;
    text-align: right;
    box-sizing: border-box;
}

/* ========== DIARIO (activities-log) EN MÓVIL ========== */
/* (el tema Windows clásico está al final del archivo) */
@media (max-width: 768px) {
    .header-content h1 {
        font-size: 1.5rem;
    }

    .metrics-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .metric-card {
        padding: 14px 10px;
    }

    .metric-card p {
        font-size: 1rem;
    }

    .table-filters {
        padding: 15px;
    }

    .pagination {
        flex-direction: column;
        gap: 12px;
    }

    .table-info {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ============================================================
   TEMA: CUADERNO DE CAMPO
   Papel cálido + tinta + serifa de guía de escalada + el rojo
   de las marcas GR como único acento. Capa de overrides al
   final del archivo a propósito: pisa los estilos modernos.
   Para volver atrás, borrar este bloque entero.

   Paleta: ahora vive en los tokens de :root (arriba del archivo).
   Usa var(--paper-*), var(--ink-*), var(--red*) y var(--disc-*).
   ============================================================ */

body {
    background: var(--paper-base);
    color: var(--ink);
    font-family: var(--font-ui);
    display: block;
}

/* --- Barra de navegación superior --- */
.top-nav {
    position: sticky;
    top: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    background: var(--paper-base);
    border-bottom: 1px solid var(--line-strong);

    /* TOPE DE SEGURIDAD (2026-08-08). Esta barra es lo único de la app que no
       encoge (5 items + marca + usuario + estado, todos con nowrap). Si pide
       más ancho que la pantalla, el WebView ensancha el lienzo ENTERO y hay
       que deslizar toda la app de lado (pasó el 12-06 y otra vez al girar el
       móvil). Con esto, lo peor que puede pasar es que se deslice la BARRA;
       la app nunca. min-width:0 permite que encoja dentro de su padre. */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;         /* Firefox: sin barra visible */
    -ms-overflow-style: none;
}

.top-nav::-webkit-scrollbar { display: none; }  /* Chrome/WebView de Android */

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
}

/* Logo: pico de montaña (SVG embebido). Reutiliza el <span class="gr-mark">. */
.gr-mark {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    transform: none;
    box-shadow: none;
    background: center / contain no-repeat
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M30 15 L11 51 L49 51 Z" fill="%232C2C2A"/><path d="M45 24 L27 51 L63 51 Z" fill="%232C2C2A"/><path d="M30 15 L23.5 27 L36.5 27 Z" fill="%23F1EFE8"/><path d="M45 24 L38.5 36 L51.5 36 Z" fill="%23F1EFE8"/><rect x="6" y="51" width="58" height="3" rx="1" fill="%23E24B4A"/></svg>');
}
.gr-mark .gr-white,
.gr-mark .gr-red { display: none; }

.top-nav .sidebar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex: none;
}

.top-nav .sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    margin: 0;
    border-radius: 6px;
    border-bottom: 2px solid transparent;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.top-nav .sidebar-nav-item i {
    width: auto;
    font-size: 14px;
}

.top-nav .sidebar-nav-item:hover {
    background: var(--paper-relief);
    color: var(--ink);
}

.top-nav .sidebar-nav-item.active {
    background: transparent;
    border-radius: 0;
    border-bottom: 2px solid var(--red);
    color: var(--ink);
}

.top-nav .sync-status-badge {
    color: var(--ink-soft);
    white-space: nowrap;
}

/* Umbrales ampliados (2026-08-08, 2ª vuelta). Con «max-height: 500px» seguía
   fallando en el móvil de Daniel: en horizontal su pantalla da ~1050x475 CSS,
   y en vertical ~475x1050 — o sea, más ancha de lo que suponíamos (480px se
   quedaba corto) y con una altura tumbada pegada al límite. Ahora:
   ancho ≤ 700px  →  barra sin adornos (marca, nombre y estado)
   ancho ≤ 600px  →  solo iconos
   pantalla apaisada y baja (≤ 600px de alto) → solo iconos, sea cual sea el
   ancho: eso es SIEMPRE un móvil tumbado, nunca un PC. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 600px) {
    .top-nav { padding: 8px 10px; }
    .nav-brand span:not(.gr-mark) { display: none; }
    .top-nav .sidebar-nav-item { padding: 8px 8px; font-size: 12px; }
    .top-nav .sync-status-badge .sync-label { display: none; }
    .top-nav #navAuthLabel { display: none; }
}

/* Móvil estrecho: con los 5 textos la barra pide ~486px de mínimo y el
   WebView del APK ensancha el lienzo entero para que quepa — la app queda
   desencuadrada y hay que deslizarse en horizontal. Solo iconos.
   (2026-08-08: mismo trato al móvil tumbado, ver comentario de arriba.) */
@media (max-width: 600px), (orientation: landscape) and (max-height: 600px) {
    .top-nav { gap: 8px; }

    .top-nav .sidebar-nav {
        flex: 1;
        justify-content: space-between;
    }

    .top-nav .sidebar-nav-item span { display: none; }

    /* 44 px de alto para el dedo (Fase 2, 2026-08-08). Solo se toca el ALTO:
       ensanchar los items volvería a desencuadrar la barra (lección
       2026-06-12), así que el padding lateral se queda en 10 px. */
    .top-nav .sidebar-nav-item {
        padding: 8px 10px;
        min-height: 44px;
        justify-content: center;
    }

    .top-nav .sidebar-nav-item i {
        font-size: 17px;
    }
}

/* --- Cabeceras de página: tinta sobre papel, título con serifa --- */
header {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
    text-align: left;
    padding: 28px 0 8px;
    margin-bottom: 10px;
}

header h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.9rem;
    color: var(--ink);
}

header p {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.header-content {
    align-items: flex-start;
    gap: 10px;
}

/* --- Paneles blancos con borde cálido --- */
.stat-card,
.metric-card,
.settings-card,
.activity-card,
.grade-pyramid,
.table-filters,
.pagination,
.table-info,
.new-activity-section,
.sidebar,
.map-container,
.search-box,
.auth-modal-content,
.user-menu-content,
.table-container,
.table-responsive,
.diary-container {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: none;
}

.stat-card:hover,
.activity-card:hover {
    transform: none;
    box-shadow: none;
}

/* --- Botones: discretos, con el rojo solo en la acción principal --- */
.btn,
.btn-secondary,
.btn-success,
.btn-danger,
.view-btn,
.page-btn,
.btn-add-extra {
    background: var(--paper-card);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    box-shadow: none;
    font-family: inherit;
}

.btn:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.view-btn:hover,
.page-btn:hover {
    background: var(--paper-base);
    color: var(--ink);
    border-color: var(--ink-faint);
    transform: none;
    box-shadow: none;
}

.btn-primary {
    background: var(--red);
    border: 1px solid var(--red);
    color: #ffffff;
    border-radius: 6px;
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--red-deep);
    border-color: var(--red-deep);
    color: #ffffff;
}

/* Los botones de exportar del Diario son acciones secundarias: discretos */
.export-buttons .btn-primary {
    background: var(--paper-card);
    border-color: var(--line-strong);
    color: var(--ink);
}

.export-buttons .btn-primary:hover {
    background: var(--paper-base);
    border-color: var(--ink-faint);
    color: var(--ink);
}

.view-btn.active,
.page-btn.active {
    background: var(--ink);
    border-color: var(--ink);
    color: #ffffff;
}

/* --- Inputs --- */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    background: var(--paper-card);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    box-shadow: none;
    color: var(--ink);
    font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--red);
}

/* --- Títulos de sección --- */
.view-header h2,
.stats-block-title,
.form-header h2,
.card-header h3 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

/* Iconos decorativos fuera: un cuaderno serio es texto y números.
   Se conservan solo los funcionales (navegación, sol/copo, botones).
   Nota: header h1 i[class] y no header h1 i — Font Awesome define
   .fas { display: inline-block } y una clase pesa más que tres elementos. */
header h1 i[class],
.view-header h2 i,
.stats-block-title i,
.stat-card > i,
.metric-card > i,
.sidebar h2 i {
    display: none;
}

.stats-block-help {
    color: var(--ink-soft);
}

.form-header {
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
}

.form-header h2,
.form-header i {
    color: var(--ink);
}

/* --- Tabla --- */
.activities-table th {
    background: var(--paper-base);
    color: var(--ink-soft);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}

.activities-table td {
    color: var(--ink);
    border-bottom: 1px solid var(--paper-soft);
}

.sortable:hover {
    background: var(--paper-relief);
}

.activities-table tbody tr:hover td {
    background: #FAF8F2;
}

/* --- Estadísticas --- */
.stat-card i,
.metric-card i {
    color: var(--red-deep);
}

.stat-card h3,
.metric-card h4,
.stat-caption {
    color: var(--ink-soft);
}

.stat-card p,
.metric-card p {
    color: var(--ink);
}

.grade-pyramid-bar {
    background: var(--red);
    border-radius: 3px;
    color: #ffffff;
}

/* --- Vista Diario agrupada por meses y días --- */
.diary-container {
    padding: 6px 22px 16px;
}

.diary-month {
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-bottom: 1px solid var(--line-strong);
    padding: 18px 0 6px;
}

.diary-month-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
    text-transform: capitalize;
}

.diary-month-meta {
    font-size: 12px;
    color: var(--ink-faint);
}

.diary-entry {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--paper-soft);
}

.diary-entry:last-child {
    border-bottom: none;
}

.diary-day {
    width: 46px;
    flex-shrink: 0;
    text-align: center;
}

.diary-day .diary-day-num {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}

.diary-day .diary-day-week {
    font-size: 11px;
    color: var(--ink-faint);
}

.diary-main {
    flex: 1;
    min-width: 0;
}

.diary-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.diary-title a {
    color: inherit;
    text-decoration: none;
}

.diary-title a:hover {
    color: var(--red-deep);
    text-decoration: underline;
}

.diary-sub {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.diary-sub i {
    font-size: 11px;
    color: var(--ink-faint);
}

.diary-plus {
    color: var(--ink-faint);
    font-weight: 400;
}

.diary-grade {
    flex-shrink: 0;
    background: #FAECE7;
    color: #712B13;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.diary-grade.diary-grade-alpine {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: #444441;
}

.diary-metric {
    flex-shrink: 0;
    width: 70px;
    text-align: right;
    font-size: 12px;
    color: var(--ink-faint);
}

.diary-empty {
    text-align: center;
    color: var(--ink-soft);
    padding: 30px 10px;
}

/* «N vías»: botón que despliega la lista de nombres del día (oculta por
   defecto). Inline en el subtítulo, con la flecha indicando el estado. */
.diary-count-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--red-deep);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.diary-count-toggle::after {
    content: ' \25be'; /* ▾ */
    font-size: 0.85em;
}

.diary-count-toggle.is-open::after {
    content: ' \25b4'; /* ▴ */
}

.diary-routes {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.5;
}

.diary-routes[hidden] {
    display: none;
}

.diary-routes a {
    color: inherit;
    text-decoration: none;
}

.diary-routes a:hover {
    color: var(--red-deep);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .diary-container { padding: 4px 14px 12px; }
    .diary-entry { gap: 10px; }
    .diary-metric { width: auto; }
}

/* Estadísticas «Resumen por año»: en móvil la tabla de 4 columnas se sale de
   la pantalla por el desglose. Se apila en tarjetas (una por año): cabecera
   oculta, cada celda en fila «etiqueta · valor» y el desglose a lo ancho. */
@media (max-width: 640px) {
    .stats-year-table thead {
        display: none;
    }

    .stats-year-table,
    .stats-year-table tbody,
    .stats-year-table tr,
    .stats-year-table td {
        display: block;
        width: 100%;
    }

    .stats-year-table tr {
        background: var(--paper-card);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 8px 14px;
        margin-bottom: 12px;
    }

    .stats-year-table td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 5px 0;
        border: none;
        text-align: right;
    }

    .stats-year-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--ink-soft);
        text-align: left;
    }

    /* Primera celda (el año) como título de la tarjeta, sin etiqueta. */
    .stats-year-table td[data-label="Año"] {
        font-size: 1.15rem;
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--paper-soft);
    }

    .stats-year-table td[data-label="Año"]::before {
        content: '';
    }

    /* Estado vacío: sin etiqueta y centrado. */
    .stats-year-table td.stats-empty {
        display: block;
        text-align: center;
    }

    .stats-year-table td.stats-empty::before {
        content: '';
    }
}

/* --- Textos secundarios --- */
.info-label,
.info-label i,
.card-description,
.pagination-info,
.table-info .info-item,
.table-info .info-item i {
    color: var(--ink-soft);
}

.card-date,
.metric {
    background: var(--paper-base);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #444441;
}

.app-content {
    background: transparent;
}

/* --- Mapa: papel y tinta --- */

/* Apaga el color de las teselas para que el mapa tire a papel.
   Si no convence, basta con borrar esta regla. */
.leaflet-tile-pane {
    filter: grayscale(0.55) sepia(0.12) saturate(0.85);
}

/* Botones sobre el mapa (Centrar / Marcadores): activo en tinta, no azul */
.map-controls .btn {
    box-shadow: none;
    border-color: var(--line-strong);
    color: var(--ink);
}

.map-controls .btn:hover {
    background: var(--paper-base);
}

.map-controls .btn.active {
    background: var(--ink);
    border-color: var(--ink);
    color: #ffffff;
}

/* Controles de zoom de Leaflet */
.leaflet-bar {
    border: 1px solid var(--line-strong);
    box-shadow: none;
}

.leaflet-bar a,
.leaflet-bar a:hover {
    background: var(--paper-card);
    color: var(--ink);
    border-bottom-color: var(--line);
}

.leaflet-bar a:hover {
    background: var(--paper-base);
}

/* --- Popups del mapa: ficha de cuaderno --- */
.climbing-popup .leaflet-popup-content-wrapper {
    background: var(--paper-card);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(44, 44, 42, 0.12);
    color: var(--ink);
}

.climbing-popup .leaflet-popup-tip {
    box-shadow: none;
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--ink-faint);
}

.leaflet-container a.leaflet-popup-close-button:hover {
    color: var(--ink);
}

.climbing-zone-popup h3 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.climbing-zone-popup .zone-altitude {
    color: var(--ink);
}

.climbing-zone-popup .zone-stats {
    color: var(--ink-faint);
}

.climbing-zone-popup h4 {
    color: var(--ink-soft);
}

/* Listas dentro del popup: filas con filo, como el Diario */
.zone-activity-item,
.sector-item,
.route-item {
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--paper-soft);
    margin: 0;
    padding: 8px 2px;
}

.zone-activity-item.completed,
.zone-activity-item.pending,
.route-item.completed,
.route-item.pending {
    border-left: none;
}

.zone-activity-item:hover,
.sector-item:hover,
.route-item:hover {
    background: #FAF8F2;
}

/* Estado: ✓ hecho en tinta, ○ pendiente en rojo (objetivo marcado) */
.zone-activity-item.completed .route-status,
.route-item.completed .route-status {
    color: var(--ink);
}

.zone-activity-item.pending .route-status,
.route-item.pending .route-status {
    color: var(--red-deep);
}

.route-name {
    color: var(--ink);
}

.sector-item {
    color: var(--ink);
}

.sector-count {
    color: var(--ink-faint);
}

/* Chips de grado y disciplina, como los del Diario */
.route-grade {
    background: #FAECE7;
    color: #712B13;
    border-radius: 999px;
    padding: 2px 10px;
}

.activity-discipline-tag {
    background: var(--paper-base);
    border: 1px solid var(--line);
    color: #444441;
    border-radius: 999px;
}

.popup-breadcrumb {
    border-bottom: 1px solid var(--line);
}

.breadcrumb-back,
.breadcrumb-back-sector {
    color: var(--red-deep);
}

.breadcrumb-back:hover,
.breadcrumb-back-sector:hover {
    color: var(--red);
    text-decoration: underline;
}

/* Detalle de una vía o actividad */
.route-details {
    background: #FAF8F2;
    border: 1px solid var(--paper-soft);
}

.detail-row {
    border-bottom: 1px solid var(--paper-soft);
}

.detail-label {
    color: var(--ink-soft);
}

.detail-value {
    color: var(--ink);
}

.detail-value.grade {
    background: #FAECE7;
    color: #712B13;
    border-radius: 999px;
    padding: 2px 10px;
}

.detail-value.status-completed {
    color: var(--ink);
}

.detail-value.status-pending {
    color: var(--red-deep);
}

.route-description {
    background: #FAF8F2;
    border-left: 2px solid var(--line);
    border-radius: 0 6px 6px 0;
    color: #444441;
}

/* Botón «Ver ficha completa»: papel con tinta roja, como los breadcrumbs */
.popup-open-detail {
    background: #FAF8F2;
    border: 1px solid var(--line);
    color: var(--red-deep);
}

.popup-open-detail:hover {
    color: var(--red);
    border-color: var(--red-deep);
}

.sector-popup-image {
    border-radius: 4px;
    border: 1px solid var(--line);
}

/* --- Ficha de detalle de actividad (#view-detalle) --- */

/* Header como el del resto de páginas: tinta sobre papel, sin tarjeta.
   El bloque antiguo le pone padding lateral de tarjeta; aquí gana esta
   regla por venir después con la misma especificidad. */
.detail-page-container header {
    padding: 28px 0 8px;
    margin-bottom: 10px;
}

/* Chips: etiquetas de papel como las del Diario. El estado sigue el patrón
   de los popups del mapa: hecho en tinta, pendiente en rojo. */
.detail-chip,
.detail-chip.chip-season,
.detail-chip.chip-discipline,
.detail-chip.chip-date {
    background: var(--paper-base);
    border: 1px solid var(--line);
    color: #444441;
}

.detail-chip i {
    color: var(--ink-faint);
}

/* Chip de disciplina coloreado por familia (calcado del mockup):
   escalada = rosa · ascensos = ámbar · invernal = azul · trekking = verde. */
.detail-chip.chip-fam-escalada { background: var(--disc-climb-bg);  border-color: var(--disc-climb-bg);  color: var(--disc-climb-fg); }
.detail-chip.chip-fam-ascensos { background: var(--disc-mtn-bg);    border-color: var(--disc-mtn-bg);    color: var(--disc-mtn-fg); }
.detail-chip.chip-fam-invernal { background: var(--disc-winter-bg); border-color: var(--disc-winter-bg); color: var(--disc-winter-fg); }
.detail-chip.chip-fam-trekking { background: var(--disc-trek-bg);   border-color: var(--disc-trek-bg);   color: var(--disc-trek-fg); }
.detail-chip[class*="chip-fam-"] i { color: inherit; opacity: 0.65; }

/* Chip de disciplina reutilizable para las TARJETAS (Inicio, Comunidad):
   misma codificación por familia que la ficha, en formato píldora compacta. */
.disc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.disc-tag.fam-escalada { background: var(--disc-climb-bg);  color: var(--disc-climb-fg); }
.disc-tag.fam-ascensos { background: var(--disc-mtn-bg);    color: var(--disc-mtn-fg); }
.disc-tag.fam-invernal { background: var(--disc-winter-bg); color: var(--disc-winter-fg); }
.disc-tag.fam-trekking { background: var(--disc-trek-bg);   color: var(--disc-trek-fg); }
.disc-tag.fam-none     { background: var(--paper-relief);   color: var(--ink-soft); }

/* Fila meta de la tarjeta de Inicio: chip de disciplina + zona + sello */
.activity-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}
.activity-item-meta .activity-item-zone { margin: 0; }

.detail-chip.chip-completed {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink);
}

.detail-chip.chip-pending {
    background: #FAECE7;
    border: 1px solid #FAECE7;
    color: #712B13;
}

/* Paneles de la ficha: blanco con borde cálido, como el resto de la app */
.detail-section,
.image-gallery-section,
.route-file-section {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: none;
}

/* Resumen técnico: fuera el degradado morado. Tarjeta blanca con el filo
   superior rojo GR como único acento, números grandes con serifa. */
.detail-stats-card {
    background: var(--paper-card);
    border-top: 3px solid var(--red);
    color: var(--ink);
}

.detail-stat-value {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.detail-stat-label {
    color: var(--ink-faint);
    opacity: 1;
}

/* Títulos de sección con serifa; iconos decorativos fuera (criterio del
   tema: solo se conservan los funcionales) */
.detail-section-title,
.image-gallery-section h3,
.route-file-section h3,
.detail-subsection h4 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.detail-section-title i,
.image-gallery-section h3 i,
.route-file-section h3 i,
.detail-subsection h4 i {
    display: none;
}

/* Campos: etiqueta en tinta clara, valor en tinta con filo como el Diario */
.detail-field-label {
    color: var(--ink-faint);
}

.detail-field-value {
    color: var(--ink);
    border-bottom: 1px solid var(--paper-soft);
}

/* DATOS en monoespaciada (lectura de instrumento): coordenadas del
   formulario, métricas y fechas del Diario. Los nombres y textos siguen
   en Inter; las cifras grandes de récords siguen en Lora. */
#activityLat,
#activityLng,
.card-metrics .metric,
.card-date,
.diary-day-num,
.stats-year-table td,
.grade-pyramid-grade,
.grade-pyramid-bar {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

/* Descripción y bloques legacy: nota al margen sobre papel, como
   .route-description de los popups del mapa */
.detail-description,
.legacy-route {
    background: #FAF8F2;
    border: none;
    border-left: 2px solid var(--line);
    border-radius: 0 6px 6px 0;
    color: #444441;
}

.legacy-route h4,
.legacy-links h4 {
    color: var(--ink-soft);
}

.legacy-route p {
    color: #444441;
}

/* Subsección Material: separador discontinuo en tono papel */
.detail-subsection {
    border-top: 1px dashed var(--line);
}

/* Galería: miniaturas con marco fino, como las fotos de sector del mapa */
.image-item {
    background: #FAF8F2;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.image-item .image-name {
    color: var(--ink-faint);
}

.legacy-links {
    border-top: 1px solid var(--paper-soft);
}

.legacy-links a {
    color: var(--red-deep);
}

.legacy-links a:hover {
    color: var(--red);
    text-decoration: underline;
}

/* En móvil, la regla genérica de .header-content centra título y botones;
   en la ficha queda mezclado (chips y campos van a la izquierda). Aquí
   todo a la izquierda, como una página de cuaderno. */
@media (max-width: 768px) {
    .detail-page-container .header-content {
        align-items: flex-start;
        text-align: left;
    }

    .detail-page-container .header-actions {
        justify-content: flex-start;
    }
}

/* --- Tarjetas de actividad de Inicio: fichas de cuaderno --- */

.activity-item {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.activity-item:hover {
    background: #FAF8F2;
    border-color: var(--line-strong);
}

.activity-item h3 {
    color: var(--ink);
}

.activity-item-zone {
    color: var(--ink-soft);
}

.activity-item-zone i {
    color: var(--ink-faint);
}

.card-field .field-label {
    color: var(--ink-faint);
}

.card-field .field-value {
    color: var(--ink);
}

/* Botones editar / borrar: discretos; el rojo solo al confirmar peligro */
.btn-edit,
.btn-delete {
    background: var(--paper-card);
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
}

.btn-edit:hover {
    background: var(--paper-base);
    border-color: var(--ink-faint);
    color: var(--ink);
}

.btn-delete:hover {
    background: var(--red-deep);
    border-color: var(--red-deep);
    color: #ffffff;
}

/* Estado: hecho en tinta, pendiente/proyecto en rojo (objetivo marcado),
   contador de intentos como texto secundario. Mismo codigo que los popups
   del mapa y los chips de la ficha de detalle. */
.completions-section {
    border-top: 1px solid var(--paper-soft);
}

.completions-status.status-completed {
    color: var(--ink);
}

.completions-status.status-pending {
    color: var(--red-deep);
}

.completions-status.status-attempts {
    color: var(--ink-soft);
}

/* Botones rapidos (registrar realizacion / intento / encadene): aro de
   tinta, sin circulos de colores */
.btn-add-completion,
.btn-add-attempt,
.btn-send-completion {
    background: var(--paper-card);
    border: 1px solid var(--line-strong);
    color: var(--ink);
}

.btn-add-completion:hover,
.btn-add-attempt:hover,
.btn-send-completion:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #ffffff;
    transform: none;
}

/* Etiquetas de fechas registradas: chips de papel */
.completion-tag,
.attempt-tag {
    background: var(--paper-base);
    border: 1px solid var(--line);
    color: #444441;
}

.completion-remove:hover,
.attempt-remove:hover {
    color: var(--red-deep);
}

.no-activities,
.activity-item p {
    color: var(--ink-soft);
}

/* --- Copias automáticas (Ajustes) --- */

.auto-backups-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auto-backup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap; /* en pantallas estrechas los botones bajan de línea */
    padding: 8px 12px;
    background: #FAF8F2;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.auto-backup-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.auto-backup-date {
    color: var(--ink);
    font-weight: 600;
    font-size: 0.92rem;
}

.auto-backup-tag {
    display: inline-block;
    background: var(--paper-base);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #444441;
    font-size: 11px;
    font-weight: 400;
    padding: 1px 8px;
    margin-left: 4px;
    vertical-align: middle;
}

.auto-backup-meta {
    color: var(--ink-faint);
    font-size: 0.82rem;
}

/* gap 6 → 10 px (Fase 2, 2026-08-08): «Restaurar» es delicado y estaba pegado
   a «Descargar». */
.auto-backup-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* .btn-sm trae margin-top: 8px de serie; aquí alineamos con la fila */
.auto-backup-actions .btn-sm {
    margin-top: 0;
}

/* Fila del botón «Limpiar ficha», arriba del formulario (2026-07-31): se
   decide vaciar ANTES de rellenar, así que va nada más elegir disciplina. */
.form-clear-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.form-clear-row .btn-sm {
    margin-top: 0;
}

.auto-backups-empty {
    color: var(--ink-faint);
    font-style: italic;
}

/* ===== Importar CSV: modal de vista previa (tema cuaderno de campo) ===== */
.csvimp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(44, 44, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 4000;
}
.csvimp-modal {
    background: var(--paper-base);
    border: 1px solid var(--line-strong);
    border-top: 4px solid var(--red);
    border-radius: 10px;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px 24px;
    color: var(--ink);
    box-shadow: 0 12px 40px rgba(44, 44, 42, 0.3);
}
.csvimp-modal h3 {
    font-family: var(--font-display);
    margin: 0 0 8px;
    color: var(--ink);
}
.csvimp-modal h3 i { color: var(--red); margin-right: 6px; }
.csvimp-intro {
    font-size: 0.9rem;
    color: #5a5a55;
    margin: 0 0 14px;
}
.csvimp-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.csvimp-chip {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #FAF8F2;
}
.csvimp-chip-new { color: var(--ink); border-color: var(--line-strong); }
.csvimp-chip-date { color: var(--ink); background: #EDEAE0; }
.csvimp-chip-coords { color: #3C4A30; background: #EAF0E6; border-color: #C2D2B5; }
.csvimp-chip-err { color: #712B13; background: #FAECE7; border-color: #E0B9A8; }
.csvimp-section { margin-bottom: 14px; }
.csvimp-section h4 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    margin: 0 0 6px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
}
.csvimp-section-err h4 { color: var(--red-deep); border-color: #E0B9A8; }
.csvimp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.86rem;
}
.csvimp-list li {
    padding: 4px 0;
    border-bottom: 1px solid var(--paper-soft);
    word-break: break-word;
}
.csvimp-list li:last-child { border-bottom: none; }
.csvimp-list strong { color: var(--ink); }
.csvimp-more { color: var(--ink-faint); font-style: italic; }
.csvimp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    position: sticky;
    bottom: -22px;
    background: var(--paper-base);
    padding-top: 12px;
}
@media (max-width: 520px) {
    .csvimp-modal { padding: 18px 16px; }
    .csvimp-actions { flex-direction: column-reverse; }
    .csvimp-actions .btn { width: 100%; }
}

/* ============================================
   Catálogo público — modal del alias (Fase 0)
   ============================================ */
.alias-overlay {
    position: fixed;
    inset: 0;
    background: rgba(44, 44, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 4000;
}
.alias-modal {
    background: var(--paper-base);
    border: 1px solid var(--line-strong);
    border-top: 4px solid var(--red);
    border-radius: 10px;
    width: 100%;
    max-width: 440px;
    padding: 22px 24px;
    color: var(--ink);
    box-shadow: 0 12px 40px rgba(44, 44, 42, 0.3);
}
.alias-modal h3 {
    font-family: var(--font-display);
    margin: 0 0 8px;
    color: var(--ink);
}
.alias-modal h3 i { color: var(--red); margin-right: 6px; }
.alias-intro {
    font-size: 0.9rem;
    color: #5a5a55;
    line-height: 1.5;
    margin: 0 0 14px;
}
.alias-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #FAF8F2;
    color: var(--ink);
}
.alias-input:focus { outline: none; border-color: var(--red); }
.alias-error { color: var(--red-deep); font-size: 0.85rem; margin: 8px 0 0; }
.alias-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}
.alias-current { font-size: 0.9rem; color: var(--ink); margin: 0 0 14px; }
@media (max-width: 520px) {
    .alias-modal { padding: 18px 16px; }
    .alias-actions { flex-direction: column-reverse; }
    .alias-actions .btn { width: 100%; }
}

/* ============================================
   Catálogo público — sección Comunidad (Fase 1)
   ============================================ */
.comunidad-intro p, .comunidad-notice p { color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.comunidad-alias { font-size: 0.92rem; }
.comunidad-soon { font-size: 0.88rem; color: #7a7a72; font-style: italic; }
.comunidad-soon i { margin-right: 6px; }
.comunidad-h3 { font-family: var(--font-display); color: var(--ink); margin: 20px 0 10px; }
.comunidad-notice {
    background: #FAF8F2; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px;
}
.comunidad-list { display: flex; flex-direction: column; gap: 10px; }
.comunidad-place {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    background: #FAF8F2; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
}
.comunidad-place-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; }
.comunidad-place-name { color: var(--ink); font-size: 1rem; }
.comunidad-place-meta { color: #7a7a72; font-size: 0.85rem; }
.comunidad-place-status { flex: 0 0 auto; }
.comunidad-badge {
    font-size: 0.8rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper-card); color: #7a7a72; white-space: nowrap;
}
.comunidad-badge-pub { border-color: var(--ink); color: var(--ink); }
.comunidad-place-actions { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.comunidad-btn { padding: 7px 12px; font-size: 0.85rem; }
.comunidad-btn-danger { color: var(--red-deep); }

/* Vista previa de publicación (reutiliza .csvimp-overlay / .csvimp-modal) */
.pubprev-sector { margin-bottom: 12px; }
.pubprev-sector-head {
    display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0;
}
.pubprev-sector-head strong { font-family: var(--font-display); }
.pubprev-sector-count { color: #7a7a72; font-size: 0.85rem; }
.pubprev-item { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pubprev-item span { font-size: 0.9rem; }
@media (max-width: 520px) {
    .comunidad-place-actions { width: 100%; }
}

/* Sub-pestañas de Comunidad (Explorar / Mis publicaciones) */
.comunidad-tabs {
    display: flex; gap: 6px; margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
/* min-height 44px (Fase 2, 2026-08-08): las pestañas medían 37 px. */
.comunidad-tab {
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 0.95rem; color: #7a7a72;
    padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
    min-height: 44px;
}
.comunidad-tab i { margin-right: 6px; }
.comunidad-tab.active { color: var(--ink); border-bottom-color: var(--red); font-weight: 600; }

/* Explorar: controles de búsqueda */
.catalog-controls { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.catalog-search {
    flex: 1 1 220px; min-width: 0;
    padding: 9px 12px; font-size: 0.95rem;
    border: 1px solid var(--line-strong); border-radius: 8px; background: #FAF8F2; color: var(--ink);
}
.catalog-search:focus { outline: none; border-color: var(--red); }
.catalog-disc {
    flex: 0 1 200px; padding: 9px 12px; font-size: 0.9rem;
    border: 1px solid var(--line-strong); border-radius: 8px; background: #FAF8F2; color: var(--ink);
}
.catalog-refresh { flex: 0 0 auto; padding: 9px 12px; }

/* Explorar: lista de lugares */
.catalog-results { display: flex; flex-direction: column; gap: 10px; }
.catalog-place {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    background: #FAF8F2; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
}
.catalog-place:hover { border-color: var(--line-strong); background: var(--paper-card); }
.catalog-place-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.catalog-place-name { color: var(--ink); font-size: 1rem; }
.catalog-place-meta { color: #7a7a72; font-size: 0.85rem; }
.catalog-place-arrow { color: var(--line-strong); flex: 0 0 auto; }

/* Explorar: detalle de un lugar */
.catalog-back {
    background: none; border: none; cursor: pointer; color: var(--red-deep);
    font-family: inherit; font-size: 0.9rem; padding: 4px 0; margin-bottom: 8px;
}
.catalog-back i { margin-right: 6px; }
.catalog-detail-title { font-family: var(--font-display); color: var(--ink); margin: 4px 0 10px; }
.catalog-contrib {
    background: #FAF8F2; border: 1px solid var(--line); border-radius: 8px;
    padding: 12px 14px; margin-bottom: 12px;
}
.catalog-contrib-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #E6E4DC;
}
.catalog-contrib-author { font-weight: 600; color: var(--ink); }
.catalog-contrib-author i { color: #7a7a72; margin-right: 5px; }
.catalog-you { color: var(--red-deep); font-weight: 600; }
.catalog-contrib-size { color: #7a7a72; font-size: 0.85rem; }
.catalog-sector { margin: 8px 0; }
.catalog-sector-head { font-family: var(--font-display); color: var(--ink); font-size: 0.95rem; }
.catalog-sector-count { color: #7a7a72; font-size: 0.82rem; }
.catalog-route-list { margin: 4px 0 0; padding-left: 18px; }
.catalog-route-list li { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }
.catalog-contrib-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.catalog-import-btn { padding: 6px 12px; font-size: 0.85rem; }

/* Importar: vías que ya tienes (no se vuelven a crear) */
.impprev-item-dup { opacity: 0.7; }
.impprev-dup {
    font-size: 0.75rem; font-weight: 600; color: #7a7a72;
    border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; margin-left: 4px;
    white-space: nowrap;
}

/* ---- Fase 4: mapa del catálogo (Comunidad → Explorar) ---- */
.catalog-map {
    height: 320px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}
.catalog-map-note {
    font-size: 0.82rem;
    color: #7a7a72;
    font-style: italic;
    margin: 0 0 14px;
}
/* Chincheta de un lugar: punto rojo del tema con el nº de vías dentro */
.catalog-pin {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(44, 44, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.15s;
}
.catalog-pin:hover { filter: brightness(0.85); }
/* Contenido del globo de una chincheta (sobre el popup tematizado) */
.catalog-pop { min-width: 180px; display: flex; flex-direction: column; gap: 6px; }
.catalog-pop-name { font-family: var(--font-display); color: var(--ink); font-size: 1rem; }
.catalog-pop-meta { color: #7a7a72; font-size: 0.85rem; }
.catalog-pop-btn { align-self: flex-start; margin-top: 2px; padding: 6px 12px; font-size: 0.85rem; }

@media (max-width: 640px) {
    .catalog-map { height: 260px; }
}

/* ---- Fase 5: moderación y seguridad ---- */
/* Aviso fijo: los datos son de la comunidad, hay que verificarlos */
.catalog-disclaimer {
    background: #FAECE7;
    border: 1px solid #E0C4B8;
    color: #712B13;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 12px;
}
.catalog-disclaimer i { margin-right: 6px; }
/* Botón "Reportar" de cada aportación: discreto, rojo al pasar por encima */
.catalog-report-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #7a7a72;
    font-size: 0.82rem;
    padding: 4px 6px;
}
.catalog-report-btn:hover { color: var(--red-deep); }
.catalog-report-btn i { margin-right: 4px; }
/* «Eliminar (N)»: deshace una importación entera. Discreto como Reportar (no
   compite con Importar), pero en rojo porque quita cosas de tu diario. */
.catalog-unimport-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--red-deep);
    font-size: 0.82rem;
    padding: 4px 6px;
}
.catalog-unimport-btn:hover { text-decoration: underline; }
.catalog-unimport-btn i { margin-right: 4px; }
/* Modal de reporte: motivos + nota */
.report-reasons { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.report-reasons label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 0.92rem; cursor: pointer; }
.report-note {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    background: #FAF8F2;
    box-sizing: border-box;
}
.report-note:focus { outline: none; border-color: var(--red); }
/* Pestaña Moderación (solo admin) y sus tarjetas de reporte */
.comunidad-tab-admin.active { border-bottom-color: var(--red-deep); color: var(--red-deep); }
.mod-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: var(--paper-card);
}
.mod-card-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.mod-card-head strong { color: var(--ink); }
.mod-reasons { margin: 0 0 10px; padding-left: 18px; }
.mod-reasons li { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }

/* ---- Fase 6: "me gusta" (corazón por aportación) ---- */
.catalog-like-btn {
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    color: #7a7a72;
    font-size: 0.82rem;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.catalog-like-btn i { color: #c9c7bf; transition: color 0.15s; }
.catalog-like-btn:hover i { color: var(--red); }
.catalog-like-btn.liked { border-color: #E9B7B2; }
.catalog-like-btn.liked i { color: var(--red); }
.catalog-like-btn:disabled { opacity: 0.6; cursor: default; }
/* En tu propia aportación: solo contador, sin botón */
.catalog-like-static {
    color: #7a7a72;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.catalog-like-static i { color: var(--red); }

/* ---- Vaciar datos de la cuenta (Ajustes, acción delicada) ---- */
.settings-card-danger { border-color: #E0C4B8; }
.settings-card-danger h3 i { color: var(--red-deep); }
.btn-danger {
    background: var(--red-deep);
    color: #ffffff;
    border: 1px solid var(--red-deep);
}
.btn-danger:hover { background: #8a2424; border-color: #8a2424; }

/* ---- Estadísticas del autor en «Mis publicaciones» (me gusta + descargas) ---- */
.comunidad-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }
.comunidad-stat {
    flex: 1 1 70px;
    min-width: 70px;
    background: #FAF8F2;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
}
.cs-num { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); line-height: 1.1; }
.cs-label { display: block; font-size: 0.78rem; color: #7a7a72; margin-top: 2px; }
.cs-label i { margin-right: 3px; color: var(--red); }
/* Números por lugar (debajo del nombre) */
.comunidad-place-stats { color: #7a7a72; font-size: 0.82rem; margin-top: 2px; }
.comunidad-place-stats i { margin-right: 3px; }
.comunidad-place-stats .fa-heart { color: var(--red); }

/* ===========================================================================
   LANDING PÚBLICA (CAFactivities)
   Pantalla de bienvenida que cubre la app. Misma estética papel/tinta.
   Se oculta con .caf-skip-landing (head + landing.js) o display:none.
   =========================================================================== */
.caf-landing {
    position: fixed;
    inset: 0;
    z-index: 3000;
    overflow-y: auto;
    background:
        radial-gradient(120% 80% at 50% -10%, #F6F4EE 0%, var(--paper-base) 55%, #E9E6DD 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
}

/* Quien ya entró antes (o el APK): nunca se ve */
.caf-skip-landing .caf-landing { display: none !important; }

.caf-landing-inner {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(40px, 8vh, 88px) 24px 48px;
    box-sizing: border-box;
}

/* --- Hero --- */
.caf-hero { text-align: center; }

.caf-hero-mark {
    width: 52px;
    height: 52px;
    transform: none;
    margin-bottom: 22px;
}

.caf-logo {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.05;
    margin: 0;
}

.caf-lema {
    font-size: 0.9rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 600;
    margin: 10px 0 0;
}

.caf-sub {
    font-size: clamp(1.05rem, 2.4vw, 1.25rem);
    color: var(--ink-soft);
    max-width: 30ch;
    margin: 20px auto 0;
    line-height: 1.5;
}

.caf-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding: 14px 30px;
    border: none;
    border-radius: 8px;
    background: var(--red);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(226, 75, 74, 0.28);
    transition: background 0.15s ease, transform 0.05s ease;
}
.caf-cta:hover { background: #C73E3D; }
.caf-cta:active { transform: translateY(1px); }
.caf-cta i { font-size: 0.9em; }

.caf-note {
    font-size: 0.85rem;
    color: #7a7a72;
    max-width: 38ch;
    margin: 16px auto 0;
    line-height: 1.5;
}

/* --- Funciones --- */
.caf-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(min(220px, 100%), 1fr));
    gap: 16px;
    margin-top: 52px;
}

.caf-feature {
    background: #FBFAF6;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 22px 20px;
    text-align: left;
}

.caf-feature i {
    font-size: 1.4rem;
    color: var(--red);
    margin-bottom: 12px;
}

.caf-feature h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 6px;
}

.caf-feature p {
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;
}

/* --- Pie --- */
.caf-foot {
    margin-top: 44px;
    text-align: center;
    color: #8a887f;
    font-size: 0.82rem;
}
.caf-foot p { margin: 0 0 8px; }
.caf-foot a {
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.caf-foot a:hover { color: var(--ink); }

@media (max-width: 560px) {
    .caf-features { grid-template-columns: 1fr; }
}

/* ============================================================
   MOTIVOS — Dirección visual v1 (cuaderno de bitácora)
   Curvas de nivel (textura), perfil de altura (separador/firma),
   sello de cima (actividades completadas) y la marca de cumbre
   en el item de navegación activo.
   ============================================================ */

/* --- Textura de curvas de nivel: fondo muy tenue sobre el papel.
   No tapa el mapa (Leaflet pinta su propio fondo encima). --- */
body {
    background-color: var(--paper-base);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="280" height="280" viewBox="0 0 280 280"><g fill="none" stroke="%232C2C2A" stroke-opacity="0.045" stroke-width="1"><path d="M-20 70 C 40 40 100 100 160 70 S 280 40 320 70"/><path d="M-20 130 C 40 100 100 160 160 130 S 280 100 320 130"/><path d="M-20 190 C 40 160 100 220 160 190 S 280 160 320 190"/><path d="M-20 250 C 40 220 100 280 160 250 S 280 220 320 250"/></g></svg>');
    background-attachment: fixed;
}

/* --- Separador / firma de perfil de altura. El punto rojo es la cima.
   Uso: <div class="elev-sep"></div> --- */
.elev-sep {
    height: 24px;
    margin: 22px 0;
    background: center / auto 100% no-repeat
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="340" height="24" viewBox="0 0 340 24"><path d="M0 22 L70 22 L120 9 L150 15 L200 3 L250 16 L300 22 L340 22" fill="none" stroke="%235F5E5A" stroke-width="1.5" stroke-linejoin="round"/><circle cx="200" cy="3" r="3" fill="%23E24B4A"/></svg>');
    opacity: 0.9;
}

/* --- Sello "CIMA": las actividades completadas se sellan, como un
   tampón en el cuaderno. --- */
.sello-cima {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--red-deep);
    border: 1.5px solid var(--red-deep);
    border-radius: 4px;
    padding: 3px 7px 2px;
    line-height: 1;
    transform: rotate(-3deg);
    opacity: 0.92;
    white-space: nowrap;
}
.sello-cima::before {
    content: "\25B2"; /* ▲ pico */
    font-size: 8px;
    line-height: 1;
}

/* --- Item de navegación activo = marca de cumbre (subrayado rojo + tinta).
   Usa el id #appSidebar para ganar por especificidad: la regla base
   .top-nav .sidebar-nav-item pisaba a la .active por orden de cascada. --- */
#appSidebar .sidebar-nav-item.active {
    background: transparent;
    border-radius: 0;
    border-bottom: 2px solid var(--red);
    color: var(--ink);
    font-weight: 600;
}


/* ===== Selector de grado propio (2026-09-30) =====
   Sustituye a la lista de sugerencias del navegador, que en Android se
   dibujaba encima del teclado y tapaba los números (reportado por una tester
   el 10-09 y confirmado por Daniel en su OPPO con la 1.0.5).
   Va DENTRO del formulario, no flotando: por eso no puede solaparse con nada.
   Los toques son de 44 px, el mínimo cómodo en móvil. */
.grade-picker {
    margin-top: 6px;
}

.grade-picker-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    background: var(--paper-soft);
    color: var(--ink-soft);
    border: 1px solid var(--paper-relief);
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.grade-picker-open:hover,
.grade-picker.is-open .grade-picker-open {
    background: var(--paper-relief);
    color: var(--ink);
}

.grade-picker-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 12px;
    background: var(--paper-card);
    border: 1px solid var(--paper-relief);
    border-radius: 10px;
    /* Tope por si algún sistema trae muchos grados: se desplaza dentro del
       propio panel en vez de estirar el formulario sin fin. */
    max-height: 45vh;
    overflow-y: auto;
}

/* Paginado del Diario: las flechas, del tamaño de los números de página
   (con el relleno de un .btn normal no cabían a 360 px), y si aun así no
   cabe, pasa a dos líneas en vez de salirse de la tarjeta. */
.pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-controls .btn {
    padding: 8px 12px;
    min-width: 40px;
}

/* A 360 px, con 5 páginas, la fila completa mide ~280 px y el hueco interior
   de la tarjeta era de 260: menos margen interior y menos separación. */
@media (max-width: 480px) {
    .pagination {
        padding: 12px 8px;
    }

    .pagination-controls {
        gap: 6px;
    }
}

/* Papelera de cada foto en la galería de la ficha (40 px: se pulsa bien con
   el dedo). */
.image-item .image-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--paper-card);
    color: var(--red);
    cursor: pointer;
}

/* Total de actividades al final de «Mis Actividades»: a la vista, sin llamar
   la atención. */
.activities-total {
    margin: 12px 0 4px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

/* Sin esto, el display:flex de arriba pisa al atributo hidden y el panel
   cerrado se queda como una caja vacía bajo «Elegir» (lección 2026-06-17). */
.grade-picker-panel[hidden] {
    display: none;
}

.grade-chip {
    min-width: 56px;
    min-height: 44px;
    padding: 8px 12px;
    background: var(--paper-base);
    color: var(--ink);
    border: 1px solid var(--paper-relief);
    border-radius: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.95rem;
    cursor: pointer;
}

.grade-chip:hover,
.grade-chip:focus-visible {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.grade-picker-empty {
    margin: 0;
    color: var(--ink-faint);
    font-size: 0.9rem;
}