/* —— Branding tokens (docs/branding.md §11 — PROVISIONAL) —— */
:root {
    --farmey-accent: #2d6a4f;
    --farmey-accent-hover: #245a42;
    --farmey-bg: #f4f6f8;
    --farmey-surface: #ffffff;
    --farmey-text: #1a1a1a;
    --farmey-text-secondary: #5c6b73;
    --farmey-border: #e8ecef;
    --farmey-radius: 12px;
    --farmey-shell-max-phone: 100%;
    --farmey-shell-max-tablet: 720px;
    --farmey-shell-max-desktop: 960px;
    --farmey-pad-phone: 1rem;
    --farmey-pad-tablet: 1.5rem;
    --farmey-pad-desktop: 2rem;
    --farmey-bottom-nav-height: 64px;
    --farmey-shell-max: var(--farmey-shell-max-phone);
    --farmey-shell-pad-x: var(--farmey-pad-phone);
}

@media (min-width: 640px) {
    :root {
        --farmey-shell-max: var(--farmey-shell-max-tablet);
        --farmey-shell-pad-x: var(--farmey-pad-tablet);
    }
}

@media (min-width: 1024px) {
    :root {
        --farmey-shell-max: var(--farmey-shell-max-desktop);
        --farmey-shell-pad-x: var(--farmey-pad-desktop);
    }
}

/* App-control base — no browser link look (branding §7) */
.app-control,
.btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--farmey-radius);
    color: var(--farmey-accent);
    font-weight: 600;
    font-size: inherit;
    text-decoration: none;
    cursor: pointer;
}

.app-control:hover,
.btn-link:hover {
    text-decoration: none;
    color: var(--farmey-accent-hover);
}

.app-control:visited,
.btn-link:visited {
    color: var(--farmey-accent);
}

.app-control:disabled,
.btn-link:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.home-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    /* Match tile gap below last row so clearance above bottom nav equals gap above */
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .home-tile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.home-tile {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid #e8ecef;
    cursor: pointer;
    font-weight: 600;
    color: #1a1a1a;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

/* Outbox tile count pill (DESIGN.md §3.6) — full removal from DOM when count is 0, never a hidden badge. */
.home-tile-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
}

.home-tile-warning {
    position: absolute;
    bottom: 0.45rem;
    left: 0.5rem;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #b91c1c;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.25rem;
    text-align: center;
}

.home-tile:hover:not([disabled]):not([aria-disabled="true"]) {
    border-color: #2d6a4f;
    box-shadow: 0 4px 16px rgba(45, 106, 79, 0.15);
    transform: translateY(-2px);
}

.home-tile--primary {
    background: #2d6a4f;
    border-color: #2d6a4f;
    color: #fff;
}

.home-tile--primary:hover:not([disabled]) {
    background: #245a42;
    border-color: #245a42;
    color: #fff;
}

.home-tile-icon {
    font-size: 2.75rem;
    line-height: 1;
}

.home-tile-label {
    text-align: center;
    font-size: 1rem;
    line-height: 1.25;
}

.home-tile-soon {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.home-tile[aria-disabled="true"] {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

.offline-banner {
    background: #fef3c7;
    color: #92400e;
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
}

.outbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #f59e0b;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.8rem;
    cursor: pointer;
}

.outbox-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
}

.farmey-app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.farmey-app-shell .app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}

.farmey-app-shell .app-content {
    flex: 1;
}

.lang-switcher {
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    border: 1px solid #e8ecef;
    background: #fff;
    font-size: 0.875rem;
    max-width: 100%;
}

.login-lang,
.page-lang {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.shell-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shell-header-actions .lang-switcher {
    max-width: 9rem;
}

.work-btn {
    min-height: 48px;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 600;
    cursor: pointer;
}

.work-btn--primary {
    background: #2d6a4f;
    color: #fff;
}

.work-btn--ghost {
    background: #fff;
    border-color: #d1d5db;
    color: #1a1a1a;
}

.work-btn--save {
    width: 100%;
    margin-top: 0;
}

.work-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.equipo-workers-intro {
    margin: 0 0 0.75rem;
}

.equipo-worker-carousel {
    margin-top: 0.25rem;
}

.equipo-worker-carousel__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0 0.15rem;
}

.equipo-worker-carousel__count {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2d6a4f;
}

.equipo-worker-carousel__hint {
    font-size: 0.78rem;
    color: #6b7280;
}

.equipo-worker-carousel__track {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.15rem 0 0.35rem;
}

.equipo-worker-carousel__track::-webkit-scrollbar {
    display: none;
}

.equipo-worker-card {
    flex: 0 0 88%;
    scroll-snap-align: center;
    margin-bottom: 0;
    border: 2px solid transparent;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.equipo-worker-card--solo {
    flex: 0 0 100%;
}

.equipo-worker-card--ready {
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 55%);
    border-color: #86efac;
    box-shadow: 0 4px 14px rgba(45, 106, 79, 0.12);
}

.equipo-worker-card--needs-plan {
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 55%);
    border-color: #fcd34d;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
}

.equipo-worker-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.equipo-worker-carousel__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: #cbd5e1;
    cursor: pointer;
}

.equipo-worker-carousel__dot.is-active {
    width: 1.35rem;
    background: #2d6a4f;
}

.equipo-worker-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.equipo-worker-card__identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 auto;
}

.equipo-worker-card__name {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.equipo-worker-card__facts {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 1rem;
    flex: 1 1 auto;
}

.equipo-worker-card__fact {
    display: grid;
    gap: 0.15rem;
}

.equipo-worker-card__fact dt {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
}

.equipo-worker-card__fact dd {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: #111827;
}

.equipo-worker-card__summary-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipo-worker-card__rate--missing {
    color: #92400e;
    font-weight: 600;
}

.equipo-worker-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
}

.equipo-worker-card.card {
    padding: 1rem;
}

