@import url('themes.css?v=8');



:root {

    --radius: 14px;

    --font: "Inter", system-ui, -apple-system, sans-serif;

    --success: #34d399;

    --danger: #f87171;

    --safe-top: env(safe-area-inset-top, 0px);

    --safe-right: env(safe-area-inset-right, 0px);

    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --safe-left: env(safe-area-inset-left, 0px);

}



* { box-sizing: border-box; }



html, body {

    margin: 0;

    background: var(--bg);

    color: var(--text);

    font-family: var(--font);

}



#app {

    min-height: 100vh;

    min-height: 100dvh;

}



.pv-splash {

    min-height: 100vh;

    min-height: 100dvh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    background: var(--bg, #033f63);

    padding:

        calc(1.5rem + var(--safe-top))

        calc(1.5rem + var(--safe-right))

        calc(1.5rem + var(--safe-bottom))

        calc(1.5rem + var(--safe-left));

}



.pv-splash-logo {

    border-radius: 16px;

    object-fit: contain;

}



.pv-splash-title {

    margin: 0;

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--text, #f8fafc);

}



.pv-splash-spinner {

    width: 36px;

    height: 36px;

    border: 3px solid rgba(255, 255, 255, 0.22);

    border-top-color: var(--accent, #fedc97);

    border-radius: 50%;

    animation: pv-spin 0.85s linear infinite;

}



@keyframes pv-spin {

    to { transform: rotate(360deg); }

}



a { color: var(--accent); }



.app-shell {

    display: grid;

    grid-template-columns: 240px 1fr;

    min-height: 100vh;

    min-height: 100dvh;

}



.app-shell--auth {

    grid-template-columns: 1fr;

    min-height: 100vh;

    min-height: 100dvh;

}



.pv-nav-toggle,

.pv-nav-close,

.pv-nav-backdrop,

.pv-fab-menu { display: none !important; }



@media (max-width: 900px) {

    .app-shell { grid-template-columns: 1fr; }



    .pv-nav-toggle {

        display: inline-flex !important;

        align-items: center;

        justify-content: center;

        gap: .35rem;

        min-width: 44px;

        height: 44px;

        padding: 0 .75rem;

        margin-right: .5rem;

        flex-shrink: 0;

        border: 1px solid var(--accent);

        border-radius: 10px;

        background: var(--surface-2);

        color: var(--text);

        font-size: .95rem;

        font-weight: 600;

        cursor: pointer;

    }



    .pv-fab-menu {

        display: flex !important;

        position: fixed;

        bottom: calc(1.25rem + var(--safe-bottom));

        right: calc(1rem + var(--safe-right));

        z-index: 150;

        width: 56px;

        height: 56px;

        align-items: center;

        justify-content: center;

        border: none;

        border-radius: 50%;

    background: linear-gradient(135deg, var(--accent), var(--accent-2));

        color: #fff;

        font-size: 1.5rem;

        box-shadow: 0 8px 24px var(--accent-glow);

        cursor: pointer;

    }



    .pv-nav-close {

        display: inline-flex !important;

        margin-left: auto;

        border: none;

        background: transparent;

        color: var(--muted);

        font-size: 1.1rem;

        cursor: pointer;

    }



    .pv-nav-backdrop {

        display: none !important;

        position: fixed;

        inset: 0;

        z-index: 90;

        border: none;

        background: rgba(0, 0, 0, .55);

        cursor: pointer;

    }



    .app-shell.nav-open .pv-nav-backdrop { display: block !important; }



    .sidebar {

        position: fixed;

        top: 0;

        left: 0;

        bottom: 0;

        width: min(280px, 88vw);

        z-index: 100;

        transform: translateX(-100%);

        transition: transform .2s ease;

        overflow-y: auto;

    }



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



    .brand { margin-bottom: 1rem; }



    .nav-menu {

        flex-direction: column;

        flex-wrap: nowrap;

    }



    .topbar {

        display: flex;

        align-items: center;

        position: sticky;

        top: var(--safe-top);

        z-index: 20;

        background: var(--bg);

        padding-bottom: .5rem;

    }



    .content { padding-bottom: calc(5rem + var(--safe-bottom)); }

}



.sidebar {

    background: linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%);

    border-right: 1px solid var(--border);

    padding:

        calc(1.25rem + var(--safe-top))

        calc(1.25rem + var(--safe-right))

        calc(1.25rem + var(--safe-bottom))

        calc(1.25rem + var(--safe-left));

}



.brand {

    display: flex;

    align-items: center;

    gap: .5rem;

    font-weight: 700;

    font-size: 1.15rem;

    margin-bottom: 1.5rem;

}



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



.brand-logo {

    width: 32px;

    height: 32px;

    border-radius: 8px;

    object-fit: contain;

    flex-shrink: 0;

}



.nav-menu { display: flex; flex-direction: column; gap: .35rem; }



.nav-menu a {

    color: var(--muted);

    text-decoration: none;

    padding: .55rem .75rem;

    border-radius: 10px;

}



.nav-menu a.active, .nav-menu a:hover {

    background: color-mix(in srgb, var(--accent) 22%, var(--surface-2));

    color: var(--text);

}



.nav-logout {

    margin-top: 1rem;

    background: transparent;

    border: 1px solid var(--border);

    color: var(--muted);

    padding: .5rem .75rem;

    border-radius: 10px;

    cursor: pointer;

}



.content {

    padding:

        calc(1rem + var(--safe-top))

        calc(1.5rem + var(--safe-right))

        calc(2rem + var(--safe-bottom))

        calc(1.5rem + var(--safe-left));

}



.topbar { margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.tagline { color: var(--muted); font-size: .9rem; }

.user-name {

    margin-left: auto;

    color: var(--text);

    font-weight: 600;

    font-size: .95rem;

    max-width: 12rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.auth-main {

    min-height: 100vh;

    min-height: 100dvh;

    display: grid;

    place-items: center;

    padding:

        calc(1.5rem + var(--safe-top))

        calc(1.5rem + var(--safe-right))

        calc(1.5rem + var(--safe-bottom))

        calc(1.5rem + var(--safe-left));

    background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--accent-glow), transparent 70%),

                var(--bg);

}



.auth-card {

    width: min(440px, 100%);

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: calc(var(--radius) + 4px);

    padding: 2.5rem 2.25rem;

    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);

}



