:root {
  color-scheme: light;

  --background: #f5f6f2;
  --surface: #ffffff;
  --surface-muted: #f0f2ec;

  --border: #d9ddd2;
  --border-strong: #bfc6b8;

  --text: #20251f;
  --text-muted: #697267;

  --accent: #527346;
  --accent-dark: #3d5935;
  --accent-soft: #e6ede1;

  --danger: #a6403d;

  --sidebar-width: 250px;

  font-family:
    "DM Sans",
    system-ui,
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--background);
  color: var(--text);
}

body.sidebar-mobile-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

.initial-loader {
  display: grid;
  min-height: 100vh;
  place-items: center;
  color: var(--text-muted);
}

/* =========================================================
   LAYOUT
   ========================================================= */

.app-layout {
  display: grid;
  grid-template-columns:
    var(--sidebar-width)
    minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;

  display: flex;
  width: var(--sidebar-width);
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  flex-direction: column;

  padding: 24px 18px;

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

  background:
    var(--surface);
}

.workspace {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  flex-direction: column;
}

#page-content {
  width: 100%;
  min-width: 0;
  flex: 1;
  overflow-x: hidden;
}

/* =========================================================
   MARCA
   ========================================================= */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;

  padding:
    0
    8px
    24px;

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

.brand__mark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;

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

  border-radius: 12px;

  background:
    var(--accent-soft);

  color:
    var(--accent-dark);

  font-weight: 700;
}