.equipo-worker-card__header .badge {
    font-size: 0.75rem;
    background: #e8f5e9;
    color: #2d6a4f;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}

.work-crew-progress {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.work-crew-progress__quarters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
}

.work-crew-progress__q {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.35rem 0.2rem;
    border-radius: 8px;
    border: 1px solid #e8ecef;
    background: #fafafa;
    font-size: 0.72rem;
    line-height: 1.1;
}

.work-crew-progress__q--planned {
    border-color: #a5d6a7;
    background: #f1f8f4;
}

.work-crew-progress__q--pending {
    border-color: #f9a825;
    border-style: dashed;
    background: #fff8e1;
    font-weight: 600;
}

.work-crew-progress__q--accepted {
    border-color: #2e7d32;
    border-style: dashed;
    background: #e8f5e9;
    font-weight: 700;
}

.work-crew-progress__q--logged {
    border-color: #2e7d32;
    background: #e8f5e9;
    font-weight: 700;
}

.work-crew-progress__q-label {
    font-weight: 600;
    color: #444;
}

.work-crew-progress__q-state {
    font-size: 0.8rem;
}

.work-crew-progress__summary {
    margin: 0;
    font-size: 0.78rem;
    color: #666;
}

.work-crew-progress__empty {
    color: #888;
}

.work-plan-daypart-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.work-time-pyramid__quarters {
    margin-bottom: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 520px) {
    .work-plan-daypart-grid:not(.work-time-pyramid__quarters) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.work-plan-daypart-tile {
    padding: 0.65rem 0.5rem;
    border-radius: 10px;
    border: 2px solid #e8ecef;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}

.work-plan-daypart-tile--selected {
    border-color: #1565c0;
    border-style: solid;
    background: #e3f2fd;
    box-shadow: inset 0 0 0 1px #1565c0;
}

.work-plan-daypart-tile--selected.work-plan-daypart-tile--taken-pending {
    border-color: #1565c0;
    border-style: solid;
    background: color-mix(in srgb, #c9a227 18%, #e3f2fd);
}

.work-plan-daypart-tile--selected.work-plan-daypart-tile--taken-accepted {
    border-color: #1565c0;
    border-style: solid;
    background: color-mix(in srgb, var(--farmey-accent, #2d6a4f) 12%, #e3f2fd);
}

.work-plan-daypart-tile--selected.work-plan-daypart-tile--taken-partial {
    border-color: #1565c0;
    border-style: solid;
}

.work-plan-daypart-tile--taken {
    opacity: 0.65;
    cursor: not-allowed;
    border-style: dashed;
    background: color-mix(in srgb, var(--farmey-accent, #2d6a4f) 12%, transparent);
}

.work-plan-daypart-tile--taken-pending {
    border-style: dashed;
    border-color: #c9a227;
    background: color-mix(in srgb, #c9a227 14%, transparent);
}

.work-plan-daypart-tile--taken-accepted {
    border-style: dashed;
    border-color: var(--farmey-accent, #2d6a4f);
    background: color-mix(in srgb, var(--farmey-accent, #2d6a4f) 14%, transparent);
}

.work-plan-daypart-tile--taken-partial {
    border-style: dashed;
    border-color: #6b7280;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #c9a227 16%, transparent) 50%,
        color-mix(in srgb, var(--farmey-accent, #2d6a4f) 12%, transparent) 50%);
}

/* Bulk multi-select: already-logged daypart (will overwrite for some workers) */
.work-plan-daypart-tile--taken-overwrite {
    border-style: dashed;
    border-color: #c05621;
    background: color-mix(in srgb, #c05621 14%, transparent);
    opacity: 1;
    cursor: pointer;
}

.work-plan-daypart-tile--selected.work-plan-daypart-tile--taken-overwrite {
    border-color: #1565c0;
    border-style: solid;
    background: color-mix(in srgb, #c05621 22%, #e3f2fd);
}

.work-plan-daypart-tile__label {
    display: block;
}

.work-plan-daypart-tile__status {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0.9;
}

.work-log-daypart-legend {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    opacity: 0.85;
}

.work-day-pending,
.work-day-accepted {
    margin-bottom: 1rem;
}

.work-day-pending {
    border-left: 4px solid #c9a227;
}

.work-day-accepted {
    border-left: 4px solid var(--farmey-accent, #2d6a4f);
}

.work-log-day-summary {
    margin: 0 0 0.75rem;
}

.work-time-pyramid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.work-time-pyramid__shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.work-log-date-stepper {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.work-log-date-stepper__btn {
    flex: 0 0 3rem;
    min-width: 3rem;
    min-height: 3rem;
    padding: 0;
    border: 2px solid #cfd8dc;
    border-radius: 10px;
    background: #fff;
    color: #1b4332;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
}

.work-log-date-stepper__btn:hover:not(:disabled) {
    border-color: var(--farmey-accent, #2d6a4f);
    background: #f1f8f4;
}

.work-log-date-stepper__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.work-log-date-stepper__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
}

/* Farm context shell */
.farm-context-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem var(--farmey-shell-pad-x, 1rem);
    background: var(--farmey-surface, #fff);
    border-bottom: 1px solid var(--farmey-border, #e8ecef);
    position: sticky;
    top: 0;
    z-index: 100;
}

.farm-context-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.farm-context-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.farm-context-photo,
.farm-context-photo-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.farm-context-photo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f5e9;
    font-size: 1rem;
}

.farm-context-name-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.25rem 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    min-width: 0;
    text-align: left;
}

.farm-context-name {
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

.farm-context-role {
    font-size: 0.8rem;
    color: #5c6b73;
    white-space: nowrap;
}

.farm-context-chevron-btn {
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #2d6a4f;
}

.farm-context-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.finca-switcher-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 110;
}

.finca-switcher-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 120;
    background: #fff;
    border-bottom: 1px solid #e8ecef;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 60vh;
    overflow: auto;
    padding: 0.75rem 1rem 1rem;
}

.finca-switcher-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    max-height: 70vh;
    overflow: auto;
    padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
}

.finca-switcher-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #cfd8dc;
    margin: 0.25rem auto 0.75rem;
}

.finca-switcher-title {
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.finca-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.finca-picker-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 56px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.finca-picker-row.is-current {
    border-color: #2d6a4f;
    background: #f1f8f4;
}

.finca-picker-photo,
.finca-picker-photo-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.finca-picker-photo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f5e9;
}

.finca-picker-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.finca-picker-name {
    font-weight: 600;
}

.finca-picker-role {
    font-size: 0.8rem;
    color: #5c6b73;
}

.finca-picker-check {
    color: #2d6a4f;
    font-weight: 700;
}

.unsaved-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
}

.unsaved-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 210;
    width: min(92vw, 360px);
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.unsaved-dialog-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.unsaved-dialog-body {
    margin: 0 0 1rem;
    color: #5c6b73;
}

.unsaved-dialog-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: stretch;
    align-items: stretch;
}

/* Override global .btn-primary / .btn-outline { width: 100% } so Cancel | Save sit side by side, equal size. */
.unsaved-dialog-actions > .btn-primary,
.unsaved-dialog-actions > .btn-outline,
.unsaved-dialog-actions > .btn-secondary {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
}

.farm-shell-chrome {
    position: relative;
}

@media (max-width: 768px) {
    .finca-switcher-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        border-radius: 16px 16px 0 0;
        max-height: 70vh;
    }
}

.farmey-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100vh;
    min-height: 100dvh;
}

.farm-shell-chrome {
    position: sticky;
    top: 0;
    z-index: 90;
    flex-shrink: 0;
}

.farmey-shell__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Breathing room under farm context header → page title (covers pages with or without .app-shell). */
    padding-top: 1.25rem;
}

/* Notebook keeps tight paper chrome under the farm header. */
.farmey-shell__content:has(> .notebook-shell),
.farmey-shell__content:has(> .app-shell.notebook-shell) {
    padding-top: 0;
}

/* —— User bottom nav (Agenda · Home · More) —— */
.user-bottom-nav {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    height: var(--farmey-bottom-nav-height, 64px);
    background: var(--farmey-surface, #fff);
    border-top: 1px solid var(--farmey-border, #d9e2e6);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
    flex-shrink: 0;
}

.user-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--farmey-text-secondary, #5c6b73);
    text-decoration: none;
    font-size: 11px;
    min-width: 64px;
    min-height: 44px;
    justify-content: center;
}

.user-bottom-nav .nav-item:visited {
    color: var(--farmey-text-secondary, #5c6b73);
}

.user-bottom-nav .nav-item.active,
.user-bottom-nav .nav-item.active:visited {
    color: var(--farmey-accent, #2d6a4f);
    font-weight: 600;
}

.user-bottom-nav .nav-icon {
    font-size: 22px;
}

.user-bottom-nav__icon-wrap {
    position: relative;
    display: inline-flex;
}

.user-bottom-nav__badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--farmey-accent, #2d6a4f);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.app-shell.has-user-bottom-nav,
.farmey-shell.has-user-bottom-nav {
    /* bottom nav is sticky inside flex shell — no extra page padding */
}

/* —— More hub (Web + Mobile) —— */
.more-user-name {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--farmey-text, #1a1a1a);
}

/* Shared page heading — icon matches home-grid tile (see HomeSurfaceIcons). */
.page-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.page-heading__icon {
    margin-right: 0.35rem;
}

.more-page .page-header {
    margin-bottom: 1rem;
}

.more-section {
    margin-bottom: 1rem;
}

.more-section__title {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--farmey-text-secondary, #5c6b73);
}

.more-section--account {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.more-logout-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
}

.more-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.more-links a,
.more-links a.app-control {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--farmey-border, #e8ecef);
    border-radius: var(--farmey-radius, 12px);
    background: var(--farmey-surface, #fff);
    color: var(--farmey-accent, #2d6a4f);
    font-weight: 600;
    text-decoration: none;
}

.more-links a:visited,
.more-links a.app-control:visited {
    color: var(--farmey-accent, #2d6a4f);
}

.more-links a:hover,
.more-links a.app-control:hover {
    text-decoration: none;
    color: var(--farmey-accent-hover, #245a42);
}

.more-links__plan-row {
    gap: 0.5rem;
}

.more-page .lang-switcher,
.more-section .lang-switcher {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
    border: 1px solid var(--farmey-border, #e8ecef);
    border-radius: var(--farmey-radius, 12px);
    background: var(--farmey-surface, #fff);
}

/* —— Agenda —— */
.agenda-page {
    padding: 0 var(--farmey-shell-pad-x, 1rem) 12px;
    max-width: 100%;
    margin: 0;
}

.agenda-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.agenda-page__header h1 {
    margin: 0;
    font-size: 1.25rem;
}

/* —— Basket screen (#7, DESIGN.md §2.7) —— */
.basket-page {
    padding: 0 var(--farmey-shell-pad-x, 1rem) 12px;
    max-width: 100%;
    margin: 0;
}

.basket-page__header {
    margin-bottom: 8px;
}

.basket-page__header h1 {
    margin: 0;
    font-size: 1.25rem;
}

.basket-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 3rem 1rem;
    color: #4b5563;
}

.basket-empty__icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.basket-empty__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
}

.basket-empty__body {
    margin: 0;
    font-size: 0.9rem;
    max-width: 26rem;
}

.basket-line-items {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.basket-line-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #e8ecef;
    border-radius: 10px;
    background: #fff;
}

.basket-line-item__info {
    flex: 1 1 auto;
    min-width: 0;
}

.basket-line-item__label {
    font-size: 0.92rem;
    color: #111827;
}

.basket-line-item__price {
    flex: 0 0 auto;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.basket-line-item__free-badge {
    font-size: 0.75rem;
    background: #e8f5e9;
    color: #2d6a4f;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}

.basket-promo {
    margin: 0.5rem 0 0.75rem;
}

.basket-promo__row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.basket-promo__input {
    flex: 1 1 auto;
    min-width: 0;
}

.basket-promo__apply-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.basket-discount-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #2d6a4f;
    padding: 0.25rem 0;
}

.basket-discount-line__remove-btn {
    margin-left: 0.5rem;
    font-size: 0.8rem;
}

.basket-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.75rem 0;
    border-top: 1px solid #e8ecef;
    margin-bottom: 0.75rem;
}

.basket-checkout-btn {
    width: 100%;
    margin-bottom: 0.75rem;
}

.basket-continue-shopping {
    text-align: center;
}

/* —— Checkout screen (#8, DESIGN.md §2.8) —— */
.checkout-page__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 8px;
}

.checkout-page__header h1 {
    margin: 0;
    font-size: 1.25rem;
}

.checkout-back-link {
    font-size: 0.9rem;
    white-space: nowrap;
}

.checkout-back-link--disabled {
    color: #9aa5ad;
    cursor: not-allowed;
}

.checkout-notice {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    padding: 0.75rem;
    border-radius: 8px;
}

.checkout-confirming {
    color: #5c6b73;
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}

.checkout-card-heading {
    font-size: 0.95rem;
    margin: 0.5rem 0 0.5rem;
}

.checkout-payment-element {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid #e8ecef;
    border-radius: 10px;
    background: #fff;
    min-height: 2.5rem;
}

.checkout-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
}

.checkout-success__icon {
    font-size: 3rem;
}

.checkout-success__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
}

.checkout-success__summary {
    margin: 0 0 1rem;
    color: #4b5563;
    max-width: 28rem;
}

/* Owner subscription screen (DESIGN.md §2.4) + Farm "Plan" tab (§2.5 points 1-2) */

.subscription-page__header,
.plan-tab__header {
    margin-bottom: 0.75rem;
}

.subscription-status-card__label {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.subscription-status-card__sublabel {
    color: #5c6b73;
    margin: 0 0 0.75rem;
}

.subscription-status-card__note {
    color: #5c6b73;
    font-size: 0.85rem;
    margin: 0.75rem 0 0;
}

.subscription-status-card .btn-primary {
    margin-bottom: 0;
}

/* Billing period pricing picker (owner subscription screen redesign, 2026-08-01 human feedback) —
   `BillingPeriodPricingPicker.razor`. Selling composition: both options show a real price up
   front, the yearly option carries a "Best value" ribbon + computed savings badge instead of a
   "N months free" claim. Farmey green system only (no purple/cream), radii/spacing/shadow tokens
   from Docs/branding.md. */
.billing-picker {
    margin: 0.75rem 0;
}

.billing-picker__label {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #5c6b73;
}

.billing-picker__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.billing-picker__option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    min-height: 5.5rem;
    padding: 0.85rem 0.9rem;
    border: 2px solid #e8ecef;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.billing-picker__option:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.billing-picker__option:hover:not(:disabled) {
    border-color: #a5d6a7;
}

.billing-picker__option--selected,
.billing-picker__option--selected:hover:not(:disabled) {
    border-color: #2d6a4f;
    background: #f1f8f4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.billing-picker__option-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.billing-picker__option-name {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #5c6b73;
}

.billing-picker__option--selected .billing-picker__option-name {
    color: #2d6a4f;
}

.billing-picker__option-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.1;
}

.billing-picker__option-suffix {
    margin-left: 0.15rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #5c6b73;
}

.billing-picker__ribbon {
    flex: 0 0 auto;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #2d6a4f;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.billing-picker__savings {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #e8f5e9;
    color: #2d6a4f;
    font-size: 0.75rem;
    font-weight: 700;
}

.billing-picker__equivalent {
    font-size: 0.75rem;
    color: #5c6b73;
}

.billing-picker__note {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: #5c6b73;
}

@media (max-width: 360px) {
    .billing-picker__option-price {
        font-size: 1.2rem;
    }
}

/* Cancel-auto-renew ghost link — currently rendered disabled/no-op everywhere it appears
   (no CancelAutoRenewCommand exists yet, ARCHITECTURE-PLAN.md §5 step 26 / Slice E). */
.ghost-link {
    display: inline-block;
    margin-top: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #5c6b73;
    text-decoration: underline;
    cursor: not-allowed;
}

.plan-cap-list {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.plan-cap-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

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

.plan-cap-row__value {
    font-weight: 600;
}

/* Assigned (active + paused) count exceeds the effective cap — plans-and-promotions, 2026-08-01. */
.plan-cap-row__value--over {
    color: #c0392b;
}

.plan-cap-expiry {
    color: #5c6b73;
    font-size: 0.9rem;
    margin: 0.5rem 0 1rem;
}

/* Paused-resources section (Plan tab) — stacked card-ish rows, one "still over cap" note per group
   instead of repeated per row (redesign, 2026-08-01). */
.plan-paused-group {
    margin-bottom: 1rem;
}

.plan-paused-group__label {
    margin: 0 0 0.4rem;
    font-weight: 600;
    font-size: 0.92rem;
}

.plan-paused-row__note {
    margin: 0 0 0.5rem;
    color: #92400e;
    font-size: 0.82rem;
}

.plan-paused-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e8ecef;
    border-radius: 10px;
    overflow: hidden;
}

.plan-paused-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #eee;
}

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

.plan-paused-row__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.plan-paused-row__name {
    font-weight: 600;
    font-size: 0.95rem;
}

.plan-paused-row__since {
    font-size: 0.82rem;
    color: #5c6b73;
}

.plan-paused-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.plan-swap-picker {
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
}

.plan-swap-picker__title {
    margin: 0 0 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
}

.plan-swap-picker__empty {
    margin: 0;
    color: #5c6b73;
    font-size: 0.85rem;
}

.plan-increase-limits-picker {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e8ecef;
}

.plan-increase-limits-picker__title {
    margin: 0 0 0.5rem;
    font-weight: 600;
    font-size: 0.92rem;
}

.plan-backlog-card {
    margin-top: 0.75rem;
}

.plan-backlog-card__title {
    margin: 0 0 0.35rem;
    font-weight: 600;
    font-size: 1rem;
}

.plan-backlog-card__description {
    margin: 0 0 0.75rem;
    color: #5c6b73;
    font-size: 0.92rem;
}

.plan-backlog-applied-line {
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
    color: #2f6b4f;
}

.licenses-list {
    margin: 0.5rem 0 1rem;
}

.licenses-list__title {
    margin: 0 0 0.4rem;
    font-weight: 600;
    font-size: 0.92rem;
}

.licenses-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e8ecef;
    border-radius: 10px;
    overflow: hidden;
}

.licenses-list__row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #eee;
}

.licenses-list__row:last-child {
    border-bottom: none;
}

.licenses-list__icon {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1.4;
}

.licenses-list__info {
    flex: 1 1 auto;
    min-width: 0;
}

.licenses-list__line {
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
}

.licenses-list__source {
    margin: 0.1rem 0 0;
    color: #5c6b73;
    font-size: 0.82rem;
}

.licenses-list__expiry {
    flex: 0 0 auto;
    color: #5c6b73;
    font-size: 0.82rem;
    white-space: nowrap;
    text-align: right;
}

.licenses-list__expiry--soon {
    color: #92400e;
    font-weight: 600;
}

.plan-quantity-stepper {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    max-width: 12rem;
}

.plan-quantity-stepper__btn {
    flex: 0 0 3rem;
    min-width: 3rem;
    min-height: 3rem;
    padding: 0;
    border: 2px solid #cfd8dc;
    border-radius: 10px;
    background: #fff;
    color: #1b4332;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
}

.plan-quantity-stepper__btn:hover:not(:disabled) {
    border-color: var(--farmey-accent, #2d6a4f);
    background: #f1f8f4;
}

.plan-quantity-stepper__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.plan-quantity-stepper__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
}

.agenda-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.agenda-filter-chip {
    border: 1px solid #d9e2e6;
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    min-height: 36px;
    font-size: 0.85rem;
    cursor: pointer;
}

.agenda-filter-chip.is-active {
    background: #2f6b4f;
    border-color: #2f6b4f;
    color: #fff;
}

.agenda-filter-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.agenda-week-view {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agenda-week-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.agenda-week-nav__arrow {
    width: auto;
    min-width: 40px;
    min-height: 40px;
    padding: 6px 10px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.agenda-week-nav__range {
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: #2f3a40;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 380px) {
    .agenda-week-nav__arrow {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .agenda-week-nav__range {
        font-size: 0.8rem;
    }
}

.agenda-week-days {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agenda-empty {
    color: #5c6b73;
    text-align: center;
    padding: 16px 12px;
    font-size: 0.9rem;
}

.agenda-skeleton-card {
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(90deg, #eef2f4 25%, #f7f9fa 50%, #eef2f4 75%);
    background-size: 200% 100%;
    animation: agenda-shimmer 1.2s infinite;
}

@keyframes agenda-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.agenda-day-card {
    border: 1px solid #e6ecef;
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
}

.agenda-day-card--today {
    border-color: #b7d2c4;
    background: #f7fbf8;
}

.agenda-day-card--empty {
    padding-top: 6px;
    padding-bottom: 6px;
}

.agenda-day-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
}

.agenda-day-card__header h2 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1f2a30;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.agenda-day-card__today-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #e8f3ec;
    color: var(--farmey-accent, #2d6a4f);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.agenda-day-card__add {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.25rem 0.15rem;
    min-height: 32px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.agenda-day-card__list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.agenda-day-card__row {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: 6px;
    align-items: start;
}

.agenda-day-card__daypart {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7a82;
    padding-top: 8px;
    line-height: 1.2;
}

.agenda-item-chip {
    width: 100%;
    text-align: left;
    border: 1px solid #e6ecef;
    border-radius: 8px;
    background: #fff;
    padding: 7px 10px;
    min-height: 36px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.agenda-item-chip.is-completed {
    opacity: 0.65;
    text-decoration: line-through;
}

.agenda-item-chip.is-pending {
    border-style: dashed;
}

.agenda-item-chip__title {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.25;
}

.agenda-item-chip__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.agenda-item-chip__badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef2f4;
    color: #5c6b73;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-item-chip__badge--farm {
    background: #e8f3ec;
    color: #2f6b4f;
}

.agenda-item-chip__badge--change {
    background: #fff4e5;
    color: #9a6700;
}

.agenda-item-chip__badge--done {
    background: #e8f3ec;
    color: #2f6b4f;
}

.agenda-fab {
    position: fixed;
    /* Align to content column edge: phone fluid; tablet 720; desktop 960 */
    right: max(var(--farmey-pad-phone), calc(var(--farmey-pad-phone) + env(safe-area-inset-right, 0px)));
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--farmey-accent, #2d6a4f);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(47, 107, 79, 0.35);
    cursor: pointer;
    z-index: 90;
}

@media (min-width: 640px) {
    .agenda-fab {
        right: max(var(--farmey-pad-tablet), calc(50% - 360px + var(--farmey-pad-tablet)));
    }
}

@media (min-width: 1024px) {
    .agenda-fab {
        right: max(var(--farmey-pad-desktop), calc(50% - 480px + var(--farmey-pad-desktop)));
    }
}

.agenda-blocked-hint {
    margin: 8px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff4e5;
    color: #9a6700;
    font-size: 0.9rem;
}

.due-this-week-strip {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d9e2e6;
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    margin: 12px 0 16px;
    min-height: 48px;
    cursor: pointer;
    text-align: left;
}

.due-this-week-strip__title {
    font-weight: 600;
    flex: 1;
}

.due-this-week-strip__count {
    color: #2f6b4f;
    font-weight: 600;
}

.due-this-week-strip__chevron {
    font-size: 1.2rem;
    color: #5c6b73;
}

.agenda-add-wizard,
.agenda-item-detail {
    padding: 0;
    max-width: 100%;
    margin: 0;
}

.agenda-add-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 210;
    width: min(94vw, 480px);
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.25rem 1.25rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.agenda-add-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-bottom: 0.75rem;
}

.agenda-add-dialog__header .unsaved-dialog-title {
    margin: 0;
}

.agenda-add-dialog__close {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.25rem;
}

.agenda-add-dialog__body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.agenda-add-dialog .agenda-add-wizard__nav {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 0 0;
    margin-top: 16px;
    z-index: 5;
}

.agenda-add-wizard__nav,
.agenda-item-detail__actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    position: sticky;
    bottom: 0;
    background: #f4f6f8;
    padding: 12px 0;
    z-index: 5;
}

.agenda-add-dialog .agenda-add-wizard__nav {
    background: #fff;
}

/* Primary (Save / Next / Approve) on the right; outline secondary on the left when present. */
.agenda-add-wizard__nav > .btn-outline {
    margin-right: auto;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.agenda-add-wizard__nav > .btn-primary {
    flex: 0 1 auto;
    width: auto;
    min-width: 7rem;
    margin: 0;
}

.agenda-item-detail__actions > .btn-primary,
.agenda-item-detail__actions > .btn-outline {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.agenda-item-detail__meta,
.agenda-item-detail__status {
    color: #5c6b73;
}

.agenda-item-detail__hint {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #5c6b73;
}

.agenda-item-detail__farm-fields {
    margin: 12px 0 0;
    display: grid;
    gap: 10px;
}

.agenda-item-detail__field {
    display: grid;
    gap: 2px;
}

.agenda-item-detail__field dt {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5c6b73;
}

.agenda-item-detail__field dd {
    margin: 0;
    color: #1f2a30;
}

.agenda-request-change {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agenda-request-change textarea {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid #d9e2e6;
    border-radius: 8px;
    min-height: 44px;
    width: 100%;
}

/* —— Read cache (mobile offline read cache) —— */
.cache-stale-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid #f59e0b;
    border-radius: 999px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.cache-stale-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}

.cache-stale-badge__time {
    color: #92400e;
    opacity: 0.85;
    font-weight: 500;
}

.cache-pending-outbox-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #93c5fd;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.75rem;
    font-weight: 500;
}

.cache-pending-outbox-hint__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
}

.cache-offline-banner {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 12px;
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.cache-offline-banner--never-synced {
    background: #fef3c7;
    border-color: #f59e0b;
}

.pre-expiry-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
}

.pre-expiry-banner__body {
    flex: 1 1 auto;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #92400e;
    cursor: pointer;
}

.pre-expiry-banner__dismiss {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 4px 6px;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: #92400e;
    cursor: pointer;
}

.cache-never-synced-empty {
    text-align: center;
    padding: 32px 16px;
    color: #5c6b73;
}

.cache-never-synced-empty__title {
    margin: 0 0 6px;
    font-weight: 700;
    color: #1a1a1a;
}

.cache-never-synced-empty__body {
    margin: 0;
    font-size: 0.9rem;
}

/* Saldos (wallet ledger) — shared between Farmey.Web and Farmey.Mobile via Components/Wallet/*.razor */
.saldos-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.saldos-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 56px;
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    background: #fff;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.saldos-row:hover {
    border-color: #2d6a4f;
    box-shadow: 0 2px 10px rgba(45, 106, 79, .1);
}

.saldos-row__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    background: #e8f5e9;
    color: #2d6a4f;
}

.saldos-row__avatar--debe {
    background: #fef3c7;
    color: #92400e;
}

/* UserAvatar (user-profile-avatar) — photo fills the existing wrapper circle; silhouette inherits the
   wrapper's tint via currentColor. Wrapper classes (saldos-row__avatar, finca-picker-photo, etc.) keep
   their own size/ring/tint — this only styles the glyph inside. */
.user-avatar-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-avatar-silhouette {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* UserPhotoCropModal (user-profile-avatar, DESIGN.md §5) — square drag-to-pan/zoom viewport. */
.photo-crop-viewport {
    width: 260px;
    height: 260px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #111827;
    touch-action: none;
    cursor: grab;
    position: relative;
}

.photo-crop-viewport:active {
    cursor: grabbing;
}

.photo-crop-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    pointer-events: none;
    user-select: none;
}

.photo-crop-zoom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
}

.photo-crop-zoom-slider {
    width: 100%;
    max-width: 260px;
}

/* Profile edit screen (/profile, DESIGN.md §4.1) */
.profile-photo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.profile-photo-preview {
    width: 96px;
    height: 96px;
}

.profile-photo-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.profile-field-counter {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: #6b7280;
}

/* More/account page profile header row (DESIGN.md §4.2) */
.more-section--profile {
    padding: 0;
}

.more-profile-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 1rem;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.more-profile-row__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #e8f5e9;
    color: #2d6a4f;
}

.more-profile-row__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.more-profile-row__chevron {
    flex-shrink: 0;
    color: #6b7280;
}

.saldos-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saldos-row__chevron {
    flex-shrink: 0;
    font-size: 1.3rem;
    line-height: 1;
    color: #9aa5ab;
}

.saldos-balance-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.saldos-balance-chip--positive {
    background: #e8f5e9;
    color: #2d6a4f;
}

.saldos-balance-chip--zero {
    background: #f1f3f5;
    color: #4b5563;
}

.saldos-balance-chip--debe {
    background: #fef3c7;
    color: #92400e;
}

.saldos-balance-hero {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border-radius: 16px;
}

.saldos-balance-hero--positive {
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 60%);
    border: 1px solid #86efac;
}

.saldos-balance-hero--debe {
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%);
    border: 1px solid #fcd34d;
}

.saldos-balance-hero--zero {
    background: linear-gradient(135deg, #f8fafb 0%, #ffffff 60%);
    border: 1px solid #e8ecef;
}

.saldos-balance-label {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.saldos-balance-big {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
    color: #2d6a4f;
    letter-spacing: -0.01em;
}

.saldos-balance-big--debe {
    color: #92400e;
}

.saldos-balance-big--zero {
    color: #4b5563;
}

.saldos-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.saldos-actions__primary {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /* Standalone CTA row (Finances hub/entries) — match branding section gap below buttons */
    margin-bottom: 1.5rem;
}

.saldos-actions .saldos-actions__primary {
    /* Parent .saldos-actions already owns bottom spacing */
    margin-bottom: 0;
}

.saldos-actions__tertiary {
    align-self: center;
    min-height: 44px;
    padding: 0.4rem 1rem;
}

@media (min-width: 560px) {
    .saldos-actions__primary {
        flex-direction: row;
    }

    .saldos-actions__primary .btn-primary,
    .saldos-actions__primary .work-btn {
        width: auto;
        flex: 1 1 0;
    }
}

.saldos-inline-warning {
    background: #fef3c7;
    color: #92400e;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    margin: -0.35rem 0 1rem;
}

.saldos-correction-banner {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.saldos-context-balance {
    margin: -0.35rem 0 1rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.saldos-context-balance strong {
    font-weight: 700;
    color: #2d6a4f;
}

.saldos-context-balance strong.is-debe {
    color: #92400e;
}

.saldos-amount-input {
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.85rem 0.9rem;
}

.saldos-ledger-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.saldos-ledger-row {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto;
    align-items: start;
    gap: 0.6rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.75rem;
}

.saldos-ledger-row__icon {
    font-size: 1.1rem;
    line-height: 1.35;
    text-align: center;
}

.saldos-ledger-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.saldos-ledger-row__kind {
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.saldos-ledger-row__date {
    font-size: 0.78rem;
    color: #6b7280;
}

.saldos-ledger-row__context {
    grid-column: 2 / span 2;
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.saldos-ledger-row__amount {
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}

.saldos-ledger-row__amount--credit {
    color: #2d6a4f;
}

.saldos-ledger-row__amount--debit {
    color: #6b7280;
}

.saldos-ledger-row__note {
    grid-column: 2 / span 2;
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: #6b7280;
}

/* Resumen (period share/download) — shared between Farmey.Web and Farmey.Mobile via
   Components/Resumen/*.razor. Reuses the .card and saldos-* tokens above for chrome and only adds the
   pieces those tokens don't already cover (cycle chip, per-row amount grid, wide-screen breakpoint). */
.resumen-period-picker {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.resumen-period-picker__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.resumen-cycle-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #1a1a1a;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}

.resumen-cycle-chip--selected {
    border-color: var(--farmey-accent, #2d6a4f);
    background: var(--farmey-accent, #2d6a4f);
    color: #fff;
}

.resumen-cycle-chip:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.resumen-period-picker__range {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
}

.resumen-period-picker__change {
    align-self: flex-start;
    width: auto;
    min-height: 44px;
    padding: 0.5rem 1rem;
}

.resumen-period-picker__editor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.resumen-period-picker__date {
    min-height: 44px;
    width: auto;
}

.resumen-period-picker__editor-sep {
    color: #6b7280;
}

/* Resumen worker rows — same density as .saldos-row (not .card padding/margins). */
.card.resumen-worker-row,
.resumen-worker-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.85rem;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}

.resumen-worker-row--collapsed {
    gap: 0;
}

.resumen-worker-row--expanded {
    padding-bottom: 0.75rem;
}

.resumen-worker-row__toggle {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.resumen-worker-row__toggle:focus-visible {
    outline: 2px solid var(--farmey-accent, #2d6a4f);
    outline-offset: 2px;
    border-radius: 0.35rem;
}

.resumen-worker-row__toggle .saldos-row__avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.8rem;
}

.resumen-worker-row__name-block {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.resumen-worker-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 1rem;
    color: #1a1a1a;
}

.resumen-worker-row--paused {
    opacity: 0.78;
}

.saldos-row--seat-paused {
    opacity: 0.78;
}

.saldos-row--seat-paused:disabled {
    cursor: not-allowed;
}

.resumen-worker-row__chevron {
    flex: 0 0 auto;
    width: 1.1rem;
    text-align: center;
    color: #9aa5ab;
    font-size: 1.25rem;
    line-height: 1;
}

.resumen-worker-row__details {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.resumen-worker-row__amounts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    font-size: 0.9rem;
    color: #374151;
}

.resumen-worker-row__amount {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.resumen-worker-row__amount-label {
    display: block;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.2;
}

.resumen-worker-row__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.15rem;
    border-top: 1px solid #eef0f2;
}

.resumen-worker-row__share {
    width: auto;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.5rem 1rem;
}

.resumen-worker-row__error {
    margin: 0;
}

.resumen-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Tighter than default .saldos-list when hosting resumen rows. */
.saldos-list:has(> .resumen-worker-row) {
    gap: 0.4rem;
}

.resumen-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.resumen-actions .btn-outline {
    width: auto;
    min-height: 44px;
    padding: 0.5rem 1rem;
}

.saldos-ledger-row__pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    color: #92400e;
    background: #fef3c7;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* Wallet correction (Abono/Cargo) toggle — LedgerCorrectionDirectionToggle, self-contained so it
   doesn't collide with the generic Web-only .segment-row/.segment-btn classes used elsewhere. */
.wallet-correction-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wallet-correction-toggle__option {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid #d0d7de;
    border-radius: 999px;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
}

.wallet-correction-toggle__option--active {
    border-color: #2d6a4f;
    background: #e8f5e9;
    color: #2d6a4f;
}

/* —— Bodega (farm-inventory-inputs) —— */
.bodega-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: #fff;
    border: 1px solid #e3eaed;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}

.bodega-item-row__name {
    flex: 1 1 auto;
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bodega-item-row__type {
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: #5c6b73;
    background: #f1f5f3;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.bodega-item-row__qty {
    flex: 0 0 auto;
    font-weight: 600;
    color: #2f6b4f;
    white-space: nowrap;
}

.bodega-item-row__chevron {
    flex: 0 0 auto;
    color: #aab5ba;
}

.bodega-empty-state {
    text-align: center;
    padding: 2rem 1rem;
}

.bodega-empty-state__icon {
    font-size: 2.4rem;
    margin: 0 0 0.5rem;
}

.bodega-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
}

.bodega-sheet {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 210;
    width: min(92vw, 420px);
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.bodega-movement-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #eef2f4;
}

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

.bodega-movement-row__delta--positive {
    color: #2f6b4f;
    font-weight: 600;
}

.bodega-movement-row__delta--negative {
    color: #b3261e;
    font-weight: 600;
}

.bodega-movement-row__meta {
    font-size: 0.8rem;
    color: #5c6b73;
}

.bodega-deduct-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.bodega-deduct-row .input {
    margin-bottom: 0;
}

.bodega-deduct-row__qty {
    max-width: 90px;
}

.bodega-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.bodega-item-actions > .btn-primary,
.bodega-item-actions > .btn-outline {
    flex: 1 1 calc(50% - 0.5rem);
    width: auto;
    min-width: 7.5rem;
    margin: 0;
}

.bodega-deduct-row__warning {
    color: #9a6700;
    font-size: 0.85rem;
    margin: 0.2rem 0 0.5rem;
}

.unit-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #eef2f4;
}

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

.unit-list-row__actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.farm-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.farm-settings-tab {
    border: 1px solid #d8dee2;
    background: #fff;
    color: #333;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.farm-settings-tab.is-active {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}

.farm-photo-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: #d4edda;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.farm-settings-photo-preview {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
}

.settings-dl {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.settings-dl dt {
    font-weight: 600;
    color: #555;
}

.settings-dl dd {
    margin: 0;
}

/* Home hero — farm photo background + farm name; shell header carries Farmey logo + short name. */
.home-hero {
    text-align: center;
    padding: 2rem 1.25rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 0.5rem;
    position: relative;
}

/* Farm-card QR actions (qr-identity-scan-hub DESIGN.md §3.1/§3.8) — pinned corner of the hero card. */
.home-hero-qr-actions {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: flex;
    gap: 0.5rem;
}

.home-hero-qr-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #1f2937;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.home-hero-qr-btn:hover {
    background: #fff;
}

.home-hero--photo {
    background-size: cover;
    background-position: center;
    color: #fff;
    min-height: 200px;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}

.home-hero--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%);
}

.home-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

.home-hero-icon {
    font-size: 2.5rem;
    margin: 0 0 0.5rem;
}

.home-hero h1 {
    margin: 0 0 1rem;
    font-size: 1.75rem;
}

.home-hero--photo h1 {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.home-hero-cta {
    margin-top: 0.75rem;
}

/* Equipo — unified Add (type picker + phone) + Tab 2 roles/permissions (equipo-permissions-roles) */
.equipo-add-cta {
    width: 100%;
}

.add-member-type-picker__title {
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.add-member-type-picker__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.add-member-type-btn {
    flex: 1 1 7rem;
    min-width: 5.5rem;
}

/* Recommend-QR hint (qr-identity-scan-hub DESIGN.md §3.9) — muted caption under the type grid. */
.add-member-type-picker__hint {
    margin: 0.6rem 0 0;
    color: #6b7280;
    font-size: 0.85rem;
}

/* WorkerContextHub (qr-identity-scan-hub DESIGN.md §3.3) — "miniature Home" tile grid, same
   grid rhythm as .home-tile-grid but tiles can expand into an inline mini-form. */
.qr-hub__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.qr-hub-tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0;
}

@media (min-width: 640px) {
    .qr-hub-tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.qr-hub-tile {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid #e8ecef;
}

.qr-hub-tile--focused {
    border-color: #2d6a4f;
    box-shadow: 0 4px 16px rgba(45, 106, 79, 0.15);
}

.qr-hub-tile--blocked {
    opacity: 0.7;
}

.qr-hub-no-rate-bar {
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: #b00020;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: center;
}

.qr-hub .work-plan-daypart-mode-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.qr-hub .work-plan-daypart-mode-row label {
    margin: 0;
    flex: 1;
}

.qr-hub .work-plan-daypart-mode-toggle {
    margin-left: auto;
}

.qr-hub-tile__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qr-hub-tile__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.qr-hub-tile__label {
    font-weight: 600;
    flex: 1;
}

.qr-hub-tile__pill {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #fff4e0;
    color: #9a6400;
    font-size: 0.75rem;
    font-weight: 600;
}

.qr-hub__back-btn {
    width: 100%;
    margin: 1.25rem 0 1.5rem;
    /* Not sticky — sticky sat on top of tile content and looked broken on phone. */
}

.qr-hub-tile__btn--done {
    background: #e8f5ee !important;
    border: 1.5px solid #2d6a4f !important;
    color: #1b7a43 !important;
    font-weight: 700;
}

.qr-outbox-row__harvest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin: 0.35rem 0 0.15rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.qr-outbox-row__bodega {
    font-weight: 500;
    color: #3d5a45;
}

.qr-outbox-row__bodega-btn {
    padding: 0;
    font-size: 0.875rem;
}

.qr-outbox-bodega-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: min(50vh, 20rem);
    overflow-y: auto;
}

.qr-outbox-bodega-list__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
    border: 1px solid #c4a574;
    border-radius: 12px;
    background: #f7f0e4;
    color: #3d2e1a;
    padding: 0.85rem 1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.qr-outbox-bodega-list__item:hover:not(:disabled) {
    background: #efe2cc;
    border-color: #a8844a;
}

.qr-outbox-bodega-list__item:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.qr-outbox-bodega-list__item-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.qr-hub__identity {
    flex: 1 1 auto;
    min-width: 0;
}

.qr-hub__name-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
}

.qr-hub__name {
    margin: 0;
}

.qr-hub__saldo {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1b7a43;
    white-space: nowrap;
}

/* Informal green tarifa card — beat .card / mobile .card surface white. */
.qr-hub-paycard,
.qr-hub-paycard.card {
    position: relative;
    margin: 0.75rem 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid #9ccc9a;
    background: linear-gradient(180deg, #eaf6ec 0%, #f3faf4 100%);
    box-shadow: none;
}

.qr-hub-paycard__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    padding-right: 2.5rem;
}

.qr-hub-paycard__title {
    font-weight: 700;
    margin: 0;
    color: #1b5e20;
}

.qr-hub-paycard__edit {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 1;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #b7d7b5;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.qr-hub-paycard__summary {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1a3d24;
}

.qr-hub-paycard__hint {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
    color: #3d6b45;
}

.qr-hub-paycard__row {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.qr-hub-paycard__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.65rem;
}

.qr-outbox-action__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 10px;
    background: #eef3ef;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
}

.qr-outbox-strip--harvest {
    border-color: #d4b483;
    background: #f7f0e4;
    color: #5a3d14;
}

.qr-outbox-strip--harvest .qr-outbox-strip__cta {
    border-color: #a8844a;
    color: #5a3d14;
}

.qr-outbox-strip--harvest .qr-outbox-strip__cta:hover {
    background: #efe2cc;
}

.qr-outbox-action__icon-btn--danger {
    background: #fde8e8;
}

.qr-outbox-action__icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.qr-outbox-row__expand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.qr-outbox-row__chevron {
    font-size: 0.7rem;
    width: 1rem;
    color: #5a6b5e;
}

.qr-outbox-row__details {
    margin-top: 0.5rem;
    padding: 0.5rem 0 0.15rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.qr-outbox-action {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    /* Reach under the row edit/delete column (2×44px + gap), then inset a bit. */
    width: calc(100% + 5.85rem);
    max-width: calc(100% + 5.85rem);
}

.qr-outbox-action__main {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    min-width: 0;
    flex: 1;
}

.qr-outbox-action__icon {
    flex-shrink: 0;
}

.qr-outbox-action__title {
    font-weight: 600;
    font-size: 0.9rem;
}

.qr-outbox-action__note {
    font-size: 0.8rem;
    color: #5a6b5e;
    margin-top: 0.1rem;
}

.qr-outbox-clock__missing {
    color: #b91c1c;
    font-weight: 700;
    margin-left: 0.1rem;
}

.qr-outbox-action__btns {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-left: auto;
    /* Indent vs main-row icons so nested actions don't share the same right edge. */
    margin-right: 0.55rem;
}

/* Outbox list (qr-identity-scan-hub DESIGN.md §3.4/§3.5) */
.qr-outbox-strip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    border: 1px solid #b7e4c7;
    border-radius: 12px;
    background: #e8f5ee;
    padding: 12px 14px;
    margin: 12px 0 16px;
    font-weight: 600;
    color: #1b7a43;
    transition: background-color .15s, border-color .15s, color .15s;
}

/* Proactive over-limit warning (selected new people > available seats) — same red family as
   .error, shown before Publish is even tapped, not only after a WorkerLimitReached failure. */
.qr-outbox-strip--danger {
    border-color: #f5c2c0;
    background: #fdecea;
    color: #b3261e;
}

.qr-outbox-strip__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 32px;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1.5px solid #b3261e;
    background: #fff;
    color: #b3261e;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.qr-outbox-strip__cta:hover {
    background: #fff4f3;
}

.qr-license-short-banner {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.qr-license-short-banner__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.qr-outbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 5rem;
}

.qr-outbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.qr-outbox-row__check {
    width: 20px;
    height: 20px;
    margin-top: 0.4rem;
    flex-shrink: 0;
    accent-color: var(--farmey-accent, #2d6a4f);
}

.qr-outbox-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.qr-outbox-row__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.qr-outbox-row__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--farmey-text, #1a1a1a);
}

.qr-outbox-row__phone {
    margin: 0;
    font-size: 0.85rem;
    color: #5c6b73;
}

/* Staged action pills — visible chips (icon + count + ES label) replacing the old dull
   "+1 entrada" subtitle line, per human phone-testing feedback. */
.qr-outbox-row__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.qr-outbox-row__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #eef6f1;
    color: #2f6b4f;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.qr-outbox-row__pill-icon {
    font-size: 0.85rem;
    line-height: 1;
}

.qr-outbox-row__pill--empty {
    background: #f1f3f4;
    color: #6b7780;
    font-weight: 500;
}

.qr-outbox-row__meta {
    margin: 0;
    font-size: 0.72rem;
    color: #8a97a0;
}

.qr-outbox-row__actions {
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Edit/Delete as equal 44px icon buttons (touch target rule) instead of tiny .btn-link text. */
.qr-outbox-row__icon-btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #d9e2e6;
    border-radius: 10px;
    background: #fff;
    color: #2d6a4f;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.qr-outbox-row__icon-btn:hover:not(:disabled) {
    background: #f0faf4;
    border-color: #2d6a4f;
}

.qr-outbox-row__icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.qr-outbox-row__icon-btn--danger {
    color: #b00020;
}

.qr-outbox-row__icon-btn--danger:hover:not(:disabled) {
    background: #fdecea;
    border-color: #f5c2c0;
}

.qr-outbox-bulk-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.75rem 0;
    background: #f7f8f6;
}

/* Override each host's own .btn-outline / .btn-primary (different min-height/padding/margin
   per app.css / farmey-mobile.css) so Select All | Publish sit at equal height. */
.qr-outbox-bulk-bar > .btn-outline,
.qr-outbox-bulk-bar > .btn-primary {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 48px;
    margin: 0;
}

.add-member-phone-panel__breadcrumb {
    color: #555;
    font-size: 0.85rem;
    margin: 0 0 0.75rem;
}

.add-member-phone-panel__offline-hint {
    margin: 0 0 0.75rem;
}

.add-member-phone-panel__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.add-member-phone-panel .phone-row {
    display: flex;
    gap: 0.5rem;
}

.add-member-phone-panel .phone-code-input {
    flex: 0 0 4rem;
    min-width: 3.5rem;
    padding: 0.5rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 0.95rem;
}

.add-member-phone-panel .phone-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 0.95rem;
}

.equipo-member-subsection-title {
    margin: 0.75rem 0 0.25rem;
    font-weight: 600;
}

.equipo-role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.35rem 0 0.75rem;
}

.role-chip {
    border: 1px solid #d8dee2;
    background: #fff;
    color: #333;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.role-chip.is-active {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}

.role-chip:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.equipo-permissions-row {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
}

.equipo-permissions-row .equipo-member-toggle {
    flex: 1;
    min-width: 0;
}

.equipo-remove-icon-btn {
    flex: 0 0 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-self: center;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #b00020;
    border-radius: 8px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.equipo-remove-icon-btn:hover:not(:disabled) {
    background: #fdecea;
    border-color: #f5c2c0;
}

.equipo-remove-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.equipo-personalize-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0.35rem 0 0.5rem;
    text-align: left;
}

.equipo-personalize-toggle__label {
    font-weight: 600;
}

.equipo-personalize-toggle__hint {
    flex: 1;
    color: #666;
    font-size: 0.85rem;
}

.equipo-personalize-toggle__chevron {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: #444;
}

.equipo-personalize-toggle.is-open {
    border-color: #2e7d32;
}

.equipo-permissions-accordion {
    border: 1px solid #eef2f4;
    border-radius: 8px;
    margin-top: 0.25rem;
    padding: 0 0.65rem;
}

.equipo-permissions-accordion__section {
    border-bottom: 1px solid #eef2f4;
}

.equipo-permissions-accordion__section:last-child {
    border-bottom: none;
}

.equipo-permissions-accordion__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.5rem;
    align-items: center;
    column-gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0;
}

.equipo-permissions-accordion__name-cell {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.equipo-permissions-accordion__name-btn {
    display: flex;
    align-items: center;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-size: 0.9rem;
    color: inherit;
}

.equipo-permissions-accordion__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equipo-section-help-btn {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 1px solid #c5ccd1;
    background: #f7f9fa;
    color: #445055;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.equipo-section-help-btn:hover {
    border-color: #2e7d32;
    color: #2e7d32;
    background: #eef7ef;
}

.equipo-permissions-accordion__status-btn {
    display: grid;
    grid-template-columns: 1fr 1rem;
    align-items: center;
    column-gap: 0.35rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: right;
    font-size: 0.85rem;
    color: inherit;
}

.equipo-permissions-accordion__status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
}

.equipo-permissions-accordion__chevron {
    text-align: center;
    color: #666;
}

.equipo-section-help-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.equipo-section-help-dialog {
    width: min(22rem, 100%);
    background: #fff;
    border-radius: 12px;
    padding: 1rem 1.1rem 1.1rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.equipo-section-help-dialog__title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.equipo-section-help-dialog__body {
    margin: 0 0 1rem;
    color: #444;
    line-height: 1.4;
    font-size: 0.95rem;
}

.equipo-section-help-dialog__actions {
    display: flex;
    justify-content: flex-end;
}

.equipo-permissions-accordion__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 0 0.75rem 0.25rem;
}

.equipo-permissions-accordion__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Farm operation modes (farm-operation-modes) — mode picker, settings row, confirm dialog, Approvals toggle */
.farm-mode-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
}

.farm-mode-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
    text-align: left;
    width: 100%;
    min-height: 44px;
    padding: 0.9rem 1rem;
    border: 2px solid #d8dee2;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.farm-mode-card.is-active {
    border-color: #2d6a4f;
    background: #f3faf5;
}

.farm-mode-card:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.farm-mode-card--coming-soon {
    position: relative;
    opacity: 0.55;
    filter: grayscale(0.35);
    cursor: not-allowed;
}

.farm-mode-card__coming-soon,
.farm-approvals-row__coming-soon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.55);
    color: #c1121f;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.farm-approvals-row--coming-soon {
    position: relative;
    opacity: 0.7;
}

.farm-mode-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.farm-mode-card__label {
    font-weight: 700;
    font-size: 1rem;
}

.farm-mode-card__description {
    margin: 0;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.35;
}

.farm-mode-card__reason {
    margin: 0;
    color: #2d6a4f;
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.3;
}

.farm-mode-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid #eee;
}

.farm-mode-settings-row__label {
    font-weight: 600;
}

.farm-approvals-row {
    padding: 0.85rem 0;
}

.farm-approvals-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.farm-approvals-row__label {
    font-weight: 600;
}

.farm-approvals-row__explainer {
    margin: 0.35rem 0 0;
    color: #666;
    font-size: 0.9rem;
}

.farm-mode-confirm-note {
    margin-top: 0.5rem;
    color: #444;
}

/* Generic accessibility utility — visually hides text while keeping it announced by
   assistive tech (DESIGN.md §7, e.g. the Notebook tier-3 note's "Nota: " prefix). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Notebook diary (cuaderno-diario) — DESIGN.md §2-9, §8 rationale.
   Deliberately `notebook-*`, never `cuaderno-*`/`saldos-*` (naming decision, DESIGN §8).
   ============================================================ */

:root {
    --notebook-page-bg: #fffdf6;
    --notebook-rule-color: rgba(45, 106, 79, 0.16);
    /* One ruled band ≈ one entry row; tall enough for 44px tap + text between rules */
    --notebook-rule-height: 2.75rem;
    --notebook-margin-offset: 4.25rem;
    --notebook-margin-color: rgba(198, 40, 40, 0.35);
    --notebook-ink: #263238;
    --notebook-ink-muted: #5c6b73;
    --notebook-font-display: "Kalam", "Caveat", "Patrick Hand", cursive;
    --notebook-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --notebook-week-day-max-height: 9.5rem;
}

@media (min-width: 768px) {
    :root {
        --notebook-week-day-max-height: 12rem;
    }
}

.notebook-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ---- Header: day nav, Día/Semana toggle, share (DESIGN §3/§4) ---- */

.notebook-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: var(--notebook-font-display);
}

