/**
 *
 * Gestino — capa de modernización visual (look and feel)
 * Se aplica sobre el tema base (Bootstrap 3 + Neon + skins/facebook.css)
 * sin tocar markup ni comportamiento: solo tipografía, color, espaciado,
 * bordes y sombras.
 *
 * Paleta: navy #222342 para el menú/superficies de marca, azul #3B5998
 * para botones y elementos "primary" (sin ámbar).
 *
*/

:root {
  --g-navy: #222342;
  --g-navy-hover: #292a4f;
  --g-navy-deep: #191a32;
  --g-blue: #3b5998;
  --g-blue-dark: #30487b;
  --g-ink: #222342;
  --g-text: #333846;
  --g-text-muted: #7c8494;
  --g-border: #e4e7ec;
  --g-bg: #f5f6f8;
  --g-surface: #ffffff;
  --g-radius: 10px;
  --g-radius-lg: 14px;
  --g-shadow: 0 2px 14px rgba(20, 26, 43, .07);
}

/* ---------- Typography ---------- */
body,
.form-control,
.btn,
table,
input,
select,
textarea {
  font-family: 'Inter', 'Noto Sans', Helvetica, Arial, sans-serif;
}
body {
  background: var(--g-bg);
  color: var(--g-text);
}
h1, h2, h3, h4, h5, h6,
.page-header,
.panel-title {
  font-family: 'Sora', 'Inter', sans-serif;
  letter-spacing: -.01em;
  color: var(--g-ink);
}
.page-header {
  border-bottom: 1px solid var(--g-border);
  padding-bottom: 12px;
  font-weight: 600;
}
.page-header small {
  color: var(--g-text-muted);
}
.breadcrumb {
  background: transparent;
  padding-left: 0;
  font-size: 12.5px;
  color: var(--g-text-muted);
}

/* ---------- Panels / Cards ---------- */
.panel,
.panel-default {
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  box-shadow: var(--g-shadow);
  overflow: hidden;
}
.panel-heading {
  background: var(--g-surface);
  border-bottom: 1px solid var(--g-border);
  padding: 14px 20px;
}
.panel-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.panel-body {
  padding: 20px;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: box-shadow .15s ease, transform .15s ease;
}
.btn-primary {
  box-shadow: 0 2px 8px rgba(59, 89, 152, .35);
}
.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(48, 72, 123, .4);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
/* Botones "Seleccionar" de los selectores de catalogo (cliente, almacen,
   marca, mecanico, color, etc.) -> icono redondo con chevron ">". */
.btn-select-round {
  position: relative;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding: 0 !important;
  /* Cuadrado con bordes redondeados (pedido explicito). Para volver al
     circulo original: border-radius: 50%. */
  border-radius: 8px;
  background: #e7bb7f !important;
  border-color: #e7bb7f !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* Solo se toca margin-left/bottom: cada pantalla ya trae su propio
     margin-top inline (20px, 25px, etc.) para alinear el boton con el
     campo de texto de al lado -- no debe pisarse con un shorthand. */
  margin-left: 4px !important;
  margin-bottom: 4px !important;
  box-shadow: 0 2px 6px rgba(231, 187, 127, .35);
}
.btn-select-round:hover,
.btn-select-round:focus {
  background: #dda862 !important;
  border-color: #dda862 !important;
  box-shadow: 0 4px 10px rgba(221, 168, 98, .4);
}
.btn-select-plus {
  display: block;
  color: #fff;
  font-weight: 700;
  font-style: normal;
  font-size: 13px;
  line-height: 1;
}
/* Boton "Nuevo Cliente" -> icono (+) cuadrado con bordes redondeados,
   mismo acento que "Buscar" y mismo alto que .btn-select-round (26px). */