.auth-card h1 {

    margin: 0 0 .35rem;

    font-size: 1.75rem;

    text-align: center;

}



.auth-card .subtitle {

    text-align: center;

    margin-bottom: 1.5rem;

}



.auth-logo {

    display: block;

    width: 80px;

    height: 80px;

    margin: 0 auto 1.25rem;

    border-radius: 18px;

    object-fit: contain;

}



@media (min-width: 640px) {

    .auth-card {

        width: min(480px, 100%);

        padding: 3rem 2.75rem;

    }



    .auth-logo {

        width: 96px;

        height: 96px;

        margin-bottom: 1.5rem;

    }



    .auth-card h1 {

        font-size: 2rem;

    }



    .field input {

        padding: .75rem .85rem;

        font-size: 1rem;

    }



    .btn-primary {

        padding: .85rem;

        font-size: 1.05rem;

    }

}



.subtitle { color: var(--muted); margin-top: 0; }



.field { margin-bottom: 1rem; }

.field label { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .85rem; }

.field input,

.field select {

    width: 100%;

    padding: .65rem .75rem;

    border-radius: 10px;

    border: 1px solid var(--border);

    background: var(--bg);

    color: var(--text);

    font-family: inherit;

    font-size: .95rem;

    font-weight: 500;

    line-height: 1.4;

}



.field select {

    padding-right: 2.25rem;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-color: rgba(0, 0, 0, 0.32);

    border-color: rgba(255, 255, 255, 0.38);

    color: #ffffff;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23ffffff' stroke-opacity='0.72' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right .7rem center;

}



.field select:focus,

.field input:focus {

    outline: none;

    border-color: var(--accent);

    box-shadow: 0 0 0 2px var(--accent-glow);

}



.field select option {

    background: var(--surface);

    color: var(--text);

}



.checkbox-field { display: flex; align-items: center; gap: .5rem; }