.notebook-page__header-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.notebook-page__heading {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--notebook-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notebook-day-step-btn {
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid #d0d7de;
    background: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.notebook-day-step-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.notebook-page__toggle {
    display: inline-flex;
    border: 1px solid #d0d7de;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.notebook-page__toggle-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.4rem 0.9rem;
    border: none;
    background: #fff;
    color: #444;
    font-weight: 600;
    font-family: var(--notebook-font-body);
    cursor: pointer;
}

.notebook-page__toggle-btn.is-active {
    background: #2d6a4f;
    color: #fff;
}

.notebook-share-btn {
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid #d0d7de;
    background: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.notebook-share-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---- Quick-add bar (DESIGN §3) ---- */

.notebook-page__quick-add {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.notebook-quick-add-btn {
    flex: 1 1 7rem;
    min-height: 48px;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}

.notebook-quick-add-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.notebook-quick-add-btn--coming-soon {
    color: #94a3b8;
    border-style: dashed;
    cursor: default;
}

/* ---- Día page (ruled paper) — the exact node captured for share (DESIGN §5) ---- */

.notebook-share-frame {
    background-color: var(--notebook-page-bg);
    border-radius: 12px;
    padding: 0.5rem 0.75rem 1rem;
}

.notebook-page {
    background-color: var(--notebook-page-bg);
    /* Rule sits at the BOTTOM of each band so ink floats in the gap above (real notebook). */
    background-image:
        linear-gradient(
            to bottom,
            transparent calc(var(--notebook-rule-height) - 1px),
            var(--notebook-rule-color) calc(var(--notebook-rule-height) - 1px)
        ),
        linear-gradient(90deg, transparent calc(var(--notebook-margin-offset) - 1px), var(--notebook-margin-color) calc(var(--notebook-margin-offset) - 1px), var(--notebook-margin-color) var(--notebook-margin-offset), transparent var(--notebook-margin-offset));
    background-size: 100% var(--notebook-rule-height), 100% 100%;
    background-position: 0 0, 0 0;
    font-family: var(--notebook-font-body);
    color: var(--notebook-ink);
    /* No vertical padding — keeps entry bands locked to the rule grid */
    padding: 0 0.75rem 0 calc(var(--notebook-margin-offset) + 0.5rem);
    border-radius: 8px;
    min-height: calc(6 * var(--notebook-rule-height));
}

.notebook-share-frame__watermark {
    margin: 0.5rem 0 0 calc(var(--notebook-margin-offset) + 0.5rem);
    font-size: 0.7rem;
    color: var(--notebook-ink-muted);
    opacity: 0.75;
}

/* ---- Entries (tier 1/2/3 — DESIGN §2) ---- */

.notebook-entry {
    position: relative;
    min-height: var(--notebook-rule-height);
    padding: 0;
    line-height: var(--notebook-rule-height);
}

.notebook-entry__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    width: 100%;
    min-height: var(--notebook-rule-height);
}

.notebook-entry__bullet {
    position: absolute;
    /* Content starts at margin-offset+0.5rem; red rule is at margin-offset.
       Place bullet clearly in the gutter left of the red rule. */
    left: -1.6rem;
    top: 0;
    width: 0.55rem;
    font-size: 0.85rem;
    color: var(--notebook-ink-muted);
    line-height: var(--notebook-rule-height);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

/* Per-entry clock removed (notebook-personal-scope diary polish) — do not re-add. */

.notebook-entry__icon {
    flex: 0 0 auto;
    font-size: 0.95rem;
}

.notebook-entry__headline {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--notebook-ink);
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notebook-entry--manual .notebook-entry__headline {
    font-weight: 500;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

.notebook-entry__amount {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--notebook-ink);
    white-space: nowrap;
}

.notebook-entry__facts {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.25rem;
    color: var(--notebook-ink-muted);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: var(--notebook-rule-height);
}

.notebook-entry__fact {
    min-height: var(--notebook-rule-height);
    display: flex;
    align-items: center;
}

.notebook-entry__fact::before {
    content: "· ";
}

.notebook-entry__note {
    margin: 0 0 0 1.25rem;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--notebook-ink-muted);
    min-height: var(--notebook-rule-height);
    line-height: var(--notebook-rule-height);
    /* Block (not flex) so long pick/manual comments wrap cleanly across ruled bands */
    display: block;
    word-break: break-word;
}

.notebook-entry--pending .notebook-entry__headline {
    text-decoration: underline dashed var(--notebook-ink-muted);
    text-underline-offset: 3px;
}

/* ---- Empty day (DESIGN §3) ---- */

.notebook-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--notebook-ink-muted);
}

.notebook-empty__message {
    font-family: var(--notebook-font-display);
    font-size: 1.1rem;
    margin: 0 0 0.75rem;
}

/* ---- Semana (DESIGN §4) — snap to rule bands like Día entries ---- */

.notebook-week-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0;
    min-height: var(--notebook-rule-height);
    line-height: var(--notebook-rule-height);
    color: var(--notebook-ink-muted);
    font-size: 0.9rem;
}