.btn-add-square {
  position: relative;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding: 0 !important;
  border-radius: 8px;
  background: #4dcda4 !important;
  border-color: #4dcda4 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: 4px !important;
  margin-bottom: 4px !important;
  box-shadow: 0 2px 6px rgba(77, 205, 164, .35);
}
.btn-add-square:hover,
.btn-add-square:focus {
  background: #3bb890 !important;
  border-color: #3bb890 !important;
  box-shadow: 0 4px 10px rgba(59, 184, 144, .4);
}
/* SalesByItemReport: la fila de "Mas Filtros" suma 14 columnas Bootstrap
   (Articulo 3+1, Almacen 2+1, Proveedor 2+1, Cliente 3+1) sobre una fila
   de 12 -- desborda siempre, sea cual sea el ancho del boton (el boton
   "Seleccionar" de Cliente queda huerfano en otra fila). Se angosta
   Articulo y Cliente de 3 a 2 columnas solo aqui (por id, no toca los
   fragments compartidos con otras pantallas). */
@media (min-width: 768px) {
  #item_selection > .col-sm-3,
  #modal_client > .col-sm-3 {
    width: 16.66666667%;
  }
}
/* Botones "Buscar" -> acento verde para distinguirlos del resto de los
   botones primary (navy/azul). */
.btn-search-accent {
  background: #4dcda4 !important;
  border-color: #4dcda4 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(77, 205, 164, .35);
}
.btn-search-accent:hover,
.btn-search-accent:focus {
  background: #3bb890 !important;
  border-color: #3bb890 !important;
  box-shadow: 0 4px 12px rgba(59, 184, 144, .4);
}

/* ---------- Forms ---------- */
.form-control {
  border-radius: 8px;
  border: 1px solid var(--g-border);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  border-color: var(--g-blue);
  box-shadow: 0 0 0 3px rgba(59, 89, 152, .15);
}
.form-group label {
  font-weight: 600;
  color: var(--g-text);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ---------- Tables ---------- */
/* Revertido: forzar overflow-x:auto en .table-responsive globalmente (todas
   las vistas) disparaba la barra de scroll horizontal aun en tablas que no
   la necesitan -- basta con desbordar por unos pocos px (bordes/padding)
   para que aparezca con el scrollbar clasico de Windows. Se dejo el
   comportamiento default de Bootstrap (scroll solo por debajo de 768px);
   las vistas con tablas genuinamente anchas en desktop deben resolverlo
   puntualmente (ver p.ej. el overflow-x:auto inline en serviceOrderSearch.html). */
.table > thead > tr > th {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--g-text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--g-border);
}
.table > tbody > tr > td {
  border-top: 1px solid var(--g-border);
  font-size: 12px;
}
.table-hover > tbody > tr:hover {
  background-color: rgba(59, 89, 152, .05);
}
/* Ordenes de Servicio: 13 columnas comprimen el nombre del cliente a 3
   renglones bajo table-layout:auto. Se evita el wrap y se deja que la
   tabla crezca y haga scroll horizontal (el contenedor ya tiene overflow-x:auto). */
#dataTables-Result th:nth-child(4),
#dataTables-Result td:nth-child(4) {
  white-space: nowrap;
}

/* ---------- Sidebar / menu polish ---------- */
.page-container .sidebar-menu #main-menu > li > a {
  display: flex;
  align-items: center;
}
/* neon-core.css posiciona la flechita de "tiene submenu" con
   float:right (#main-menu li.has-sub > a:before, en neon-core.css). Los
   floats no tienen efecto dentro de un contenedor flex -- al volver el
   link display:flex arriba, la flecha paso a renderizarse en su orden de
   documento normal (primera, antes que el icono y el titulo) en vez de
   al final a la derecha, y cualquier recalculo del flex (hover, click,
   la animacion de aparicion de pagina que ya trae el tema) se veia como
   un "salto". Se reemplaza float por las herramientas propias de flex:
   order al final + margin-left:auto empuja el elemento al extremo
   derecho, igual que el float original pero sin romperse dentro de flex. */
.page-container .sidebar-menu #main-menu li.has-sub > a:before {
  float: none;
  order: 2;
  margin-left: auto;
}
/* neon-core.css no fija font-family/weight en los links del menu -- el
   texto hereda el de body (ya es 'Inter'), pero se fuerza aqui para
   dejarlo explicito y afinar peso/tracking (mas moderno que el bold/
   default del navegador). */
