@font-face {
    font-family: 'museo';
    src: url("fonts/Museo100-Regular.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'museo';
    src: url("fonts/Museo300-Regular.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'museo';
    src: url("fonts/Museo500-Regular.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'museo';
    src: url("fonts/Museo700-Regular.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'museo';
    src: url("fonts/Museo900-Regular.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
}


@font-face {
    font-family: 'museosans';
    src: url("fonts/MuseoSans-100.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'museosans';
    src: url("fonts/MuseoSans-300.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'museosans';
    src: url("fonts/MuseoSans-500.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'museosans';
    src: url("fonts/MuseoSans-700.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'museosans';
    src: url("fonts/MuseoSans-900.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
}


@font-face {
    font-family: 'museosans';
    src: url("fonts/MuseoSans-100Italic.otf") format("opentype");
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'museosans';
    src: url("fonts/MuseoSans-300Italic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'museosans';
    src: url("fonts/MuseoSans-700Italic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'museosans';
    src: url("fonts/MuseoSans-900Italic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
}

/* ============================================================
   DESIGN TOKENS — THEME V2
   ============================================================ */
:root {
    --color-primary:        #1a4d3e;
    --color-primary-dark:   #0f2e25;
    --color-primary-light:  #25644f;
    --color-primary-hover:  #1d5645;
    --color-accent:         #34d399;
    --color-accent-soft:    #d1fae5;

    --color-success:        #16a34a;
    --color-warning:        #d97706;
    --color-danger:         #dc2626;
    --color-info:           #2563eb;

    --color-sidebar-bg:     #162f26;
    --color-sidebar-border: rgba(255,255,255,0.07);
    --color-sidebar-text:   rgba(255,255,255,0.82);
    --color-sidebar-muted:  rgba(255,255,255,0.42);
    --color-sidebar-hover:  rgba(255,255,255,0.07);
    --color-sidebar-active: rgba(255,255,255,0.13);
    --sidebar-width:        220px;

    --color-bg:             #f0f2f5;
    --color-surface:        #ffffff;
    --color-border:         #e2e8f0;
    --color-border-light:   #f1f5f9;
    --color-text:           #111827;
    --color-text-secondary: #6b7280;
    --color-text-muted:     #9ca3af;

    --topbar-height:        3.5rem;
    --color-topbar-bg:      #ffffff;
    --color-topbar-border:  #e2e8f0;

    --radius-xs:  4px;
    --radius-sm:  6px;
    --radius:     8px;
    --radius-lg:  12px;
    --radius-xl:  16px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-lg: 0 20px 30px -8px rgba(0,0,0,0.12), 0 8px 12px -4px rgba(0,0,0,0.06);
    --accent-glow: 0 0 0 3px rgba(52,211,153,0.18);
    --sidebar-gradient: linear-gradient(160deg, #091a12 0%, #0f2319 35%, var(--color-sidebar-bg) 100%);

    --font: 'museosans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

html,body{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
body{
  font-family: var(--font);
  user-select: text;
}
/*.map-view{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/map-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}*/
/* COMMON */
.font-300{
    font-weight: 300;
    font-family: 'museo', sans-serif;
}
.font-500{
    font-weight: 500;
    font-family: 'museo', sans-serif;
}
.font-700{
    font-weight: 700;
    font-family: 'museo', sans-serif;
}
.font-900{
    font-weight: 900;
    font-family: 'museo', sans-serif;
}

/*.fsize-23{
  font-size: 2rem;
}
.fsize-9{
  font-size: 0.782rem;
}
.fsize-8{
  font-size: 0.0695rem;
}
.fsize-6{
  font-size: 0.52rem;
}
.fsize-5{
  font-size: 0.435rem;
}
.fsize-4{
  font-size: 0.347rem;
}*/
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: none;
    color: inherit !important;
    border: none;
}
select {
    background-color: transparent;
    color: inherit;
}
input[type="search"] {
    background-color: transparent;
    color: inherit;
}
.h7{
  font-size: 0.9rem;
}
.color-white{
  color: white;
}
.color-black{
  color: black;
}
.color-1{
    color: #f6c05f;
}
.color-2{
    color: #f1b994;
}
.color-3{
    color: #1f7669;
}
.color-4{
    color: #1b53a2;
}
.bgcolor-1{
    background-color: #f6c05f;
}
.bgcolor-2{
    background-color: #f1b994;
}
.bgcolor-3{
    background-color: #1f7669;
}
.bgcolor-4{
    background-color: #36a936;
}
.btn:hover.color-white{
  color: white;
  opacity: 0.9;
}
/* LOGIN */
.form-signin {
    background-color: white;
    border-radius: 12px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.12),
        0 24px 64px rgba(0, 0, 0, 0.35),
        0 48px 80px -16px rgba(0, 0, 0, 0.25);
}
.login-wp {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url(../img/test.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.login-wp a{
  font-size: 0.8rem;
}
/* CHARTS VIEW */
.graph-view,
.sensor-view,
.modal-distribution-selector-view,
.modal-moment-selector-view,
.modal-plot-work-assistant-selector-view{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background-color: #f2f2f2;
  background-color: rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
  /*margin: 1rem;
  border-radius: 5px;*/
  padding: 2.5rem;
  padding-right: 2rem;
  /*box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
}
.modal-distribution-selector-view,
.modal-plot-work-assistant-selector-view,
.modal-moment-selector-view{
  z-index: 100000;
}
.modal-plot-work-assistant-selector-view .modal-dialog {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-plot-work-assistant-selector-view .modal-content {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border: none;
}
.graph-view-wp,
.sensor-view-wp,
.modal-distribution-selector-view-wp,
.modal-moment-selector-view-wp{
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  /*padding-right: 1rem;*/
  overflow: auto;

}
.graph-view-close-icon-wp,
.sensor-view-close-icon-wp,
.modal-distribution-selector-view-close-icon-wp,
.modal-moment-selector-view-close-icon-wp{
  position: relative;
}
.graph-view-close-icon,
.sensor-view-close-icon,
.modal-distribution-selector-view-close-icon,
.modal-moment-selector-view-close-icon {
    position: absolute;
    right: -1.4rem;
    top: -2rem;
    width: 1.2rem;
    height: 1.2rem;
    /*background-image: url(../img/menu-close.png);*/
    background-image: url(../img/icons/back.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
.graph-view-header,
.sensor-view-header,
.modal-distribution-selector-view-header,
.modal-moment-selector-view-header{
  position: sticky;
  z-index: 1;
  top: 0rem;
  background-color: #ffffff;
  width: 100%;
  left: 0;
  right: 0;
  padding-right: 1.5rem;
  z-index: 1;
}
.graph-view-content,
.sensor-view-content,
.modal-distribution-selector-view-content,
.modal-moment-selector-view-content {
    padding-right: 1rem;
    min-width: 500px;
}
.modal-distribution-selector-view-content,
.modal-moment-selector-view-content{
  min-width: auto;
  padding-top: 1rem;
}
.graph-view-export-icon,
.sensor-view-export-icon{
  width: 1rem;
  cursor: pointer;
  padding-top: 0.4rem;
  color: #007565;
}
.sensor-view-export-icon{
    display: none;
}
.production-change-pieces-per-kg,
.production-change-target-median{
  width: 1rem;
  cursor: pointer;
  padding-left: 0.2rem;
  color: #007565;
}
.graph-view-content-selector .btn.focus, .btn:focus,
.sensor-view-content-selector .btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none;
}
.graph-view-content-selector ul.dropdown-menu.show li,
.sensor-view-content-selector ul.dropdown-menu.show li {
    text-align: right;
    margin-right: 1rem;
    margin-left: 1rem;
    color: black;
}
.graph-view-content-selector-date ul.dropdown-menu.show li,
.sensor-view-content-selector-date ul.dropdown-menu.show li {
    margin-right: 1rem;
    margin-left: 1rem;
    color: black;
}
.graph-view-content-selector ul.dropdown-menu.show li span,
.graph-view-content-selector-date ul.dropdown-menu.show li span,
.sensor-view-content-selector ul.dropdown-menu.show li span,
.sensor-view-content-selector-date ul.dropdown-menu.show li span{
    color: black;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}
.graph-view-content-selector ul.dropdown-menu.show li span:hover,
.graph-view-content-selector-date ul.dropdown-menu.show li span:hover,
.sensor-view-content-selector ul.dropdown-menu.show li span:hover,
.sensor-view-content-selector-date ul.dropdown-menu.show li span:hover {
    color: #007565;
}
.graph-view .table-responsive,
.sensor-view .table-responsive{
    margin-top: 2rem;
}
.table-responsive.caliber-table{
    margin-bottom: 2rem;
}
.graph-view table th,
.graph-view table td,
.sensor-view table th,
.sensor-view table td{
  vertical-align: middle;
  border: 2px solid #727272;
  font-weight: 900;
  text-align: center;
  color: rgba(0, 0, 0, 0.58);
  font-size: 0.75rem;
  padding: 0.4rem;
  font-weight: 700;
  color: #727272;
}
.graph-view .table-service-title th,
.sensor-view .table-service-title th{
  color:#007565;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
}
.graph-view .table-service-subtitle th,
.sensor-view .table-service-subtitle th{
  color:#000000;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.chart-wp {
    width: calc(50% - 2rem);
    margin: 2rem 1rem;
    /*margin-bottom: 6rem;*/
    /*height: 18rem;*/
    /*height: 33vh;*/
}
.chart-wp .canvas-wp{
  height: 33vh;
}
/* .chart-wp.with-resume { margin-bottom: 11rem; } */
.chart-wp .chart-resume-wp{
  display:none;
}
.chart-wp.with-resume .chart-resume-wp{
  display:block;
}
.chart-wp.full-width {
    width: calc(100% - 2rem);
    /*height: 45vh;*/
}
.chart-wp.full-width .canvas-wp{
  height: 45vh;
}
.chart-title {
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 900;
    color: #727272;
    color: black;
}
.chart-subtitle {
    width: 100%;
    text-align: center;
    font-weight: 900;
    color: #727272;
    color: black;
}
/* .chart-resume-wp { height: 6rem; } */
.graph-view .table-responsive table,
.sensor-view .table-responsive table{
  color: #727272;
}
div#sendor-view-date-range {
    width: auto !important;
    border: none !important;
    color: #25292d !important;
    text-transform: capitalize;
}
/* SCROLLBAR */
/*.graph-view-wp::-webkit-scrollbar {
  width: 5px;
}*/
/* scrollbar track */
/*.graph-view-wp::-webkit-scrollbar-track{
  background: transparent;
}*/
/* scrollbar handle */
/*.graph-view-wp::-webkit-scrollbar-thumb{
  border-radius: 1rem;
  background-color: #727272;
}*/

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
/* scrollbar track */
::-webkit-scrollbar-track{
  background: transparent;
}
/* scrollbar handle */
::-webkit-scrollbar-thumb{
  border-radius: 1rem;
  background-color: #007769;
}
/* MAIN MENU*/
.main-menu {
    position: absolute;
    left: 2rem;
    bottom: 0;
    background-color: white;
    border-radius: 10px 10px 0 0;
    width: 27rem;
    max-width: 27rem;
    z-index: 10000;
    transition: bottom .35s ease-in-out;
}
.main-menu[side="right"] {
    left: inherit;
    right: 2rem;
}
.main-menu.toggled{
  bottom: 0;
}

/* ============================================================
   MAIN MENU V2 — Left-side panel (overrides base .main-menu)
   The panel slides in from the left edge of the map.
   JS toggleMenu() toggles class .toggled and sets inline bottom
   — we neutralise bottom with !important and use translateX.
   ============================================================ */
.main-menu-v2 {
    top: 0;
    bottom: 0 !important;
    left: 0;
    right: auto;
    width: 25rem;
    max-width: calc(100vw - 5rem);
    height: 100%;
    border-radius: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow .32s ease;
    box-shadow: none;
    border: none;
    border-right: 1px solid var(--color-border);
    overflow: visible;
}
.main-menu-v2[side="right"] {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--color-border);
    transform: translateX(100%);
}
.main-menu-v2.toggled {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,0.07);
}
.main-menu-v2[side="right"].toggled {
    box-shadow: -4px 0 20px rgba(0,0,0,0.07);
}

/* Toggle tab — sits outside the panel, always reachable, vertically centred */
.main-menu-v2-toggle-tab {
    position: absolute;
    top: 50%;
    right: -32px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    background-color: #fff;
    border: 2px solid rgba(0,0,0,0.2);
    border-left: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 2px 1px 4px rgba(0,0,0,0.1);
    transition: background-color 0.15s;
}
.main-menu-v2-toggle-tab:hover {
    background-color: #f4f4f4;
}
.main-menu-v2-toggle-tab i {
    font-size: 0.7rem;
    color: #333;
    transition: transform 0.25s ease;
}
.main-menu-v2.toggled .main-menu-v2-toggle-tab i {
    transform: scaleX(-1);
}
.main-menu-v2[side="right"] .main-menu-v2-toggle-tab {
    right: auto;
    left: -32px;
    border-left: 2px solid rgba(0,0,0,0.2);
    border-right: none;
    border-radius: 4px 0 0 4px;
    box-shadow: -2px 1px 4px rgba(0,0,0,0.1);
}

/* Header — fixed at top of panel */
.main-menu-v2 .main-menu-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border);
}
.main-menu-v2 .main-menu-header-icon[action="toggle"] {
    display: none;
}

/* Body wrapper — sits inside the panel alongside the toggle-tab.
   overflow:hidden here creates the scroll context while the panel
   itself stays overflow:visible so the toggle-tab (right:-32px) isn't clipped. */
.main-menu-v2-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Actions row (compare button) — pinned at the bottom, never scrolls */
.main-menu-v2 .main-menu-content[content="actions"] {
    flex-shrink: 0;
}

/* Content — scrollable, fills remaining height */
.main-menu-v2 .main-menu-content-wp {
    flex: 1;
    min-height: 0; /* needed for overflow-y to work inside a flex column */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,117,101,0.25) transparent;
}
.main-menu-v2 .main-menu-content-wp::-webkit-scrollbar { width: 4px; }
.main-menu-v2 .main-menu-content-wp::-webkit-scrollbar-track { background: transparent; }
.main-menu-v2 .main-menu-content-wp::-webkit-scrollbar-thumb {
    background-color: rgba(0,117,101,0.25);
    border-radius: 4px;
}

/* ── Compare button at the bottom of the main panel ── */
.main-menu-v2 .main-menu-compare-btn {
    padding: 0.7rem 1.25rem;
    gap: 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font);
    color: #007565;
    border-top: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    user-select: none;
    flex-shrink: 0;
    justify-content: center;
    letter-spacing: 0.01em;
}
.main-menu-v2 .main-menu-compare-btn i {
    font-size: 0.75rem;
    opacity: 0.85;
}
.main-menu-v2 .main-menu-compare-btn:hover {
    background-color: rgba(0,117,101,0.07);
}
/* Active state: compare section is open */
.main-v2:has(.main-menu-v2[side="right"].toggled) .main-menu-v2[side="left"] .main-menu-compare-btn {
    background-color: rgba(0,117,101,0.1);
    color: #005a4e;
}
[data-theme="dark"] .main-menu-v2 .main-menu-compare-btn {
    color: #34d399;
    border-top-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .main-menu-v2 .main-menu-compare-btn:hover {
    background-color: rgba(52,211,153,0.08);
}
[data-theme="dark"] .main-v2:has(.main-menu-v2[side="right"].toggled) .main-menu-v2[side="left"] .main-menu-compare-btn {
    background-color: rgba(52,211,153,0.12);
}

/* ════════════════════════════════════════════════════════
   MAIN MENU V2 — design-system overrides
   Aligns typography, colours and card styles with the
   rest of the app (museosans font, CSS tokens, sidebar).
   Scoped to .main-menu-v2 so v1 panels are unaffected.
   ════════════════════════════════════════════════════════ */

/* Base font for the whole panel */
.main-menu-v2 {
    font-family: var(--font);
    color: var(--color-text);
}

/* Header */
.main-menu-v2 .main-menu-header {
    padding: 0.7rem 1.1rem;
    min-height: var(--topbar-height);
}
.main-menu-v2 .main-menu-header-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0;
}
.main-menu-v2 .main-menu-header-subtitle {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* Icon actions (expand, back…) */
.main-menu-v2 .main-menu-header-action {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    border-radius: var(--radius-xs);
    font-size: 0.72rem;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
}
.main-menu-v2 .main-menu-header-action:hover {
    background-color: rgba(0,0,0,0.06);
    color: var(--color-text);
}

/* ─ Section labels ("Parcelas disponibles", etc.) ─ */
.main-menu-v2 .main-menu-distribution-selector-title,
.main-menu-v2 .main-menu-date-selector-title,
.main-menu-v2 .main-menu-service-selector-title,
.main-menu-v2 .main-menu-style-selector-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

/* ─ Selector sections (distribution, date, service, style) ─ */
.main-menu-v2 .main-menu-distribution-selector,
.main-menu-v2 .main-menu-date-selector,
.main-menu-v2 .main-menu-service-selector-controls-wp,
.main-menu-v2 .main-menu-style-selector-controls-wp {
    padding: 0.85rem 1.1rem;
    background-color: var(--color-border-light);
}

/* ─ Distribution / date summary row ─ */
.main-menu-v2 .main-menu-distribution-view,
.main-menu-v2 .main-menu-date-view,
.main-menu-v2 .main-menu-service-view {
    color: var(--color-text);
}
.main-menu-v2 .main-menu-distribution-view-title,
.main-menu-v2 .main-menu-date-view-title,
.main-menu-v2 .main-menu-service-view-title {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* ─ Card items stay 1/3 of the space between the arrows ─ */
.main-menu-v2 .main-menu-distribution-selector-item,
.main-menu-v2 .main-menu-date-selector-item {
    width: 33.33%;
    flex-shrink: 0;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

/* ─ Parcel / date / service cards ─ */
.main-menu-v2 .main-menu-distribution-selector-item-content,
.main-menu-v2 .main-menu-date-selector-item-content,
.main-menu-v2 .main-menu-service-selector-item-content {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    padding: 0.65rem 0.4rem;
    font-size: 0.78rem;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.main-menu-v2 .main-menu-distribution-selector-item-content-name {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
}
.main-menu-v2 .main-menu-distribution-selector-item-content-area {
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* hover */
.main-menu-v2 .main-menu-distribution-selector-item:hover .main-menu-distribution-selector-item-content,
.main-menu-v2 .main-menu-date-selector-item:hover .main-menu-date-selector-item-content {
    border-color: #007565;
    background-color: rgba(0,117,101,0.05);
    color: #007565;
}
/* active/selected */
.main-menu-v2 .main-menu-distribution-selector-item.active .main-menu-distribution-selector-item-content,
.main-menu-v2 .main-menu-date-selector-item.active .main-menu-date-selector-item-content,
.main-menu-v2 .main-menu-date-selector-item-content:hover {
    background-color: #007565 !important;
    border-color: #007565 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,117,101,0.2);
}
.main-menu-v2 .main-menu-distribution-selector-item.active .main-menu-distribution-selector-item-content-area {
    color: rgba(255,255,255,0.75);
}

/* ─ Service selector (Vistas disponibles) — single row, items share space evenly ─ */
.main-menu-v2 .main-menu-service-selector-content {
    flex-wrap: nowrap;
    gap: 0.4rem;
    justify-content: space-between !important;
    overflow: visible;
}
.main-menu-v2 .main-menu-service-selector-item {
    margin-left: 0 !important;
    flex: 1 0 0;
    min-width: 0;
    text-align: center;
}

/* ─ Carousel: arrows flanking the card grid, hidden dots beneath ─ */
.main-menu-v2 .main-menu-paginator {
    /* dots hidden — kept in DOM for JS state tracking only */
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.main-menu-v2 .main-menu-carousel-btn {
    width: 1.6rem;
    align-self: stretch;    /* full height of the card row */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-secondary);
    font-size: 0.6rem;
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: background 0.12s, color 0.12s;
    user-select: none;
}
.main-menu-v2 .main-menu-carousel-btn:hover {
    background-color: rgba(0,0,0,0.05);
    color: var(--color-text);
}
.main-menu-v2 .main-menu-carousel-btn.disabled {
    opacity: 0.25;
    pointer-events: none;
}
[data-theme="dark"] .main-menu-v2 .main-menu-carousel-btn:hover {
    background-color: rgba(255,255,255,0.07);
    color: var(--color-text);
}

/* ─ Service selector (Vistas disponibles) — fix overflow ─ */
.main-menu-v2 .main-menu-service-selector-controls-wp {
    padding-bottom: 1rem;    /* extra room for 2-line labels */
}
.main-menu-v2 .main-menu-service-selector-item-content-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-border-light);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    transition: background-color 0.12s;
}
.main-menu-v2 .main-menu-service-selector-item-content-title {
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    transition: color 0.12s;
    margin-top: 0.3rem;
}
.main-menu-v2 .main-menu-service-selector-item:hover .main-menu-service-selector-item-content-icon,
.main-menu-v2 .main-menu-service-selector-item.active .main-menu-service-selector-item-content-icon {
    background-color: #007565;
    border-color: #007565;
}
.main-menu-v2 .main-menu-service-selector-item:hover .main-menu-service-selector-item-content-title,
.main-menu-v2 .main-menu-service-selector-item.active .main-menu-service-selector-item-content-title {
    color: #007565;
}
[data-theme="dark"] .main-menu-v2 .main-menu-service-selector-item-content-icon {
    background-color: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .main-menu-v2 .main-menu-service-selector-item-content-title {
    color: var(--color-text-muted);
}

/* ─ Paginator dots ─ */
.main-menu-v2 .main-menu-paginator-item {
    background-color: var(--color-border);
}
.main-menu-v2 .main-menu-paginator-item.active {
    background-color: #007565;
}

/* ─ Dark theme overrides ─ */
[data-theme="dark"] .main-menu-v2 .main-menu-header-action:hover {
    background-color: rgba(255,255,255,0.08);
    color: var(--color-text);
}
[data-theme="dark"] .main-menu-v2 .main-menu-distribution-selector,
[data-theme="dark"] .main-menu-v2 .main-menu-date-selector,
[data-theme="dark"] .main-menu-v2 .main-menu-service-selector-controls-wp,
[data-theme="dark"] .main-menu-v2 .main-menu-style-selector-controls-wp {
    background-color: rgba(0,0,0,0.14);
}
[data-theme="dark"] .main-menu-v2 .main-menu-distribution-selector-item-content,
[data-theme="dark"] .main-menu-v2 .main-menu-date-selector-item-content,
[data-theme="dark"] .main-menu-v2 .main-menu-service-selector-item-content {
    background-color: var(--color-surface);
    border-color: rgba(255,255,255,0.08);
    color: var(--color-text);
}
[data-theme="dark"] .main-menu-v2 .main-menu-distribution-selector-item-content-area {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .main-menu-v2 .main-menu-distribution-selector-title,
[data-theme="dark"] .main-menu-v2 .main-menu-date-selector-title,
[data-theme="dark"] .main-menu-v2 .main-menu-service-selector-title,
[data-theme="dark"] .main-menu-v2 .main-menu-style-selector-title {
    color: var(--color-text-muted);
}
[data-theme="dark"] .main-menu-v2 .main-menu-paginator-item {
    background-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .main-menu-v2 .main-menu-paginator-item.active {
    background-color: #34d399;
}

.main-menu-header {
    padding: 1rem 1.5rem;
}
.main-menu-header-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    flex-shrink: 0;
}
.main-menu-header-icon[action="close"]{
    background-image: none;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.8rem;
    border-radius: var(--radius-xs, 4px);
    transition: background-color 0.15s, color 0.15s;
}
.main-menu-header-icon[action="close"]:hover {
    background-color: var(--color-bg, #f0f2f5);
    color: var(--color-text, #111827);
}
.main-menu-header-content{
  padding-left: 1rem;
}
.main-menu-header-title {
    /*font-weight: bold;*/
    font-size: 1rem;
}
.main-menu-header-subtitle {
    font-size: 0.9rem;
}
.main-menu-paginator {
    margin-top: 0.5rem;
}
.main-menu-paginator-item {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: #727272;
    cursor: pointer;
    margin: 0 0.2rem;
}
.main-menu-paginator-item.active {
  background-color: #007565;
}
/* MENU DISTRIBUTION SELECTOR */
.main-menu-distribution-view{
  cursor: pointer;
  color: #727272;
}
/*.main-menu-distribution-view-title {
    color: #727272;
}*/
.main-menu-distribution-selector {
    padding: 1rem 1.5rem;
    background-color: #eaeaea;
}
.main-menu-distribution-selector-title {
    color: #727272;
    margin-bottom: 0.5rem;
}

.main-menu-distribution-view-data-name {
    margin-bottom: -0.2rem;
    text-transform: uppercase;
    font-size: 1.2rem;
}
.main-menu-distribution-view-data-area {
    font-size: 0.8rem;
    display: inline-block;
}
.main-menu-distribution-view-data-variety{
  display: inline-block;
  font-size: 0.9rem;
}

.main-menu-distribution-selector-item {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    width: 33.33%;
    cursor: pointer;
}
.modal-distribution-selector-view-content .main-menu-distribution-selector-item,
.modal-moment-selector-view-content .main-menu-date-selector-item,
.modal-specie-selector-view-content .main-menu-specie-selector-item,
.modal-variety-selector-view-content .main-menu-variety-selector-item,
.modal-report-selector-view-content .main-menu-report-selector-item {
  margin-bottom: 1rem;
  width: 20%;
}
.main-menu-distribution-selector-item.first-of-page {
  margin-left: 0;
}
.main-menu-distribution-selector-item.active .main-menu-distribution-selector-item-title {
    background-color: #1ec173;
}
.main-menu-distribution-selector-item-content {
    padding: 0.5rem;
    padding-bottom: 1rem;
    background-color: #ffffff;
    font-size: 0.9rem;
    border-radius: 5px;
    text-align: center;
    display: table;
    height: 100% !important;
    width: 100%;
    padding-top: 1rem;
}
.modal-distribution-selector-view-content .main-menu-distribution-selector-item-content,
.modal-moment-selector-view-content .main-menu-date-selector-item-content,
.modal-specie-selector-view-content .main-menu-specie-selector-item-content,
.modal-variety-selector-view-content .main-menu-variety-selector-item-content,
.modal-report-selector-view-content .main-menu-report-selector-item-content{
  background-color: #eaeaea;
}
/* .modal-moment-selector-view-content .main-menu-date-selector-item { margin-left: 0.5rem !important; margin-right: 0.5rem !important; text-align: center; padding: 1rem 0; } */
.main-menu-distribution-selector-item-content-wp,
.main-menu-date-selector-item-content-wp,
.main-menu-specie-selector-item-content-wp,
.main-menu-variety-selector-item-content-wp,
.main-menu-report-selector-item-content-wp{
    display: table-cell;
    vertical-align: middle;
}
.main-menu-distribution-selector-item.active .main-menu-distribution-selector-item-content {
    background-color: #007565;
    color: white;
}
.main-menu-distribution-selector-item-content-name {
    /*font-weight: bold;*/
    font-size: 1.4rem;/*1.75rem;*/
    /*margin-bottom: -0.5rem;*/
    line-height: 1;
    word-break: break-word;
}
.main-menu-distribution-selector-item-content-area {
    font-size: 0.8rem;
}
.main-menu-distribution-paginator {
    margin-top: 0.5rem;
}
.main-menu-distribution-paginator-item {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #f2f2f2;
    cursor: pointer;
    margin: 0 0.1rem;
}
.main-menu-distribution-paginator-item.active {
  background-color: #b3b3b3
}

.main-menu-distribution-actions{
  position: absolute;
  right: 1.6rem;
  margin-top: -0.75rem;
  cursor: pointer;
}
.main-menu-distribution-action{
  font-size: 0.6rem;
  width: auto;
  margin: 0;
  margin-top:0.2rem;
  color: #007565;
}
.main-menu-distribution-selector-view-wp:hover .main-menu-distribution-view-title {
    color: #007565;
}

/* MENU DATE SELECTOR */
.main-menu-date-selector {
    padding: 1rem 1.5rem;
    background-color: #eaeaea;
}
.main-menu-date-view{
  cursor: pointer;
  color: #727272;
}

.main-menu-date-view-data-day {
    font-size: 2rem;
    text-align: right;
    margin-right: 0.5rem;
}
.main-menu-date-view-data-month {
    margin-bottom: -0.4rem;
    text-transform: uppercase;
}
.main-menu-date-view-data-year {
    font-size: 0.8rem;
}

.main-menu-date-selector-title {
    color: #727272;
    margin-bottom: 0.5rem;
}
.main-menu-date-selector-item {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    width: 33.33%;
    cursor: pointer;
}
.main-menu-date-selector-item.first-of-page {
  margin-left: 0;
}
.main-menu-date-selector-item.active .main-menu-date-selector-item-title {
    background-color: #1ec173;
}
.main-menu-date-selector-item-content {
    padding: 1rem 0.5rem;
    padding-bottom: 1rem;
    background-color: #ffffff;
    font-size: 0.9rem;
    border-radius: 5px;
    text-align: center;
    display: table;
    width: 100%;
    height: 100%;
}
.main-menu-date-selector-item.active .main-menu-date-selector-item-content {
    background-color: #007565;
    color: white;
}
/* .main-menu-date-selector-item-content-moment { margin-bottom: -0.5rem; } */
.main-menu-date-selector-item-content-day {
    /*font-weight: bold;*/
    /*font-size: 1.75rem;*/
    /*margin-bottom: -0.5rem;*/
    font-size: 1rem;
}
.main-menu-date-selector-item-content-year {
    font-size: 0.8rem;
}
.main-menu-date-selector-item-content:hover {
    background-color: #007565;
    color: white;
}
.main-menu-date-paginator {
    margin-top: 0.5rem;
}
.main-menu-date-paginator-item {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #f2f2f2;
    cursor: pointer;
    margin: 0 0.1rem;
}
.main-menu-date-paginator-item.active {
  background-color: #b3b3b3
}
.main-menu-date-selector-view-wp:hover .main-menu-date-view-title {
    color: #007565;
}
/* MENU SERVICE SELECTOR */
.main-menu-service-selector {
    padding: 1rem 1.5rem;
    background-color: #ffffff;

}
.main-menu-service-view{
    cursor:pointer;
}
.main-menu-service-selector-title {
    color: #727272;
    margin-bottom: 0.5rem;
}
.main-menu-service-view-title{
  color: #727272;
}
.main-menu-service-selector-item {
    margin-left: 1rem;
    width: 20%;
    cursor: pointer;
}
.main-menu-service-selector-item.first-of-page {
  margin-left: 0;
}
.main-menu-service-selector-item-content-icon,
.main-menu-service-view-data-icon{
    width: 3rem;
    height: 3rem;
    margin: auto;
    background-color: #eaeaea;
    border-radius: 5px;
    /*background-image: url(../img/service-caliber.png);*/
    background-size: 2.55rem;
    background-repeat: no-repeat;
    background-position: center;
}
.main-menu-service-view-data-icon[service=""]{
  display: none;
}
.main-menu-service-selector-item-content-title{
  font-size:0.8rem;
  text-align: center;
  margin-top: 0.2rem;
  color: #727272;
}
.main-menu-service-view-data-title{
  color: #727272;
  font-size:0.8rem;
  text-align: right;
  margin-right: 0.5rem;
  text-transform: uppercase;
}
.main-menu-service-selector-item:hover .main-menu-service-selector-item-content-title,
.main-menu-service-selector-item.active .main-menu-service-selector-item-content-title {
    color: #007565;
}
.main-menu-service-selector-item:hover .main-menu-service-selector-item-content-icon,
.main-menu-service-selector-item.active .main-menu-service-selector-item-content-icon {
    background-color: #007565;
}
.main-menu-service-selector-item[service="AGERPIX_VIGOR"] .main-menu-service-selector-item-content-icon,
.main-menu-service-view-data-icon[service="AGERPIX_VIGOR"]{
  background-image: url(../img/icons/vigor.svg);
  background-size: 2rem;
}
.main-menu-service-selector-item[service="AGERPIX_PRODUCTION"] .main-menu-service-selector-item-content-icon,
.main-menu-service-view-data-icon[service="AGERPIX_PRODUCTION"]{
  background-image: url(../img/icons/production.svg);
  background-size: 1.8rem;
}
.main-menu-service-selector-item[service="AGERPIX_LINEAR_PRODUCTION"] .main-menu-service-selector-item-content-icon,
.main-menu-service-view-data-icon[service="AGERPIX_LINEAR_PRODUCTION"]{
  background-image: url(../img/icons/linear_production.svg);
  background-size: 2.6rem;
}
.main-menu-service-selector-item[service="AGERPIX_LEAFINESS"] .main-menu-service-selector-item-content-icon,
.main-menu-service-view-data-icon[service="AGERPIX_LEAFINESS"]{
  background-image: url(../img/icons/leafiness.svg);
  background-size: 1.8rem;
}
.main-menu-service-selector-item[service="AGERPIX_LEAF_FRUIT_RATIO"] .main-menu-service-selector-item-content-icon,
.main-menu-service-view-data-icon[service="AGERPIX_LEAF_FRUIT_RATIO"]{
  background-image: url(../img/icons/leaf_fruit.svg);
  background-size: 2.3rem;
}
.main-menu-service-selector-item[service="AGERPIX_CALIBER"] .main-menu-service-selector-item-content-icon,
.main-menu-service-view-data-icon[service="AGERPIX_CALIBER"]{
  background-image: url(../img/icons/caliber.svg);
  background-size: 1.8rem;
}

.main-menu-service-selector-item[service="AGERPIX_VIGOR"]:hover .main-menu-service-selector-item-content-icon,
.main-menu-service-selector-item[service="AGERPIX_VIGOR"].active .main-menu-service-selector-item-content-icon{
  background-image: url(../img/icons/vigor_selected.svg);
}
.main-menu-service-selector-item[service="AGERPIX_PRODUCTION"]:hover .main-menu-service-selector-item-content-icon,
.main-menu-service-selector-item[service="AGERPIX_PRODUCTION"].active .main-menu-service-selector-item-content-icon{
  background-image: url(../img/icons/production_selected.svg);
}
.main-menu-service-selector-item[service="AGERPIX_LINEAR_PRODUCTION"]:hover .main-menu-service-selector-item-content-icon,
.main-menu-service-selector-item[service="AGERPIX_LINEAR_PRODUCTION"].active .main-menu-service-selector-item-content-icon{
  background-image: url(../img/icons/linear_production_selected.svg);
}
.main-menu-service-selector-item[service="AGERPIX_LEAFINESS"]:hover .main-menu-service-selector-item-content-icon,
.main-menu-service-selector-item[service="AGERPIX_LEAFINESS"].active .main-menu-service-selector-item-content-icon{
  background-image: url(../img/icons/leafiness_selected.svg);
}
.main-menu-service-selector-item[service="AGERPIX_LEAF_FRUIT_RATIO"]:hover .main-menu-service-selector-item-content-icon,
.main-menu-service-selector-item[service="AGERPIX_LEAF_FRUIT_RATIO"].active .main-menu-service-selector-item-content-icon{
  background-image: url(../img/icons/leaf_fruit_selected.svg);
}
.main-menu-service-selector-item[service="AGERPIX_CALIBER"]:hover .main-menu-service-selector-item-content-icon,
.main-menu-service-selector-item[service="AGERPIX_CALIBER"].active .main-menu-service-selector-item-content-icon{
  background-image: url(../img/icons/caliber_selected.svg);
}




.main-menu-service-selector-view-wp:hover .main-menu-service-view-title {
    color: #007565;
}
/* MENU STYLE SELECTOR */
.main-menu-style-selector {
    padding: 1rem 1.5rem;
    /*padding-bottom: 0.5rem;*/
    background-color: #ffffff;

}
.main-menu-style-view{
  cursor: pointer;
  color: #727272;
}

.main-menu-style-view-data-title {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

.main-menu-style-selector-title {
    color: #727272;
    margin-bottom: 0.5rem;
}
.main-menu-style-selector-content-filters-gradient{
  margin-left: 0 !important;
}
.main-menu-style-selector-content-filters-unique-symbol{
  margin-right: 0 !important;
}
.main-menu-style-selector-content,
.main-menu-style-selector-content-filters-fields-wp {
    margin-top: 0.5rem;
}
.main-menu-style-selector-item{

  margin-top:0.5rem;
}
.main-menu-style-selector-item-content,
.main-menu-style-view-item-content {
  height: 1.2rem;
  width: 100%;
  /*border: 0.2rem solid #b3b3b3;*/
  border-radius: 3px;
  /*background: rgb(237,30,121);*/
  background: linear-gradient(90deg, rgba(237,30,121,1) 50%, rgba(41,171,226,1) 50%);
  /*background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(255,0,0,1) 50%);*/

  /*background: linear-gradient(90deg, rgba(237,30,121,1) 0%, rgba(237,28,36,1) 20%, rgba(252,238,33,1) 40%, rgba(140,198,63,1) 60%, rgba(0,104,55,1) 80%, rgba(41,171,226,1) 100%);*/
  cursor: pointer;
  min-width: 10rem;
}
/* .main-menu-style-view-item-content[representation="categorized"] { border: 1px solid #007565; } */
.main-menu-style-view-item-content[representation="classified"] {
    background: none;
    border-radius: 0;
    height: auto;
}
.main-menu-style-view-item-content[representation=""]{
  display: none;
}
.main-menu-style-selector-item.active .main-menu-style-selector-item-content{
  border: 2px solid #007565;
  /*border-width: 0.3rem;*/
}
.main-menu-style-selector-item[representation="gradient"] .main-menu-style-selector-item-content,
.main-menu-style-view-item-content[representation="gradient"]{
  background: linear-gradient(90deg, rgba(237,30,121,1) 0%, rgba(237,28,36,1) 20%, rgba(252,238,33,1) 40%, rgba(140,198,63,1) 60%, rgba(0,104,55,1) 80%, rgba(41,171,226,1) 100%);
}
/*.main-menu-style-selector-item[representation="gradient-magma"] .main-menu-style-selector-item-content,
.main-menu-style-view-item-content[representation="gradient-magma"]{
  background: linear-gradient(90deg, rgba(0,0,4,1) 0%, rgba(87,15,109,1) 25%, rgba(187,55,84,1) 50%, rgba(250,141,10,1) 75%, rgba(252,255,164,1)  100%);
}*/
.main-menu-style-selector-legend{
  width: 14rem;
}
.main-menu-style-legend-item-wp{
  width: 6.5rem;
  text-align: right;
}

.main-menu-style-selector-item-content-title{
  font-size:0.6rem;
  text-align: center;
}
.main-menu-style-legend-item-color {
    width: 1rem;
    height: 1rem;
    border-radius: 5px;
    margin-left: 0.2rem;
}
.main-menu-style-legend-item-wp.one,
.main-menu-style-legend-item-wp.three {
    width: 4rem;
}
.main-menu-style-legend-item-wp.two {
    width: 5.5rem;
}
.main-menu-style-legend-item-color.one{
  background-color: rgb(237,30,121);
  /*background-color: #ffffff;
  border: 1px solid #007565;*/
}
.main-menu-style-legend-item-color.two{
  background-color: rgb(252,238,33);
  /*background-color: #ff8080;
  border: 1px solid #007565;*/
}
.main-menu-style-legend-item-color.three{
  /*background-color: rgb(140,198,63);*/
  background-color: rgb(41,171,226);
  /*background-color:#ff0000;
  border: 1px solid #007565;*/
}
.main-menu-style-legend-item-color.four{
  background-color: rgb(41,171,226);
}
.main-menu-style-legend-item-ranges{
  font-size: 0.75rem;
}

.main-menu-style-selector-view-wp:hover .main-menu-style-view-title {
    color: #007565;
}
.style-legend-slider{
  width: calc(100% - 3.6rem);
}
.style-legend-slider-wp {
    /*max-width: 13rem;
    padding-left: 1rem;*/
    max-width: 14rem;
}
.style-legend-slider-wp i{
  color: #007565;
  margin-left: 0.2rem;
  cursor: pointer;
}
#style-legend-slider-left.slider.slider-horizontal .slider-track,
#style-legend-slider-right.slider.slider-horizontal .slider-track{
  height: 5px;
}
.slider-handle {
    background-color: #007565;
    background-image: -moz-linear-gradient(top, #007565, #007565);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#007565), to(#007565));
    background-image: -webkit-linear-gradient(top, #007565, #007565);
    background-image: -o-linear-gradient(top, #007565, #007565);
    background-image: linear-gradient(to bottom, #007565, #007565);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007565', endColorstr='#007565',GradientType=0);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);
    width: 15px;
    height: 15px;
    background-color: #007565;
}
#style-legend-slider-left,
#style-legend-slider-right{
    margin-top: 0.15rem;
}
#style-legend-slider-left .slider-track-high,
#style-legend-slider-right .slider-track-high {
	/*background: rgb(140,198,63);*/
  background:rgb(41,171,226);
  /*background-color: #ff0000;
  border: 1px solid #007565;*/
}
#style-legend-slider-left .slider-track-low,
#style-legend-slider-right .slider-track-low {
	background: rgb(237,30,121);
    /*background: white;
    border: 1px solid #007565;*/
}
#style-legend-slider-left .slider-selection,
#style-legend-slider-right .slider-selection {
	background: rgb(252,238,33);
    /*background: #ff8080;
    border: 1px solid #007565;*/
}
/* MAIN MENU DATA VIEW */
.main-menu-content-data{
  padding: 0.5rem 1rem;
  padding-bottom: 1rem;
  background-color: #eaeaea;
}
.main-menu-content-data-title {
    color: #727272;
    width: 100%;
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.125rem;
}
.main-menu-content-data-item {
    margin-left: 1rem;
    width: calc(33.33% - 0.5rem);
    margin: 0.375rem 0.25rem;
}
.main-menu-content-data-item[size="double"]{
    width: calc(66.66% - 0.5rem);
}
.main-menu-content-data-item[size="full"]{
    width: calc(100% - 0.5rem);
}
.main-menu-content-data-item-title {
    background-color: #999999;
    border-radius: 10px 10px 0 0;
    padding: 0.5rem;
    color: white;
    text-align: center;
    font-size:0.9rem;
}
.main-menu-content-data-item-content {
    padding: 0.5rem;
    background-color: white;
    border-radius: 0 0 10px 10px;
    font-size: 0.9rem;
    text-align: center;
}
.main-menu-content-data-item-content-title{
  font-size: 1rem;/* 1.75rem;*/
}
.main-menu-content-data-item-content canvas{
    margin-bottom: 0.5rem;
}
.info-histogram-ctrl-result {
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0;
    margin-bottom: 0.3rem;
    color: #999ea7;
    font-size: 0.65rem;
}
.info-histogram-ctrl-img-part {
    height: 5em;
    display: inline-block;
    width: 1%;
    background-color: rgba(179,179,179,255);
}
/*.info-histogram-ctrl-img-part:hover {
    background-color: #007565;
}*/
.info-histogram-ctrl-img-part.active {
    background-color: #007565;
}
.info-histogram-tooltip {
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    margin-top: -0.2rem;
    min-height: 1.8rem;
}
/* HEADER ACTIONS */
.main-menu-header-actions i{
  vertical-align: top;
}
.main-menu-header-action{
  width: 1rem;
  height: 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  color: #007565;
  margin-left: 0.5rem;
}
/* MENU STYLE SELECTOR */
.main-menu-actions {
    padding: 1rem 1.5rem;
    background-color: #ffffff;
}
.main-menu-actions-title {
    color: #727272;
}
/* MAIN CONTROLS */
.main-menu-btn-a {
    padding: 0.5rem 1rem;
    background-color: #f2f2f2;
    font-size: 0.8rem;
    border-radius: 5px;
    text-align: center;
    margin: 0 0.5rem;
    cursor: pointer;
    color: #727272;
}
.main-menu-btn-a.with-value,
.main-menu-btn-a.active{
  background-color: #007565;
  color: white;
}
.main-menu-btn-a:hover {
    background-color: #007565;
    color: white;
}
.main-actions {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 1030;
}
.main-action,
.main-action-dendro{
  color: #007565;
  width: 2.2rem;
  height: 2.2rem;
  background-color: #eaeaea;
  margin-left: 0.4rem;
  border-radius: 5px;
  cursor: pointer;
}
.main-action:hover,
.main-action-dendro:hover {
    background-color: #007565;
    color: white;
}
.main-action.active,
.main-action-dendro.active{
  background-color: #007565;
  color: white;
}
.main-action[action="dendro-graph"] i{
  font-size: 1.2rem;
  /*margin-bottom: -0.2rem;*/
}
.main-action[action="dendro-graph-conf"] {
    position: relative;
}
.main-action[action="dendro-graph-conf"] i {
    position: absolute;
}
.main-action[action="dendro-graph-conf"] i.fas.fa-atom {
    font-size: 1.2rem;
    /*color: #007565ab;*/
}
.main-action[action="dendro-graph-conf"] i.fas.fa-cog {
    font-size: 0.7rem;
    bottom: 0.2rem;
    right: 0.2rem;
}

/* CONTROLS */
.bootstrap-select .dropdown-item.active, .bootstrap-select .dropdown-item:active {
    background-color: #1f7669;
    color: white;
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color: #1f7669 !important;
    color: white;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #007769 !important;
}
/*END CONTROLS*/
/* OTHERS */
.modal-distribution-selector-item-content {
    border-radius: 5px;
}
.modal-distribution-selector-item-content-name {
    word-break: break-word;
    overflow-wrap: break-word;
}
.modal-backdrop {
    z-index: 10400;
}
.modal {
    z-index: 10500;
}
.modal input[type="text"],
.modal textarea {
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    outline: revert;
}
/* END OTHERS */
/* NEW DASHBOARD*/

.graph-view-graph{
    /*height: calc(100vh - 20rem);*/
    margin-bottom: 8rem;
    width: 100%;
}
.graph-view-controls {
    width: 100%;
}
.graph-view-control {
    width: 20%;
    padding: 0.5rem;
    text-align: center;
    background-color: #cacaca;
    cursor: pointer;
}
.graph-view-controls[items="4"] .graph-view-control {
    width: 25%;
}
.graph-view-controls[items="4"] .graph-view-control[control="distribution"] {
    display: none;
}
.graph-view-control.disabled{
    opacity: 0.5;
    cursor: initial;
}
.graph-view-control:nth-child(odd) {
    background-color: #bababa;
}
.graph-view-control:hover{
    background-color: #007565;
    color: white;
}
.graph-view-control.disabled:hover{
    background-color: #cacaca;
    color: #777;
}
.graph-view-control.disabled:nth-child(odd):hover{
    background-color: #bababa;
    color: #777;
}
.graph-view-control.active{
    background-color: #007565;
    color: white;
}
.graph-view-controls-results {
    width: 100%;
    height: 8.5rem;
    /*border: 1px solid white;*/
    overflow: auto;
    background-color: white;
}
.graph-view-control-result {
    width: 20%;
    height: 100%;
    /*background-color: grey;
    border: 1px solid white;*/
}

.graph-view-control-result.main-menu-distribution-selector-item,
.graph-view-control-result.main-menu-date-selector-item,
.graph-view-control-result.main-menu-specie-selector-item,
.graph-view-control-result.main-menu-variety-selector-item,
.graph-view-control-result.main-menu-report-selector-item{
    padding-right: 0;
    padding-left: 0;
}
.graph-view-control-result.main-menu-distribution-selector-item .main-menu-distribution-selector-item-content,
.graph-view-control-result.main-menu-date-selector-item .main-menu-date-selector-item-content,
.graph-view-control-result.main-menu-specie-selector-item .main-menu-specie-selector-item-content,
.graph-view-control-result.main-menu-variety-selector-item .main-menu-variety-selector-item-content,
.graph-view-control-result.main-menu-report-selector-item .main-menu-report-selector-item-content{
    background-color: #eaeaea;
    border-radius: 0;
}
.graph-view-control-result.main-menu-distribution-selector-item:nth-child(odd) .main-menu-distribution-selector-item-content,
.graph-view-control-result.main-menu-date-selector-item:nth-child(odd) .main-menu-date-selector-item-content,
.graph-view-control-result.main-menu-specie-selector-item:nth-child(odd) .main-menu-specie-selector-item-content,
.graph-view-control-result.main-menu-variety-selector-item:nth-child(odd) .main-menu-variety-selector-item-content,
.graph-view-control-result.main-menu-report-selector-item:nth-child(odd) .main-menu-report-selector-item-content{
    background-color: #dadada;
}
.graph-view-control-result.main-menu-distribution-selector-item .main-menu-distribution-selector-item-content:hover,
.graph-view-control-result.main-menu-date-selector-item .main-menu-date-selector-item-content:hover,
.graph-view-control-result.main-menu-specie-selector-item .main-menu-specie-selector-item-content:hover,
.graph-view-control-result.main-menu-variety-selector-item .main-menu-variety-selector-item-content:hover,
.graph-view-control-result.main-menu-report-selector-item .main-menu-report-selector-item-content:hover {
    background-color: #007565;
    color: white;
}
.main-menu-specie-selector-item,
.main-menu-variety-selector-item,
.main-menu-report-selector-item {
    cursor: pointer;
}
.main-menu-variety-selector-item-content-title,
.main-menu-specie-selector-item-content-title,
.main-menu-report-selector-item-content-title {
    font-size: 1.2rem;
}
.main-menu-specie-selector-item-content,
.main-menu-variety-selector-item-content,
.main-menu-report-selector-item-content {
    padding: 1rem 0.5rem;
    padding-bottom: 1rem;
    background-color: #ffffff;
    font-size: 0.9rem;
    border-radius: 5px;
    text-align: center;
    display: table;
    width: 100%;
    height: 100%;
}
.graph-view-controls-wp{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
.graph-view.controls_hidden .graph-view-graph {
    /*height: calc(100vh - 11rem);*/
    margin-bottom: 2rem;
}
.graph-view.controls_hidden .graph-view-controls-results{
    display: none !important;
}
.chart-legend.d-flex.flex-wrap.justify-content-center {
    width: 100%;
    padding: 0 2rem;
    margin-top: 2rem;
}
.chart-legend-item-check {
    width: 1rem;
    height: 1rem;
    background-color: white;
    border: 1px solid #007565;
    margin-bottom: 0.2rem;
    cursor: pointer;
}
.chart-legend-item.disabled {
    opacity: 0.4;
}
.graph-view .pieces-per-kg.disabled{
    opacity: 0.4;
}
.graph-view .resume-table-action{
    width: 1rem;
    cursor: pointer;
    padding-left: 0.2rem;
    color: #007565;
}
.chart-legend-item.disabled .chart-legend-item-check{
    cursor: initial;
}
.chart-legend-item.active .chart-legend-item-check {
    background-color: #007565;
}
.chart-legend-item-conf{
    color: #007565;
    cursor: pointer;
}
.chart-legend-item-check.round {
    border-radius: 50%;
}
.chart-legend-item-title {
    margin-left: 0.5rem;
    color: #777;
    font-weight: 900;
}
.chart-line-config {
    width: 20rem;
    max-width: 100%;
    margin: auto;
    margin-top: 1rem;
}
.chart-config {
    width: 70%;
    max-width: calc(100% - 2rem);
    margin: auto;
    margin-top: 1rem;
}
.chart-config table {
    width: 100%;
}
.chart-config th{
    font-weight: 900 !important;
}
.chart-config th,
.chart-config td {
    border: 1px solid #007565 !important;
}
.chart-config-btns-wp{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    text-align: right;
}
.chart-config-accept,
.chart-config-add {
    margin-left: auto;
    margin-right: 0;
    width: 10rem;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.2rem;
    border-radius: 3px;
    background-color: #007565;
    border: 1px solid #007565;
    font-weight: 900;
    color: white;
    cursor: pointer;
}
.chart-config-btns-wp .chart-config-accept,
.chart-config-btns-wp .chart-config-add{
    margin-left: 0;
    margin-right: 0;
    display: inline-block;
}
.chart-config-accept:hover,
.chart-config-add:hover {
    background-color: white;
    color: #007565;
}
.chart-legend-item-title-line .caret-space{
    opacity: 0;
    width: 0.8rem;
    display: inline-block;
}
.chart-legend-item-title-line-dropdown{
    padding: 0;
}
.chart-legend-item-title-line-dropdown {
    font-family: 'museo';
    color: #777;
    font-weight: 900;
}
.graph-view  .prediction-date-slider-wp{
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
}
#graph-view-prediction-date-slider{
    width: 20rem;
    max-width: 100%;
}
.graph-view-icons {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}
.graph-view-close-icon, .sensor-view-close-icon, .modal-distribution-selector-view-close-icon, .modal-moment-selector-view-close-icon {
    width: 1.2rem;
    height: unset;
    background-image: none;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    color: #007565;
    font-size: 1.1rem;
    position: initial;
    right: unset;
    top: unset;
}
.chartjs-render-monitor{
    touch-action: initial !important;
}
.graph-view-header, .sensor-view-header, .modal-distribution-selector-view-header, .modal-moment-selector-view-header{
     padding-right: 0;
}
.graph-view-no-selection {
    margin-top: 2rem;
}
.graph-view-no-selection-content-title{
    font-weight: 900;
}
.graph-view .graph-view-export-icon{
    display: none;
}

.graph-view .help {
    position: absolute;
    top: 3rem;
    right: 1rem;
    width: 22rem;
    /* bottom: 3rem; */
    max-height: calc(100% - 6rem);
    background-color: #ffffff;
    z-index: 1000;
    border-radius: 5px;
    padding: 1rem;
    border: 1px solid #007565;
}
.graph-view .help-wp {
    width: 100%;
    /*height: calc(100% - 2.5rem);*/
    max-height: calc(100vh - 10.5rem);
    overflow: auto;
    margin-top: 1rem;
}
.graph-view .help-close {
    width: 100%;
    height: 1.2rem;
    text-align: right;
}
.graph-view .help-close i{
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    color: #007565;
    font-size: 1.3rem;
}
.graph-view .help-title {
    font-weight: 900;
    color: black;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0.5rem;
}
.graph-view .help-topic {
    border: 1px solid #007565;
    padding: 0.5rem;
    width: 100%;
    text-align: center;
    font-weight: 900;
    font-weight: 900;
}
.graph-view .help-topic.active {
    background-color: #007565;
    color: white;
}
.graph-view .help-section-wp{
    padding: 1rem;
    padding-top: 0;
}
.graph-view .help-section-title {
    font-weight: 900;
}
.graph-view-help-icon-wp{
    position: relative;
}
.graph-view-help-icon {
    width: 1.2rem;
    height: unset;
    background-image: none;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    color: #007565;
    font-size: 0.9rem;
    position: initial;
    top: unset;
    right: unset;
}
.help-section-content i{
    color: #007565;
}

.prediction-date-slider-wp .slider.slider-horizontal .slider-track{
  height: 5px;
}

/* END NEW DASHBOARD */

/* PLACES CORRECTION */
.places_scroll{
    right: 0;
}
.places_header {
    color: white;
    padding: 2.5em 2rem;
    margin: auto;
}
.places_content_inner {
    margin: auto 1em;
}
/*END PLACES CORRECTION*/
/*SENSOR FILTERS AND CONTROLS */


.sensor-view .sensor-dendrometer-controls {
    padding: 0.5rem;
    border-radius: 5px;
     margin-top: 0;
     padding-bottom: 0;

}
/* .sensor-dendrometer-controls-content { margin-left: auto; margin-right: auto; } */
.sensor-dendrometer-views {
    position: absolute;
    top: 1rem;
    z-index: 100;
    right: 3em;
    border: 1px solid #007565;
    border-radius: 3px;
    background-color: white;
}
.sensor-dendrometer-view {
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    color: #007565;
    cursor: pointer;
    opacity: 0.5;
}
.sensor-dendrometer-view.active {
    opacity: 1;
}
.sensor-view-content {
    margin-top: -1rem;
}
.chart-wp.full-width {
    width: 100%;
    margin: 2rem 0;
}
.sensor-dendrometer-controls-send-btn-wp{
    width: 100%;
    text-align: right;
    margin-right: 1rem;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}
.sensor-dendrometer-controls-send-btn{
    border: 1px solid #007565;
    color: #007565;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.no-results-section{
    margin-top: 2rem;
    text-transform: uppercase;
    font-size: 0.8em;
    text-align: center;
    color: #007565;
    font-weight: 700;
}

.sensor-dendrometer-report-menu {
    background-color: white;
    width: 22rem;
    top: 3.5rem;
    right: 0.8rem;
    bottom: auto;
    left: auto;
    border-radius: 5px;
    z-index: 100000;
    position: absolute;
    border: 1px solid #007769;
    padding: 1rem;
}
/* END SENSOR FILTERS AND CONTROLS */
/* NEW CLIENT MENU */
.client-menu.navbar {
    background-color: #007769!important;
    height: 3.5rem;
}
.client-menu .navbar-brand {
    display: inline-block;
    cursor: pointer;
}
/*.client-menu .navbar-brand:hover .dropdown-toggle .main-logo,
.client-menu .navbar-brand:hover .dropdown-toggle .main-product-selector {
    opacity: 0.7;
}*/
.client-menu .main-logo {
    display: inline-block;
    background-image: url(../img/icono-agerpix-white.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 2.2rem;
    width: 2.2rem;
    margin-top: 0.25rem;
}
.client-menu .main-product-selector {
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 1.6rem;
    width: 10rem;
    vertical-align: baseline;
}
.main[product="onfruit"] .client-menu .dropdown-toggle .main-product-selector {
    background-image: url(../img/product_logo_onfruit.svg);
}
.main[product="dendrofruit"] .client-menu .dropdown-toggle .main-product-selector {
    background-image: url(../img/product_logo_dendrofruit.svg);
}
.client-menu .partner-logo {
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 2.6rem;
    width: 10rem;
    vertical-align: middle;
    margin-left: 0.75rem;
    opacity: 0;
}
.main[partner="NTKH"] .client-menu .partner-logo {
    background-image: url(../img/hortus/hortus-logo-white.png);
    opacity: 1;
}
.main[partner="61J7"] .client-menu .partner-logo {
    background-image: url(../img/anasac/LOGO-ANASAC-BLANCO.svg);
    opacity: 1;
}
.client-menu .main-product-selector-dropdown .dropdown-item .main-product-selector {
    margin-top: 0.25rem;
}
.main[product="onfruit"] .client-menu  .main-product-selector-dropdown .dropdown-item .main-product-selector {
    background-image: url(../img/product_logo_dendrofruit.svg)
}
.main[product="dendrofruit"] .client-menu .main-product-selector-dropdown .dropdown-item .main-product-selector {
    background-image: url(../img/product_logo_onfruit.svg);
    height: 1.4rem;
    margin-top: 0.4rem;
}
/*.main[product="onfruit"] .client-menu .main-product-selector-dropdown .dropdown-item .main-product-selector:hover,
.main[product="dendrofruit"] .client-menu .main-product-selector-dropdown .dropdown-item .main-product-selector:hover {
    opacity: 0.7;
}*/
.client-menu .main-product-selector .main-product-selector-dropdown button.dropdown-item {
    padding-top: 0.5rem;
}
.client-menu .main-product-selector button.dropdown-item {
    outline: none;
}
.client-menu .main-product-selector-dropdown{
    display: inline-block;
}
.client-menu .main-product-selector-dropdown .dropdown-menu.show {
    z-index: 10000000;
    padding: 0;
    background-color: #007769;
    margin-left: 1.8rem;
}
.client-menu .main-product-selector-dropdown .dropdown-toggle{
    background-color: transparent;
}
.client-menu .main-product-selector-dropdown .dropdown-toggle::after {
    color: white;
    font-size: 1.1rem;
    padding-bottom: 0.2rem;
}
.client-menu .main-product-selector-dropdown.hide-after .dropdown-toggle::after {
     content:none;
}
.client-menu .navbar-brand i.fas.fa-caret-down {
    font-size: 1rem;
    color: white;
    padding-top: 1.3rem;
    display: inline-block;
    height: 1.1rem;
    vertical-align: top;
}
.client-menu .navbar-collapse {
    justify-content: end;
    flex-basis: unset;
}
.client-menu .navbar-nav {
    flex-direction: row;
    justify-content: flex-end;
}
.client-menu .navbar-nav .nav-link {
    color: white;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.7;
}
.client-menu .navbar-nav .nav-item.active .nav-link {
    opacity: 1;
}
.client-menu .navbar-nav .nav-link:hover {
    color:white !important;
    opacity: 1;
}
.client-menu .nav-link i {
    margin-right: 0.625rem;
}
.client-menu .client-config-menu-dropdown .dropdown-menu.show {
    z-index: 100000000;
    background-color: #007769;
}
.client-menu .client-config-menu-dropdown .dropdown-menu.show i{
    margin-left: 0.5rem;
}
.client-menu .client-config-menu-dropdown .dropdown-menu.show i.fa-dollar-sign{
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
@media (max-width: 600px){
    .client-menu .nav-item span {
        display: none !important;
    }
}
.main #map{
    height: calc(100% - 3.5rem);
}
.main-actions {
    /*left: calc(50% - 5rem);*/
    top: 4.5rem;
    /*right: auto;*/
}
.graph-view, .sensor-view, .modal-distribution-selector-view, .modal-moment-selector-view{
    top: 3.5rem;
}
.graph-view-close-icon-wp,
.sensor-view-close-icon{
    display: none;
}
.admin-graph-view .graph-view-close-icon-wp{
    display: block;
}
.main[product="dendrofruit"] .main-menu{
    display: none;
}
.main[product="dendrofruit"] .main-action[product="onfruit"]{
    display: none !important;
}
.main[product="onfruit"] .main-action[product="dendrofruit"]{
    display: none !important;
}
.main[product="dendrofruit"] .nav-item[product="onfruit"]{
    display: none !important;
}
.main[product="onfruit"] .nav-item[product="dendrofruit"]{
    display: none !important;
}
.modal-client-form-view,
.modal-client-calc-view {
    position: absolute;
    top: 3.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background-color: #f2f2f2;
    background-color: rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    /*padding: 2.5rem;
    padding-right: 2rem;*/
    /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
}
.client-form-actions,
.client-calc-actions {
    color: #007769;
    padding-top: 1rem;
}
.client-form-actions i,
.client-calc-actions i{
    font-size: 1.2rem;
    cursor: pointer;
    padding-left: 0.5rem;
}
.client-form-content,
.client-calc-content {
    overflow: auto;
    max-height: calc(100% - 7.5rem) !important;
    height: calc(100% - 7.5rem) !important;
}
.client-form-form .group.row {
    display: block;
    color: #007769;
}
.client-form-content .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgb(0 117 104 / 0.1);
}
.custom-d-none,
.offline-d-none{
    display: none !important;
}
/*.modal-client-calc-view{
    background-color: rgba(0,0,0,0.5);
    z-index: 100000;
}*/

/* END NEW CLIENT MENU */
/* CALC */
.modal-client-calc-view {
    width: 28rem;
    /*top: 4.2rem;*/
    top: 7.5rem;
    right: 0.8rem;
    bottom: auto;
    left: auto;
    border-radius: 5px;
    /*height: 35rem;*/
    background-color: white;
    z-index: 100000;
}
.client-calc-content-wp{
    /*width: 40rem;
    max-width: 100%;*/
    height: 100%;
    /*margin-left: auto;
    margin-right: 0;
    background-color: #ffffff;*/
}
.client-calc-tabs {
    display: flex;
}
.client-calc-tab {
    width: calc(25% - 0.5rem);
    padding: 0.5rem 0.25rem;
    text-align: center;
    background-color: #007769;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    border-left: 1px solid white;
}
.modal-client-calc-view.not-has-thinnings .client-calc-tab[section="thinning_costs"]{
    display: none;
}
.modal-client-calc-view.not-has-thinnings .client-calc-tab[section="vars"],
.modal-client-calc-view.not-has-thinnings .client-calc-tab[section="goals"],
.modal-client-calc-view.not-has-thinnings .client-calc-tab[section="results"] {
    width: calc(33% - 0.5rem);
}
.client-calc-tab[section="close"] {
    width: 2rem;
}
.client-calc-tab.active {
    background-color: white;
    color: #007769;
    font-weight: bold;
}
.client-calc-tab:nth-child(1) {
    border-left: 0;
}
.client-calc-tab:hover {
    opacity: 0.8;
}
.client-calc-form{
    position: relative;
    min-height: 10rem;
}
.calc-loader-wp {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.client-calc-content {
    max-height: calc(100vh - 13rem)!important;
    overflow: auto;
}
.client-calc-form-widget {
    margin-top: 1rem;
}
.client-calc-form-widget:nth-child(1) {
    margin-top: 0;
}
.client-calc-form-widget-header {
    text-align: center;
    background-color: #007769;
    color: white;
    padding: 0.25rem;
    border-radius: 3px 3px 0 0;
}
.client-calc-form-widget-content {
    padding: 0.5rem 1rem;
    border-radius: 0;
    border: 1px solid #007769;
}
.client-calc-form-widget-content-to-canvas{
    height: 10rem;
}
.client-calc-form-widget-content-to-canvas.histogram-canvas{
    height: 14rem;
}
.client-calc-form-widget-data {
    display: flex;
}
.client-calc-form-widget-data-label {
    width: 75%;
    /*color: #007769;*/
}
.client-calc-form-widget-data-value {
    text-align: right;
    width: 25%;
}
.client-calc-form-variables-common {
    margin-bottom: 1rem;
}
.client-calc-form-widget-data.main-data{
    font-weight: bold;
}
.client-calc-form-widget-data.indexed{
    padding-left: 1rem;
}
.client-calc-form-widget-data.top-separator{
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid #007769;
}
.client-calc-common-area-filters {
    display: flex;
    flex-wrap: wrap;
}
.client-calc-common-area-filter {
    padding: 0.5rem 1rem;
    background-color: #007769;
    color: white;
    border-radius: 3px;
    font-size: 0.8rem;
    position: relative;
    padding-right: 0.5rem;
}
.client-calc-common-area-filter i {
    cursor: pointer;
    padding-left: 0.5rem;
    font-size: 0.7rem;
}
.client-calc-form-phases {
    display: flex;
    justify-content: center;
}
.client-calc-form-phase {
    background-color: #007769;
    color: white;
    margin: 0 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.4;
    cursor: pointer;
}
.client-calc-form-phase-wp.active .client-calc-form-phase{
    opacity: 1;
}
.client-calc-form-phase-wp.active .client-calc-view-in-map-btn{
    display: block;
}
.client-calc-form-phase:hover {
    opacity: 0.8;
}
.client-calc-form-phase-date {
    font-size: 0.7rem;
}
/* .client-calc-view-in-map-wp { margin: 0 0.5rem; } */
.client-calc-view-in-map-btn {
    background-color: #007769;
    color: white;
    font-size: 0.8rem;
    padding: 0.25rem 1em;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    display: none;
    margin: 0 0.5rem;
    margin-top: 0.25rem;
}
.client-calc-view-in-map-btn:hover {
    opacity: 0.8;
}
/*END CALC */

.navbar-expand-lg .navbar-nav .dropdown-menu{
    top: 3rem;
}
/* DENDROMETER MODS */
.canvas-wp-dendrometer{
    height: 60vh !important;
}
.chart-wp-dendrometer{
     width:70% !important;
     margin-left: auto !important;
     margin-right: auto !important;
}
/* .sensor-dendrometer-location-selector-content { flex-wrap: nowrap !important; } */
.sensor-view-content-selector button, .sensor-view-content-selector-date button{
    border: 1px solid #e9e9e9;
}
.sensor-dendrometer-location-selector{
    margin-top: 0.7rem ;
}
.leaf-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    border-top-left-radius: 100%;
    border-bottom-right-radius: 100%;
    margin-right: 0.5rem;
}
.dendrometer-chart-legend {
    text-align: center;
    margin-top:1.2rem;
}

.dendrometer-chart-legend  li {
    list-style: none;
    display: inline;
    margin-right: 1rem;
    cursor: pointer;
    text-decoration: line-through;
    opacity:0.5;
    font-size:0.8em;

}


.dendrometer-chart-legend  li.dendrometer-legend-item-selected{
    text-decoration: auto;text-decoration: auto;
    opacity:1;

}


.sensor-view-content-selector ul.dropdown-menu.show li span, .sensor-view-content-selector-date ul.dropdown-menu.show li span {
    font-size: 1rem;
    padding: 1rem;
    margin: 0.5rem;
    justify-content: left;
}
.sensor-view-content-selector ul.dropdown-menu.show li span:hover, .sensor-view-content-selector-date ul.dropdown-menu.show li span:hover  {
   color:white !important;
    text-align: left;
}
.sensor-view-content-selector ul.dropdown-menu.show li:hover, .sensor-view-content-selector-date ul.dropdown-menu.show li:hover {
    background-color:#007769;
}
.sensor-view-content-selector ul.dropdown-menu.show li, .sensor-view-content-selector-date ul.dropdown-menu.show li {
    margin:0;
    padding-top:0.5em;
    padding-bottom:0.5em;
    text-align: left;
    justify-content: left;
    padding: 0.25rem 0.15rem;

}
.distribution_selector.distribution-selected {
    background-color: #007769;
}
.distribution_selector.distribution-selected  span{
    color:white !important;
}

.sensor-dendrometer-location-selector-content .btn {
    width: 100% !important;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sensor-dendrometer-location-selector-content .dropdown-toggle::after {
    display: inline-block;
    margin-right: 0.8em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: absolute;
    right: 0px;
    top: 45%;
}
.sensor-dendrometer-location-selector-content ul {
    width: 100% !important;
    overflow: hidden;
}

.chart-wp-dendrometer {
    width: 100% !important;
}



.sensor-dendrometer-location-selector {
    width: 100% !important;
    padding: 0.5rem;
    border-radius: 5px;
    margin-top: 0;
    padding-bottom: 0;
}

.canvas-wp.canvas-wp-dendrometer canvas {
    margin: auto;
}
li.dendro-season-selected {
    background-color: #007769;
}
li.dendro-season-selected span{
    color: white !important;
}
.sensor-dendrometer-location-col-wp {
    margin-bottom: 1rem;
}

/*.sensor-view-content-selector-date, .sensor-view-content-selector {
    width: 14.85rem;
}*/

/* ============================================================
   ADMIN LAYOUT V2 — SIDEBAR
   ============================================================ */

/* Wrapper */
.admin-layout {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg);
    font-family: var(--font);
}

/* ── SIDEBAR ─────────────────────────────────────────── */
.admin-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100%;
    background: var(--sidebar-gradient);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 100;
    box-shadow: 2px 0 16px rgba(0,0,0,0.18);
    border-right: 1px solid rgba(52,211,153,0.07);
}

.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1.25rem;
    height: var(--topbar-height);
    border-bottom: 1px solid rgba(52,211,153,0.1);
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    background: rgba(0,0,0,0.18);
}
.admin-sidebar-brand:hover { opacity: 0.85; background: rgba(0,0,0,0.25); }
.admin-sidebar-logo {
    height: 1.7rem;
    width: 1.7rem;
    object-fit: contain;
    flex-shrink: 0;
}
.admin-sidebar-text-logo {
    height: 1.7rem;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.admin-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.admin-sidebar-nav::-webkit-scrollbar { width: 3px; }
.admin-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
}

.admin-sidebar-footer {
    border-top: 1px solid var(--color-sidebar-border);
    padding: 0.5rem 0;
    flex-shrink: 0;
}

/* Nav items */
.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    color: var(--color-sidebar-text);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 400;
    border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s;
    user-select: none;
}
.admin-nav-item:hover {
    background-color: rgba(52,211,153,0.07);
    color: #fff;
}
.admin-nav-item.active {
    background-color: rgba(52,211,153,0.1);
    border-left-color: var(--color-accent);
    color: #fff;
    font-weight: 500;
}
.admin-nav-item.active i {
    color: var(--color-accent);
}
.admin-nav-item i {
    font-size: 0.95rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.12s;
}

/* Collapsible nav groups */
.admin-nav-group { margin-bottom: 1px; }

.admin-nav-group-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    color: var(--color-sidebar-text);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 400;
    border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s;
    user-select: none;
}
.admin-nav-group-title:hover {
    background-color: rgba(52,211,153,0.07);
    color: #fff;
}
.admin-nav-group.open > .admin-nav-group-title {
    color: var(--color-accent);
    background-color: rgba(52,211,153,0.06);
}
.admin-nav-group.open > .admin-nav-group-title > i:first-child {
    color: var(--color-accent);
}
.admin-nav-group-title > i:first-child {
    font-size: 0.95rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}
.admin-nav-group-title > span { flex: 1; }

.admin-nav-chevron {
    font-size: 0.65rem !important;
    opacity: 0.5 !important;
    width: auto !important;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.admin-nav-group.open .admin-nav-chevron { transform: rotate(180deg); }

.admin-nav-group-items {
    display: none;
    background-color: rgba(0,0,0,0.18);
    padding: 0.2rem 0;
}
.admin-nav-group.open .admin-nav-group-items { display: block; }

.admin-nav-subitem {
    display: block;
    padding: 0.45rem 1.25rem 0.45rem 3rem;
    color: var(--color-sidebar-muted);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: color 0.12s, background 0.12s;
    user-select: none;
}
.admin-nav-subitem:hover {
    color: var(--color-accent);
    background-color: rgba(52,211,153,0.05);
}
.admin-nav-subitem-header {
    padding: 0.75rem 1.25rem 0.2rem 3rem;
    color: rgba(52,211,153,0.4);
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    pointer-events: none;
    border-top: 1px solid rgba(255,255,255,0.04);
    margin-top: 0.2rem;
}

/* ── MAIN AREA ────────────────────────────────────────── */
.admin-main {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Top bar */
.admin-topbar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    background-color: var(--color-topbar-bg);
    border-bottom: 1px solid var(--color-topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 1px 0 var(--color-border), 0 2px 8px rgba(0,0,0,0.04);
    gap: 1rem;
    position: relative;
}
.admin-topbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(52,211,153,0.15) 20%, rgba(52,211,153,0.15) 80%, transparent);
    pointer-events: none;
}
.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}
.admin-topbar-home {
    font-size: 1rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.admin-topbar-home:hover {
    background-color: rgba(26,77,62,0.07);
    color: var(--color-primary);
}
.admin-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

/* Override admin-content height for flex layout */
.admin-content {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    max-height: none !important;
    background-color: var(--color-bg);
    padding: 1.5rem;
}
.admin-content > .container,
.admin-content > .container-fluid {
    max-width: 100%;
    padding: 0;
}
.admin-content > .container.py-3 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Admin actions — now in topbar */
.admin-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    color: var(--color-text-secondary) !important;
}
.admin-actions > i,
.admin-actions > .admin-action-wp,
.admin-actions > .dropdown > button i {
    color: var(--color-text-secondary);
    font-size: 1rem;
    padding: 0.45rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-actions > i:hover {
    color: var(--color-primary);
    background-color: var(--color-border-light);
}
/* Filter dates in topbar */
.admin-action-filter-dates label { font-size: 0.75rem; }
.admin-action-filter-dates input.form-control {
    font-size: 0.75rem;
    width: 8.5rem;
    height: calc(1.5em + 0.5rem);
    padding: 0.25rem 0.5rem;
    border-color: var(--color-border);
}

/* ── COMPONENT OVERRIDES ─────────────────────────────── */

/* bg-dark override */
.bg-dark { background-color: var(--color-primary) !important; }

/* Buttons */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary:hover { background-color: var(--color-primary-light); border-color: var(--color-primary-light); }
.btn-primary:focus { box-shadow: 0 0 0 3px rgba(26,77,62,0.25); }

/* Cards */
.admin-content .card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background-color: var(--color-surface);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.admin-content .card:hover {
    box-shadow: var(--shadow-md) !important;
}
.admin-content .card-header {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    letter-spacing: 0.01em;
}
.admin-content .shadow-sm { box-shadow: var(--shadow-sm) !important; }
.admin-content .border-0 { border: 1px solid var(--color-border) !important; }

/* Tables */
.admin-content .table {
    font-size: 0.855rem;
    margin-bottom: 0;
}
.admin-content .table thead th {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-secondary);
    background-color: #f8fafc;
    border-top: none;
    border-bottom: 2px solid var(--color-border);
    padding: 0.7rem 1rem;
    white-space: nowrap;
}
.admin-content .table tbody td {
    padding: 0.65rem 1rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}
.admin-content .table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8fafb !important;
}
.admin-content .table tbody tr {
    transition: background 0.1s;
}
.admin-content .table tbody tr:hover td {
    background-color: rgba(26,77,62,0.04) !important;
}

/* DataTables */
.admin-content .dataTables_wrapper .dataTables_filter input,
.admin-content .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    background-color: var(--color-surface);
    padding: 0.3rem 0.6rem;
}
.admin-content .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--color-primary-light);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26,77,62,0.08);
}
.admin-content .dataTables_wrapper .dataTables_info,
.admin-content .dataTables_wrapper .dataTables_length,
.admin-content .dataTables_wrapper .dataTables_paginate {
    font-size: 0.8rem;
}

/* Forms */
.admin-content .form-control {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    background-color: var(--color-surface);
    color: var(--color-text);
}
.admin-content .form-control:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(26,77,62,0.1), 0 1px 3px rgba(0,0,0,0.05);
    outline: none;
}
.admin-content .form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 0.3rem;
}

/* Dropdown menus in admin */
.admin-content .dropdown-menu,
.admin-topbar .dropdown-menu {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-size: 0.875rem;
    padding: 0.4rem 0;
}
.admin-content .dropdown-item,
.admin-topbar .dropdown-item {
    padding: 0.45rem 1rem;
    font-size: 0.855rem;
    color: var(--color-text);
    transition: background 0.1s;
}
.admin-content .dropdown-item:hover,
.admin-topbar .dropdown-item:hover {
    background-color: rgba(26,77,62,0.06);
    color: var(--color-primary);
}

/* Welcome page styling */
.admin-content .display-5 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text);
}
.admin-content .lead { color: var(--color-text-secondary); }
.admin-content .welcome-icon {
    width: 4.5rem;
    height: 4.5rem;
    background: var(--color-accent-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-content .welcome-icon i { color: var(--color-success); }

/* ── TOPBAR DROPDOWN BUTTONS ─────────────────────────── */
.admin-action-archive-dropdown button,
.admin-action-assistant-dropdown button {
    background-color: transparent;
    color: var(--color-text-secondary) !important;
    border: none;
    padding: 0.45rem;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.admin-action-archive-dropdown button:hover,
.admin-action-assistant-dropdown button:hover {
    background-color: var(--color-border-light);
    color: var(--color-primary) !important;
}
.admin-action-archive-dropdown.show > .btn-secondary.dropdown-toggle,
.admin-action-assistant-dropdown.show > .btn-secondary.dropdown-toggle {
    background-color: var(--color-border-light);
    color: var(--color-primary) !important;
}

@media (max-width: 1250px){

    .chart-resume-item {
        width: 31%;
    }
}
@media (max-width: 989px){


}
@media (max-width: 953px){

}
@media (max-width: 900px){
    .chart-resume-item {
        width: 100%;
    }
}

@media (max-width: 768px){

}

@media (max-width: 650px){

}
@media (max-width: 575px){
    sensor-dendrometer-views {
        right: 2em;
    }
}
@media (max-width: 525px){
    .chart-resume-item {
        width: 100%;
    }
}

/* END DENDROMETER MODS */
/* AZIMUTH EDITION */
.azimuth-edition-display-none{
    display: none !important;
}
#nav-main.azimuth-edition-display-none {
    overflow: hidden;
    max-width: 1px;
    max-height: 2.5rem;
}
.azimuth-edition-back-button {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 100000;
    background-color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 3px;
    color: #007769;
    cursor: pointer;
}
/* END AZIMUTH EDITION */


/* MEDIA QUERY */
@media (max-width: 1199px){
  html,body{
    font-size: 17px;
  }
}
@media (max-width: 991px){
  html,body{
    font-size: 16px;
  }
  .modal-distribution-selector-view-content .main-menu-distribution-selector-item {
    width: 33.33%;
  }
  .modal-moment-selector-view-content .main-menu-date-selector-item {
    width: 33.33%;
  }
  .chart-wp {
    width: calc(100% - 2rem);
  }

  /*MENU*/

  .client-menu.navbar{
      padding: 0rem;
      display: flex;
      align-content: center;
      padding-right: 1rem;
      padding-left: 0.5rem;
      overflow: visible;
  }

  .client-menu .main-product-selector {
      width: 8rem;
  }

  .client-menu .partner-logo {
      width: 7rem;
  }

  .client-menu .navbar-nav{
      column-gap: 0.5rem;
  }

  .client-menu .navbar-nav .nav-link {
      padding-left: 0.4rem;
      padding-right: 0.4rem;
  }

  .client-menu .nav-link .fas{
      font-size: 1.2rem;
      margin-right: 0;
  }

  .client-menu .nav-link span {
      display: none !important;
  }

  .client-menu .nav-item .dropdown-menu span > span {
      display: inherit !important;
  }

  .client-menu .client-config-menu-dropdown .dropdown-menu.show{
      position: absolute;
      padding: 0.5rem 1rem;
  }

}
@media (max-width: 767px){
  html,body{
    font-size: 15px;
  }
  .graph-view .graph-view-control-result{
      width: 33.33%;
  }
  .graph-view .chart-config {
    width: calc(100% - 2rem);
  }


  /*MENU*/

  .client-menu .main-logo {
      height: 1.8rem;
      width: 1.8rem;
  }

  .client-menu .main-product-selector {
      height: 1.4rem;
      width: 7rem;
  }

  .client-menu .partner-logo {
      height: 1.8rem;
      width: 5.5rem;
  }

  .client-menu .navbar-nav {
      column-gap: 0;
  }

  .client-menu .navbar-nav .nav-link {
      padding-left: 0.3rem;
      padding-right: 0.3rem;
  }

  .client-menu .nav-link i {
      margin-right: 0;
  }

  .client-menu .nav-link span {
      display: none !important;
  }

  .client-menu .nav-item .dropdown-menu span > span {
      display: inherit !important;
  }

  .client-menu .nav-link .fas{
      font-size: 1.3rem;
  }

  .client-menu .client-config-menu-dropdown .dropdown-menu.show{
      left: -6rem !important;
      top: 3rem !important;
  }

  .client-menu .navbar-nav .dropdown-menu .nav-link{
      display: flex !important;
      column-gap: 0.5rem !important;
  }
}

@media (max-width: 600px){
    .client-menu .main-logo {
        height: 1.6rem;
        width: 1.6rem;
    }

    .client-menu .main-product-selector {
        height: 1.4rem;
        width: 6rem;
    }

    .client-menu .partner-logo {
        height: 1.6rem;
        width: 5rem;
    }

    .client-menu .navbar-nav{
        height: 1.2rem;
        column-gap: 0;
    }

    .client-menu .navbar-nav .nav-link{
        display: initial !important;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }

    .client-menu .nav-link i {
        margin-right: 0;
    }

    .client-menu .client-config-menu-dropdown .dropdown-menu.show {
        left: -6.2rem !important;
        top: 2.4rem !important;
    }

}
@media (max-width: 575px){
  html,body{
    font-size: 14px;
  }
  .chart-wp {
    width: calc(100% - 2rem);
  }
  .form-signin{
    max-width: 95%;
  }
  .modal-distribution-selector-view-content .main-menu-distribution-selector-item {
    width: 50%;
  }
  .modal-momnet-selector-view-content .main-menu-date-selector-item {
    width: 50%;
  }
  .graph-view .graph-view-control{
      width: 100%;
  }
  .graph-view.controls_hidden .graph-view-graph{
      margin-bottom: 9rem;
  }
  .graph-view .graph-view-control-result{
      width: 33.33%;
  }
  .graph-view, .sensor-view, .modal-distribution-selector-view, .modal-moment-selector-view{
      padding-left: 1rem;
      padding-right: 1rem;
  }
  /*.graph-view-close-icon, .sensor-view-close-icon, .modal-distribution-selector-view-close-icon, .modal-moment-selector-view-close-icon{
      right: -0.5rem;
  }
  .graph-view-help-icon-wp{
      right: 0.5rem;
  }*/

}
@media (max-width: 432px){
  .client-menu .main-product-selector{
      width: 5.5rem;
  }

  .client-menu .partner-logo{
      height: 1.4rem;
      width: 4.5rem;
  }
}
@media (max-width: 419px){
  html,body{
    font-size: 13px;
  }
  .chart-wp {
    width: calc(100% - 2rem);
  }
  .form-signin{
    max-width: 95%;
  }
  .modal-distribution-selector-view-content .main-menu-distribution-selector-item {
    width: 100%;
  }
  .modal-moment-selector-view-content .main-menu-date-selector-item {
    width: 100%;
  }
  .graph-view .graph-view-control-result{
      width: 100%;
  }

  .client-menu .main-logo{
      height: 1.2rem;
      width: 1rem;
  }

  .client-menu .partner-logo{
      height: 1.3rem;
      width: 4rem;
  }

  .client-menu .main-product-selector{
      height: 1.2rem;
      width: 5rem;
  }


}
@media (max-width: 360px){
  html,body{
    font-size: 12px;
  }
  .chart-wp {
    width: calc(100% - 2rem);
  }
  .form-signin{
    max-width: 95%;
  }
  .main-menu{
    left: 1rem;
  }
  .graph-view .graph-view-control-result{
      width: 100%;
  }
}
/* MEDIA QUERY */
/*@media (max-width: 1199px){
  html,body{
    font-size: 17px;
  }
}
@media (max-width: 991px){
  html,body{
    font-size: 16px;
  }
  .modal-distribution-selector-view-content .main-menu-distribution-selector-item {
      width: 33.33%;
  }
  .modal-moment-selector-view-content .main-menu-date-selector-item {
      width: 33.33%;
  }
  .chart-wp {
    width: calc(100% - 2rem);
  }
}
@media (max-width: 767px){
  html,body{
    font-size: 15px;
  }
  .chart-wp {
    width: calc(100% - 2rem);
  }
}
@media (max-width: 575px){
  html,body{
    font-size: 14px;
  }
  .chart-wp {
    width: calc(100% - 2rem);
  }
  .form-signin{
    max-width: 95%;
  }
  .modal-distribution-selector-view-content .main-menu-distribution-selector-item {
      width: 50%;
    }
    .modal-moment-selector-view-content .main-menu-date-selector-item {
        width: 50%;
      }
}
@media (max-width: 419px){
  html,body{
    font-size: 13px;
  }
  .chart-wp {
    width: calc(100% - 2rem);
  }
  .form-signin{
    max-width: 95%;
  }
   .modal-distribution-selector-view-content .main-menu-distribution-selector-item {
      width: 100%;
    }
    .modal-moment-selector-view-content .main-menu-date-selector-item {
       width: 100%;
     }
}
@media (max-width: 360px){
  html,body{
    font-size: 12px;
  }
  .chart-wp {
    width: calc(100% - 2rem);
  }
  .form-signin{
    max-width: 95%;
  }
  .main-menu{
    left: 1rem;
  }
}*/

/* ==========================================================
   V2 CLIENT TEMPLATES (admin3.html)
   ========================================================== */

/* --- places-TPL: branding logo in header --- */
.places_brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.places_brand_icon {
    height: 2.4rem;
    width: 2.4rem;
    object-fit: contain;
}
.places_brand_text {
    height: 2rem;
    width: auto;
    object-fit: contain;
    opacity: 0.95;
}
.places_brand_partner_logo {
    display: none;
    height: 2rem;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
    padding-left: 0.75rem;
    margin-left: 0.2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.places[partner="NTKH"] .places_brand_partner_logo--ntkh {
    display: block;
}
.places[partner="61J7"] .places_brand_partner_logo--61j7 {
    display: block;
}

/* --- main-TPL: client sidebar layout (v2) --- */
:root {
    --client-sidebar-width: 220px;
}

/* Sidebar container */
.client-menu-v2 {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--client-sidebar-width);
    height: 100% !important;
    background-color: var(--color-sidebar-bg) !important;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: none !important;
    display: flex;
    flex-direction: column;
    z-index: 500;
    overflow: hidden;
    padding: 0 !important;
}

/* ── Sidebar brand (arriba): logo de cliente/partner ── */
.client-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    min-height: var(--topbar-height);
    border-bottom: 1px solid var(--color-sidebar-border);
    flex-shrink: 0;
}
/* El partner-logo hereda sus reglas de background-image de theme_v1.
   Aquí solo ajustamos el tamaño dentro del brand. */
.client-sidebar-brand .partner-logo {
    width: 100%;
    height: 2.2rem;
    margin-left: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* ── Logos Agerpix (footer, abajo) ── */
.client-sidebar-agerpix {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.client-sidebar-logo {
    height: 1.5rem;
    width: 1.5rem;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.75;
}
.client-sidebar-text-logo {
    height: 1.5rem;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.75;
}

/* ── Product selector ── */
.client-sidebar-product {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.client-sidebar-product .main-product-selector-dropdown {
    display: block !important;
    width: 100%;
}
.client-sidebar-product .dropdown-toggle {
    display: flex !important;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    text-align: left;
    padding: 0.35rem 0.5rem !important;
    background: rgba(255,255,255,0.07) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: rgba(255,255,255,0.85);
    box-shadow: none !important;
}
.client-sidebar-product .dropdown-toggle:hover,
.client-sidebar-product .dropdown-toggle:focus {
    background: rgba(255,255,255,0.12) !important;
    color: #fff;
    box-shadow: none !important;
}
.client-sidebar-product .dropdown-toggle::after {
    margin-left: auto;
    color: rgba(255,255,255,0.5);
}
/* hide Agerpix icon in product area (brand section already shows it) */
.client-sidebar-product .main-logo {
    display: none !important;
}
.client-sidebar-product .main-product-selector {
    width: 7rem;
    height: 1.3rem;
}
/* Product switch dropdown opens inline (data-display="static" disables Popper) */
.client-menu-v2 .main-product-selector-dropdown .dropdown-menu {
    position: static !important;
    float: none !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    will-change: auto !important;
    width: 100% !important;
    background-color: rgba(0,0,0,0.18) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.client-menu-v2 .main-product-selector-dropdown .dropdown-menu .dropdown-item {
    background: transparent;
    padding: 0.4rem 0.5rem;
    width: 100%;
}
.client-menu-v2 .main-product-selector-dropdown .dropdown-menu .dropdown-item:hover {
    background: rgba(255,255,255,0.07);
}

/* ── Navigation ── */
.client-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.35rem 0;
}
.client-sidebar-nav::-webkit-scrollbar { width: 3px; }
.client-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.client-menu-v2 .navbar-nav {
    flex-direction: column !important;
    width: 100%;
    gap: 0;
}
.client-menu-v2 .nav-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.client-menu-v2 .nav-link {
    color: var(--color-sidebar-text) !important;
    display: flex !important;
    align-items: center;
    gap: 0.65rem;
    padding: 0.62rem 1rem !important;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    width: 100%;
    border-radius: 0;
}
.client-menu-v2 .nav-link i {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    margin-right: 0 !important;
    opacity: 0.85;
}
.client-menu-v2 .nav-item.active > .nav-link,
.client-menu-v2 .nav-link:hover {
    color: #fff !important;
    background-color: var(--color-primary-hover) !important;
    border-radius: 0 !important;
}
.client-menu-v2 .nav-item.active > .nav-link i,
.client-menu-v2 .nav-link:hover i {
    opacity: 1;
}

/* Dropdown toggle in sidebar nav — chevron auto-right */
.client-menu-v2 .nav-item .nav-link.dropdown-toggle::after {
    margin-left: auto;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
}

/* Dropdown sub-menus open inline (accordion style) */
/* data-display="static" disables Popper.js, these rules are the safety net */
.client-menu-v2 .client-config-menu-dropdown .dropdown-menu {
    position: static !important;
    float: none !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    will-change: auto !important;
    background-color: rgba(0,0,0,0.15) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.2rem 0 !important;
    margin: 0 !important;
    z-index: auto !important;
    display: none;
    width: 100%;
}
.client-menu-v2 .client-config-menu-dropdown .dropdown-menu.show {
    display: block !important;
}
.client-menu-v2 .client-config-menu-dropdown .dropdown-menu .nav-link {
    padding-left: 2.4rem !important;
    font-size: 0.8rem !important;
    color: rgba(255,255,255,0.65) !important;
    white-space: normal !important;
    line-height: 1.35;
    align-items: flex-start !important;
}
.client-menu-v2 .client-config-menu-dropdown .dropdown-menu .nav-link i {
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.client-menu-v2 .client-config-menu-dropdown .dropdown-menu .nav-link:hover {
    color: rgba(255,255,255,0.95) !important;
    background-color: rgba(255,255,255,0.06) !important;
}

/* ── Sidebar footer ── */
.client-sidebar-footer {
    padding: 0.6rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

/* ── main-v2 layout: offset map and overlays ── */
.main-v2 {
    position: relative;
}
.main-v2 #map {
    height: 100% !important;
    margin-left: var(--client-sidebar-width);
}
.main-v2 .graph-view,
.main-v2 .sensor-view,
.main-v2 .modal-distribution-selector-view,
.main-v2 .modal-moment-selector-view {
    top: 0 !important;
    left: var(--client-sidebar-width) !important;
}
.main-v2 .modal-client-form-view,
.main-v2 .modal-client-calc-view {
    top: 0 !important;
    left: var(--client-sidebar-width) !important;
}

/* ── main-v2: wrapper clips the panel — never extends into the sidebar ── */
.main-v2 .main-menu-v2-wrapper {
    position: absolute;
    left: var(--client-sidebar-width);
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 10000;
    transition: top .32s cubic-bezier(0.32,0.72,0,1), bottom .32s cubic-bezier(0.32,0.72,0,1);
}

/* When the compare panel (side="right") is visible, split the space 50/50 vertically */
.main-v2:has(.main-menu-v2-wrapper:has(.main-menu-v2[side="right"].toggled))
    .main-menu-v2-wrapper:has(.main-menu-v2[side="left"]) {
    bottom: 50%;
}
.main-v2 .main-menu-v2-wrapper:has(.main-menu-v2[side="right"].toggled) {
    top: 50%;
    bottom: 0;
}

/* In compare mode: cap each panel to 50vh so DataView content scrolls instead of overflowing */
.main-v2:has(.main-menu-v2-wrapper:has(.main-menu-v2[side="right"].toggled)) .main-menu-v2 {
    height: 50vh !important;
    max-height: 50vh !important;
    overflow: hidden;
}
/* Hide side toggle-tabs in compare mode */
.main-v2:has(.main-menu-v2-wrapper:has(.main-menu-v2[side="right"].toggled)) .main-menu-v2-toggle-tab {
    display: none;
}

/* Hide compare button on left panel when compare is active — equalises both panels */
.main-v2:has(.main-menu-v2-wrapper:has(.main-menu-v2[side="right"].toggled))
    .main-menu-v2[side="left"] .main-menu-content[content="actions"] {
    display: none;
}

/* Hide the right panel's wrapper when compare is not active */
.main-v2 .main-menu-v2-wrapper:has(.main-menu-v2[side="right"]:not(.toggled)) {
    display: none;
}

/* Panel sits at left:0 within the wrapper; translate hides it left */
.main-v2 .main-menu-v2 {
    left: 0;
    pointer-events: auto;
}
/* Compare panel (side="right") is NOT an independent panel — it's an extension of the main panel.
   No slide animation, no toggle tab. It appears as a seamless bottom section. */
.main-v2 .main-menu-v2[side="right"] {
    left: 0;
    right: auto;
    border-left: none;
    border-right: 1px solid var(--color-border);
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
}
/* Hide the compare panel's own toggle tab — section is controlled by the compare button only */
.main-v2 .main-menu-v2[side="right"] .main-menu-v2-toggle-tab {
    display: none !important;
}
/* Hide toggle and close icons in compare panel — only close-compare X is needed */
.main-v2 .main-menu-v2[side="right"] .main-menu-header-icon[action="toggle"] {
    display: none !important;
}
/* Divider line — on the panel itself so it only spans the panel width (25rem) */
.main-v2 .main-menu-v2[side="right"].toggled {
    border-top: 1px solid var(--color-border, #e2e8f0);
}
/* Close-compare button — only visible in the right (compare) panel */
.main-menu-v2 .main-menu-close-compare {
    display: none !important;
}
.main-menu-v2[side="right"] .main-menu-close-compare {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: 0.3rem;
    cursor: pointer;
    color: var(--color-text-muted, #9ca3af);
    border-radius: var(--radius-xs, 4px);
    transition: background-color 0.15s, color 0.15s;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.main-menu-v2[side="right"] .main-menu-close-compare:hover {
    color: var(--color-danger, #dc2626);
    background-color: rgba(220,38,38,0.08);
}
/* Tab must capture clicks even though wrapper is pointer-events:none */
.main-v2 .main-menu-v2-toggle-tab {
    pointer-events: auto;
}

/* ── main-v2: main-actions — Leaflet-bar style, top-right ─── */
.main-v2 .main-actions {
    top: 10px !important;
    right: 10px;
    left: auto;
    z-index: 1030;
}
.main-v2 .main-actions-content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
    background-clip: padding-box;
}
.main-v2 .main-action,
.main-v2 .main-action-dendro {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    color: #333;
    font-size: 0.7rem;
    margin: 0;
    box-shadow: none;
    transition: background-color 0.12s;
}
.main-v2 .main-action:hover,
.main-v2 .main-action-dendro:hover {
    background-color: #f4f4f4;
    color: #333;
}
.main-v2 .main-action.active,
.main-v2 .main-action-dendro.active {
    background-color: #007565;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   REPORTS (Dashboard) - admin-graph-view redesign v2
   Solo visual: sin tocar lógica JS ni hooks de datos
   ═══════════════════════════════════════════════════════════════ */

:root {
    --report-nav-width: 260px;
}

/* ── Contenedor principal ── */
.admin-graph-view {
    background-color: #f7f8fa;
    padding: 0;
}

/* ── Iconos (cerrar / ayuda): alineados con la topbar ── */
.admin-graph-view .graph-view-icons {
    top: 0;
    right: var(--report-nav-width);
    height: var(--topbar-height, 3.5rem);
    align-items: center;
    padding: 0 0.75rem;
    gap: 0.2rem;
    z-index: 1100;
}
.admin-graph-view .graph-view-close-icon,
.admin-graph-view .graph-view-help-icon {
    width: 2rem;
    height: 2rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    background-image: none;
    position: initial;
    right: unset;
    top: unset;
    font-size: 1rem;
    color: #718096;
    transition: background-color 0.15s, color 0.15s;
}
.admin-graph-view .graph-view-close-icon:hover,
.admin-graph-view .graph-view-help-icon:hover {
    background-color: rgba(0, 0, 0, 0.07);
    color: #2d3748;
}

/* ── Panel de ayuda ── */
/* Si showHelp() apila varios .help, ocultar todos excepto el primero */
.admin-graph-view .help ~ .help {
    display: none !important;
}
.admin-graph-view .help {
    position: absolute;
    top: var(--topbar-height, 3.5rem);
    right: var(--report-nav-width);
    bottom: 0.5rem;
    width: 22rem;
    max-height: unset;
    border-radius: 0.5rem 0 0 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-right: none;
    box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    z-index: 1060;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-graph-view .help-wp {
    max-height: unset;
    flex: 1;
    overflow-y: auto;
    margin-top: 0.75rem;
}
.admin-graph-view .help-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #a0aec0;
    text-align: left;
    margin-bottom: 0;
}
.admin-graph-view .help-close {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: auto;
    margin-bottom: 0.5rem;
}
.admin-graph-view .help-close i {
    color: #718096;
    font-size: 1.1rem;
}
.admin-graph-view .help-close i:hover {
    color: #2d3748;
}
.admin-graph-view .help-topic {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    text-align: left;
    border-radius: 0.375rem;
    border: 1px solid rgba(0, 117, 101, 0.25);
    color: #007565;
    margin-bottom: 0.3rem;
}
.admin-graph-view .help-topic.active {
    background-color: #007565;
    color: #fff;
    border-color: #007565;
}
.admin-graph-view .help-section-wp {
    padding: 0.5rem 0;
}
.admin-graph-view .help-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.25rem;
}

/* ── Header: topbar sticky con ancho reducido para dejar espacio al panel ── */
.admin-graph-view .graph-view-header {
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0 3rem 0 1.5rem;
    height: var(--topbar-height, 3.5rem);
    display: flex;
    align-items: center;
    margin: 0;
    margin-right: var(--report-nav-width);
    top: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.admin-graph-view .grpah-view-header-title {
    overflow: hidden;
    min-width: 0;
}
.admin-graph-view .graph-view-header .chart-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a202c;
    text-transform: none;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-graph-view .graph-view-header .chart-subtitle {
    font-size: 0.75rem;
    color: #718096;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Icono exportar ── */
.admin-graph-view .graph-view-export-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
    color: #007565;
    transition: background-color 0.15s;
}
.admin-graph-view .graph-view-export-icon:hover {
    background-color: rgba(0, 117, 101, 0.08);
}

/* ── Contenido: margen derecho para el panel de navegación ── */
.admin-graph-view .graph-view-content {
    padding: 1.5rem 1.5rem 0 1.5rem;
    margin-right: var(--report-nav-width);
}

/* ── Pantalla de bienvenida ── */
.admin-graph-view .graph-view-no-selection {
    width: 100%;
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}
.admin-graph-view .graph-view-no-selection-content {
    max-width: 22rem;
    text-align: center;
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 2rem 2rem 1.5rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-graph-view .graph-view-no-selection-content-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
}
.admin-graph-view .graph-view-no-selection-content-text {
    font-size: 0.825rem;
    color: #718096;
    margin-bottom: 0.75rem;
    line-height: 1.55;
}
.admin-graph-view .graph-view-no-selection-content-step {
    font-size: 0.825rem;
    color: #007565;
    padding: 0.2rem 0;
    font-weight: 600;
    text-align: left;
}

/* ════════════════════════════════════════════
   PANEL DE NAVEGACIÓN - lateral derecho fijo
   ════════════════════════════════════════════ */
.admin-graph-view .graph-view-controls-wp {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: unset !important;
    width: var(--report-nav-width);
    background-color: #fff;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: -3px 0 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    z-index: 1050;
}

/* Título del panel */
.admin-graph-view .graph-view-controls-wp::before {
    content: "Asistente";
    display: flex;
    align-items: center;
    height: var(--topbar-height, 3.5rem);
    padding: 0 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a0aec0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
}

/* ── Lista de pasos ── */
.admin-graph-view .graph-view-controls {
    background-color: transparent;
    counter-reset: step;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
    width: 100%;
}
.admin-graph-view .graph-view-control {
    width: 100% !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem 0.7rem 0.85rem;
    background-color: transparent;
    color: #a0aec0;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    border-left: 3px solid transparent;
    border-top: none;
    counter-increment: step;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    text-align: left;
}
/* Círculo numerado */
.admin-graph-view .graph-view-control::before {
    content: counter(step);
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border-radius: 50%;
    background-color: #edf2f7;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    color: #a0aec0;
    margin: 0;
    transition: background-color 0.15s, color 0.15s;
}
.admin-graph-view .graph-view-control:nth-child(odd) {
    background-color: transparent;
}
.admin-graph-view .graph-view-control:hover {
    background-color: #f7f8fa;
    color: #4a5568;
}
.admin-graph-view .graph-view-control.disabled {
    opacity: 0.4;
    cursor: default;
}
.admin-graph-view .graph-view-control.disabled:hover {
    background-color: transparent;
    color: #a0aec0;
}
.admin-graph-view .graph-view-control.disabled:nth-child(odd):hover {
    background-color: transparent;
}
.admin-graph-view .graph-view-control.active {
    background-color: rgba(0, 117, 101, 0.06);
    color: #007565;
    border-left-color: #007565;
    border-bottom-color: rgba(0, 0, 0, 0.04);
    border-top: none;
    border-right: none;
}
.admin-graph-view .graph-view-control.active::before {
    background-color: #007565;
    color: #fff;
}
.admin-graph-view .graph-view-control-title {
    font-size: 0.825rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
/* Fix: 4 controles - mantener ancho 100% */
.admin-graph-view .graph-view-controls[items="4"] .graph-view-control,
.admin-graph-view .graph-view-controls[items="5"] .graph-view-control {
    width: 100% !important;
}
/* Ocultar botón cerrar (X) en el graph-view del cliente */
.main-v2 .graph-view-close-icon-wp {
    display: none !important;
}

/* ── Lista de resultados (scrollable) ── */
.admin-graph-view .graph-view-controls-results {
    background-color: #f7f8fa;
    height: unset !important;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: none;
    align-content: flex-start;
}
.admin-graph-view .graph-view-controls-results::-webkit-scrollbar {
    width: 3px;
}
.admin-graph-view .graph-view-controls-results::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

/* ── Items de resultado: lista vertical ── */
.admin-graph-view .graph-view-control-result {
    width: 100% !important;
    height: auto !important;
}
.admin-graph-view .graph-view-control-result
    .main-menu-distribution-selector-item-content,
.admin-graph-view .graph-view-control-result
    .main-menu-date-selector-item-content,
.admin-graph-view .graph-view-control-result
    .main-menu-specie-selector-item-content,
.admin-graph-view .graph-view-control-result
    .main-menu-variety-selector-item-content,
.admin-graph-view .graph-view-control-result
    .main-menu-report-selector-item-content {
    background-color: #fff;
    color: #4a5568;
    border-right: none;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0 !important;
    padding: 0.6rem 1rem !important;
    text-align: left !important;
    display: block !important;
    height: auto !important;
}
/* Resetear display: table-cell del wrapper interno que crea el gap */
.admin-graph-view .graph-view-control-result
    .main-menu-distribution-selector-item-content-wp,
.admin-graph-view .graph-view-control-result
    .main-menu-date-selector-item-content-wp,
.admin-graph-view .graph-view-control-result
    .main-menu-specie-selector-item-content-wp,
.admin-graph-view .graph-view-control-result
    .main-menu-variety-selector-item-content-wp,
.admin-graph-view .graph-view-control-result
    .main-menu-report-selector-item-content-wp {
    display: block !important;
}
.admin-graph-view .graph-view-control-result:nth-child(odd)
    .main-menu-distribution-selector-item-content,
.admin-graph-view .graph-view-control-result:nth-child(odd)
    .main-menu-date-selector-item-content,
.admin-graph-view .graph-view-control-result:nth-child(odd)
    .main-menu-specie-selector-item-content,
.admin-graph-view .graph-view-control-result:nth-child(odd)
    .main-menu-variety-selector-item-content,
.admin-graph-view .graph-view-control-result:nth-child(odd)
    .main-menu-report-selector-item-content {
    background-color: #f7f8fa;
}
.admin-graph-view .graph-view-control-result
    .main-menu-distribution-selector-item-content:hover,
.admin-graph-view .graph-view-control-result
    .main-menu-date-selector-item-content:hover,
.admin-graph-view .graph-view-control-result
    .main-menu-specie-selector-item-content:hover,
.admin-graph-view .graph-view-control-result
    .main-menu-variety-selector-item-content:hover,
.admin-graph-view .graph-view-control-result
    .main-menu-report-selector-item-content:hover {
    background-color: rgba(0, 117, 101, 0.06);
    color: #007565;
    border-left-color: #007565;
}
/* Item activo */
.admin-graph-view .graph-view-control-result.active
    .main-menu-distribution-selector-item-content,
.admin-graph-view .graph-view-control-result.active
    .main-menu-date-selector-item-content {
    background-color: rgba(0, 117, 101, 0.08) !important;
    color: #007565 !important;
    border-left-color: #007565 !important;
}
/* Texto dentro de los items */
.admin-graph-view .graph-view-control-result
    .main-menu-distribution-selector-item-content-name,
.admin-graph-view .graph-view-control-result
    .main-menu-distribution-selector-item-content-area,
.admin-graph-view .graph-view-control-result
    .main-menu-date-selector-item-content-moment,
.admin-graph-view .graph-view-control-result
    .main-menu-date-selector-item-content-day,
.admin-graph-view .graph-view-control-result
    .main-menu-specie-selector-item-content-title,
.admin-graph-view .graph-view-control-result
    .main-menu-variety-selector-item-content-title,
.admin-graph-view .graph-view-control-result
    .main-menu-report-selector-item-content-title {
    color: inherit;
    font-size: 0.8rem;
    text-align: left;
}
.admin-graph-view .graph-view-control-result
    .main-menu-distribution-selector-item-content-name {
    font-size: 0.9rem;
    font-weight: 700;
}
.admin-graph-view .graph-view-control-result
    .main-menu-distribution-selector-item-content-area {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ════════════════════════════════════════════
   ÁREA DE GRÁFICA
   ════════════════════════════════════════════ */
.admin-graph-view .graph-view-graph {
    margin-bottom: 2rem;
}

/* Chart en tarjeta */
.admin-graph-view .chart-wp {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin: 0.75rem 0 !important;
    width: calc(100% - 0.5rem) !important;
}
.admin-graph-view .chart-wp.full-width {
    width: calc(100% - 0.5rem) !important;
}
.admin-graph-view .chart-wp .chart-title {
    text-align: left;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a202c;
    text-transform: none;
    margin-bottom: 0.1rem;
}
.admin-graph-view .chart-wp .chart-subtitle {
    text-align: left;
    font-size: 0.78rem;
    color: #718096;
    font-weight: 400;
    margin-bottom: 0.75rem;
}

/* ════════════════════════════════════════════
   LEYENDA: pill toggles
   ════════════════════════════════════════════ */
.admin-graph-view .chart-legend.d-flex.flex-wrap.justify-content-center {
    justify-content: flex-start !important;
    gap: 0.4rem;
    padding: 0.75rem 0 0.25rem;
    margin-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
/* Fase / Histórico / Línea → extremo derecho */
.admin-graph-view .chart-legend-item[group="view"][view="moment"] {
    margin-left: auto;
}
.admin-graph-view .chart-legend-item {
    position: relative;
    padding: 0.3rem 0.85rem;
    border-radius: 2rem;
    background-color: #f0f2f5;
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex-grow: 0 !important;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.admin-graph-view .chart-legend-item:hover {
    background-color: #e2e8f0;
    border-color: rgba(0, 0, 0, 0.14);
}
/* El check ocupa todo el pill y es invisible (click area) */
.admin-graph-view .chart-legend-item-check,
.admin-graph-view .chart-legend-item-check.round {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: inherit;
    cursor: pointer;
    background: transparent;
    border: none;
    pointer-events: all !important;
}
.admin-graph-view .chart-legend-item-wp {
    pointer-events: none;
}
.admin-graph-view .chart-legend-item-title {
    margin-left: 0;
    font-size: 0.78rem;
    color: #4a5568;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
}
.admin-graph-view .chart-legend-item-title-line-dropdown {
    color: #4a5568;
    font-size: 0.78rem;
}
/* Pill activo */
.admin-graph-view .chart-legend-item.active {
    background-color: #007565;
    border-color: #007565;
}
.admin-graph-view .chart-legend-item.active .chart-legend-item-title,
.admin-graph-view .chart-legend-item.active .chart-legend-item-title-line-dropdown {
    color: #fff;
}
.admin-graph-view .chart-legend-item.disabled {
    opacity: 0.45;
    cursor: default;
}
.admin-graph-view .chart-legend-item.disabled .chart-legend-item-check {
    cursor: default;
}

/* ── Config table ── */
.admin-graph-view .chart-config {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-graph-view .chart-config-accept,
.admin-graph-view .chart-config-add {
    border-radius: 0.35rem;
    padding: 0.35rem 1rem;
    font-size: 0.825rem;
}

/* ============================================================
   THEME V2 — VISUAL POLISH ENHANCEMENTS
   Purely decorative: no selectors touch functionality or JS hooks
   ============================================================ */

/* ── Smooth transitions on all interactive sidebar elements ── */
.admin-nav-item,
.admin-nav-group-title,
.admin-nav-subitem {
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

/* ── Sidebar footer logout button: accent on hover ── */
.admin-sidebar-footer .admin-nav-item:hover {
    background-color: rgba(220,38,38,0.08);
    color: #fca5a5;
}
.admin-sidebar-footer .admin-nav-item:hover i {
    color: #fca5a5;
}

/* ── Content area scrollbar refinement ── */
.admin-content::-webkit-scrollbar { width: 4px; }
.admin-content::-webkit-scrollbar-track { background: transparent; }
.admin-content::-webkit-scrollbar-thumb {
    background: rgba(26,77,62,0.18);
    border-radius: 4px;
}
.admin-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-light);
}

/* ── Topbar action icons: tighter, more polished ── */
.admin-actions > i:hover {
    background-color: rgba(26,77,62,0.07) !important;
    color: var(--color-primary) !important;
}
.admin-actions > .admin-action-wp:hover i {
    color: var(--color-primary);
}

/* ── DataTables pagination: brand colors ── */
.admin-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.admin-content .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--color-primary) !important;
    background-image: none !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
}
.admin-content .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover {
    background: rgba(26,77,62,0.08) !important;
    background-image: none !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
}

/* ── DataTables filter / info ── */
.admin-content .dataTables_wrapper .dataTables_filter label,
.admin-content .dataTables_wrapper .dataTables_length label,
.admin-content .dataTables_wrapper .dataTables_info {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 400;
    letter-spacing: 0;
}

/* ── Admin title typography refinement ── */
.admin-title {
    letter-spacing: -0.01em;
    font-weight: 600 !important;
}

/* ── Login form polish ── */
.form-signin {
    border: none !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.28) !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden;
}

/* ── Login input focus ── */
.form-signin .form-control:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(26,77,62,0.12);
    outline: none;
}

/* ── Login button ── */
.form-signin .btn-primary {
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.form-signin .btn-primary:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 12px rgba(26,77,62,0.3);
    transform: translateY(-1px);
}
.form-signin .btn-primary:active {
    transform: translateY(0);
}

/* ── Welcome page: icon circle pulse ── */
.admin-content .welcome-icon {
    box-shadow: 0 0 0 0 rgba(52,211,153,0.3);
    animation: welcome-pulse 2.4s ease-out infinite;
}
@keyframes welcome-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.25); }
    60%  { box-shadow: 0 0 0 14px rgba(52,211,153,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* ── Welcome page: feature cards ── */
.admin-list [style*="border-radius:12px"] {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border: 1px solid var(--color-border-light);
}
.admin-list [style*="border-radius:12px"]:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ── Btn-secondary in topbar dropdowns ── */
.admin-action-archive-dropdown button,
.admin-action-assistant-dropdown button {
    box-shadow: none !important;
    outline: none !important;
    font-size: 1rem;
    padding: 0.4rem 0.45rem;
}

/* ── Dropdown menu items: add left border on hover for depth ── */
.admin-content .dropdown-menu .dropdown-item,
.admin-topbar .dropdown-menu .dropdown-item {
    border-left: 2px solid transparent;
    transition: background 0.1s, border-color 0.1s, padding-left 0.1s;
}
.admin-content .dropdown-menu .dropdown-item:hover,
.admin-topbar .dropdown-menu .dropdown-item:hover {
    border-left-color: var(--color-accent);
    padding-left: 1.2rem;
}

/* ── Card subtle top accent when data shown ── */
.admin-content .card .card-header {
    position: relative;
    overflow: hidden;
}
.admin-content .card .card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    opacity: 0.4;
}

/* ── Scrollbar global refinement ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background-color: rgba(26,77,62,0.22);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-light);
}

/* ── Sidebar nav-group items backdrop ── */
.admin-nav-group-items {
    background-color: rgba(0,0,0,0.22);
    border-left: 1px solid rgba(52,211,153,0.06);
    margin-left: 1.25rem;
}

/* ── Table: cleaner section borders ── */
.admin-content .table {
    border-collapse: separate;
    border-spacing: 0;
}
.admin-content .table-bordered td,
.admin-content .table-bordered th {
    border: 1px solid var(--color-border-light);
}

/* ── Sidebar brand logo: subtle glow on hover ── */
.admin-sidebar-brand:hover .admin-sidebar-logo {
    filter: drop-shadow(0 0 6px rgba(52,211,153,0.4));
}

/* ── Page-level content entrance animation ── */
.admin-list,
.admin-form {
    animation: fadeSlideIn 0.22s ease both;
}
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── END VISUAL POLISH ENHANCEMENTS ── */

/* ============================================================
   THEME TOGGLE SWITCH
   ============================================================ */
.theme-toggle {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 3px;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    border-radius: 99px;
    transition: box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(52,211,153,0.55);
}

/* Track */
.theme-toggle-track {
    position: relative;
    width: 2.25rem;
    height: 1.2rem;
    background: rgba(255,255,255,0.13);
    border-radius: 99px;
    border: 1px solid rgba(255,255,255,0.14);
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    flex-shrink: 0;
    display: block;
}
[data-theme="dark"] .theme-toggle-track {
    background: var(--color-accent);
    border-color: transparent;
    box-shadow: 0 0 10px rgba(52,211,153,0.38);
}

/* Thumb */
.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.82rem;
    height: 0.82rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.28);
    transition:
        left 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.28s ease,
        box-shadow 0.28s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
[data-theme="dark"] .theme-toggle-thumb {
    left: calc(2.25rem - 0.82rem - 4px);
    background: #0d1e16;
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* Icons inside thumb */
.theme-icon-light,
.theme-icon-dark {
    position: absolute;
    font-size: 0.4rem;
    line-height: 1;
    transition: opacity 0.22s ease, transform 0.3s ease;
}
.theme-icon-light {
    color: #f59e0b;
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.theme-icon-dark {
    color: #818cf8;
    opacity: 0;
    transform: scale(0.3) rotate(-80deg);
}
[data-theme="dark"] .theme-icon-light {
    opacity: 0;
    transform: scale(0.3) rotate(80deg);
}
[data-theme="dark"] .theme-icon-dark {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ============================================================
   DARK THEME
   Applied when <html data-theme="dark">
   Only visual overrides — zero touch to functionality or JS
   ============================================================ */
[data-theme="dark"] {
    --color-bg:             #0c1118;
    --color-surface:        #151c2a;
    --color-border:         #242d40;
    --color-border-light:   #1b2233;
    --color-text:           #dde4ef;
    --color-text-secondary: #8a9ab5;
    --color-text-muted:     #596a87;
    --color-topbar-bg:      #10161f;
    --color-topbar-border:  #242d40;
}

[data-theme="dark"] body,
[data-theme="dark"] .admin-layout {
    background-color: var(--color-bg);
}

/* Topbar */
[data-theme="dark"] .admin-topbar {
    background-color: var(--color-topbar-bg);
    border-color: var(--color-topbar-border);
    box-shadow: 0 1px 0 var(--color-border), 0 2px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .admin-title {
    color: var(--color-text) !important;
}
[data-theme="dark"] .admin-topbar-home {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .admin-topbar-home:hover {
    background-color: rgba(52,211,153,0.08) !important;
    color: var(--color-accent) !important;
}
[data-theme="dark"] .admin-actions > i {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .admin-actions > i:hover {
    background-color: rgba(52,211,153,0.08) !important;
    color: var(--color-accent) !important;
}
[data-theme="dark"] .admin-action-archive-dropdown button,
[data-theme="dark"] .admin-action-assistant-dropdown button {
    color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .admin-action-archive-dropdown button:hover,
[data-theme="dark"] .admin-action-assistant-dropdown button:hover {
    background-color: rgba(52,211,153,0.08) !important;
    color: var(--color-accent) !important;
}

/* Content area */
[data-theme="dark"] .admin-content {
    background-color: var(--color-bg);
}

/* Cards */
[data-theme="dark"] .admin-content .card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="dark"] .admin-content .card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .admin-content .card-header {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .admin-content .card-body {
    color: var(--color-text);
}

/* Tables */
[data-theme="dark"] .admin-content .table thead th {
    background-color: #121824;
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
[data-theme="dark"] .admin-content .table tbody td {
    color: var(--color-text);
    border-color: var(--color-border-light);
}
[data-theme="dark"] .admin-content .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.025) !important;
}
[data-theme="dark"] .admin-content .table tbody tr:hover td {
    background-color: rgba(52,211,153,0.05) !important;
}
[data-theme="dark"] .admin-content .table tbody tr[to_delete="true"] {
    background-color: rgba(244,67,54,0.18) !important;
}
[data-theme="dark"] .admin-content .shadow-sm {
    box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
}
[data-theme="dark"] .admin-content .border-0 {
    border: 1px solid var(--color-border) !important;
}

/* DataTables controls */
[data-theme="dark"] .admin-content .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .admin-content .dataTables_wrapper .dataTables_length select {
    background-color: #1b2336;
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .admin-content .dataTables_wrapper .dataTables_filter label,
[data-theme="dark"] .admin-content .dataTables_wrapper .dataTables_length label,
[data-theme="dark"] .admin-content .dataTables_wrapper .dataTables_info {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .admin-content .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--color-text-secondary) !important;
}

/* Forms */
[data-theme="dark"] .admin-content .form-control,
[data-theme="dark"] .admin-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-theme="dark"] .admin-content select,
[data-theme="dark"] .admin-content textarea {
    background-color: #1b2336;
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .admin-content .form-control:focus {
    background-color: #1b2336;
    border-color: var(--color-primary-light);
    color: var(--color-text);
    box-shadow: 0 0 0 3px rgba(26,77,62,0.2);
}
[data-theme="dark"] .admin-content .form-group label,
[data-theme="dark"] .admin-content label {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .admin-content .text-muted {
    color: var(--color-text-secondary) !important;
}

/* Typography */
[data-theme="dark"] .admin-content h1,
[data-theme="dark"] .admin-content h2,
[data-theme="dark"] .admin-content h3,
[data-theme="dark"] .admin-content h4,
[data-theme="dark"] .admin-content h5,
[data-theme="dark"] .admin-content h6 {
    color: var(--color-text);
}
[data-theme="dark"] .admin-content p {
    color: var(--color-text-secondary);
}

/* Dropdown menus */
[data-theme="dark"] .admin-content .dropdown-menu,
[data-theme="dark"] .admin-topbar .dropdown-menu {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
[data-theme="dark"] .admin-content .dropdown-item,
[data-theme="dark"] .admin-topbar .dropdown-item {
    color: var(--color-text);
}
[data-theme="dark"] .admin-content .dropdown-item:hover,
[data-theme="dark"] .admin-topbar .dropdown-item:hover {
    background-color: rgba(52,211,153,0.08);
    color: var(--color-accent);
    border-left-color: var(--color-accent);
}

/* Welcome page */
[data-theme="dark"] .admin-content .welcome-icon {
    background: rgba(52,211,153,0.1) !important;
}
[data-theme="dark"] .admin-list [style*="background:#f8fafc"],
[data-theme="dark"] .admin-list [style*="background: #f8fafc"] {
    background: #1b2336 !important;
}
[data-theme="dark"] .admin-list h2[style] {
    color: var(--color-text) !important;
}

/* Graph / sensor overlay views */
[data-theme="dark"] .graph-view,
[data-theme="dark"] .sensor-view {
    background-color: var(--color-bg);
}
[data-theme="dark"] .graph-view-header,
[data-theme="dark"] .sensor-view-header,
[data-theme="dark"] .modal-distribution-selector-view-header,
[data-theme="dark"] .modal-moment-selector-view-header {
    background-color: var(--color-topbar-bg);
    border-bottom: 1px solid var(--color-border);
}
[data-theme="dark"] .graph-view table th,
[data-theme="dark"] .graph-view table td,
[data-theme="dark"] .sensor-view table th,
[data-theme="dark"] .sensor-view table td {
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* Report / admin-graph-view */
[data-theme="dark"] .admin-graph-view {
    background-color: var(--color-bg);
}
[data-theme="dark"] .admin-graph-view .graph-view-header {
    background-color: var(--color-topbar-bg);
    border-color: var(--color-border);
}
[data-theme="dark"] .admin-graph-view .help {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}
/* Panel de navegación lateral (controles / asistente) */
[data-theme="dark"] .admin-graph-view .graph-view-controls-wp {
    background-color: var(--color-surface);
    border-left-color: var(--color-border);
    box-shadow: -3px 0 12px rgba(0,0,0,0.35);
}
[data-theme="dark"] .admin-graph-view .graph-view-controls-wp::before {
    color: var(--color-text-muted);
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .admin-graph-view .graph-view-control::before {
    background-color: rgba(255,255,255,0.07);
    color: var(--color-text-muted);
}
[data-theme="dark"] .admin-graph-view .graph-view-control.active::before {
    background-color: #007565;
    color: #fff;
}
[data-theme="dark"] .admin-graph-view .graph-view-close-icon,
[data-theme="dark"] .admin-graph-view .graph-view-help-icon {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .admin-graph-view .graph-view-close-icon:hover,
[data-theme="dark"] .admin-graph-view .graph-view-help-icon:hover {
    background-color: rgba(255,255,255,0.07);
    color: var(--color-text);
}
/* Pantalla de bienvenida (no-selection) */
[data-theme="dark"] .admin-graph-view .graph-view-no-selection-content {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .admin-graph-view .graph-view-no-selection-content-title {
    color: var(--color-text);
}
[data-theme="dark"] .admin-graph-view .graph-view-no-selection-content-text {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .admin-graph-view .graph-view-no-selection-content-step {
    color: var(--color-accent);
}
/* Tarjetas de gráfica: se mantiene fondo claro porque Chart.js
   renderiza texto negro en canvas (no modificable vía CSS) */
/* Leyenda tipo pill — sobre fondo claro (chart-wp se mantiene claro) */
[data-theme="dark"] .admin-graph-view .chart-legend-item {
    background-color: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.1);
}
[data-theme="dark"] .admin-graph-view .chart-legend-item:hover {
    background-color: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.18);
}
[data-theme="dark"] .admin-graph-view .chart-legend-item-title,
[data-theme="dark"] .admin-graph-view .chart-legend-item-title-line-dropdown {
    color: #4a5568;
}
[data-theme="dark"] .admin-graph-view .chart-legend-item.active {
    background-color: #007565;
    border-color: #007565;
}
[data-theme="dark"] .admin-graph-view .chart-legend-item.active .chart-legend-item-title {
    color: #fff;
}
/* Lista de resultados dentro del panel */
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-distribution-selector-item-content,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-date-selector-item-content,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-specie-selector-item-content,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-variety-selector-item-content,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-report-selector-item-content {
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .admin-graph-view .graph-view-control-result:nth-child(odd)
    .main-menu-distribution-selector-item-content,
[data-theme="dark"] .admin-graph-view .graph-view-control-result:nth-child(odd)
    .main-menu-date-selector-item-content,
[data-theme="dark"] .admin-graph-view .graph-view-control-result:nth-child(odd)
    .main-menu-specie-selector-item-content,
[data-theme="dark"] .admin-graph-view .graph-view-control-result:nth-child(odd)
    .main-menu-variety-selector-item-content,
[data-theme="dark"] .admin-graph-view .graph-view-control-result:nth-child(odd)
    .main-menu-report-selector-item-content {
    background-color: rgba(255,255,255,0.03);
}
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-distribution-selector-item-content:hover,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-date-selector-item-content:hover,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-specie-selector-item-content:hover,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-variety-selector-item-content:hover,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-report-selector-item-content:hover {
    background-color: rgba(0,117,101,0.15);
    color: var(--color-accent);
    border-left-color: #007565;
}
[data-theme="dark"] .admin-graph-view .graph-view-control-result.active
    .main-menu-distribution-selector-item-content,
[data-theme="dark"] .admin-graph-view .graph-view-control-result.active
    .main-menu-date-selector-item-content {
    background-color: rgba(0,117,101,0.15) !important;
    color: var(--color-accent) !important;
}
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-distribution-selector-item-content-name,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-date-selector-item-content-moment,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-specie-selector-item-content-title,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-variety-selector-item-content-title,
[data-theme="dark"] .admin-graph-view .graph-view-control-result
    .main-menu-report-selector-item-content-title {
    color: inherit;
}

/* Buttons */
[data-theme="dark"] .btn-secondary {
    background-color: #1b2336;
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .btn-secondary:hover {
    background-color: #222d44;
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Scrollbar dark */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(52,211,153,0.18);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(52,211,153,0.35);
}

/* DataTables: sobreescribir los backgrounds blancos hardcodeados */
[data-theme="dark"] table.dataTable tbody tr {
    background-color: var(--color-surface) !important;
    color: var(--color-text);
}
[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
[data-theme="dark"] table.dataTable.display tbody tr.odd,
[data-theme="dark"] table.dataTable tbody tr:nth-child(odd) {
    background-color: rgba(255,255,255,0.03) !important;
}
[data-theme="dark"] table.dataTable tbody tr.even,
[data-theme="dark"] table.dataTable tbody tr:nth-child(even) {
    background-color: var(--color-surface) !important;
}
[data-theme="dark"] table.dataTable tbody tr:hover,
[data-theme="dark"] table.dataTable tbody tr.even:hover,
[data-theme="dark"] table.dataTable tbody tr.odd:hover {
    background-color: rgba(52,211,153,0.06) !important;
}
[data-theme="dark"] table.dataTable tbody tr[to_delete="true"] {
    background-color: rgba(244,67,54,0.18) !important;
}
/* Columnas de sorting — también las blanquean */
[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_1,
[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background-color: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_1,
[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
    background-color: rgba(255,255,255,0.02) !important;
}
[data-theme="dark"] table.dataTable.display tbody tr > .sorting_1,
[data-theme="dark"] table.dataTable.display tbody tr > .sorting_2,
[data-theme="dark"] table.dataTable.display tbody tr > .sorting_3,
[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_1,
[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_2,
[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_3 {
    background-color: rgba(52,211,153,0.03) !important;
}
/* Thead */
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td {
    background-color: #121824 !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}
/* Celdas td generales dentro del admin */
[data-theme="dark"] .admin-content td,
[data-theme="dark"] .admin-content th {
    border-color: var(--color-border-light);
    color: var(--color-text);
}

/* ── DARK THEME: LAYOUT CLIENTE ──────────────────────────────── */

/* ─ Menú flotante principal ─ */
[data-theme="dark"] .main-menu {
    background-color: var(--color-surface);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.45);
}
[data-theme="dark"] .main-menu-v2 {
    background-color: var(--color-surface);
    border-right-color: rgba(255,255,255,0.06);
    box-shadow: none;
}
[data-theme="dark"] .main-menu-v2[side="right"] {
    border-left-color: rgba(255,255,255,0.06);
}
/* Dark: compare section in main-v2 — right border matches main panel */
[data-theme="dark"] .main-v2 .main-menu-v2[side="right"] {
    border-left-color: transparent;
    border-right-color: rgba(255,255,255,0.06);
}
/* Dark: divider between the two wrapper halves */
[data-theme="dark"] .main-v2 .main-menu-v2[side="right"].toggled {
    border-top-color: var(--color-primary, #34d399);
}
/* Dark: close-compare button */
[data-theme="dark"] .main-menu-v2[side="right"] .main-menu-close-compare {
    color: rgba(255,255,255,0.5);
}
[data-theme="dark"] .main-menu-v2[side="right"] .main-menu-close-compare:hover {
    color: #fc8181;
}
[data-theme="dark"] .main-menu-v2.toggled {
    box-shadow: 4px 0 24px rgba(0,0,0,0.45);
}
[data-theme="dark"] .main-menu-v2 .main-menu-header {
    border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .main-menu-v2-toggle-tab {
    background-color: var(--color-surface);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 2px 1px 6px rgba(0,0,0,0.4);
}
[data-theme="dark"] .main-menu-v2-toggle-tab:hover {
    background-color: #1c2636;
}
[data-theme="dark"] .main-menu-v2-toggle-tab i {
    color: var(--color-text-secondary);
}
/* Dark: Leaflet-style action buttons */
[data-theme="dark"] .main-v2 .main-actions-content {
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
[data-theme="dark"] .main-v2 .main-action,
[data-theme="dark"] .main-v2 .main-action-dendro {
    background-color: var(--color-surface);
    border-bottom-color: rgba(255,255,255,0.08);
    color: var(--color-text-secondary);
}
[data-theme="dark"] .main-v2 .main-action:hover,
[data-theme="dark"] .main-v2 .main-action-dendro:hover {
    background-color: #1c2636;
    color: var(--color-text);
}
[data-theme="dark"] .main-v2 .main-action.active,
[data-theme="dark"] .main-v2 .main-action-dendro.active {
    background-color: #007565;
    color: #fff;
}
[data-theme="dark"] .main-menu-header-title,
[data-theme="dark"] .main-menu-header-subtitle {
    color: var(--color-text);
}
[data-theme="dark"] .main-menu-paginator-item {
    background-color: rgba(255,255,255,0.15);
}

/* ─ Selector de distribución ─ */
[data-theme="dark"] .main-menu-distribution-selector,
[data-theme="dark"] .main-menu-date-selector,
[data-theme="dark"] .main-menu-content-data {
    background-color: rgba(0,0,0,0.25);
}
[data-theme="dark"] .main-menu-distribution-selector-title,
[data-theme="dark"] .main-menu-date-selector-title,
[data-theme="dark"] .main-menu-service-selector-title,
[data-theme="dark"] .main-menu-style-selector-title,
[data-theme="dark"] .main-menu-content-data-title,
[data-theme="dark"] .main-menu-actions-title {
    color: var(--color-text-secondary);
}

/* Tarjetas de ítem (distribución / fecha / especie / variedad / informe) */
[data-theme="dark"] .main-menu-distribution-selector-item-content,
[data-theme="dark"] .main-menu-date-selector-item-content,
[data-theme="dark"] .main-menu-specie-selector-item-content,
[data-theme="dark"] .main-menu-variety-selector-item-content,
[data-theme="dark"] .main-menu-report-selector-item-content {
    background-color: #1b2336;
    color: var(--color-text);
}
[data-theme="dark"] .modal-distribution-selector-view-content .main-menu-distribution-selector-item-content,
[data-theme="dark"] .modal-moment-selector-view-content .main-menu-date-selector-item-content,
[data-theme="dark"] .modal-specie-selector-view-content .main-menu-specie-selector-item-content,
[data-theme="dark"] .modal-variety-selector-view-content .main-menu-variety-selector-item-content,
[data-theme="dark"] .modal-report-selector-view-content .main-menu-report-selector-item-content {
    background-color: #161d2e;
}
/* Hover en tarjetas — mantener verde activo */
[data-theme="dark"] .main-menu-date-selector-item-content:hover {
    background-color: #007565;
    color: white;
}

/* Paginadores */
[data-theme="dark"] .main-menu-distribution-paginator-item,
[data-theme="dark"] .main-menu-date-paginator-item {
    background-color: rgba(255,255,255,0.12);
}

/* Datos de vista (nombre parcela, fecha) */
[data-theme="dark"] .main-menu-distribution-view,
[data-theme="dark"] .main-menu-date-view,
[data-theme="dark"] .main-menu-service-view,
[data-theme="dark"] .main-menu-style-view {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .main-menu-distribution-view-data-name,
[data-theme="dark"] .main-menu-date-view-data-day {
    color: var(--color-text);
}

/* ─ Selector de servicio ─ */
[data-theme="dark"] .main-menu-service-selector,
[data-theme="dark"] .main-menu-style-selector,
[data-theme="dark"] .main-menu-actions {
    background-color: var(--color-surface);
}
[data-theme="dark"] .main-menu-service-selector-item-content-icon,
[data-theme="dark"] .main-menu-service-view-data-icon {
    background-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .main-menu-service-selector-item-content-title,
[data-theme="dark"] .main-menu-service-view-data-title,
[data-theme="dark"] .main-menu-service-view-title {
    color: var(--color-text-secondary);
}

/* ─ Botones del menú principal ─ */
[data-theme="dark"] .main-menu-btn-a {
    background-color: rgba(255,255,255,0.07);
    color: var(--color-text-secondary);
}
[data-theme="dark"] .main-menu-btn-a:hover,
[data-theme="dark"] .main-menu-btn-a.active,
[data-theme="dark"] .main-menu-btn-a.with-value {
    background-color: #007565;
    color: white;
}

/* ─ Íconos de acciones del mapa ─ */
[data-theme="dark"] .main-action,
[data-theme="dark"] .main-action-dendro {
    background-color: rgba(255,255,255,0.09);
    color: var(--color-accent);
}
[data-theme="dark"] .main-action:hover,
[data-theme="dark"] .main-action-dendro:hover,
[data-theme="dark"] .main-action.active,
[data-theme="dark"] .main-action-dendro.active {
    background-color: #007565;
    color: white;
}

/* ─ Datos del ítem del menú ─ */
[data-theme="dark"] .main-menu-content-data-item-title {
    background-color: rgba(255,255,255,0.12);
    color: var(--color-text);
}
[data-theme="dark"] .main-menu-content-data-item-content {
    background-color: #1b2336;
    color: var(--color-text);
}

/* ─ Controles de gráfico (parte inferior graph-view) ─ */
[data-theme="dark"] .graph-view-control {
    background-color: #1a2035;
    color: var(--color-text-secondary);
}
[data-theme="dark"] .graph-view-control:nth-child(odd) {
    background-color: #161c2e;
}
[data-theme="dark"] .graph-view-control:hover {
    background-color: #007565;
    color: white;
}
[data-theme="dark"] .graph-view-control.active {
    background-color: #007565;
    color: white;
}
[data-theme="dark"] .graph-view-control.disabled:hover,
[data-theme="dark"] .graph-view-control.disabled:nth-child(odd):hover {
    background-color: #1a2035;
    color: var(--color-text-muted);
}
[data-theme="dark"] .graph-view-controls-results {
    background-color: #121824;
}
[data-theme="dark"] .graph-view-control-result.main-menu-distribution-selector-item .main-menu-distribution-selector-item-content,
[data-theme="dark"] .graph-view-control-result.main-menu-date-selector-item .main-menu-date-selector-item-content,
[data-theme="dark"] .graph-view-control-result.main-menu-specie-selector-item .main-menu-specie-selector-item-content,
[data-theme="dark"] .graph-view-control-result.main-menu-variety-selector-item .main-menu-variety-selector-item-content,
[data-theme="dark"] .graph-view-control-result.main-menu-report-selector-item .main-menu-report-selector-item-content {
    background-color: #1a2035;
}
[data-theme="dark"] .graph-view-control-result.main-menu-distribution-selector-item:nth-child(odd) .main-menu-distribution-selector-item-content,
[data-theme="dark"] .graph-view-control-result.main-menu-date-selector-item:nth-child(odd) .main-menu-date-selector-item-content {
    background-color: #161c2e;
}

/* ─ Leyenda de gráfico ─ */
[data-theme="dark"] .chart-legend-item-check {
    background-color: #1b2336;
    border-color: #007565;
}
[data-theme="dark"] .chart-legend-item-title {
    color: var(--color-text-secondary);
}

/* ─ Panel de ayuda (graph-view .help) ─ */
[data-theme="dark"] .graph-view .help {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: -4px 4px 20px rgba(0,0,0,0.4);
}
[data-theme="dark"] .graph-view .help-title {
    color: var(--color-text);
}
[data-theme="dark"] .graph-view .help-section-title {
    color: var(--color-text);
}
[data-theme="dark"] .graph-view .help-topic {
    border-color: rgba(0,117,101,0.3);
    color: var(--color-accent);
}

/* ─ Sensor / Dendrómetro ─ */
[data-theme="dark"] .sensor-dendrometer-views {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .sensor-dendrometer-view {
    color: var(--color-accent);
}
[data-theme="dark"] .sensor-dendrometer-report-menu {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* ─ Modales cliente: formulario y calculadora ─ */
[data-theme="dark"] .modal-client-form-view,
[data-theme="dark"] .modal-client-calc-view {
    background-color: var(--color-bg);
}
[data-theme="dark"] .client-form-actions,
[data-theme="dark"] .client-calc-actions {
    color: var(--color-accent);
    border-color: var(--color-border);
}

/* Tabs de la calculadora */
[data-theme="dark"] .client-calc-tab {
    background-color: #007565;
    border-left-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .client-calc-tab.active {
    background-color: var(--color-surface);
    color: var(--color-accent);
}

/* Widgets de la calculadora */
[data-theme="dark"] .client-calc-form-widget-header {
    background-color: #007565;
}
[data-theme="dark"] .client-calc-form-widget-content {
    background-color: var(--color-surface);
    border-color: rgba(0,117,101,0.3);
    color: var(--color-text);
}
[data-theme="dark"] .client-calc-form-widget-data-label,
[data-theme="dark"] .client-calc-form-widget-data-value {
    color: var(--color-text);
}
[data-theme="dark"] .client-calc-form-widget-data.top-separator {
    border-top-color: var(--color-border);
}
[data-theme="dark"] .calc-loader-wp {
    background-color: var(--color-surface);
}

/* Fases y filtros */
[data-theme="dark"] .client-calc-common-area-filter {
    background-color: #007565;
}
[data-theme="dark"] .client-calc-form-phase {
    background-color: #007565;
}

/* ─ Modales de selector (distribución / momento) ─ */
[data-theme="dark"] .modal-distribution-selector-view,
[data-theme="dark"] .modal-moment-selector-view,
[data-theme="dark"] .modal-specie-selector-view,
[data-theme="dark"] .modal-variety-selector-view,
[data-theme="dark"] .modal-report-selector-view {
    background-color: var(--color-bg);
}
[data-theme="dark"] .modal-distribution-selector-view-header,
[data-theme="dark"] .modal-moment-selector-view-header {
    background-color: var(--color-topbar-bg) !important;
}

/* ─ Bootstrap modals en contexto cliente ─ */
[data-theme="dark"] .modal-content {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .modal-header {
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .modal-footer {
    border-color: var(--color-border);
}
[data-theme="dark"] .modal-body {
    color: var(--color-text);
}
[data-theme="dark"] .modal-body .form-control,
[data-theme="dark"] .modal-body input,
[data-theme="dark"] .modal-body select,
[data-theme="dark"] .modal-body textarea {
    background-color: #1b2336;
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .modal-body label,
[data-theme="dark"] .modal-body .form-group label {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0,0,0,0.7);
}

/* ─ Textos grises (#727272) que quedan muy oscuros sobre fondo oscuro ─ */
[data-theme="dark"] .main-menu-distribution-view-data-area,
[data-theme="dark"] .main-menu-distribution-view-data-variety,
[data-theme="dark"] .main-menu-date-view-data-month,
[data-theme="dark"] .main-menu-date-view-data-year,
[data-theme="dark"] .chart-title,
[data-theme="dark"] .chart-subtitle,
[data-theme="dark"] .graph-view .table-responsive table {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .graph-view table th,
[data-theme="dark"] .graph-view table td,
[data-theme="dark"] .sensor-view table th,
[data-theme="dark"] .sensor-view table td {
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    background-color: transparent;
}
[data-theme="dark"] .graph-view .table-service-title th {
    color: var(--color-accent);
}
[data-theme="dark"] .graph-view .table-service-subtitle th {
    color: var(--color-text);
}

/* ─ Azimuth edition button ─ */
[data-theme="dark"] .azimuth-edition-back-button {
    background-color: var(--color-surface);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
}

/* ════════════════════════════════════════════
   CLIENTE: dark theme con contrastes suavizados
   Gated on [data-theme="dark"] — en modo claro usa los estilos base
   ════════════════════════════════════════════ */
[data-theme="dark"] .main-v2 .admin-graph-view {
    background-color: #1c2b3a;
}
/* Topbar/breadcrumb */
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-header {
    background-color: #162232;
    color: rgba(255,255,255,0.82);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    box-shadow: none;
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-header .chart-title,
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-header .chart-subtitle,
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-header .chart-front-title {
    color: rgba(255,255,255,0.82);
}
/* Iconos cerrar/ayuda */
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-close-icon,
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-help-icon {
    color: rgba(255,255,255,0.6);
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-close-icon:hover,
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-help-icon:hover {
    background-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
}
/* Panel de navegación derecho */
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-controls-wp {
    background-color: #162232;
    border-left: 1px solid rgba(255,255,255,0.07);
    box-shadow: none;
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-controls-wp::before {
    color: rgba(255,255,255,0.35);
    border-bottom-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-controls {
    border-bottom-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-control {
    color: rgba(255,255,255,0.5);
    border-bottom-color: rgba(255,255,255,0.04);
    border-left-color: transparent;
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-control::before {
    background-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4);
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-control:hover {
    background-color: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.75);
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-control.active {
    background-color: rgba(0, 117, 101, 0.15);
    color: #34d399;
    border-left-color: #007565;
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-control.active::before {
    background-color: rgba(0, 117, 101, 0.25);
    color: #34d399;
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-controls-results {
    background-color: rgba(255,255,255,0.03);
}
/* chart-wp cliente dark: cubierto por las reglas combinadas al final del bloque */
/* Pantalla de bienvenida (no-selection) en cliente dark */
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-no-selection-content {
    background-color: #162232;
    border-color: rgba(255,255,255,0.07);
    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-no-selection-content-title {
    color: rgba(255,255,255,0.9);
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-no-selection-content-text {
    color: rgba(255,255,255,0.55);
}
[data-theme="dark"] .main-v2 .admin-graph-view .graph-view-no-selection-content-step {
    color: #34d399;
}
/* Tabla en dark context */
[data-theme="dark"] .main-v2 .admin-graph-view .table-responsive {
    background-color: var(--color-surface);
    border-radius: 0.5rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.35);
    overflow: hidden;
}

/* ── GRÁFICAS: adaptación dark mode vía CSS filter ──────────────────────
   Chart.js dibuja en canvas con colores hardcodeados en JS (negro).
   Solución CSS-only: invertir el canvas (negro→blanco) + rotar hue 180°
   para aproximar los colores de los datasets al original.
   El chart-wp pasa a fondo oscuro para que encaje con el resto del tema.
   ──────────────────────────────────────────────────────────────────────── */

/* chart-wp oscuro en dark mode (admin y cliente) */
[data-theme="dark"] .admin-graph-view .chart-wp,
[data-theme="dark"] .main-v2 .admin-graph-view .chart-wp {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
[data-theme="dark"] .admin-graph-view .chart-wp .chart-title,
[data-theme="dark"] .main-v2 .admin-graph-view .chart-wp .chart-title {
    color: var(--color-text);
}
[data-theme="dark"] .admin-graph-view .chart-wp .chart-subtitle,
[data-theme="dark"] .main-v2 .admin-graph-view .chart-wp .chart-subtitle {
    color: var(--color-text-secondary);
}

/* Canvas: invert + hue-rotate para adaptar texto negro y colores de datos */
[data-theme="dark"] .admin-graph-view .canvas-wp canvas,
[data-theme="dark"] .admin-graph-view .canvas-wp-dendrometer canvas {
    filter: invert(1) hue-rotate(180deg);
}

/* Leyenda en dark: sobre fondo oscuro */
[data-theme="dark"] .admin-graph-view .chart-legend-item,
[data-theme="dark"] .main-v2 .admin-graph-view .chart-legend-item {
    background-color: rgba(255,255,255,0.07);
    border-color: var(--color-border);
}
[data-theme="dark"] .admin-graph-view .chart-legend-item:hover,
[data-theme="dark"] .main-v2 .admin-graph-view .chart-legend-item:hover {
    background-color: rgba(255,255,255,0.13);
}
[data-theme="dark"] .admin-graph-view .chart-legend-item-title,
[data-theme="dark"] .admin-graph-view .chart-legend-item-title-line-dropdown,
[data-theme="dark"] .main-v2 .admin-graph-view .chart-legend-item-title {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .admin-graph-view .chart-legend-item.active,
[data-theme="dark"] .main-v2 .admin-graph-view .chart-legend-item.active {
    background-color: #007565;
    border-color: #007565;
}
[data-theme="dark"] .admin-graph-view .chart-legend-item.active .chart-legend-item-title,
[data-theme="dark"] .main-v2 .admin-graph-view .chart-legend-item.active .chart-legend-item-title {
    color: #fff;
}

/* ── END DARK THEME ── */

/* Selector de unidad (Uds / T-Ha) en la representación */
.main-menu-style-unit-toggle .style-unit-item{
    cursor: pointer;
    opacity: 0.45;
}
.main-menu-style-unit-toggle .style-unit-item.active{
    opacity: 1;
    text-decoration: underline;
}
/* Evitar que los valores (sobre todo el rango central en T/Ha) salgan en dos líneas */
.main-menu-style-legend-item-ranges{
    white-space: nowrap;
}
.main-menu-style-legend-item-wp.two{
    width: 8rem;
}
.main-menu-style-selector-legend{
    width: 16.5rem;
}