.notebook-week-day {
    position: relative;
    /* No extra border/padding — paper rules are the only horizontal lines */
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: none;
    text-align: left;
    width: 100%;
    display: block;
    color: inherit;
    font: inherit;
}

.notebook-week-day__header {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--notebook-rule-height);
    line-height: var(--notebook-rule-height);
    margin: 0;
    font-family: var(--notebook-font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--notebook-ink);
}

.notebook-week-day__bullet {
    position: absolute;
    /* Same gutter as .notebook-entry__bullet — left of the red margin rule */
    left: -1.6rem;
    top: 0;
    width: 0.55rem;
    font-size: 0.85rem;
    color: var(--notebook-ink-muted);
    line-height: var(--notebook-rule-height);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.notebook-week-day__list {
    max-height: var(--notebook-week-day-max-height);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.notebook-week-day__list-item {
    margin: 0;
    min-height: var(--notebook-rule-height);
    line-height: var(--notebook-rule-height);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--notebook-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notebook-week-day__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--notebook-rule-height);
    background: linear-gradient(to bottom, transparent, var(--notebook-page-bg));
    pointer-events: none;
}

.notebook-week-day__more {
    min-height: var(--notebook-rule-height);
    line-height: var(--notebook-rule-height);
    display: flex;
    align-items: center;
    color: var(--notebook-ink-muted);
    font-size: 0.85rem;
}

/* ---- Manual note composer sheet (DESIGN §9) ---- */

.notebook-composer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    /* Above .user-bottom-nav / .bottom-nav (z-index 100) so actions aren't covered */
    z-index: 110;
}