.btn-primary {

    width: 100%;

    padding: .75rem;

    border: none;

    border-radius: 10px;

    background: linear-gradient(135deg, var(--accent), var(--accent-2));

    color: var(--accent-text, #fff);

    font-weight: 600;

    cursor: pointer;

}



.btn-primary:disabled { opacity: .6; cursor: wait; }



.alert-error {

    background: rgba(239,68,68,.15);

    color: #fca5a5;

    padding: .65rem .75rem;

    border-radius: 8px;

    margin-bottom: 1rem;

}



.alert-success {

    background: rgba(34,197,94,.15);

    color: #86efac;

    padding: .65rem .75rem;

    border-radius: 8px;

    margin-bottom: 1rem;

}



.success-msg { color: var(--success); }



.dashboard-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1.25rem;

}



.date-label { color: var(--muted); text-transform: capitalize; }



.progress-ring {

    width: 88px;

    height: 88px;

    border-radius: 50%;

    background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--border) 0);

    display: grid;

    place-items: center;

    position: relative;

}



.progress-ring::before {

    content: "";

    position: absolute;

    inset: 8px;

    background: var(--bg);

    border-radius: 50%;

}



.progress-ring span, .progress-ring small {

    position: relative;

    z-index: 1;

    display: block;

    text-align: center;

}



.stats-row {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: .75rem;

    margin-bottom: 1.25rem;

}



.stat-card {

    background: var(--surface);

    border-radius: var(--radius);

    padding: 1rem;

    border: 1px solid var(--border);

}



.stat-card strong { font-size: 1.4rem; display: block; }

.stat-card span { color: var(--muted); font-size: .85rem; }



.timeline { display: flex; flex-direction: column; gap: .75rem; }



.block-card {

    background: var(--surface);

    border-radius: var(--radius);

    border: 1px solid var(--border);

    border-left: 4px solid var(--accent, #6366f1);

    padding: 1rem;

}



.block-card.done { opacity: .75; }



.block-header {

    display: flex;

    justify-content: space-between;

    gap: .75rem;

    align-items: flex-start;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

}



.pv-check {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    min-width: 44px;

    min-height: 44px;

    border-radius: 50%;

    border: 3px solid #ffffff;

    background: rgba(0, 0, 0, 0.35);

    flex-shrink: 0;

    pointer-events: none;

    box-shadow:

        0 0 0 1px rgba(0, 0, 0, 0.5),

        inset 0 0 0 1px rgba(255, 255, 255, 0.2);

}



.pv-check.checked {

    border-color: #16a34a;

    background: #34d399;

    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);

}



.pv-check.checked::after {

    content: "✓";

    color: #052e16;

    font-size: 1.25rem;

    font-weight: 900;

    line-height: 1;

}



.block-time { color: var(--muted); font-size: .8rem; }

.block-desc { color: var(--muted); font-size: .9rem; margin: .25rem 0 0; }



.task-list { list-style: none; margin: .75rem 0 0; padding: 0; }

.task-list li { padding: .35rem 0; }

.task-list li.done span { text-decoration: line-through; color: var(--muted); }

.task-list label { display: flex; gap: .5rem; align-items: center; cursor: pointer; }



.catalog-section { margin-bottom: 2rem; }

.catalog-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

    gap: .65rem;

}



.catalog-chip {

    background: var(--surface);

    border: 1px solid var(--border);

    border-left: 4px solid var(--accent);

    border-radius: 10px;

    padding: .75rem;

}



.catalog-chip small { color: var(--muted); display: block; }



.text-muted { color: var(--muted); }



/* Blazor: ocultar barra de error hasta que falle de verdad */

#blazor-error-ui {

    display: none;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 200;

    padding: .75rem 1rem;

    background: #b32121;

    color: #fff;

    box-shadow: 0 -4px 20px rgba(0, 0, 0, .4);

}



#blazor-error-ui.show {

    display: block;

}



.invite-form .btn-primary { width: auto; margin-top: .5rem; }

.invite-list ul { padding-left: 1.25rem; }

.invite-list li { margin-bottom: .75rem; word-break: break-all; }



/* === Dashboard de avances === */



