/***
 * Tema visual DPS. Se carga al final de head.tpl y sobrescribe los estilos viejos
 * sin modificarlos. Los colores de marca salen del logo de dpssoftware.com.ar.
 *********************************************************************************************************/

:root {
  --dps-verde:       #17ffa0;
  --dps-celeste:     #22add1;
  --dps-azul:        #2d5fff;
  --dps-azul-oscuro: #1f47c9;
  --dps-azul-suave:  #e6edff;
  --dps-navy:        #0b1733;
  --dps-navy-hover:  #17264d;
  --dps-degrade:     linear-gradient(90deg, #17ffa0 0%, #22add1 45%, #2d5fff 100%);

  --texto:      #1f2a44;
  --texto-suave:#5d6b8a;
  --fondo:      #f4f6fb;
  --superficie: #ffffff;
  --borde:      #dde3ee;
  --radio:      6px;
  --fuente:     "Segoe UI", Tahoma, Arial, sans-serif;

  --sb-texto:            #2b3550;
  --sb-texto-suave:      #6b7895;
  --sb-hover:            #f1f4fa;

  --sb-ancho:            250px;
  --sb-ancho-colapsado:  60px;
}

/* ---------------------------------------------------------------------- Base */

body {
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--fondo);
}

/* --------------------------------------------------------------- Botoneras */

.botones {
  width: 98%;
  height: auto;
  padding: 14px 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.botones span {
  margin-right: 0;
}
.botones span button,
.alertBotones {
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 600;
  color: var(--dps-azul-oscuro);
  background: var(--superficie);
  border: 1px solid #cfd6e3;
  border-radius: var(--radio);
  padding: 7px 14px;
  /* borde y sombra marcados para que el boton se despegue del fondo gris */
  box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
  transition: .15s;
}
.botones span button:hover,
.alertBotones:hover {
  border-color: var(--dps-azul);
  background: var(--dps-azul);
  color: #fff;
}
.botones span button:focus-visible,
.alertBotones:focus-visible {
  outline: 2px solid var(--dps-celeste);
  outline-offset: 1px;
}
/* Sin subrayado en la letra del atajo de teclado de los botones (<u> de botones.tpl / formy).
   El atajo (Alt + letra) sigue funcionando; solo se oculta la marca */
.botones button u,
.alertBotones u,
.formy_table .input u,
.formy_table .input2 u,
button u {
  text-decoration: none;
}
.alertBotones:disabled {
  background: #e5e8ef;
  border-color: #e5e8ef;
  color: #9aa4b8;
}

/* ----------------------------------------------------------------- Grillas */

.DIVgrillaOuter {
  background: var(--superficie);
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  overflow: hidden;
  /* borde y sombra marcados para que la grilla se despegue del fondo gris */
  box-shadow: 0 1px 3px rgba(16,24,40,.08), 0 6px 18px rgba(16,24,40,.08);
}
.DIVgrillaHeader {
  background: var(--superficie);
  color: var(--texto);
  border-bottom: 1px solid var(--borde);
  padding: 10px 0;
  font-size: 1.05em;
  position: relative;
}
.DIVgrillaHeader::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px; /* antes width: 80px (solo un tramo a la izquierda) */
  height: 3px;
  background: var(--dps-degrade);
}
/* Encabezado de columnas: fondo muy claro, linea inferior marcada y nombres en mayuscula chica
   (mismo estilo que los titulos de modulo del menu). Texto centrado en vertical y sin alto de sobra */
div.gridbox_material.gridbox TABLE.hdr {
  background-color: #f6f8fb !important;
}
div.gridbox_material.gridbox div.xhdr {
  background-color: #f6f8fb;
  border-bottom: 2px solid #e1e6ef;
}
div.gridbox_material.gridbox table.hdr tr,
div.gridbox_material.gridbox table.hdr tr td {
  color: #5b6884;
  font-family: var(--fuente);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
div.gridbox_material.gridbox table.hdr tr td {
  vertical-align: middle !important;
  padding-top: 11px;
  padding-bottom: 11px;
}
div.gridbox_material.gridbox table.hdr td div.hdrcell {
  line-height: 1.3;
}
/* Datos de las filas con la misma tipografia que el resto del sistema (dhtmlx usa Arial) */
div.gridbox_material.gridbox table.obj td,
div.gridbox_material.gridbox div.ftr td {
  font-family: var(--fuente) !important; /* dhtmlx fija Roboto/Arial con un selector mas especifico */
  font-size: 13px !important;
  color: var(--texto);
}
/* Renglon bajo el mouse: celeste DPS (#22add1, color del medio del degrade del logo) con una barra a la
   izquierda; distinto del renglon seleccionado, que queda en azul suave */
/* Degrade del logo con transparencia baja. background-attachment: fixed hace que el degrade se calcule sobre
   la ventana y no sobre cada celda, asi se ve continuo a lo largo del renglon */
.DIVgrilla .gridRowHover,
.DIVgrilla .gridRowHover td,
div.gridbox_material.gridbox table.obj tr.gridRowHover td,
div.gridbox_material.gridbox table.obj td.gridRowHover {
  background: linear-gradient(90deg, rgba(23,255,160,.13) 0%, rgba(34,173,209,.13) 45%, rgba(45,95,255,.13) 100%) fixed,
              #fff !important;
}
/* dhtmlx pone la clase en cada celda (no en el TR): se tapan las lineas blancas entre celdas
   y la barra celeste va en la primera celda */
div.gridbox_material.gridbox table.obj td.gridRowHover {
  border-right-color: transparent !important;
  border-left-color: transparent !important;
}
div.gridbox_material.gridbox table.obj td.gridRowHover:first-child,
div.gridbox_material.gridbox table.obj tr.gridRowHover td:first-child {
  box-shadow: inset 3px 0 0 var(--dps-celeste);
}
div.gridbox_material.gridbox table.obj tr.rowselected td,
div.gridbox_material.gridbox table.obj tr.rowselected {
  background-color: var(--dps-azul-suave) !important;
}
div.gridbox_material.gridbox table.obj tr.rowselected td.cellselected {
  background-color: #d5e0ff !important;
}
/* Totales de consultas (abm.tpl > .abmTotales). Varias pantallas los pintaban con position:fixed en top:72%
   y left:15px (pensado para la grilla de 73% y sin menu lateral): tapaban filas y quedaban sobre el menu.
   Ahora van debajo de la grilla, en el flujo normal, y alturaGrillas.js les deja lugar */
.abmTotales {
  width: 98%;
  margin: 10px auto 0;
}
.abmTotales > div[style*="position:fixed"] {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  margin: 0 !important;
}
/* Columna Accion: iconos SVG (imagenes/iconos) con fondo suave al pasar el mouse */
div.gridbox_material .TDaccion {
  gap: 0;
  align-items: center;
}
/* 19px por icono: entran 5 en la columna Accion de 100px que usan varias pantallas (ej: Facturacion) */
div.gridbox_material .TDaccion A {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  transition: background-color .12s;
}
div.gridbox_material .TDaccion A:hover {
  background-color: #e6edff;
}
div.gridbox_material .TDaccion A IMG {
  width: 16px;
  height: 16px;
  border: 0;
}
.DIVgrillaFooter {
  border-top: 1px solid var(--borde);
  background: #fafbfd;
  padding: 6px 12px; /* margen a los costados para que el conteo y los botones no queden pegados al borde */
  color: var(--texto-suave);
}
/* Botones del pie de la grilla: iconos Lucide (imagenes/iconos/grilla) en lugar de los PNG de dhtmlx */
.DIVgrillaFooter {
  align-items: center;
}
.DIVgrillaFooter .DIVgrillaIcono {
  width: 30px;
  height: 28px;
  margin: 0 2px;
  border-radius: 6px;
  background-size: 18px 18px;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-color .12s;
}
.DIVgrillaFooter .DIVgrillaIcono:hover {
  background-color: #e6edff;
}
.DIVgrillaFooter .DIVgrillaIconoPrint   { background-image: url('/imagenes/iconos/grilla/imprimir.svg'); }
.DIVgrillaFooter .DIVgrillaIconoCSV     { background-image: url('/imagenes/iconos/grilla/excel.svg'); }
.DIVgrillaFooter .DIVgrillaIconoReload  { background-image: url('/imagenes/iconos/grilla/refrescar.svg'); }
.DIVgrillaFooter .DIVgrillaIconoFiltros {
  width: auto;
  display: flex;
  align-items: center;
  padding: 0 10px 0 30px;
  border-left: none;
  border-right: 1px solid var(--borde);
  border-radius: 6px;
  background-image: url('/imagenes/iconos/grilla/filtros.svg');
  background-size: 16px 16px;
  background-position: 9px center;
  color: var(--texto-suave);
  font-weight: 600;
  cursor: pointer;
}
div.gridbox div.ftr td {
  background-color: #eef2f9;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
}

/* ------------------------------------------------------------- Formularios */

.formy_table {
  font-family: var(--fuente);
}
.formy_table td.formy_caption {
  background: var(--dps-navy);
  font-family: var(--fuente);
  font-size: 13pt;
  border-bottom: 3px solid var(--dps-azul);
  border-image: var(--dps-degrade) 1;
}
.formy_table input,
.formy_table select,
.formy_table textarea {
  border: 1px solid #c8d0de;
  border-radius: 4px;
  font-family: var(--fuente);
}
.formy_table input:hover,
.formy_table select:hover {
  background-color: #f6f8fd;
}
.formy_table input:focus,
.formy_table select:focus,
.formy_table textarea:focus {
  background-color: #fff;
  border-color: var(--dps-azul);
  outline: none;
  box-shadow: 0 0 0 3px rgba(45,95,255,.15);
}
.formy_table .input {
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--dps-azul);
  border-radius: var(--radio);
  background: var(--dps-azul);
  color: #fff;
  padding: 7px 16px;
}
.formy_table .input:hover {
  border-color: var(--dps-azul-oscuro);
  background: var(--dps-azul-oscuro);
}
.formy_table .input2 {
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto-suave);
  padding: 7px 16px;
}
.formy_table .input2:hover {
  border-color: var(--texto-suave);
  background: var(--texto-suave);
}
/* Boton "+ Agregar" junto a un combo (subdiarios del plan de cuentas, tags de articulos/insumos).
   Verde suave como el boton que agrega renglones a las grillas, para no confundirlo con Aceptar/Volver */