.notebook-composer-sheet {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -50%);
    z-index: 111;
    background: #fff;
    border-radius: 16px;
    padding: 1rem;
    width: min(32rem, calc(100% - 2rem));
    max-width: 32rem;
    max-height: min(85vh, 36rem);
    overflow: auto;
    margin: 0;
    box-sizing: border-box;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.notebook-composer-sheet__title {
    margin: 0 0 0.75rem;
    font-family: var(--notebook-font-display);
    font-size: 1.1rem;
}

.notebook-composer-sheet__date {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--notebook-ink-muted);
}

.notebook-composer-sheet__date input[type="date"] {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    font-family: var(--notebook-font-body);
    color: var(--notebook-ink);
    box-sizing: border-box;
}

.notebook-composer-sheet__textarea {
    width: 100%;
    min-height: 6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    font-family: var(--notebook-font-body);
    resize: vertical;
}

.notebook-composer-sheet__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* —— Finances (expense-income-docs) — "the farm's checkbook", plain cards, no cursive font (DESIGN §5) —— */
.finances-section-title {
    margin: 1.5rem 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
}

.finances-period-label {
    margin: 0 0 0.35rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.finances-balance-hero {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafb 0%, #ffffff 60%);
    border: 1px solid #e8ecef;
    margin-bottom: 1rem;
}

.finances-balance-hero__label {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.finances-balance-hero__amount {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.finances-stat-tiles-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.finances-stat-tile {
    flex: 1 1 0;
    text-align: center;
    padding: 0.9rem 0.75rem;
    border-radius: 12px;
    border: 1px solid #e3eaed;
    background: #fff;
}

.finances-stat-tile--income {
    border-color: #86efac;
    background: #ecfdf5;
}

.finances-stat-tile--expense {
    border-color: #fca5a5;
    background: #fef2f2;
}

.finances-stat-tile__label {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
}

.finances-stat-tile__amount {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
}

.finances-inbox-teaser-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    color: #92400e;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}

.finances-wallet-mirror-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.finances-wallet-mirror-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #eef2f4;
}

.finances-wallet-mirror-row:last-child {
    border-bottom: none;
}

.finances-wallet-mirror-row__name {
    flex: 1 1 auto;
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finances-wallet-mirror-row__kind {
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: #5c6b73;
    background: #f1f5f3;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.finances-wallet-mirror-row__amount {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
}

.finances-wallet-mirror-row__amount--credit {
    color: #2d6a4f;
}

.finances-wallet-mirror-row__amount--debit {
    color: #92400e;
}

.finances-entry-list {
    margin-bottom: 0.75rem;
}

.finances-entry-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    background: #fff;
    border: 1px solid #e3eaed;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}

.finances-entry-row__icon {
    flex: 0 0 auto;
    font-size: 1.25rem;
}

.finances-entry-row__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.finances-entry-row__note {
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finances-entry-row__date {
    font-size: 0.8rem;
    color: #6b7280;
}

.finances-entry-row__reverted-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    background: #f1f3f5;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    width: fit-content;
}

.finances-entry-row__amount {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
}

.finances-entry-row__amount--income {
    color: #2d6a4f;
}

.finances-entry-row__amount--expense {
    color: #92400e;
}

.finances-entry-row__amount--reverted {
    color: #6b7280;
    text-decoration: line-through;
}

.finances-period-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin: 0 0 0.75rem;
    min-height: 44px;
    overflow-x: auto;
}

.finances-period-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #1a1a1a;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.finances-period-chip--selected {
    border-color: #2d6a4f;
    background: #2d6a4f;
    color: #fff;
}

.finances-period-chip:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.finances-period-picker__range {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-height: 40px;
    min-width: 0;
    padding: 0.35rem 0.75rem;
    border: 1px solid #e8ecef;
    border-radius: 999px;
    background: #f8fafb;
    color: #374151;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.finances-period-picker__range:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.finances-period-picker__range-chevron {
    color: #6b7280;
    font-size: 0.85rem;
}

.finances-period-picker__date {
    flex: 1 1 0;
    min-width: 8.5rem;
    min-height: 40px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.finances-period-picker__sep {
    flex: 0 0 auto;
    color: #6b7280;
    font-weight: 600;
}

.finances-balance-hero__compare {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
}

.finances-saldos-mirror {
    margin: 0.5rem 0 1rem;
}

.finances-saldos-mirror__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    background: #f8fafb;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.finances-saldos-mirror__toggle.is-open {
    border-color: #c5d4cb;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.finances-saldos-mirror__toggle-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.finances-saldos-mirror__title {
    font-weight: 700;
    color: #1a1a1a;
}

.finances-saldos-mirror__summary {
    font-size: 0.9rem;
    color: #6b7280;
}

.finances-saldos-mirror__chevron {
    flex: 0 0 auto;
    color: #444;
    font-size: 1rem;
}

.finances-saldos-mirror__details {
    padding: 0.85rem 1rem 0.5rem;
    border: 1px solid #e8ecef;
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: #fff;
}

.finances-money-input {
    display: flex;
    align-items: stretch;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.finances-money-input__currency {
    display: flex;
    align-items: center;
    padding: 0 0.85rem;
    background: #f3f6f4;
    color: #2d6a4f;
    font-weight: 700;
    font-size: 0.95rem;
    border-right: 1px solid #d0d7de;
    letter-spacing: 0.02em;
}

.finances-money-input .saldos-amount-input {
    border: none;
    border-radius: 0;
    flex: 1;
    min-width: 0;
}

.finances-money-input .saldos-amount-input:focus {
    outline: none;
    box-shadow: none;
}

.finances-money-input:focus-within {
    border-color: #2d6a4f;
    box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.15);
}

.finances-bodega-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    background: #f8fafb;
}