.page-container .sidebar-menu #main-menu .title {
  font-family: 'Inter', 'Noto Sans', Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
}
.page-container .sidebar-menu #main-menu > li.active > a > .title,
.page-container .sidebar-menu #main-menu > li > a:hover > .title {
  font-weight: 600;
}
.page-container .sidebar-menu #main-menu > li > a > i {
  font-size: 15px;
  width: 20px;
  text-align: center;
  margin-right: 10px;
  opacity: .75;
  transition: opacity .15s ease;
}
.page-container .sidebar-menu #main-menu > li > a:hover > i {
  opacity: 1;
}
.page-container .sidebar-menu #main-menu > li.active > a {
  /* Solo margen horizontal: si se agrega margen vertical, el item activo
     ocupa mas alto que uno normal y corre hacia abajo a todos los items
     siguientes del menu -- como cada pagina tiene un item activo
     distinto, se ve como si el menu "saltara" en cada click. */
  margin: 0 10px;
  border-radius: 10px;
  width: auto;
}
.page-container .sidebar-menu #main-menu > li.active > a > i {
  opacity: 1;
}

/* ---------- Home dashboard tiles ---------- */
.tile-block,
a.tile-block {
  border-radius: var(--g-radius-lg);
  box-shadow: var(--g-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  border: none;
}
.tile-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20, 26, 43, .12);
}

/* ---------- Badges / pills ---------- */
.badge,
.label {
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- Table action links (Editar / Detalles / Eliminar) ---------- */
.tbl-action {
  display: inline-block;
  padding: 3px 10px;
  margin: 1px 2px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(59, 89, 152, .08);
  color: var(--g-blue) !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
.tbl-action:hover,
.tbl-action:focus {
  background: rgba(59, 89, 152, .16);
  color: var(--g-blue-dark) !important;
  text-decoration: none !important;
}
.tbl-action-danger {
  background: rgba(217, 48, 37, .08);
  color: #c0392b !important;
}
.tbl-action-danger:hover,
.tbl-action-danger:focus {
  background: rgba(217, 48, 37, .16);
  color: #a5301f !important;
}

/* purchaseEstimationDetail/Edit/Register: el link del nombre del articulo
   (.link_item_name) es contenido, no una accion -- table-action-links.js lo
   toma como el unico <a> de su celda y le aplica el chip de .tbl-action. Se
   resetea el estilo aqui (en vez de tocar table-action-links.js, que sigue
   agrupando bien Nota/Entrega/Excel/PDF en el resto del sitio). */
.link_item_name.tbl-action {
  display: unset;
  padding: unset;
  margin: unset;
  border-radius: unset;
  font-size: unset;
  font-weight: unset;
  background: unset;
  color: unset !important;
  text-decoration: unset !important;
  transition: unset;
}
.link_item_name.tbl-action:hover,
.link_item_name.tbl-action:focus {
  background: unset;
  color: unset !important;
  text-decoration: unset !important;
}

/* ---------- Grouped export/print links (Nota / Entrega / Excel / Ticket, etc.) ----------
   Cuando una celda trae varios links de accion juntos, se muestran como iconos
   compactos en una sola fila en vez de un chip de texto por cada uno (evita el
   wrap a 2-3 renglones que causaban los chips .tbl-action apilados). */
.tbl-action-group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.tbl-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(59, 89, 152, .08);
  color: var(--g-blue) !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
.tbl-action-icon:hover,
.tbl-action-icon:focus {
  background: rgba(59, 89, 152, .16);
  color: var(--g-blue-dark) !important;
  text-decoration: none !important;
}
.tbl-action-icon-danger {
  background: rgba(217, 48, 37, .08);
  color: #c0392b !important;
}
.tbl-action-icon-danger:hover,
.tbl-action-icon-danger:focus {
  background: rgba(217, 48, 37, .16);
  color: #a5301f !important;
}
.tbl-action-icon-disabled {
  background: transparent;
  color: var(--g-text-muted) !important;
  cursor: default;
}
.tbl-action-icon-disabled:hover,
.tbl-action-icon-disabled:focus {
  background: transparent;
  color: var(--g-text-muted) !important;
}

/* ---------- Modals ---------- */
.modal-content {
  border-radius: var(--g-radius-lg);
  border: none;
  box-shadow: 0 20px 50px rgba(20, 26, 43, .25);
}
.modal-header {
  border-bottom: 1px solid var(--g-border);
}
.modal-footer {
  border-top: 1px solid var(--g-border);
}