.formy_table .btnAgregar {
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  border: 1px solid #bfe2dc;
  border-radius: var(--radio);
  background: #e3f4f1;
  color: #10735a;
  padding: 5px 14px;
  margin-left: 4px;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.formy_table .btnAgregar:hover {
  border-color: #16926f;
  background: #cdeee7;
}
.formy_fila0,
.formy_fila1 { background-color: #ffffff; }

/* Etiquetas de los campos: celda gris neutra (antes celeste #24bbee) con texto gris oscuro,
   separada del campo por una linea vertical y lineas divisorias finas entre filas */
.formy_table {
  border-collapse: collapse;
}
.formy_table td {
  border-right: none;
  border-bottom: 1px solid #eceef2;
  padding-top: 6px;
  padding-bottom: 6px;
}
.formy_table td.formy_label {
  background: #e6e8ec;
  color: #2f3742;
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  width: 150px;
  padding: 8px 14px 8px 8px;
  border-bottom: 2px solid #ffffff;
  border-right: 1px solid #c9cdd4;
  white-space: nowrap;
}
/* Sin subrayado en la letra del atajo de teclado de las etiquetas (el atajo sigue funcionando) */
.formy_table td.formy_label u {
  text-decoration: none;
}
.formy_fila0:focus-within,
.formy_fila1:focus-within {
  background-color: #f7f8fa;
}
.formy_fila0:focus-within td.formy_label,
.formy_fila1:focus-within td.formy_label {
  background: #d5d9df;
  color: #111827;
}
.formy_ultimafila td {
  border-bottom: none;
}
/* Boton "+" para dar de alta un item desde el mismo formulario (imagenes/iconos/agregar.svg).
   Se selecciona por el src porque formy.class.php le pasa los atributos de cada campo */
img[src="/imagenes/iconos/agregar.svg"] {
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 2px;
  border-radius: 6px;
  transition: background-color .12s;
}
/* "Agregar cobro" (abm/cobros/edit.php): mismo efecto, un poco mas grande porque es el boton de la linea de cobro */
img[src="/imagenes/iconos/agregarLinea.svg"] {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 6px;
  transition: background-color .12s;
}
img[src="/imagenes/iconos/agregar.svg"]:hover,
img[src="/imagenes/iconos/agregarLinea.svg"]:hover {
  background-color: #e6edff;
}
/* Icono que abre el calendario en los campos fecha (imagenes/iconos/calendario/calendario.svg) */
img[src="/imagenes/iconos/calendario/calendario.svg"] {
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 3px;
  border-radius: 6px;
  vertical-align: middle;
  transition: background-color .12s;
}
img[src="/imagenes/iconos/calendario/calendario.svg"]:hover {
  background-color: #e6edff;
}
/* Errores de validacion de formularios (formy.js): campo con borde rojo + mensaje al lado,
   y mensaje flotante cuando no se sabe cual es el campo. Reemplazan a los alert() del navegador */
.formy_campo_error,
.formy_table .formy_campo_error {
  border-color: var(--aviso-rojo-acento) !important;
  box-shadow: 0 0 0 3px rgba(229,72,77,.15) !important;
  background-color: #fff !important;
}
.formy_msj_error {
  display: inline-block;
  margin: 2px 6px;
  padding: 3px 9px 3px 25px;
  background: var(--aviso-rojo-fondo) url('/imagenes/iconos/avisos/error.svg') no-repeat 7px center;
  background-size: 13px 13px;
  border: 1px solid var(--aviso-rojo-borde);
  border-radius: 6px;
  color: var(--aviso-rojo-texto);
  font-family: var(--fuente);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
  animation: formyAparecer .18s ease-out;
}
#formyMensajeFlotante {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 10px 18px 10px 40px;
  background: var(--aviso-rojo-fondo) url('/imagenes/iconos/avisos/error.svg') no-repeat 14px center;
  background-size: 16px 16px;
  border: 1px solid var(--aviso-rojo-borde);
  border-left: 4px solid var(--aviso-rojo-acento);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(16,24,40,.18);
  color: var(--aviso-rojo-texto);
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 600;
  animation: formyAparecer .18s ease-out;
}
@keyframes formyAparecer {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
#formyMensajeFlotante {
  animation-name: formyAparecerFlotante;
}
@keyframes formyAparecerFlotante {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Marca de campo obligatorio (asterisco rojo, imagenes/iconos/requerido.svg) */
.formy_table img.formy_requerido {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  cursor: help;
}

/* --------------------------------------------- Ventanas popup (windows_js) */

.overlay_mac_os_x {
  background-color: var(--dps-navy);
  opacity: .6;
}
/* Ventana flotante: sombra marcada para que se note que esta por encima */
div.dialog {
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.25);
}
/* Contenido de los popups (paginas sinMenu) en blanco, distinto del fondo gris de la pantalla de atras */
body.en-popup {
  background: #fff;
}
/* Barra de titulo con el degrade del logo DPS: las esquinas toman los colores de los extremos
   y la celda del medio hace la transicion, asi queda continuo */
.mac_os_x_nw {
  background: var(--dps-verde);
  border-top-left-radius: 8px;
}
.mac_os_x_n {
  background: var(--dps-degrade);
  letter-spacing: normal;
}
.mac_os_x_ne {
  background: var(--dps-azul);
  border-top-right-radius: 8px;
}
/* Botones de la ventana (cerrar / nueva sesion / ayuda): iconos Lucide blancos a la derecha de la barra,
   en lugar de los PNG de windows_js a la izquierda */
.mac_os_x_close,
.mac_os_x_new,
.mac_os_x_hlp {
  top: 4px;
  left: auto;
  width: 24px;
  height: 22px;
  border-radius: 6px;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  transition: background-color .12s;
}
.mac_os_x_close { right: 10px; background-image: url('/imagenes/iconos/ventana/cerrar.svg'); }
.mac_os_x_new   { right: 38px; background-image: url('/imagenes/iconos/ventana/nueva.svg'); }
.mac_os_x_hlp   { right: 66px; background-image: url('/imagenes/iconos/ventana/ayuda.svg'); }
.mac_os_x_new:hover,
.mac_os_x_hlp:hover {
  background-color: rgba(255,255,255,.25);
}
.mac_os_x_close:hover {
  background-color: #e5484d;
}
.mac_os_x_title {
  color: var(--dps-navy);
  font-family: var(--fuente);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px; /* centrado vertical en la barra (antes 8px, quedaba pegado abajo) */
}
.mac_os_x_w,
.mac_os_x_e,
.mac_os_x_sw,
.mac_os_x_s,
.mac_os_x_se,
.mac_os_x_sizer {
  background: #fff;
}
.mac_os_x_w { border-left: 1px solid var(--borde); }
.mac_os_x_e { border-right: 1px solid var(--borde); }
.mac_os_x_sw,
.mac_os_x_s,
.mac_os_x_se,
.mac_os_x_sizer {
  border-bottom: 1px solid var(--borde);
}
.mac_os_x_sw { border-left: 1px solid var(--borde); border-bottom-left-radius: 8px; }
.mac_os_x_se, .mac_os_x_sizer { border-right: 1px solid var(--borde); border-bottom-right-radius: 8px; }
/* Esquina para redimensionar la ventana: agarradera de tres lineas diagonales, celeste al pasar el mouse */
.mac_os_x_sizer {
  background: #fff url('/imagenes/iconos/ventana/redimensionar.svg') no-repeat right 6px bottom 6px;
  background-size: 14px 14px;
  cursor: nwse-resize;
}
.mac_os_x_sizer:hover {
  background-image: url('/imagenes/iconos/ventana/redimensionar_hover.svg');
}
.mac_os_x_s {
  border-top: 3px solid transparent;
  border-image: var(--dps-degrade) 1;
  border-bottom: 1px solid var(--borde);
}
.mac_os_x_s .status_bar {
  font-family: var(--fuente);
  letter-spacing: normal;
  color: var(--texto-suave);
  padding-top: 8px;
  text-align: center;
}
.mac_os_x_s .status_bar a {
  color: var(--dps-azul);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer; /* la barra es arrastrable (cursor de mover); sobre el link, la manito */
}
.mac_os_x_s .status_bar a:hover {
  text-decoration: underline;
}
.mac_os_x_content {
  font-family: var(--fuente);
  color: var(--texto);
}

/* ------------------------------------------------------------------- Login */

body.sin-sesion {
  background: var(--dps-navy) url(/imagenes/logo_dps_blanco.svg) no-repeat center 12%;
  background-size: 160px auto;
  overflow: hidden; /* el overlay de windows_js queda unos px mas alto que la pantalla y mostraba scroll */
}
body.sin-sesion .overlay_mac_os_x {
  opacity: 0;
}
#winLogin_Content {
  background-color: #fff;
}
#login {
  margin: 0;
  width: auto;
  border: none;
  border-radius: 0;
  background: #fff;
  font-family: var(--fuente);
}
#login form {
  padding-top: 36px;
}
#login .caption {
  background: none;
  color: var(--texto);
  font-size: 1.25em;
  padding: 14px 0 10px;
  margin-bottom: 6px;
}
#login th {
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
#login input {
  width: 190px;
  font-size: 13px;
  text-align: left;
  padding: 7px 10px;
  border: 1px solid #c8d0de;
  border-radius: 4px;
  font-family: var(--fuente);
}
#login input:hover {
  background: #f6f8fd;
}
#login input:focus {
  background: #fff;
  border-color: var(--dps-azul);
  outline: none;
  box-shadow: 0 0 0 3px rgba(45,95,255,.15);
}
#login .submit,
#login .submit:hover,
#login .submit:focus {
  width: 110px;
  margin-left: 10px;
  padding: 9px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: var(--radio);
  background: var(--dps-azul);
  cursor: pointer;
}
#login .submit:hover,
#login .submit:focus {
  background: var(--dps-azul-oscuro);
}
#login .error {
  border: 1px solid #f3b7b7;
  border-radius: 4px;
  background: #fdecec;
  color: #a12626;
  width: 85%;
}