.finances-bodega-toggle-row__copy {
    min-width: 0;
    flex: 1;
}

.finances-bodega-toggle-row__label {
    margin: 0;
    font-weight: 600;
    color: #1a1a1a;
}

.finances-bodega-toggle-row__hint {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.finances-switch {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #c5ccd3;
    cursor: pointer;
    transition: background 0.15s ease;
}

.finances-switch:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.finances-switch--on {
    background: #2d6a4f;
}

.finances-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.finances-switch--on .finances-switch__thumb {
    transform: translateX(20px);
}

.finances-bodega-panel {
    background: #f8fafb;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    padding: 0.9rem;
    margin-bottom: 0.75rem;
}

.finances-bodega-item-list {
    margin-bottom: 0.6rem;
}

.finances-bodega-item-row {
    margin-bottom: 0.4rem;
}

.finances-bodega-item-row--selected {
    border-color: #2d6a4f;
    background: #e8f5e9;
}

.finances-receipt-picker {
    margin: 0.75rem 0;
}

.finances-receipt-picker__status {
    font-size: 0.9rem;
    color: #6b7280;
}

.finances-receipt-picker__attached {
    margin-bottom: 0.4rem;
}

.finances-receipt-picker__input {
    width: 100%;
}

/* —— Bulk selection mode (payroll-fijo-and-task-extras DESIGN §13.2) —— */
.selection-mode-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.1rem 0.55rem;
}