.btn-primary.btn-inline {

    display: inline-flex;

    align-items: center;

    width: auto;

    padding: .5rem 1rem;

    font-size: .9rem;

    text-decoration: none;

}



.period-tabs {

    display: flex;

    gap: .5rem;

    margin-bottom: 1.25rem;

    flex-wrap: wrap;

}



.period-tab {

    padding: .5rem 1rem;

    border-radius: 999px;

    border: 1px solid var(--border);

    background: var(--surface);

    color: var(--muted);

    cursor: pointer;

    font-size: .85rem;

}



.period-tab.active {

    background: linear-gradient(135deg, var(--accent), var(--accent-2));

    color: #fff;

    border-color: transparent;

}



.metrics-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: .75rem;

    margin-bottom: 1.5rem;

}



.metric-card {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 1rem 1.1rem;

    display: flex;

    flex-direction: column;

    gap: .25rem;

}



.metric-card-accent {

    border-color: var(--accent);

    background: linear-gradient(135deg, var(--accent-glow), transparent), var(--surface);

}



.metric-label {

    color: var(--muted);

    font-size: .8rem;

    text-transform: uppercase;

    letter-spacing: .05em;

}



.metric-value {

    font-size: 1.7rem;

    line-height: 1.1;

}



.metric-value small {

    font-size: .9rem;

    color: var(--muted);

    font-weight: 500;

}



.metric-foot { color: var(--muted); font-size: .8rem; }



.metrics-section { margin-bottom: 1.75rem; }

.metrics-section h2 {

    font-size: 1.05rem;

    margin: 0 0 .75rem;

    color: var(--text);

}



.bar {

    width: 100%;

    height: 8px;

    border-radius: 999px;

    background: var(--border);

    overflow: hidden;

}



.bar > span {

    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--accent, #6366f1);

    transition: width .3s ease;

}



.category-grid {

    display: grid;

    gap: .65rem;

}



.category-row {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: .85rem 1rem;

    display: flex;

    flex-direction: column;

    gap: .4rem;

}



.category-row-head {

    display: flex;

    align-items: center;

    gap: .5rem;

}



.category-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--accent, #6366f1);

}



.category-rate {

    margin-left: auto;

    font-weight: 600;

    color: var(--text);

}



.task-stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

    gap: .75rem;

}



.task-stat-card {

    background: var(--surface);

    border: 1px solid var(--border);

    border-left: 4px solid var(--accent, #6366f1);

    border-radius: 12px;

    padding: .85rem 1rem;

    display: flex;

    flex-direction: column;

    gap: .55rem;

}



.task-stat-head {

    display: flex;

    align-items: flex-start;

    gap: .75rem;

}



.task-stat-head > div { min-width: 0; }



.task-stat-title {

    display: block;

    line-height: 1.25;

    word-break: break-word;

}



.task-stat-rate {

    margin-left: auto;

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--text);

    flex-shrink: 0;

}



.task-stat-foot {

    display: flex;

    justify-content: space-between;

    color: var(--muted);

    font-size: .85rem;

}



.streak { font-weight: 600; }



.last7 {

    display: flex;

    gap: .25rem;

}



.last7 .dot {

    flex: 1;

    height: 18px;

    border-radius: 4px;

    background: var(--border);

}



.last7 .dot.done { background: var(--success); }

.last7 .dot.pending { background: rgba(239, 68, 68, .55); }

.last7 .dot.off { background: #1e293b; opacity: .35; }



.empty-state {

    background: var(--surface);

    border: 1px dashed var(--border);

    border-radius: var(--radius);

    padding: 2rem 1rem;

    text-align: center;

}



.theme-picker {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));

    gap: .65rem;

}



.theme-option {

    display: flex;

    flex-direction: column;

    gap: .45rem;

    padding: .65rem;

    border: 2px solid var(--border);

    border-radius: 12px;

    background: var(--surface);

    color: var(--text);

    cursor: pointer;

    text-align: left;

}



.theme-option.selected {

    border-color: var(--accent);

    box-shadow: 0 0 0 1px var(--accent-glow);

}



.theme-name {

    font-size: .85rem;

    font-weight: 600;

}



.theme-swatches {

    display: flex;

    height: 1.1rem;

    border-radius: 6px;

    overflow: hidden;

}