/* ------------------------------------------------------------------ Avisos
   Un mismo diseno para todos los carteles, con el color segun el tipo:
     amarillo = advertencia, rojo = error, azul = informacion.
   Muchos avisos estan escritos con estilos inline (style='background:yellow; ...') en cada pantalla,
   por eso se seleccionan por el atributo style y se usa !important para pisar esos estilos. */

:root {
  --aviso-amarillo-fondo: #fff8e6;  --aviso-amarillo-borde: #f3d58c;  --aviso-amarillo-texto: #6b4b00;  --aviso-amarillo-acento: #e8a317;
  --aviso-rojo-fondo:     #fdeded;  --aviso-rojo-borde:     #f4bcbc;  --aviso-rojo-texto:     #8a1c1c;  --aviso-rojo-acento:     #e5484d;
  --aviso-azul-fondo:     #eef3ff;  --aviso-azul-borde:     #c9d7ff;  --aviso-azul-texto:     #1e3a8a;  --aviso-azul-acento:     #2d5fff;
}

/* --- Amarillo: avisos en linea (chicos, al lado de un campo) */
.atencion,
span[style*="background:yellow"]:not([title="Varios"]),
span[style*="background: yellow"]:not([title="Varios"]),
span[style*="background-color:yellow"],
span[style*="background-color: yellow"] {
  display: inline-block !important;
  padding: 3px 9px 3px 26px !important;
  margin: 2px 4px !important;
  background: var(--aviso-amarillo-fondo) url('/imagenes/iconos/avisos/advertencia.svg') no-repeat 7px center !important;
  background-size: 14px 14px !important;
  border: 1px solid var(--aviso-amarillo-borde) !important;
  border-radius: 6px !important;
  color: var(--aviso-amarillo-texto) !important;
  font-family: var(--fuente) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  vertical-align: middle;
}