.selection-mode-toolbar__segments {
    margin-left: auto;
}

.selection-mode-toolbar__exit {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #c5ced3;
    background: #fff;
    color: #1f2933;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.selection-mode-toolbar__exit:hover:not(:disabled) {
    border-color: #5c6b73;
    background: #f4f6f7;
}

.selection-mode-toolbar__exit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.selection-bottom-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    background: #fff;
    border-top: 1px solid #e8ecef;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .05);
    z-index: 20;
    flex-wrap: nowrap;
    margin-top: 0.5rem;
    border-radius: 12px;
}

.selection-bottom-bar > .btn-outline,
.selection-bottom-bar > .btn-primary,
.selection-bottom-bar > .btn-secondary {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}

.selection-bottom-bar__count {
    font-size: 0.85rem;
    color: #5c6b73;
    flex: 0 0 auto;
    align-self: center;
    margin-right: 0;
}

@media (max-width: 520px) {
    .selection-bottom-bar {
        flex-wrap: wrap;
    }

    .selection-bottom-bar > .btn-outline,
    .selection-bottom-bar > .btn-primary,
    .selection-bottom-bar > .btn-secondary {
        flex: 1 1 calc(50% - 0.3rem);
    }
}

/* Avatar ring-select — Tarifas / Saldos / Extra crew sheet (DESIGN §13.2) */
.roster-row--selectable {
    position: relative;
    width: 100%;
}

