/* =====================================================================
   MARCA DEL SIDEBAR  (encabezado: "T" de Turing + eslogan)

   Antes eran dos PNG (T.png y Slogan.png) forzados a 57px de alto dentro
   de un encabezado que mide 50px: se veían pixelados —sobre todo en
   pantallas retina, donde el navegador estira una imagen pequeña— y
   desbordaban la barra. Ahora la "T" es un SVG con las proporciones del
   logo original y el eslogan es TEXTO, así que ambos se ven nítidos a
   cualquier tamaño y a cualquier densidad de pantalla.

   El alto del encabezado (50px) y los anchos del sidebar (230px abierto,
   50px colapsado) los define AdminLTE; aquí solo se acomoda el contenido.
   ===================================================================== */
.main-header .logo .logo-lg{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  height:50px;
  line-height:1;
}
/* Colapsado: la marca queda centrada en los 50px de la franja. El
   display:flex va dentro del mismo @media que usa AdminLTE para mostrar
   el logo mini, para no sacarlo en móvil (donde el sidebar se oculta). */
.main-header .logo .logo-mini{
  align-items:center;
  justify-content:center;
  height:50px;
}
@media (min-width:768px){
  .sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini{ display:flex; }
}

/* La "T": hereda el color del encabezado, así que sirve igual sobre el
   azul del tema o sobre un fondo claro. */
.main-header .logo .brand-mark{
  flex:0 0 auto;
  display:block;
  width:33px;
  height:25px;
  fill:currentColor;
}
.main-header .logo .logo-mini .brand-mark{ width:30px; height:23px; }

/* Eslogan: serif tipo Didone, como el logotipo impreso. Si la fuente de
   Google no carga (sin internet), cae en Georgia y se sigue viendo bien. */
.main-header .logo .brand-text{
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  font-size:13px;
  line-height:1.15;
  letter-spacing:.2px;
  white-space:nowrap;
  text-align:left;
  font-weight:400;
}
.main-header .logo .brand-text b{ font-weight:700; }
.main-header .logo .brand-text .brand-y{ font-size:11px; opacity:.85; }

/* En móvil el encabezado ocupa el ancho completo: la marca va centrada,
   como estaba antes con la imagen. */
@media (max-width:767px){
  .main-header .logo .logo-lg{ justify-content:center; }
}

/*ESTILOS PARA EL INPUT DE LA CONTRASEÑA */
/* Este elemento debe tener "position: relative" */
div.is-relative{
    max-width: 100%;
    position: relative;
  }
  
  /* El icono debe ser "position: absolute"
  * Ademas le damos un "display: block" y lo posicionamos */
.icon{
  position: absolute;
  display: block;
  bottom: .5rem;
  right: 1rem;

  user-select: none;
  cursor: pointer;
}

/* =====================================================================
   DETALLE DE LÍNEA DE FACTURA  (clase .lineGrid)
   Se aplica a crearVenta y a editPrefacture, que comparten las mismas
   cuatro columnas: descripción, precio unitario, cantidad y total.

   El formulario vive dentro de un .col-lg-6, así que la rejilla de
   Bootstrap se reparte sobre ~560px, no sobre la pantalla completa. Con
   col-sm-2 el precio unitario quedaba en 31px de caja y, descontando el
   addon "₡" y el padding, apenas 5px de texto visible: importes como
   15,900.00 se veían cortados ("15,90").

   Se reparten los anchos en porcentaje —no en pasos de 1/12— y se
   compactan canaletas, addon y padding del input para recuperar esos
   píxeles. Los encabezados usan los mismos porcentajes para no perder
   la alineación con las filas.
   ===================================================================== */
.lineGrid .input-group-addon{ padding:6px 7px; font-size:13px; }
.lineGrid .form-control{ padding-left:7px; padding-right:7px; }
/* Anula el style="width:90%" en línea de plantillas antiguas que puedan
   seguir cacheadas en el navegador del cliente. */
.lineGrid .newProductPrice{ width:100% !important; }

@media (min-width:768px){
  .lineGrid.lineHeader > .lineHeader-desc,
  .lineGrid > .row > .getProductName{ width:39%; }

  .lineGrid.lineHeader > .lineHeader-unit,
  .lineGrid > .row > .getInitialPriceProduct{ width:24%; padding-left:6px; padding-right:6px; }

  .lineGrid.lineHeader > .lineHeader-qty,
  .lineGrid > .row > .getProductPAmount{ width:11%; padding-left:6px; padding-right:6px; }

  .lineGrid.lineHeader > .lineHeader-tot,
  .lineGrid > .row > .getProductPrice{ width:26%; padding-right:6px; }
}

/* En móvil la descripción ocupa toda la fila y los tres campos numéricos
   se reparten la siguiente; el unitario y el total necesitan más espacio
   que la cantidad porque muestran importes con separador de miles. */
@media (max-width:767px){
  .lineGrid.lineHeader > .lineHeader-desc,
  .lineGrid > .row > .getProductName{ width:100%; }

  .lineGrid.lineHeader > .lineHeader-unit,
  .lineGrid > .row > .getInitialPriceProduct{ width:40%; padding-left:8px; padding-right:4px; }

  .lineGrid.lineHeader > .lineHeader-qty,
  .lineGrid > .row > .getProductPAmount{ width:22%; padding-left:4px; padding-right:4px; }

  .lineGrid.lineHeader > .lineHeader-tot,
  .lineGrid > .row > .getProductPrice{ width:38%; padding-right:8px; }
}