/* Excepcion: "DIFERENCIA: ..." de los asientos (asiento.js, dentro de th#colerror) es un dato del error,
   no un aviso aparte: se deja en linea, sin icono y con su tamanio original para que no pase desapercibido */
th#colerror span[style*="background:yellow"] {
  display: inline !important;
  padding: 1px 6px !important;
  margin: 0 0 0 6px !important;
  background: #fff3c4 !important;
  border: 1px solid var(--aviso-amarillo-borde) !important;
  color: #3d2c00 !important;
  font-size: medium !important;
  font-weight: bold !important;
}

/* --- Bloques (avisos grandes): misma base para los tres colores */
div[style*="background:yellow"]:not(#systemWorking),
div[style*="background: yellow"]:not(#systemWorking),
div[style*="background-color:yellow"]:not(#systemWorking),
div[style*="background-color: yellow"]:not(#systemWorking),
.msjerr,
.aviso:not(#finSession),
div[style*="background:tomato"],
fieldset.error {
  box-sizing: border-box;
  margin: 10px auto !important;
  padding: 12px 16px 12px 44px !important;
  border: 1px solid var(--aviso-amarillo-borde) !important;
  border-left: 4px solid var(--aviso-amarillo-acento) !important;
  border-radius: 8px !important;
  background: var(--aviso-amarillo-fondo) url('/imagenes/iconos/avisos/advertencia.svg') no-repeat 15px 13px !important;
  background-size: 18px 18px !important;
  color: var(--aviso-amarillo-texto) !important;
  font-family: var(--fuente) !important;
  font-size: 14px !important;
  font-weight: normal !important;
  line-height: 1.45;
  text-align: left;
}
div[style*="background:yellow"] b,
.msjerr b {
  font-weight: 600;
}
.msjerr {
  display: inline-block;
  width: auto !important;
  margin: 5px 5px 0 0 !important;
}

/* Paginas de aviso (sin permiso, registro bloqueado, mensajes): tarjeta centrada.
   #finSession tambien usa .aviso pero tiene su propio diseno (ver "Sesion finalizada") */
.aviso:not(#finSession) {
  width: 520px !important;
  max-width: calc(100% - 32px);
  margin-top: 40px !important;
  box-shadow: 0 4px 14px rgba(16,24,40,.06);
}
.aviso:not(#finSession) > div {
  padding: 4px 0 !important;
  text-align: left !important;
}
.aviso:not(#finSession) button {
  margin-top: 6px;
}

/* --- Rojo */
.aviso.aviso-error,
div[style*="background:tomato"],
fieldset.error {
  background-color: var(--aviso-rojo-fondo) !important;
  background-image: url('/imagenes/iconos/avisos/error.svg') !important;
  border-color: var(--aviso-rojo-borde) !important;
  border-left-color: var(--aviso-rojo-acento) !important;
  color: var(--aviso-rojo-texto) !important;
}
div[style*="background:tomato"] {
  font-weight: 600 !important;
}
/* Un solo icono por aviso: se ocultan los iconos viejos (warn.png) que algunas pantallas ponen
   dentro del aviso o en la celda de la etiqueta de al lado; el icono nuevo va de fondo del aviso */
div[style*="background:tomato"] > img,
td.formy_label img[src$="warn.png"],
div[style*="background:yellow"] img[src$="warn.png"],
.atencion img[src$="warn.png"] {
  display: none;
}
th#colerror {
  background: var(--aviso-rojo-fondo) !important;
  color: var(--aviso-rojo-texto) !important;
  border: 1px solid var(--aviso-rojo-borde);
  border-radius: 6px;
  padding: 6px;
}

/* --- Azul */
.aviso.aviso-info {
  background-color: var(--aviso-azul-fondo) !important;
  background-image: url('/imagenes/iconos/avisos/info.svg') !important;
  border-color: var(--aviso-azul-borde) !important;
  border-left-color: var(--aviso-azul-acento) !important;
  color: var(--aviso-azul-texto) !important;
}

/* ---------------------------------------------- Calendario desplegable
   (include/calendario/calendar.js). Se pisa calendar.css sin modificarlo; las flechas y la cruz
   del script son GIF que cambia en el mouseover, por eso se reemplazan con content:url() segun el src */

#calendarDiv {
  width: 236px;
  padding: 8px 8px 38px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16,24,40,.18);
  font-family: var(--fuente);
  font-size: 12px;
  color: var(--texto);
}
#calendarDiv .topBar {
  height: 24px;
  padding: 0 0 6px;
  background: transparent;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 4px;
}
#calendarDiv .topBar div {
  margin-right: 2px;
}
#calendarDiv .topBar img {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 6px;
}
#calendarDiv .topBar img:hover {
  background: #e6edff;
}
#calendarDiv img[src$="left.gif"],      #calendarDiv img[src$="left_over.gif"]      { content: url('/imagenes/iconos/calendario/anterior.svg'); }
#calendarDiv img[src$="right.gif"],     #calendarDiv img[src$="right_over.gif"]     { content: url('/imagenes/iconos/calendario/siguiente.svg'); }
#calendarDiv img[src$="down.gif"],      #calendarDiv img[src$="down_over.gif"],
#calendarDiv img[src$="down_time.gif"], #calendarDiv img[src$="down_time_over.gif"] { content: url('/imagenes/iconos/calendario/desplegar.svg'); }
#calendarDiv img[src$="close.gif"],     #calendarDiv img[src$="close_over.gif"]     { content: url('/imagenes/iconos/calendario/cerrar.svg'); }

/* Mes y anio */
#calendarDiv .selectBox,
#calendarDiv .selectBoxOver {
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--texto);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  padding: 1px 2px 1px 6px;
}
#calendarDiv .selectBoxOver {
  background: #e6edff;
  color: var(--dps-azul-oscuro);
}
#calendarDiv .selectBox img,
#calendarDiv .selectBoxOver img {
  width: 14px;
  height: 14px;
  padding: 3px 0 0 2px;
  background: none;
}
#calendarDiv .monthYearPicker {
  top: 26px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(16,24,40,.15);
  color: var(--texto);
  padding: 2px;
}
#calendarDiv .monthYearPicker div {
  border-radius: 4px;
  padding: 2px 6px;
}
#calendarDiv .monthYearPicker div:hover,
#calendarDiv .monthYearActive {
  background: var(--dps-azul);
  color: #fff;
}

/* Grilla de dias */
#calendarDiv table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
}
#calendarDiv td {
  padding: 5px 0;
  font-size: 12px;
  text-align: center;
  border-radius: 6px;
}
#calendarDiv td:hover {
  background: #e6edff;
  color: var(--dps-azul-oscuro);
}
#calendarDiv .calendar_day_name,
#calendarDiv .calendar_day_name:hover {
  background: none;
  border-bottom: none;
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 600;
  cursor: default;
}
#calendarDiv .domingo,
#calendarDiv .sabado {
  color: #c2410c;
  font-weight: normal;
}
#calendarDiv .activeDay,
#calendarDiv .activeDay:hover {
  background: var(--dps-azul);
  color: #fff;
  font-weight: 600;
}

