/* Identidad de Gestión Taller: negro con verde lima.
   Los colores salen del logo (#4FD000 sobre negro).
   Esta hoja pisa SOLO los acentos. La estructura, los tamanos y los
   colores con significado (rojo = perdida, verde = ganancia) quedan
   como estaban, para que nada se vuelva ilegible. */

:root {
  --marca:        #4FD000;
  --marca-fuerte: #46BC00;
  --marca-oscuro: #357F00;   /* para texto y botones sobre claro */
  --marca-tinte:  #4FD00014;
  --marca-borde:  #4FD00038;
  --brand:        #4FD000;   /* lo usa base.css para el foco y el menu */
}

/* En oscuro el lima puede ir a full: es como se ve el logo. */
:root[data-theme="dark"] {
  --marca-oscuro: #6FE02A;
  --marca-tinte:  #4FD00018;
  --marca-borde:  #4FD00044;
}

/* ------------------------------------------------- botones principales */
.bp {
  background: linear-gradient(135deg, #52C400, #3C9400) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
}
.bp:hover { filter: brightness(1.12); }
:root[data-theme="dark"] .bp {
  background: linear-gradient(135deg, #4FD000, #3EA800) !important;
  color: #07140A !important;
}

/* --------------------------------------------------------- navegacion */
.ni.on {
  box-shadow: inset 3px 0 0 var(--marca);
  background: var(--marca-tinte);
}
.ni.on .ic { filter: saturate(1.2); }
.side-head { border-bottom: 1px solid var(--marca-borde); }
.side-logo img {
  background: #000; padding: 3px;
  box-shadow: 0 0 0 1px var(--marca-borde);
}

/* ------------------------------------------------------------ pestanas */
.tab.on {
  box-shadow: inset 0 2px 0 var(--marca);
  border-color: var(--border);
}

/* ------------------------------------------------------------- chips */
.chip.on {
  background: var(--marca-fuerte);
  border-color: var(--marca-fuerte);
  color: #fff;
}
:root[data-theme="dark"] .chip.on { color: #07140A; }

/* ------------------------------------------------- medios de pago */
.pago-b.on {
  background: var(--marca-fuerte);
  border-color: var(--marca-fuerte);
  color: #fff;
}
:root[data-theme="dark"] .pago-b.on { color: #07140A; }

/* ------------------------------------------------------- login */
.login-caja { border-top: 3px solid var(--marca); }
.login-user:hover { border-color: var(--marca-borde); }
.login-user .av { background: #000; color: var(--marca); }

/* ------------------------------------------- detalles que dan identidad */
.seccion-tit { border-left: 3px solid var(--marca); padding-left: 9px; }
.kpi { border-top: 2px solid transparent; }
.kpi:first-child { border-top-color: var(--marca); }
.plan-item { border-left-color: var(--marca); }
.plan-cab.hoy { box-shadow: inset 0 -2px 0 var(--marca); }
.qr-abierto {
  background: var(--marca-tinte); border-color: var(--marca-borde);
  color: var(--marca-oscuro);
}
.nota-interna {
  background: var(--marca-tinte);
  border-color: var(--marca-borde);
}
::selection { background: var(--marca); color: #07140A; }

/* La barra de los informes, dia por dia */
.barra-dia { background: var(--marca) !important; }

/* El acento naranja del programa original queda para los avisos,
   asi "atencion" y "marca" no se confunden. */

/* ------------------------------- la pagina que ve el cliente en el QR */
.telefono { border-color: #000; }
.cl-taller { border-bottom: 2px solid var(--marca-borde); margin-bottom: 14px; }
.cl-taller .nom { letter-spacing: .02em; }
.cl-chapa { border-color: var(--marca-borde); }
.cl-chapa .pat { color: var(--marca-oscuro); }
.cl-visita li:before { color: var(--marca-fuerte); }
.cl-prox {
  background: var(--marca-tinte) !important;
  border-color: var(--marca-borde) !important;
}
.cl-prox b { color: var(--marca-oscuro) !important; }
.qr-img img { box-shadow: 0 0 0 2px var(--marca-borde); }
.qr-pat { color: var(--marca-oscuro); }