.roster-row--selectable .saldos-row__avatar,
.roster-row--selectable .roster-row__avatar {
    box-shadow: 0 0 0 2px rgba(92, 107, 115, 0.28);
    transition: box-shadow .15s;
}

.roster-row--selected .saldos-row__avatar,
.roster-row--selected .roster-row__avatar {
    box-shadow: 0 0 0 2px #2d6a4f;
}

/* Selected worker who already has a daypart logged today — distinct from clean selection */
.roster-row--selected-has-work {
    background: color-mix(in srgb, #c05621 10%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #c05621 35%, transparent);
}

.roster-row--selected-has-work .saldos-row__avatar,
.roster-row--selected-has-work .roster-row__avatar {
    box-shadow: 0 0 0 2px #c05621;
}

.roster-row--selected-has-work .roster-row__check-badge {
    background: #c05621;
}

.roster-row--selected-has-work .roster-row__trailing-check {
    color: #c05621;
}

.roster-row__avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.roster-row__check-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #2d6a4f;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fff;
}

.roster-row__trailing-check {
    color: #2d6a4f;
    font-weight: 700;
    font-size: 1.05rem;
    margin-left: 0.15rem;
}

.tarifas-row-wrap {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.tarifas-row-wrap > .tarifas-row,
.tarifas-row-wrap > .roster-row--selectable {
    flex: 1;
    min-width: 0;
}

.tarifas-row__pause-btn {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 1.15rem;
    cursor: pointer;
    color: #5c6b73;
}

.tarifas-row__pause-btn:hover:not(:disabled) {
    background: #f1f5f3;
    color: #2d6a4f;
}

.tarifas-row__pause-btn:disabled {
    opacity: 0.45;
    cursor: wait;
}

.saldos-row__name-block {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.saldos-row__paused-chip {
    font-size: 0.75rem;
    font-weight: 600;
    color: #5b3fae;
    white-space: nowrap;
}

.saldos-row--unavailable {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

button.saldos-row--unavailable {
    pointer-events: auto;
}

.crew-log-list__rate-chip {
    color: #9a3412;
    background: #fff7ed;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    width: fit-content;
}

.extra-crew-whole {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    margin: 0 0 0.75rem;
    border: 1.5px solid #d7e5dd;
    border-radius: 12px;
    background: #f4faf6;
    font-weight: 600;
    color: #1b4332;
    cursor: pointer;
    text-align: left;
}

.extra-crew-whole.is-active {
    border-color: #2d6a4f;
    background: #e8f5ee;
}

.extra-crew-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    max-height: min(50vh, 22rem);
    overflow-y: auto;
}

.extra-crew-person {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 52px;
    width: 100%;
    padding: 0.55rem 0.8rem;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.extra-crew-person__summary {
    font-size: 0.82rem;
    color: #5c6b73;
    font-weight: 400;
}

.equipo-worker-card--away {
    opacity: 0.72;
}

.equipo-worker-card--seat-paused {
    position: relative;
    opacity: 0.78;
}

.equipo-worker-card__seat-paused-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: rgba(120, 130, 140, 0.28);
    pointer-events: none;
}

.equipo-worker-card--seat-paused > :not(.equipo-worker-card__seat-paused-overlay) {
    position: relative;
    z-index: 2;
}

.equipo-worker-card__presence-chip--seat-paused {
    border-color: #b0b8c0;
    background: #eef1f4;
    color: #4a5560;
    cursor: default;
}

.tarifas-row--seat-paused {
    opacity: 0.72;
    cursor: not-allowed;
}

.tarifas-row--seat-paused:hover {
    background: inherit;
}

/* Presence as name prefix — not an actions-row button (Simple Team UX). */
.equipo-worker-card__presence-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border: 1px solid #c5d6cc;
    background: #f4faf6;
    color: #3d5a4c;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}

.equipo-worker-card__presence-chip:hover:not(:disabled) {
    border-color: #2d6a4f;
    color: #1b4332;
    background: #e8f5e9;
}

.equipo-worker-card__presence-chip--idle {
    border-color: #d5e0d9;
    background: transparent;
    color: #6a7d72;
    font-weight: 550;
}

.equipo-worker-card__presence-chip--away {
    border-color: #c4a484;
    background: #f7efe6;
    color: #7a4e2d;
}

.equipo-worker-card__presence-chip--away:hover:not(:disabled) {
    border-color: #a67c52;
    color: #5c3a1e;
    background: #f0e4d6;
}

.equipo-worker-card__presence-chip:disabled {
    opacity: 0.5;
    cursor: wait;
}

span.equipo-worker-card__presence-chip {
    cursor: default;
}

/* —— Tarifas tab (payroll-fijo-and-task-extras DESIGN §3) —— */
.tarifas-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 56px;
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    background: #fff;
    font-size: 1rem;
    text-align: left;
}

.tarifas-row.roster-row--selectable {
    grid-template-columns: 2.5rem 1fr auto auto;
}

.tarifas-row--button {
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.tarifas-row--button:hover {
    border-color: #2d6a4f;
    box-shadow: 0 2px 10px rgba(45, 106, 79, .1);
}

.tarifas-row__name {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.tarifas-row__rate {
    font-size: 0.85rem;
    font-weight: 400;
    color: #5c6b73;
}

.tarifas-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.tarifas-status-chip--active {
    background: #e8f5ee;
    color: #1b7a43;
}

.tarifas-status-chip--pending {
    background: #fff4e0;
    color: #9a6400;
}

.tarifas-status-chip--none {
    background: #f1f3f4;
    color: #5c6b73;
}

.tarifas-status-chip--paused {
    background: #ece9fe;
    color: #5b3fae;
}

/* —— Agreement Pause/Resume (WorkerRates.razor — DESIGN §3.5) —— */
.agreement-status-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid #e8ecef;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.agreement-status-card--paused {
    background: #fbf8ff;
}

.agreement-status-card__label {
    font-weight: 600;
    color: #1a1a1a;
}

.agreement-status-card__hint {
    font-size: 0.85rem;
    color: #5c6b73;
    font-weight: 400;
}

/* ---- Simple in-app notifications (simple-in-app-notifications, ARCHITECTURE-PLAN.md §5 step 10) ---- */

/* Canasta header chip — renders only when item count > 0 (DESIGN.md §4), inside .farm-context-actions. */
.canasta-header-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 32px;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--farmey-accent, #2d6a4f);
    background: #f1f8f4;
    color: var(--farmey-accent, #2d6a4f);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.canasta-header-chip:visited {
    color: var(--farmey-accent, #2d6a4f);
}

.notification-inbox {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.notification-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
}

.notification-empty-state__icon {
    font-size: 2.4rem;
    margin: 0 0 0.5rem;
}

.notification-empty-state__title {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: #1a1a1a;
}

.notification-empty-state__body {
    margin: 0 0 1rem;
    color: #5c6b73;
    font-size: 0.9rem;
}

.notification-item {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: 52px;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.notification-item--unread {
    border-left: 4px solid var(--farmey-accent, #2d6a4f);
    background: #f8fdfa;
}

.notification-item__icon {
    font-size: 1.4rem;
    line-height: 1;
}

.notification-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.notification-item__message {
    color: #1a1a1a;
    font-weight: 400;
    overflow-wrap: break-word;
}

.notification-item--unread .notification-item__message {
    font-weight: 700;
}

.notification-item__farm {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4a6572;
    overflow-wrap: break-word;
}

.notification-item__time {
    font-size: 0.78rem;
    color: #8a97a0;
}

.notification-item__tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.notification-item__unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--farmey-accent, #2d6a4f);
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.notification-preferences-section {
    margin-bottom: 1rem;
}

.notification-preferences-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0 0.6rem;
}

.notification-preferences-section__title {
    margin: 0;
    font-weight: 700;
    color: #1a1a1a;
}

.notification-preference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.55rem 0;
    border-top: 1px solid #eef1f3;
}

.notification-preference-row__label {
    color: #1a1a1a;
}

.notification-preference-row--master {
    padding-top: 0;
}

.notification-preference-row--master .notification-preference-row__label {
    font-weight: 700;
    font-size: 1rem;
}

.notification-preference-row__status {
    font-size: 0.78rem;
    color: #8a97a0;
}

/* WhatsApp OTP panel (whatsapp-auth-otp) */
.wa-otp-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wa-otp-panel__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
}

.wa-otp-panel__body {
    margin: 0;
    color: #5a6570;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.4;
}

.wa-otp-panel__phone {
    margin: 0;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #1a1a1a;
}

.wa-otp-panel__code {
    font-size: 1.5rem;
    letter-spacing: 0.35em;
    text-align: center;
    min-height: 48px;
}

.wa-otp-panel__resend {
    min-height: 44px;
}