/* Barra inferior "hoy" */
#calendarDiv .todaysDate {
  left: 0;
  right: 0;
  width: auto;
  height: 30px;
  line-height: 30px;
  padding: 0 8px;
  background: #f5f7fb;
  border-top: 1px solid var(--borde);
  border-radius: 0 0 10px 10px;
  color: var(--dps-azul-oscuro);
  font-weight: 600;
}
#calendarDiv #todaysDateString:hover {
  color: var(--dps-azul);
  text-decoration: underline;
}
#calendarDiv .timeBar {
  background: transparent;
  color: var(--texto);
}

/* ------------------------------------------------------- Sesion finalizada */

#finSession {
  width: 460px;
  max-width: calc(100% - 32px);
  margin: 26vh auto 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(23,255,160,.7) 0%, rgba(34,173,209,.7) 45%, rgba(45,95,255,.7) 100%);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  color: #fff;
  font-family: var(--fuente);
}
#finSession .finSessionTitulo {
  font-size: 26px;
  font-weight: 700;
  margin: 6px 0 18px;
  text-shadow: 0 1px 3px rgba(11,23,51,.45);
}

/* ---------------------------------------------------------- Aviso cargando */

#systemWorking {
  background: var(--dps-azul) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--fuente);
  font-size: 12px;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  box-shadow: 0 4px 12px rgba(45,95,255,.35);
  z-index: 1000;
}

/* --------------------------------------------- Grillas de detalle de formularios */
/* Tablas armadas a mano en las altas con renglones (factura, notas, cobros, presupuestos, remitos, stock...).
   Cada modulo trae su estilo.css con el encabezado viejo (header.gif / steelblue) y borde negro; esos CSS se
   cargan despues de este, por eso los selectores llevan "body" delante para ganar en especificidad.
   Encabezado verde azulado suave (tono entre el verde y el celeste del logo) para distinguirlas de los campos */
body #contenido > table,
body #contenido_rem > table,
body #tab,
body #tab2,
body #percepciones table,
body #recep_tab,
body #cuotas_tab,
body #pendientes,
body #ventas,
body #facturas,
body #facturasHabilitar,
body .det_retenciones {
  background: var(--superficie);
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-family: var(--fuente);
}
body #contenido table th,
body #contenido_rem table th,
body #tab th,
body #tab2 th,
body #percepciones table th,
body #recep_tab th,
body #cuotas_tab th,
body #pendientes .titulos,
body #pendientes .titulos th,
body #ventas .titulos,
body #ventas .titulos th,
body #pendientes .titulos2,
body #pendientes .titulos2 th,
body #ventas .titulos2,
body #ventas .titulos2 th,
body #facturas .titulos td,
body #facturasHabilitar .titulos,
body #facturasHabilitar .titulos th,
body .det_retenciones .grupo_presup_titulo td {
  background: #e3f4f1;
  color: #2c6a6e;
  font-family: var(--fuente);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  border: none;
  border-bottom: 2px solid #bfe2dc;
  padding: 8px 6px;
  vertical-align: middle;
}
/* Cobros: el encabezado rojo de "facturas pendientes" (titulos2) se mantiene rojo, en un tono suave */
body #pendientes .titulos2,
body #pendientes .titulos2 th,
body #ventas .titulos2,
body #ventas .titulos2 th {
  background: #fbe4e1;
  color: #a8433a;
  border-bottom-color: #f1c3bd;
}
/* #tab2 (notas) se arma con border='1': lineas internas suaves en vez de grises en relieve */
body #tab2 td {
  border: 1px solid #e1e6ef;
}

/* Cobros: Total y Resto del cobro. El fondo lo pone edit.php/funcs.js (amarillo suave = total; verde suave =
   cubierto; rojo suave = falta imputar); aca solo el texto y el borde para que se lean como totales */
body #importe_cobrado_total,
body #resto_cobrado_total,
body fieldset.bloqueOP input#total,
body fieldset.bloqueOP input#pago_restante,
body fieldset.bloqueOP input#a_retener,
body fieldset.bloqueOP input#a_pagar {
  font-weight: 700;
  color: var(--texto);
  border: 1px solid #d9dfe9;
  border-radius: 4px;
}