.brand__content {
  min-width: 0;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar__nav {
  display: grid;
  gap: 6px;
  margin-top: 24px;
}

.sidebar__link {
  display: flex;
  min-height: 44px;
  align-items: center;

  padding:
    0
    14px;

  border:
    1px solid
    transparent;

  border-radius: 10px;

  color:
    var(--text-muted);

  font-size: 14px;
  font-weight: 600;

  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.sidebar__link:hover {
  border-color:
    var(--border);

  background:
    var(--surface-muted);

  color:
    var(--text);
}

.sidebar__link--active {
  border-color:
    var(--border);

  background:
    var(--accent-soft);

  color:
    var(--accent-dark);
}

.sidebar__footer {
  margin-top: auto;

  padding:
    16px
    8px
    0;

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

  color:
    var(--text-muted);

  font-size: 12px;
}

.sidebar__footer strong,
.sidebar__footer span {
  display: block;
}

.sidebar__footer strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar__footer span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
}

.logout-button {
  width: 100%;
  min-height: 40px;
  margin-top: 14px;

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

  border-radius: 8px;

  background:
    var(--surface);

  color:
    var(--text-muted);

  font-weight: 700;

  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.logout-button:hover {
  border-color: #c89c99;
  background: #fff5f4;
  color: #913c38;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 18px;

  width: 100%;
  min-height: 82px;

  padding:
    16px
    32px;

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

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );
}

.topbar__heading {
  min-width: 0;
}

.topbar__eyebrow,
.hero__eyebrow,
.panel__eyebrow {
  color:
    var(--accent);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.topbar h1 {
  overflow: hidden;
  margin: 5px 0 0;
  font-size: 21px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__status {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;

  color:
    var(--text-muted);

  font-size: 13px;
  font-weight: 600;
}

.topbar__status > span:last-child {
  overflow: hidden;
  max-width: 240px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;

  border-radius: 50%;

  background: #56894a;
}

/* =========================================================
   BOTÓN SIDEBAR MÓVIL
   ========================================================= */

.sidebar-toggle {
  display: none;

  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;

  padding: 0;

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

  border-radius: 10px;

  background:
    var(--surface);

  color:
    var(--text);
}

.sidebar-toggle span {
  display: block;
  width: 19px;
  height: 2px;

  border-radius: 999px;

  background:
    currentColor;

  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.sidebar-backdrop {
  display: none;

  position: fixed;
  inset: 0;
  z-index: 1090;

  padding: 0;

  border: 0;

  background:
    rgba(
      18,
      22,
      17,
      0.45
    );
}

body.sidebar-mobile-open
.sidebar-toggle
span:nth-child(1) {
  transform:
    translateY(7px)
    rotate(45deg);
}

body.sidebar-mobile-open
.sidebar-toggle
span:nth-child(2) {
  opacity: 0;
}

body.sidebar-mobile-open
.sidebar-toggle
span:nth-child(3) {
  transform:
    translateY(-7px)
    rotate(-45deg);
}

/* =========================================================
   CONTENIDO GENERAL
   ========================================================= */

.content {
  display: grid;
  gap: 24px;

  width: 100%;
  max-width: 1440px;

  margin:
    0
    auto;

  padding: 32px;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  padding: 30px;

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

  border-radius: 16px;

  background:
    var(--surface);
}

.hero h2 {
  max-width: 720px;

  margin:
    8px
    0;

  font-size:
    clamp(
      25px,
      3vw,
      38px
    );

  line-height: 1.12;
}

.hero p {
  max-width: 700px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

/* =========================================================
   BOTONES
   ========================================================= */

.primary-button {
  min-height: 44px;
  flex: 0 0 auto;

  padding:
    0
    18px;

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

  border-radius: 10px;

  background:
    var(--accent);

  color: #ffffff;

  font-weight: 700;

  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.primary-button:hover {
  background:
    var(--accent-dark);

  transform:
    translateY(-1px);
}

/* =========================================================
   MÉTRICAS
   ========================================================= */

.metrics-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap: 16px;
}

.metric-card {
  display: flex;
  min-width: 0;
  min-height: 160px;
  flex-direction: column;

  padding: 22px;

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

  border-radius: 14px;

  background:
    var(--surface);
}

.metric-card__label {
  color:
    var(--text-muted);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.metric-card__value {
  margin-top: 18px;
  font-size: 42px;
  line-height: 1;
}

.metric-card__description {
  margin-top: auto;
  color: var(--text-muted);
  font-size: 13px;
}

/* =========================================================
   PANELES
   ========================================================= */

.secondary-grid {
  display: grid;

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

  gap: 16px;
}

.panel {
  min-width: 0;
  padding: 24px;

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

  border-radius: 14px;

  background:
    var(--surface);
}

.panel__header {
  padding-bottom: 18px;

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

.panel h3 {
  margin: 5px 0 0;
  font-size: 19px;
}

.resource-list,
.check-list {
  display: grid;
  gap: 0;
  margin-top: 8px;
}

.resource-row {
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

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

.resource-row:last-child {
  border-bottom: 0;
}

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

.resource-row strong {
  font-size: 20px;
}

.resource-row__email {
  overflow: hidden;
  max-width: 240px;
  font-size: 13px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.check-item {
  position: relative;

  min-height: 48px;

  padding:
    14px
    12px
    14px
    36px;

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

  color:
    var(--text-muted);

  font-size: 14px;
}

.check-item:last-child {
  border-bottom: 0;
}

.check-item::before {
  position: absolute;
  top: 17px;
  left: 10px;

  width: 12px;
  height: 12px;

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

  border-radius: 50%;

  content: "";
}

.check-item--done {
  color:
    var(--text);
}

.check-item--done::before {
  border-color:
    var(--accent);

  background:
    var(--accent);
}

/* =========================================================
   CARGA Y ERRORES
   ========================================================= */

.app-shell {
  display: grid;
  min-height: 100vh;
  padding: 24px;
  place-items: center;
}

.loading-panel,
.error-panel {
  width:
    min(
      560px,
      100%
    );

  padding: 32px;

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

  border-radius: 16px;

  background:
    var(--surface);

  text-align: center;
}

.spinner {
  width: 34px;
  height: 34px;

  margin:
    0
    auto
    18px;

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

  border-top-color:
    var(--accent);

  border-radius: 50%;

  animation:
    spin
    700ms
    linear
    infinite;
}

.error-panel__code {
  color:
    var(--danger);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.error-panel h1 {
  margin: 10px 0;
}

.error-panel p {
  margin:
    0
    0
    22px;

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

@keyframes spin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width: 1050px
) {
  .metrics-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .content {
    padding: 24px;
  }
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (
  max-width: 820px
) {
  .app-layout {
    display: block;
    width: 100%;
    min-height: 100dvh;
  }

  .workspace {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;

    width:
      min(
        86vw,
        310px
      );

    max-width: 310px;
    height: 100dvh;

    overflow-x: hidden;
    overflow-y: auto;

    padding:
      20px
      16px;

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

    border-bottom: 0;

    background:
      var(--surface);

    transform:
      translateX(
        -105%
      );

    transition:
      transform
      220ms
      ease;
  }

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

  body.sidebar-mobile-open
  .sidebar-backdrop {
    display: block;
  }

  .sidebar__nav {
    display: flex;
    width: 100%;
    min-width: 0;
    overflow: visible;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;

    margin-top: 20px;
    padding: 0;

    white-space: normal;
  }

  .sidebar__link {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    align-items: center;

    padding:
      0
      13px;

    white-space: normal;
  }

  .sidebar__footer {
    display: block;
    width: 100%;
    margin-top: auto;
    padding-top: 18px;
  }

  .topbar {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      )
      auto;

    min-height: 70px;
    gap: 11px;

    padding:
      11px
      14px;
  }

  .sidebar-toggle {
    display: flex;
  }

  .topbar__heading {
    min-width: 0;
  }

  .topbar h1 {
    font-size: 18px;
  }

  .topbar__eyebrow {
    overflow: hidden;
    display: block;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar__status {
    max-width: 115px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .content {
    gap: 18px;
    padding: 18px 14px;
  }

  .hero {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
    padding: 22px 18px;
  }

  .hero h2 {
    font-size: 27px;
  }

  .primary-button {
    width: 100%;
  }

  .secondary-grid {
    grid-template-columns:
      1fr;
  }
}

/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (
  max-width: 520px
) {
  .topbar {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );
  }

  .topbar__status {
    display: none;
  }

  .sidebar {
    width:
      min(
        88vw,
        300px
      );
  }

  .metrics-grid {
    grid-template-columns:
      1fr;
  }

  .metric-card {
    min-height: 135px;
  }

  .content {
    padding:
      14px
      10px;
  }
}

/* =========================================================
   AGRO INTEL · SIDEBAR SIEMPRE A ALTURA COMPLETA
   ========================================================= */

.app-layout {
  display: block;
  width: 100%;
  min-height: 100dvh;
}

.sidebar {
  position: fixed;
  inset:
    0
    auto
    0
    0;

  z-index: 1100;

  width:
    var(
      --sidebar-width
    );

  height: 100dvh;
  min-height: 100dvh;

  overflow-x: hidden;
  overflow-y: auto;

  background:
    var(
      --surface
    );
}

.workspace {
  width:
    calc(
      100% -
      var(
        --sidebar-width
      )
    );

  min-width: 0;
  min-height: 100dvh;

  margin-left:
    var(
      --sidebar-width
    );
}

.sidebar__footer {
  margin-top: auto;
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (
  max-width: 820px
) {
  .workspace {
    width: 100%;
    margin-left: 0;
  }

  .sidebar {
    width:
      min(
        86vw,
        310px
      );

    transform:
      translateX(
        -105%
      );
  }

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

@media (
  max-width: 520px
) {
  .sidebar {
    width:
      min(
        88vw,
        300px
      );
  }
}

/* =========================================================
   AGRO INTEL · SIDEBAR COLAPSABLE
   ========================================================= */

@media (min-width: 821px) {
  .sidebar-toggle {
    display: flex !important;
  }

  .sidebar {
    transform:
      translateX(
        0
      ) !important;

    transition:
      transform 220ms ease,
      visibility 220ms ease !important;
  }

  .workspace {
    transition:
      width 220ms ease,
      margin-left 220ms ease !important;
  }

  body.sidebar-desktop-collapsed .sidebar {
    visibility: hidden !important;

    transform:
      translateX(
        -100%
      ) !important;
  }

  body.sidebar-desktop-collapsed .workspace {
    width:
      100% !important;

    margin-left:
      0 !important;
  }

  body.sidebar-desktop-collapsed .topbar {
    padding-left:
      20px !important;
  }
}

@media (max-width: 820px) {
  body.sidebar-desktop-collapsed .workspace {
    width:
      100% !important;

    margin-left:
      0 !important;
  }

  body.sidebar-desktop-collapsed .sidebar {
    visibility:
      visible !important;
  }
}

/* =========================================================
   AGRO INTEL · SIDEBAR COMPACTO Y TOPBAR MODERNO
   ========================================================= */

:root {
  --sidebar-width: 220px;
}

/* =========================================================
   SIDEBAR ESCRITORIO
   ========================================================= */

.sidebar {
  width: var(--sidebar-width);
  padding: 18px 14px;
}

.brand {
  gap: 10px;
  padding:
    0
    6px
    18px;
}

.brand__mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 14px;
}

.brand strong {
  font-size: 14px;
}

.brand span {
  font-size: 10px;
}

.sidebar__nav {
  gap: 4px;
  margin-top: 18px;
}

.sidebar__link {
  min-height: 40px;
  padding:
    0
    12px;
  border-radius: 9px;
  font-size: 13px;
}

.sidebar__footer {
  padding:
    14px
    6px
    0;
}

.sidebar__footer strong {
  font-size: 12px;
}

.sidebar__footer span {
  font-size: 10px;
}

.logout-button {
  min-height: 36px;
  margin-top: 12px;
  font-size: 11px;
}

/* =========================================================
   ÁREA DE TRABAJO
   ========================================================= */

.workspace {
  width:
    calc(
      100% -
      var(--sidebar-width)
    );

  margin-left:
    var(--sidebar-width);
}

/* =========================================================
   TOPBAR · TODO EN UNA SOLA FILA
   ========================================================= */

.topbar {
  display: grid !important;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto !important;

  min-height: 68px !important;

  align-items: center !important;

  gap: 12px !important;

  padding:
    10px
    20px !important;
}

.sidebar-toggle {
  display: flex !important;

  width: 38px !important;
  height: 38px !important;

  flex: 0 0 38px !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 4px !important;

  padding: 0 !important;

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

  border-radius: 9px !important;

  background:
    var(--surface) !important;

  color:
    var(--text) !important;
}

.sidebar-toggle span {
  width: 17px !important;
  height: 2px !important;
}

.topbar__heading {
  min-width: 0;
}

.topbar__eyebrow {
  display: block;

  overflow: hidden;

  font-size: 9px !important;

  letter-spacing: .07em;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.topbar h1 {
  overflow: hidden;

  margin:
    3px
    0
    0 !important;

  font-size: 18px !important;

  line-height: 1.2;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.topbar__status {
  display: flex !important;

  max-width: 220px;

  align-items: center;

  justify-content: flex-end;

  font-size: 11px !important;

  white-space: nowrap;
}

.topbar__status > span:last-child {
  overflow: hidden;

  max-width: 190px;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.status-dot {
  width: 7px;
  height: 7px;
}

/* =========================================================
   SIDEBAR CERRADO
   ========================================================= */

@media (min-width: 821px) {
  body.sidebar-desktop-collapsed .sidebar {
    visibility: hidden !important;

    transform:
      translateX(
        -100%
      ) !important;
  }

  body.sidebar-desktop-collapsed .workspace {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body.sidebar-desktop-collapsed .topbar {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      auto !important;
  }
}

/* =========================================================
   TABLET Y MÓVIL
   ========================================================= */

@media (max-width: 820px) {
  .workspace {
    width: 100%;
    margin-left: 0;
  }

  .sidebar {
    width:
      min(
        82vw,
        280px
      );

    padding:
      18px
      14px;
  }

  .topbar {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      auto !important;

    min-height: 64px !important;

    padding:
      9px
      12px !important;
  }

  .topbar__status {
    max-width: 110px;
  }

  .topbar__status > span:last-child {
    max-width: 85px;
  }
}

@media (max-width: 520px) {
  .topbar {
    grid-template-columns:
      38px
      minmax(0, 1fr) !important;
  }

  .topbar__status {
    display: none !important;
  }

  .sidebar {
    width:
      min(
        86vw,
        280px
      );
  }
}

/* =========================================================
   AGRO INTEL · TEMA BLANCO Y AMARILLO SUAVE
   ========================================================= */

:root {
  color-scheme: light;

  --background: #ffffff;
  --surface: #ffffff;
  --surface-muted: #faf9f4;

  --border: #d8d5c9;
  --border-strong: #bdb8a8;

  --text: #23231f;
  --text-muted: #6f6d64;

  --accent: #b69b45;
  --accent-dark: #88742f;
  --accent-soft: #f4efd9;
  --accent-softer: #fbf9ef;

  --danger: #a6403d;

  --sidebar-width: 220px;
}

/* =========================================================
   FONDO GENERAL
   ========================================================= */

html,
body,
#app,
.app-layout,
.workspace,
#page-content {
  background: #ffffff;
}

body {
  color: var(--text);
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
  border-right:
    1px solid
    var(--border-strong);

  background:
    #ffffff;
}

.brand {
  border-bottom:
    1px solid
    var(--border-strong);
}

.brand__mark {
  border-color:
    var(--accent-dark);

  background:
    var(--accent-soft);

  color:
    var(--accent-dark);
}

.sidebar__link {
  border-color:
    transparent;

  background:
    #ffffff;

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

.sidebar__link:hover {
  border-color:
    var(--border-strong);

  background:
    var(--accent-softer);

  color:
    var(--text);
}

.sidebar__link--active {
  border-color:
    #d1c58f;

  background:
    var(--accent-soft);

  color:
    #665727;
}

.sidebar__footer {
  border-top:
    1px solid
    var(--border-strong);
}

.logout-button {
  border-color:
    var(--border-strong);

  background:
    #ffffff;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
  border-bottom:
    1px solid
    var(--border-strong) !important;

  background:
    #ffffff !important;
}

.topbar__eyebrow,
.hero__eyebrow,
.panel__eyebrow,
.dashboard-page-eyebrow,
.dashboard-section-eyebrow,
.technician-page-eyebrow,
.technician-camera-wizard > header > span,
.technician-camera-form__header > span {
  color:
    var(--accent-dark) !important;
}

.status-dot {
  background:
    var(--accent);
}

.sidebar-toggle {
  border-color:
    var(--border-strong) !important;

  background:
    #ffffff !important;
}

.sidebar-toggle:hover {
  border-color:
    var(--accent-dark) !important;

  background:
    var(--accent-softer) !important;
}

/* =========================================================
   CONTENEDORES Y PANELES
   ========================================================= */

.content,
.dashboard-page,
.technician-work-page,
.works-page,
.trabajos-page,
.clientes-page,
.tecnicos-page,
.usuarios-page {
  background:
    #ffffff;
}

.hero,
.panel,
.metric-card,
.dashboard-card,
.dashboard-panel,
.dashboard-metric-card,
.dashboard-alert-card,
.dashboard-work-row,
.technician-camera-wizard,
.technician-camera-form,
.technician-work-card,
.technician-camera-card,
.works-container,
.trabajos-container,
.table-container,
.filters,
.table-filters {
  border-color:
    var(--border-strong) !important;

  background:
    #ffffff !important;
}

/* =========================================================
   DIVISIONES
   ========================================================= */

.panel__header,
.dashboard-section-header,
.dashboard-panel__header,
.dashboard-card__header,
.technician-camera-wizard > header,
.technician-camera-form__header,
.technician-camera-form__footer,
.resource-row,
.check-item,
table th,
table td {
  border-color:
    var(--border) !important;
}

.resource-row,
.check-item {
  border-bottom-width:
    1px;
}

/* =========================================================
   BOTONES PRINCIPALES
   ========================================================= */

.primary-button,
.dashboard-primary-button,
.technician-primary-button,
button[data-create-work],
button[data-create-client],
button[data-create-technician] {
  border-color:
    var(--accent-dark) !important;

  background:
    var(--accent) !important;

  color:
    #ffffff !important;
}

.primary-button:hover,
.dashboard-primary-button:hover,
.technician-primary-button:hover,
button[data-create-work]:hover,
button[data-create-client]:hover,
button[data-create-technician]:hover {
  border-color:
    #746225 !important;

  background:
    var(--accent-dark) !important;
}

/* =========================================================
   BOTONES SECUNDARIOS Y ACCIONES
   ========================================================= */

.action-button,
.secondary-button,
.dashboard-secondary-button,
.technician-secondary-button,
.table-actions button,
.pagination button {
  border-color:
    var(--border-strong) !important;

  background:
    #ffffff !important;

  color:
    var(--text) !important;
}

.action-button:hover,
.secondary-button:hover,
.dashboard-secondary-button:hover,
.technician-secondary-button:hover,
.table-actions button:hover,
.pagination button:hover {
  border-color:
    var(--accent-dark) !important;

  background:
    var(--accent-softer) !important;
}

/* =========================================================
   FORMULARIOS
   ========================================================= */

input,
select,
textarea {
  border-color:
    var(--border-strong) !important;

  background:
    #ffffff !important;

  color:
    var(--text) !important;
}

input:hover,
select:hover,
textarea:hover {
  border-color:
    #a9a38f !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color:
    var(--accent-dark) !important;

  outline:
    2px solid
    rgba(
      182,
      155,
      69,
      0.16
    ) !important;

  outline-offset:
    1px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color:
    var(--accent-dark);
}

/* =========================================================
   FILTROS
   ========================================================= */

.works-filters,
.trabajos-filters,
.work-filters,
.filters,
.filters-grid,
.table-filters,
.dashboard-filter-panel {
  border-color:
    var(--border-strong) !important;

  background:
    var(--accent-softer) !important;
}

/* =========================================================
   TABLAS
   ========================================================= */

table {
  border-color:
    var(--border-strong) !important;

  background:
    #ffffff !important;
}

table thead,
table th {
  background:
    #f7f6f1 !important;

  color:
    #5f5d55 !important;
}

table th,
table td {
  border-bottom:
    1px solid
    var(--border) !important;
}

table tbody tr {
  background:
    #ffffff;
}

table tbody tr:hover {
  background:
    var(--accent-softer) !important;
}

/* =========================================================
   ESTADOS Y BADGES
   ========================================================= */

.status-badge,
.badge,
.priority-badge,
.dashboard-status-badge {
  border-color:
    var(--border-strong) !important;

  background:
    #f7f6f1 !important;

  color:
    var(--text) !important;
}

.status-badge--active,
.status-badge--completed,
.status-badge--approved,
.badge--active,
.badge--success {
  border-color:
    #d1c58f !important;

  background:
    var(--accent-soft) !important;

  color:
    #665727 !important;
}

/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-metric-card__icon,
.dashboard-alert-card__icon {
  border-color:
    #d1c58f !important;

  background:
    var(--accent-soft) !important;

  color:
    var(--accent-dark) !important;
}

.dashboard-state-row__track,
.dashboard-progress-track {
  background:
    #eceae2 !important;
}

.dashboard-state-row__track > span,
.dashboard-progress-track > span,
.dashboard-progress-ring {
  background:
    var(--accent) !important;
}

.dashboard-progress-ring {
  border-color:
    var(--accent) !important;
}

/* =========================================================
   WIZARD DE CÁMARAS
   ========================================================= */

.technician-wizard-step {
  border-color:
    var(--border-strong) !important;

  background:
    #ffffff !important;

  color:
    var(--text) !important;
}

.technician-wizard-step:hover {
  border-color:
    var(--accent-dark) !important;

  background:
    var(--accent-softer) !important;
}

.technician-wizard-step.is-active {
  border-color:
    var(--accent-dark) !important;

  background:
    var(--accent-soft) !important;

  color:
    #5f5124 !important;
}

.technician-wizard-step strong {
  background:
    var(--accent) !important;

  color:
    #ffffff !important;
}

.technician-check-field,
.technician-photo-help,
.technician-photo-preview__item {
  border-color:
    var(--border-strong) !important;

  background:
    #ffffff !important;
}

.technician-check-field:hover {
  border-color:
    var(--accent-dark) !important;

  background:
    var(--accent-softer) !important;
}

/* =========================================================
   TARJETAS MÓVILES DE TRABAJOS
   ========================================================= */

@media (max-width: 820px) {
  #page-content table tbody tr {
    border-color:
      var(--border-strong) !important;

    background:
      #ffffff !important;
  }

  #page-content table tbody td {
    border-bottom-color:
      var(--border) !important;
  }

  .sidebar {
    border-right-color:
      var(--border-strong) !important;

    background:
      #ffffff !important;
  }

  .sidebar-backdrop {
    background:
      rgba(
        45,
        42,
        32,
        0.42
      ) !important;
  }
}

/* =========================================================
   AGRO INTEL · LOGO SIDEBAR DEFINITIVO
   ========================================================= */

.brand {
  display: flex;
  width: 100%;
  min-height: 84px;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding:
    4px
    0
    18px;
  border-bottom:
    1px solid
    var(--border-strong);
}

.brand__mark,
.brand__content {
  display: none !important;
}

.brand__logo {
  display: block;
  width: 100%;
  max-width: 178px;
  height: 66px;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 820px) {
  .brand {
    min-height: 92px;
    padding:
      6px
      4px
      18px;
  }

  .brand__logo {
    max-width: 190px;
    height: 72px;
  }
}