.theme-swatches span {

    flex: 1;

}



.mapa-intro {

    color: rgba(255, 255, 255, 0.85);

}



.onboarding-panel .proposal-card {

    background: rgba(0, 0, 0, 0.2);

    border-color: rgba(255, 255, 255, 0.28);

}



.onboarding-panel .proposal-card h3 {

    color: #ffffff;

}



.onboarding-panel .proposal-meta {

    color: rgba(255, 255, 255, 0.92) !important;

}



.onboarding-panel {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 1.25rem;

    margin-bottom: 1.5rem;

}



.onboarding-panel .subtitle,

.onboarding-panel .text-muted,

.onboarding-panel .preview-hint,

.onboarding-panel .preview-day-label,

.onboarding-panel .field label,

.onboarding-panel .field-compact label,

.onboarding-panel .field-grow label,

.onboarding-panel .proposal-card p,

.onboarding-panel .proposal-areas,

.onboarding-panel .btn-link-back {

    color: rgba(255, 255, 255, 0.82);

}



.onboarding-panel .btn-link-back:hover {

    color: #ffffff;

}



.onboarding-panel .field input,

.onboarding-panel .field select,

.onboarding-panel .field-compact input,

.onboarding-panel .field-grow input {

    background: rgba(0, 0, 0, 0.32);

    border: 1px solid rgba(255, 255, 255, 0.38);

    color: #ffffff;

}



.onboarding-panel .field input::placeholder,

.onboarding-panel .field-compact input::placeholder,

.onboarding-panel .field-grow input::placeholder {

    color: rgba(255, 255, 255, 0.58);

    opacity: 1;

}



.onboarding-panel .field input:focus,

.onboarding-panel .field select:focus,

.onboarding-panel .field-compact input:focus,

.onboarding-panel .field-grow input:focus {

    outline: none;

    border-color: var(--accent);

    box-shadow: 0 0 0 2px var(--accent-glow);

}



.onboarding-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));

    gap: .75rem;

}



.day-picker {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem;

}



.day-chip {

    display: inline-flex;

    align-items: center;

    gap: .35rem;

    padding: .4rem .65rem;

    border: 1px solid var(--border);

    border-radius: 999px;

    cursor: pointer;

    font-size: .85rem;

}



.day-chip input { accent-color: var(--accent); }



.proposal-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

    gap: .75rem;

    margin: 1rem 0;

}



.proposal-card {

    text-align: left;

    background: var(--surface-2);

    border: 2px solid var(--border);

    border-radius: 12px;

    padding: 1rem;

    color: var(--text);

    cursor: pointer;

}



.proposal-card.selected {

    border-color: var(--accent);

    box-shadow: 0 0 0 1px var(--accent-glow);

}



.proposal-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; }

.proposal-card p { margin: 0 0 .5rem; color: var(--muted); font-size: .9rem; }

.proposal-meta { color: var(--text) !important; }

.proposal-areas {

    margin: .5rem 0 0;

    padding-left: 1.1rem;

    color: var(--muted);

    font-size: .82rem;

}



.btn-link-back {

    background: none;

    border: none;

    color: var(--muted);

    cursor: pointer;

    padding: 0;

    margin-bottom: .75rem;

}



.preview-hint {

    margin: 0 0 1rem;

    font-size: .9rem;

}



.preview-day-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem;

    margin-bottom: 1rem;

}



.preview-day-tab {

    border: 1px solid rgba(255, 255, 255, 0.28);

    background: rgba(0, 0, 0, 0.2);

    color: #ffffff;

    border-radius: 999px;

    padding: .45rem .9rem;

    font-size: .85rem;

    cursor: pointer;

}



.preview-day-tab.active {

    border-color: var(--accent);

    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;

}



.preview-day-label {

    margin: 0 0 1rem;

    font-weight: 600;

    color: var(--muted);

}



.preview-block-list {

    display: flex;

    flex-direction: column;

    gap: .75rem;

    margin-bottom: 1.25rem;

}



.preview-block-card {

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 12px;

    padding: .85rem;

    background: rgba(0, 0, 0, 0.2);

}