/* Boton que agrega el renglon a las grillas de detalle (imagenes/iconos/confirmarRenglon.svg, antes sn.png) */
button img[src="/imagenes/iconos/confirmarRenglon.svg"],
img[src="/imagenes/iconos/confirmarRenglon.svg"] {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  cursor: pointer;
}
button:has(> img[src="/imagenes/iconos/confirmarRenglon.svg"]) {
  background: #e3f4f1;
  border: 1px solid #bfe2dc;
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
button:has(> img[src="/imagenes/iconos/confirmarRenglon.svg"]):hover {
  background: #cdeee7;
  border-color: #16926f;
}

/* Cobros: recuadros de "Detalle de Modos de Pago" y de los datos de cheque / deposito / IIBB / etc.
   (abm/cobros/estilo.css los pinta gainsboro con borde plateado). No se toca display: lo maneja funcs.js */
body .contenedorCobros,
body .contenedorCOMUN {
  background: var(--superficie);
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
  padding: 10px 12px;
  color: var(--texto);
  font-family: var(--fuente);
  font-weight: 600;
}

/* Botones de borrar / modificar renglon con iconos Lucide (antes delete.png y pencil.png) */
button:has(> img[src="/imagenes/iconos/borrar.svg"]),
button:has(> img[src="/imagenes/iconos/editar.svg"]) {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 4px;
  cursor: pointer;
  transition: background-color .12s;
}
button:has(> img[src="/imagenes/iconos/borrar.svg"]):hover {
  background: #fbe4e1;
}
button:has(> img[src="/imagenes/iconos/editar.svg"]):hover {
  background: var(--dps-azul-suave);
}
button > img[src="/imagenes/iconos/borrar.svg"],
button > img[src="/imagenes/iconos/editar.svg"] {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
/* Flecha "Registrar cobro de Saldo Inicial" (antes next.png) */
img[src="/imagenes/iconos/siguiente.svg"] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  padding: 2px;
  border-radius: 6px;
  transition: background-color .12s;
}
img[src="/imagenes/iconos/siguiente.svg"]:hover {
  background: var(--dps-azul-suave);
}

/* Alicuotas de IVA del renglon de detalle de factura (cargaFacturas / cargaFacturasRapida): antes eran radios
   sueltos que se apilaban en una columna angosta. Grilla de 4 columnas, radio a la izquierda del texto */
.opcionesIva {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 3px 10px;
  justify-content: start;
  white-space: nowrap;
  font-size: 12px;
  color: var(--texto);
}
.opcionesIva .opcionIva {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.opcionesIva .opcionIva input {
  margin: 0;
  cursor: pointer;
}
/* Marca del tipo de renglon en las grillas de detalle (A articulo, S servicio, V varios, SyJ sueldos y jornales) de
   facturas, presupuestos y remitos: antes un recuadro con letra grande y colores fuertes (cadetblue, olivedrab,
   amarillo, bordo). Etiqueta chica en tonos suaves, mismo color de texto y borde que el fondo pero mas oscuro */
.marcaRenglon {
  display: inline-block;
  box-sizing: border-box;
  width: 32px;
  margin-right: 6px;
  padding: 0 3px;
  border: 1px solid;
  border-radius: 10px;
  font-family: var(--fuente);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  text-indent: 0;
  vertical-align: baseline;
  cursor: default;
}
/* Nombres largos: la segunda linea arranca debajo del nombre y no debajo de la marca (sangria colgante del
   ancho de la marca + su margen), y las demas celdas del renglon se alinean con la primera linea del nombre */
body td:has(> .marcaRenglon:first-child) {
  padding-left: 42px !important;
  text-indent: -38px;
}
body tr:has(> td > .marcaRenglon) > td {
  vertical-align: baseline !important;
}
.marcaArticulo { background: var(--dps-azul-suave); color: var(--dps-azul-oscuro); border-color: #c3d2ff; }
.marcaServicio { background: #dff5e8; color: #1c7a4f; border-color: #b5e4c8; }
.marcaVarios   { background: #fff4d6; color: #8a6200; border-color: #f0dc9c; }
.marcaSueldos  { background: #fbe4e1; color: #a8433a; border-color: #f1c3bd; }

/* Renglon de carga del detalle de factura: los campos toman el ancho de su columna (antes tenian ancho fijo por
   size= y la tabla quedaba mas ancha que la ventana, con scroll horizontal y el boton de agregar fuera de vista).
   Solo en las tablas de factura (las que tienen .opcionesIva) */
body #tab:has(.opcionesIva) {
  width: 100%;
}
body #tab:has(.opcionesIva) td input[type="text"],
body #tab:has(.opcionesIva) td select {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}
/* Todos los campos del renglon de carga a la misma altura: el "s/u" (unidad de medida, #txtUM) debajo de
   Cantidad va posicionado aparte para no empujar el campo hacia arriba */
body #tab:has(.opcionesIva) tr > td {
  vertical-align: middle;
  padding: 6px 4px;
}
body #tab:has(.opcionesIva) td:has(> #txtUM),
body #tab:has(.opcionesIva) td:has(> span > #txtUM) {
  position: relative;
}
body #tab:has(.opcionesIva) #txtUM {
  position: absolute;
  left: 6px;
  bottom: 2px;
  font-size: 10px;
  color: var(--texto-suave);
}
/* Columna del boton de agregar: solo el ancho del boton */
body #tab:has(.opcionesIva) td:last-child {
  width: 1%;
  white-space: nowrap;
}

/* --------------------------------------------- Detalle de cuenta corriente */
/* templates/ctacteclientes*.tpl, ctacteproveedores.tpl, ctacteempleados.tpl: cada uno trae su <style> con
   cabecera verde agua, titulos steelblue y renglones grises. "body" delante para ganarle a ese <style> */
body #resumenctacte {
  background: var(--superficie);
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16,24,40,.08), 0 6px 18px rgba(16,24,40,.08);
  font-family: var(--fuente);
  font-size: 13px;
  color: var(--texto);
}
body #resumenctacte td,
body #resumenctacte th {
  padding: 6px 10px;
}
/* Cabecera (nombre, filtros de fecha e iconos): blanca con la linea del degrade, como las grillas */
body #resumenctacte .cabecera {
  background: var(--superficie);
  color: var(--texto);
}
body #resumenctacte .cabecera th {
  font-size: 15px;
  font-weight: 700;
  padding: 12px 10px;
  border-bottom: 3px solid transparent;
  border-image: var(--dps-degrade) 1;
}
body #resumenctacte .cabecera img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  padding: 3px;
  border-radius: 6px;
  transition: background-color .12s;
}
body #resumenctacte .cabecera img:hover {
  background: var(--dps-azul-suave);
}
body #resumenctacte .titulos {
  background: #e3f4f1;
  color: #2c6a6e;
}
body #resumenctacte .titulos th {
  border: none;
  border-bottom: 2px solid #bfe2dc;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
body #resumenctacte .fila0 { background: var(--superficie); }
body #resumenctacte .fila1 { background: #f7f9fc; }
body #resumenctacte .fila0 td,
body #resumenctacte .fila1 td {
  border-bottom: 1px solid #edf0f5;
}
body #resumenctacte tr.fila0:hover,
body #resumenctacte tr.fila1:hover {
  background: linear-gradient(90deg, rgba(23,255,160,.10) 0%, rgba(34,173,209,.10) 45%, rgba(45,95,255,.10) 100%), #fff;
}
/* Iconos borrar / modificar renglon sueltos (sin <button>) en las grillas de detalle de los formularios */
img[src="/imagenes/iconos/borrar.svg"],
img[src="/imagenes/iconos/editar.svg"] {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  cursor: pointer;
}

/* Renglones ya cargados en las grillas de detalle de los formularios: los estilo.css de cada modulo los
   alternaban en gris oscuro (.tr0 #ccc / .tr1 #ddd / .tr2 #aaa). Tonos claros como las grillas principales */
body tr.tr0 { background-color: var(--superficie); }
body tr.tr1 { background-color: #f7f9fc; }
body tr.tr2 { background-color: #eef2f7; }
body tr.tr0 > td,
body tr.tr1 > td,
body tr.tr2 > td {
  border-bottom: 1px solid #edf0f5;
}
/* Cobros: comprobantes a cobrar (#ventas) y facturas pendientes (#pendientes). La marca de tildado se mantiene,
   en tonos suaves (verde en ventas, naranja en pendientes) */
body #ventas .fila0 td,
body #pendientes .fila0 td { background: var(--superficie); border-bottom: 1px solid #edf0f5; }
body #ventas .fila1 td,
body #pendientes .fila1 td { background: #f7f9fc; border-bottom: 1px solid #edf0f5; }
body #ventas .fila0 td.tildada,
body #ventas .fila1 td.tildada { background-color: #dff5e8; }
body #pendientes .fila0 td.tildada,
body #pendientes .fila1 td.tildada { background-color: #fdeccd; }

/* Proveedores: facturas de la Orden de Pago (#facturas, include/funciones.php facturasPendientes() / facturasOP()),
   retenciones de la OP (.det_retenciones) y Habilitar Facturas (#facturasHabilitar, estilo.css: steelblue, #ccc/#bbb,
   totales wheat, borde negro). La fila tildada se marca en verde suave como en cobros */
body #facturas .fila0 td,
body #facturasHabilitar .fila0 td,
body .det_retenciones tr.fila0 > td { background: var(--superficie); border: none; border-bottom: 1px solid #edf0f5; }
body #facturas .fila1 td,
body #facturasHabilitar .fila1 td,
body .det_retenciones tr.fila1 > td { background: #f7f9fc; border: none; border-bottom: 1px solid #edf0f5; }
body #facturas tr.fila0_selected td,
body #facturas tr.fila1_selected td,
body #facturasHabilitar .fila0 td.tildada,
body #facturasHabilitar .fila1 td.tildada { background-color: #dff5e8; }
body #facturas td,
body .det_retenciones td {
  padding: 6px 8px !important;
  vertical-align: middle;
}
body #facturas .cabecera td {
  background: var(--dps-azul-suave);
  color: var(--dps-azul-oscuro);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px !important;
  border-bottom: 3px solid transparent;
  border-image: var(--dps-degrade) 1;
}
body #facturas .cabecera td div {
  color: var(--dps-azul-oscuro);
  font-size: 12px;
  font-weight: 600;
}
body #facturasHabilitar .valor,
body #facturasHabilitar .cant { border-left: 1px solid #edf0f5; }
body table.tablaFacturasHab { border: 1px solid #cfd6e3; }
/* Tabla de totales de Habilitar Facturas: amarillo suave como el total de cobros, sin la letra grande */
body #facturasHabilitar .totales td {
  background: #fff8e1;
  color: var(--texto);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 8px;
}

/* Generacion de Orden de Pago (templates/EDITordenesPago.tpl): recuadros de cabecera, facturas, retenciones y
   modos de pago (antes fieldsets #ededed con legend gris), como los recuadros de cobros */
body fieldset.bloqueOP {
  background: var(--superficie);
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
  padding: 8px 12px;
  color: var(--texto);
  font-family: var(--fuente);
}
body fieldset.bloqueOP > legend {
  background: none;
  border: none;
  padding: 0 6px;
  color: var(--texto);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
/* Datos del proveedor / fecha / moneda de la cabecera de la OP */
body fieldset.bloqueOP .datoOP {
  background: #f7f9fc;
  color: var(--texto);
  border: 1px solid #d9dfe9;
  border-radius: 4px;
  padding: 4px 8px;
  font-weight: 600;
  text-align: left;
}

/* --------------------------------------------------- Ventana de asientos */
/* templates/asiento.tpl / asientoAutomatico.tpl + el asiento.css de cada modulo (facturas, notas, cobros, OP,
   conciliacion, prestamos, ingreso de dinero, asientos): titulo beige, encabezado steelblue, botones con
   imagen verde, renglones grises. "body" delante porque asiento.css se carga despues de este archivo */

/* Titulo de la ventana (div.titulo, tambien en otras ventanas viejas): como el titulo de los formularios.
   Solo div: en los listados (abmConsulta*.tpl) .titulo es la fila de encabezados de columna, ver mas abajo */
body div.titulo {
  background: var(--dps-navy);
  color: #fff;
  border: none;
  border-bottom: 3px solid transparent;
  border-image: var(--dps-degrade) 1;
  font-family: var(--fuente);
  font-size: 13pt;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 8px;
}
body #form {
  background: var(--superficie);
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16,24,40,.08), 0 6px 18px rgba(16,24,40,.08);
  font-family: var(--fuente);
  font-size: 13px;
  color: var(--texto);
}
body #form td,
body #form th {
  font-family: var(--fuente);
  font-size: 13px;
}
body #form .hdr th,
body #cabAutom th {
  background: #e3f4f1;
  color: #2c6a6e;
  border-bottom: 2px solid #bfe2dc;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 8px 6px;
}
body #cabAutom td { background: #f7f9fc; }
/* Renglon de carga */
body #form .last {
  background: #f6f8fb;
}
body #form .last th {
  border-top: none;
  border-bottom: 1px solid #e1e6ef;
  padding: 6px 4px;
}
body #form .last input[type="text"] {
  border: 1px solid #c8d0de;
  border-radius: 4px;
  padding: 4px 6px;
  font-family: var(--fuente);
}
body #form tr.tr > * {
  border-bottom: 1px solid #edf0f5;
}
body #form tr.tr:hover {
  background: linear-gradient(90deg, rgba(23,255,160,.10) 0%, rgba(34,173,209,.10) 45%, rgba(45,95,255,.10) 100%), #fff;
}
/* Renglon deshabilitado / en modificacion: misma idea, tonos suaves */
body #form .eliminada td,
body #form .eliminada th {
  background-color: #eceff3 !important;
}
body #form .eliminada input {
  color: var(--texto-suave);
}
body #form .modificando td,
body #form .modificando th {
  background-color: #fdeccd !important;
}
body #form .btnCol {
  background-color: transparent;
}
/* Iconos editar / rehabilitar / deshabilitar del renglon */
body #form img.editar,
body #form img.cancelar,
body #form img.borrar {
  width: 16px;
  height: 16px;
  padding: 3px;
  border-radius: 6px;
  vertical-align: middle;
  transition: background-color .12s;
}
body #form img.editar:hover,
body #form img.cancelar:hover { background: var(--dps-azul-suave); }
body #form img.borrar:hover   { background: #fbe4e1; }
/* Botones (AGREGAR / CANCELAR dentro de la tabla; Grabar asiento / Salir sin grabar abajo) */
body #form button.input,
body p > button.input {
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  border: 1px solid var(--dps-azul);
  border-radius: var(--radio);
  background: var(--dps-azul);
  color: #fff;
  padding: 6px 14px;
  cursor: pointer;
}
body #form button.input:hover,
body p > button.input:hover {
  border-color: var(--dps-azul-oscuro);
  background: var(--dps-azul-oscuro);
  color: #fff;
  padding: 6px 14px;
}
/* Secundarios: CANCELAR y Salir sin grabar */
body #form button#volver,
body p > button.input:not(#btnGrabar) {
  border-color: #cfd6e3;
  background: var(--superficie);
  color: var(--dps-azul-oscuro);
}
body #form button#volver:hover,
body p > button.input:not(#btnGrabar):hover {
  border-color: var(--dps-azul);
  background: var(--dps-azul-suave);
  color: var(--dps-azul-oscuro);
}
body #form input.renglon,
body #form input.cta_debe,
body #form input.cta_haber,
body #form .renglon {
  font-family: var(--fuente);
  font-size: 13px;
  color: var(--texto);
}

/* ------------------------------------------------------ Listados y consultas */
/* templates/abmConsulta*.tpl y abmResumenCuentas*.tpl: titulo de la tabla (.subtitulo, con header.gif celeste),
   fila de encabezados (tr.titulo, beige de estilo.css) y renglones con gris inline puesto desde PHP
   (#d0d0d0 / #b7b7b7, etc.: alternan por grupo, por ejemplo por cliente) y hover 'lime' puesto con JS */