.preview-block-head {

    display: flex;

    justify-content: space-between;

    gap: .5rem;

    margin-bottom: .65rem;

    font-size: .85rem;

}



.preview-area {

    color: var(--accent);

    font-weight: 700;

}



.preview-default {

    color: rgba(255, 255, 255, 0.78);

    text-align: right;

}



.preview-block-fields {

    display: grid;

    grid-template-columns: 5.5rem 5.5rem 1fr;

    gap: .5rem;

    align-items: end;

}



.field-compact label,

.field-grow label {

    font-size: .78rem;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.88);

}



.field-compact input,

.field-grow input {

    width: 100%;

    padding: .5rem .55rem;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.38);

    background: rgba(0, 0, 0, 0.32);

    color: #ffffff;

    font-size: .95rem;

    font-weight: 600;

}



.field-compact input::placeholder,

.field-grow input::placeholder {

    color: rgba(255, 255, 255, 0.58);

    opacity: 1;

    font-weight: 500;

}



@media (max-width: 600px) {

    .preview-block-fields {

        grid-template-columns: 1fr 1fr;

    }



    .field-grow {

        grid-column: 1 / -1;

    }

}



.block-header-readonly {

    cursor: default;

}



.pv-check.readonly {

    opacity: 0.95;

}



.timeline-readonly .block-card {

    pointer-events: none;

}



.history-calendar-panel {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 1rem;

    margin-bottom: 1.5rem;

}



.history-month-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: .5rem;

    margin-bottom: 1rem;

}



.history-month-nav h2 {

    margin: 0;

    font-size: 1.1rem;

    text-transform: capitalize;

}



.btn-month {

    width: 40px;

    height: 40px;

    border-radius: 10px;

    border: 1px solid var(--border);

    background: var(--surface-2);

    color: var(--text);

    font-size: 1.4rem;

    line-height: 1;

    cursor: pointer;

}



.btn-month:disabled {

    opacity: .35;

    cursor: not-allowed;

}



.history-weekdays,

.history-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: .35rem;

}



.history-weekdays {

    margin-bottom: .35rem;

}



.history-weekdays span {

    text-align: center;

    font-size: .75rem;

    color: var(--muted);

    font-weight: 600;

}



.cal-pad { display: block; }



.cal-day {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: .2rem;

    min-height: 48px;

    border-radius: 10px;

    border: 1px solid transparent;

    background: transparent;

    color: var(--text);

    cursor: pointer;

    padding: .25rem;

}



.cal-day:disabled {

    opacity: .35;

    cursor: default;

}



.cal-day.selected {

    border-color: var(--accent);

    background: rgba(255, 255, 255, 0.08);

}



.cal-day.today .cal-num {

    font-weight: 800;

    color: var(--accent);

}



.cal-num {

    font-size: .95rem;

    line-height: 1;

}



.cal-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--muted);

}



.cal-day.full .cal-dot,

.cal-dot.legend.full {

    background: var(--success);

}



.cal-day.partial .cal-dot,

.cal-dot.legend.partial {

    background: var(--accent);

}



.cal-day.none .cal-dot,

.cal-dot.legend.none {

    background: rgba(255, 255, 255, 0.35);

    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);

}



.cal-day.future .cal-dot {

    background: transparent;

    box-shadow: 0 0 0 2px var(--muted);

}



.history-legend {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem 1rem;

    margin: .85rem 0 0;

    font-size: .8rem;

}



.legend-item {

    display: inline-flex;

    align-items: center;

    gap: .35rem;

}



.history-day-detail h2 {

    margin: 0 0 1rem;

    font-size: 1.05rem;

    text-transform: capitalize;

}



.settings-map-panel h2 {

    margin: 0 0 .5rem;

    font-size: 1.1rem;

}



.settings-map-actions {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem;

    margin: 1rem 0 .5rem;

}



.btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: .65rem 1rem;

    border-radius: 10px;

    border: 1px solid rgba(255, 255, 255, 0.32);

    background: rgba(0, 0, 0, 0.22);

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    font-size: .9rem;

    cursor: pointer;

}



.map-warning {

    margin: 0;

    font-size: .82rem;

    color: rgba(255, 255, 255, 0.72);

}