body .subtitulo {
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  font-weight: 700;
  padding: 10px 6px;
  border-bottom: 3px solid transparent;
  border-image: var(--dps-degrade) 1;
}
body tr.titulo,
body tr.titulo th,
body tr.titulo td {
  background: #e3f4f1;
  color: #2c6a6e;
  border: none;
  font-family: var(--fuente);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
body tr.titulo th,
body tr.titulo td {
  padding: 8px 6px;
  border-bottom: 2px solid #bfe2dc;
}
/* Grupos alternados: mismos dos tonos claros que el resto de las grillas (el !important le gana al inline) */
body tr[style*="#d0d0d0" i],
body tr[style*="#d7d7d7" i],
body tr[style*="#c8c8c8" i] {
  background: var(--superficie) !important;
}
body tr[style*="#b7b7b7" i],
body tr[style*="#bebebe" i],
body tr[style*="#b6b6b6" i] {
  background: #f0f4f9 !important;
}
body tr[onmouseover]:hover {
  background: linear-gradient(90deg, rgba(23,255,160,.12) 0%, rgba(34,173,209,.12) 45%, rgba(45,95,255,.12) 100%), #fff !important;
}

/* -------------------------------------------- Pantallas sueltas con tabla #tbl */
/* Lista de precios (abm/listaPrecios/estiloLP.css), Coeficientes IIBB / Sircreb, Lista de costos y Salida por
   grupo (estilos dentro de cada templates/edit*.tpl): tabla gris con borde negro, titulo header.gif celeste,
   encabezados #24bbee / lightsteelblue y renglones grises */
body #tbl,
body #tb2 {
  background: var(--superficie);
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
  font-family: var(--fuente);
  font-size: 13px;
  color: var(--texto);
}
/* se arman con border=1: lineas internas suaves */
body #tbl td,
body #tbl th,
body #tb2 td {
  border-color: #e6eaf1;
}
body #tbl .subTitulo,
body .subtitulo_lp {
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  font-weight: 700;
  padding: 10px 6px;
  border: none;
  border-bottom: 3px solid transparent;
  border-image: var(--dps-degrade) 1;
}
body .subTitulo2,
body .subTitulo2 td {
  background: #e3f4f1;
  color: #2c6a6e;
  font-family: var(--fuente);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  border-color: #bfe2dc;
}
body #tbl .r0,
body .trLista:nth-child(2n-1) { background: var(--superficie); }
body #tbl .r1,
body .trLista:nth-child(2n)   { background: #f7f9fc; }
body .trLista:hover {
  background: linear-gradient(90deg, rgba(23,255,160,.12) 0%, rgba(34,173,209,.12) 45%, rgba(45,95,255,.12) 100%), #fff;
}
/* Lista de precios / impresion: botones de tipo de articulo y su estado de tildado */
body .tiposArticulo {
  background: #e3f4f1;
  color: #2c6a6e;
  border: 1px solid #bfe2dc;
  border-radius: 6px;
  margin: 2px 0;
  font-family: var(--fuente) !important;
  font-weight: 600 !important;
  cursor: pointer;
}
body .tiposArticulo:hover { background: #cdeee7; }
body .tiposArticulo.tildado     { background: #dff5e8; border-color: #9ed9b8; color: #1e6b45; }
body .tiposArticulo.mediotildado { background: #fdf3d6; border-color: #ecd58e; color: #7a5a0c; }
body .infoTag {
  background: #e3f4f1;
  color: #2c6a6e;
  font-family: var(--fuente);
  border-bottom: 1px solid #bfe2dc;
}

/* ------------------------------------------- Generador de listados (impresion) */
/* templates/impresionGenerica.tpl (icono imprimir de las grillas): recuadros con borde ridge darkblue, titulos
   header.gif, campos arrastrables con imagenes de fondo. Se mantienen las zonas y el arrastre; solo colores */
body #header {
  background: var(--dps-navy);
  color: #fff;
  border: none;
  border-bottom: 3px solid transparent;
  border-image: var(--dps-degrade) 1;
  font-family: var(--fuente);
  font-size: 13pt;
  padding: 8px;
}
body #camposDisponibles {
  background: #f6f8fb;
  border: 1px solid #cfd6e3;
  border-radius: 8px;
}
body #camposDisponibles #titulo,
body .name {
  background: #e3f4f1;
  color: #2c6a6e;
  border: none;
  border-bottom: 2px solid #bfe2dc;
  border-radius: 6px 6px 0 0;
  font-family: var(--fuente);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 6px 8px;
}
body .recuadro,
body #opciones,
body #tituloInput {
  background: var(--superficie);
  border: 1px solid #cfd6e3;
  border-radius: 0 0 6px 6px;
  font-family: var(--fuente);
}
body #tituloInput { border-radius: 0 0 6px 6px; font-size: 15px; }
body #fila1.sobre,
body #fila2.sobre { background-color: var(--dps-azul-suave); }
body .campo,
body #fila1 .campo,
body #fila2 .campo {
  background: var(--superficie);
  border: 1px solid #bfe2dc;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16,24,40,.08);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 12px;
  margin: 2px;
}
body #fila1 .campo INPUT,
body #fila2 .campo INPUT,
body #fila1 .campo SPAN.pct,
body #fila2 .campo SPAN.pct {
  background: #f1f4f9;
  border-radius: 4px;
  font-family: var(--fuente);
}

/* Detalle de asiento por cuenta (templates/detalleAsientoCuenta.tpl) */
body #detalleAsiento {
  background: var(--superficie);
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16,24,40,.08), 0 6px 18px rgba(16,24,40,.08);
  font-family: var(--fuente);
  font-size: 13px;
}
body #detalleAsiento tr th {
  background: #e3f4f1;
  color: #2c6a6e;
  border-bottom: 2px solid #bfe2dc;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 8px 6px;
}
body #detalleAsiento .tr0 { background: var(--superficie); color: var(--texto); }
body #detalleAsiento .tr1 { background: #f7f9fc; color: var(--texto); }
body #detalleAsiento td { padding: 5px 6px; border-bottom: 1px solid #edf0f5; }

/* ---------------------------------------------- Proyectos y jornadas */
/* Documentos de proyectos (abm/documentosProyectos/estiloListadoDocumentos.css): tarjetas celestes #24bbee */
body .documento {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid #cfd6e3;
  border-left: 4px solid var(--dps-celeste);
  box-shadow: 0 1px 3px rgba(16,24,40,.08);
  border-radius: 8px;
  font-family: var(--fuente);
}
body .documento:hover {
  background: var(--dps-azul-suave);
  color: var(--texto);
  border-color: var(--dps-azul);
}
body .documento:hover .doc_tipo {
  background-color: var(--dps-azul);
  border-color: var(--dps-azul);
  color: #fff;
}
/* Explorador de archivos de proyectos (abm/proyectosLinkCarpeta/estiloExploradorArchivos.css) */
body .divBotones {
  background: var(--superficie);
  border: 1px solid #cfd6e3;
  border-radius: 8px;
}
body .divBotones img { border-color: #e1e6ef; }
body .divBotones img:hover {
  background-color: var(--dps-azul-suave);
  border-color: var(--dps-azul);
}
body .divDocumentos { border: 1px solid #cfd6e3; border-radius: 8px; }
body .divDoc        { border-color: #e1e6ef; }
/* Consulta de jornadas (abm/consultaJornadas/estilo.css) y carga de jornadas (abm/jornadas/estilos.css) */
body .subtitulos_consulta_jornada {
  background: #e3f4f1;
  color: #2c6a6e;
  border: 1px solid #bfe2dc;
  font-family: var(--fuente);
  font-weight: 700;
}
body .empleados_carga_titulo,
body .horas_carga_titulo { border-bottom-color: #e1e6ef; }
body .empleado           { border-right-color: #e1e6ef; }
/* Lista de precios: nota de la version (.notaLP gris con texto blanco) y barra de filtro (td.info con #bbb inline) */
body .notaLP {
  background: #f6f8fb;
  color: var(--texto-suave);
  font-family: var(--fuente);
  font-size: 13px;
  font-style: italic;
  padding: 6px;
}
body #tbl td.info[style*="#bbb" i] {
  background: #f6f8fb !important;
  border-top: 1px solid #e1e6ef;
  border-bottom: 1px solid #e1e6ef;
  padding: 6px 8px;
}