/* =========================================================
   /static/css/catalogo.css  (MASTER ÚNICO CONTABILIDAD)
   Estilo ejecutivo tipo Alegra para TODO el módulo Contabilidad.
   Requisitos:
   - NO rompe Bootstrap global (todo va bajo .ct-app)
   - Incluye: Panel sidebar + content, cards, forms, tablas,
     responseArea, buscadores (Terceros / Productos), utilidades.
========================================================= */

/* =========================================================
   0) Variables y base (SOLO dentro de contabilidad)
========================================================= */
.ct-app{
  --ct-bg: #f6f8fb;
  --ct-surface: #ffffff;
  --ct-surface-2: #fbfcfe;
  --ct-border: #e6ebf2;
  --ct-text: #0f172a;
  --ct-muted: #64748b;

  --ct-accent: #13b4a6;      /* turquesa */
  --ct-accent-2: #0ea5a4;
  --ct-accent-soft: rgba(19,180,166,.12);

  --ct-shadow: 0 10px 30px rgba(15, 23, 42, .06);
  --ct-radius: 14px;
  --ct-radius-sm: 12px;

  --ct-sidebar-collapsed: 76px;
  --ct-sidebar-expanded: 264px;
  --ct-menu-speed: 120ms;
}

.ct-app *{ box-sizing: border-box; }

html, body{ height: 100%; }

body.ct-app{
  margin: 0;
  padding: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--ct-bg);
  color: var(--ct-text);
}

/* =========================================================
   1) Layout del Panel: sidebar + content
   (Solo si existen esas clases en el HTML)
========================================================= */
.ct-app .sidebar{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--ct-sidebar-collapsed);
  background: var(--ct-surface);
  border-right: 1px solid var(--ct-border);
  padding: 14px 10px;
  overflow-y: auto;
  z-index: 1040;
  transition: width var(--ct-menu-speed) ease-out;
  will-change: width;
}
.ct-app .sidebar:hover{ width: var(--ct-sidebar-expanded); }

/* Brand */
.ct-app .sidebar .brand{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 14px 10px;
  margin-bottom: 6px;
}
.ct-app .brand-badge{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ct-accent-soft);
  display: grid;
  place-items: center;
  color: var(--ct-accent);
  border: 1px solid rgba(19,180,166,.25);
  flex-shrink: 0;
}
.ct-app .brand-title{
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.ct-app .brand-subtitle{
  font-size: .78rem;
  color: var(--ct-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.ct-app .sidebar:not(:hover) .brand-text{ display: none; }

/* Headers del menú */
.ct-app .nav-header{
  margin: 12px 10px 6px 10px;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ct-muted);
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-app .sidebar:not(:hover) .nav-header{
  opacity: 0;
  margin: 0;
  height: 0;
}

/* Links del menú */
.ct-app .sidebar .nav-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 4px 6px;
  border-radius: 12px;
  color: #0b1220;
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-app .sidebar .nav-link i{
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  color: var(--ct-muted);
}
.ct-app .sidebar .nav-link:hover{
  background: var(--ct-surface-2);
  border-color: var(--ct-border);
}
.ct-app .sidebar .nav-link:active{ transform: translateY(1px); }
.ct-app .sidebar .nav-link.active{
  background: var(--ct-accent-soft);
  border-color: rgba(19,180,166,.25);
  color: #0b1220;
}
.ct-app .sidebar .nav-link.active i{ color: var(--ct-accent); }

.ct-app .sidebar:not(:hover) .nav-link{
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Scrollbar sidebar */
.ct-app .sidebar::-webkit-scrollbar{ width: 10px; }
.ct-app .sidebar::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.12);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Content */
.ct-app .content{
  margin-left: var(--ct-sidebar-collapsed);
  height: 100vh;
  overflow-y: auto;
  padding: 18px 18px 24px 18px;
  background: var(--ct-bg);
  transition: margin-left var(--ct-menu-speed) ease-out;
  will-change: margin-left;
}
.ct-app .sidebar:hover ~ .content{
  margin-left: var(--ct-sidebar-expanded);
}

/* Header superior */
.ct-app #app-header{
  background: var(--ct-surface) !important;
  border: 1px solid var(--ct-border) !important;
  border-radius: var(--ct-radius) !important;
  box-shadow: var(--ct-shadow);
}
.ct-app #app-header .badge{
  font-weight: 900;
  border-radius: 999px;
  padding: 8px 10px;
}
.ct-app #app-header .badge.text-bg-primary{
  background: var(--ct-accent) !important;
}
.ct-app #app-header .badge.text-bg-secondary{
  background: #e9eef6 !important;
  color: #0f172a !important;
}
.ct-app #app-header .badge.text-bg-light{
  background: #ffffff !important;
}

/* =========================================================
   2) UI ejecutiva general (cards/forms/tables) sin romper Bootstrap
   (Se aplica dentro de .ct-app, pero NO reescribe todo Bootstrap,
   solo afina lo visual.)
========================================================= */
.ct-app .card{
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  box-shadow: var(--ct-shadow);
  background: var(--ct-surface);
}
.ct-app .card-header{
  border-bottom: 1px solid var(--ct-border);
  background: #ffffff;
  border-top-left-radius: var(--ct-radius);
  border-top-right-radius: var(--ct-radius);
  font-weight: 900;
  color: #0f172a;
}

.ct-app .form-control,
.ct-app .form-select{
  border-radius: var(--ct-radius-sm);
  border: 1px solid var(--ct-border);
  padding: .62rem .75rem;
}
.ct-app .form-control:focus,
.ct-app .form-select:focus{
  border-color: rgba(19,180,166,.55);
  box-shadow: 0 0 0 .2rem rgba(19,180,166,.16);
}

.ct-app .btn{
  border-radius: var(--ct-radius-sm);
  font-weight: 800;
  padding: .62rem .9rem;
}
.ct-app .btn-primary{
  background: var(--ct-accent);
  border-color: var(--ct-accent);
}
.ct-app .btn-primary:hover{
  background: var(--ct-accent-2);
  border-color: var(--ct-accent-2);
}
.ct-app .btn-outline-primary{
  border-color: rgba(19,180,166,.55);
  color: var(--ct-accent-2);
}
.ct-app .btn-outline-primary:hover{
  background: var(--ct-accent-soft);
  border-color: rgba(19,180,166,.55);
  color: #0f172a;
}

/* Títulos de sección */
.ct-app .section-title{
  border: none;
  margin: 4px 0 14px 0;
  font-weight: 950;
  color: #0f172a;
}
.ct-app .section-title::after{
  content:"";
  display:block;
  height: 3px;
  width: 56px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--ct-accent);
  opacity: .9;
}

/* Tablas */
.ct-app .table{ border-color: var(--ct-border); }
.ct-app .table thead th{
  color: #0f172a;
  font-weight: 900;
  background: #f7f9fc;
  border-color: var(--ct-border);
  vertical-align: middle;
}
.ct-app .table tbody td{
  border-color: rgba(16,24,40,.08);
  vertical-align: middle;
}
.ct-app .table-hover tbody tr:hover{
  background: rgba(2, 132, 199, .08);
}

/* =========================================================
   3) Área de respuesta / pre
========================================================= */
.ct-app #responseArea,
.ct-app .responseArea{
  margin-top: 18px;
  padding: 14px 14px;
  background: #f1f5f9;
  border-radius: var(--ct-radius-sm);
  border: 1px solid rgba(16,24,40,.10);
  border-left: 4px solid rgba(19,180,166,.65);
  white-space: pre-wrap;
  word-break: break-word;
  color: #0f172a;
}

/* Helpers */
.ct-app .pre-min-150{ min-height: 150px; }
.ct-app .is-hidden{ display: none !important; }

/* =========================================================
   4) Buscadores tipo Autocomplete (Productos / Categorías / etc.)
========================================================= */
.ct-app .cat-suggest{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: .35rem;
  background: #fff;
  border: 1px solid rgba(16,24,40,.14);
  border-radius: var(--ct-radius);
  box-shadow: 0 18px 40px rgba(16,24,40,.14);
  z-index: 9999;
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
}
.ct-app .cat-suggest.d-none{ display: none !important; }

.ct-app .cat-suggest .list-group-item{
  border: 0;
  border-top: 1px solid rgba(16,24,40,.08);
  padding: .6rem .75rem;
  cursor: pointer;
}
.ct-app .cat-suggest .list-group-item:first-child{ border-top: 0; }
.ct-app .cat-suggest .list-group-item:hover{
  background: rgba(13,110,253,.06);
}

/* =========================================================
   5) TercerosBusqueda (para terceros_busqueda.js)
   Evita “opaco”: z-index, background, pointer-events, opacity.
========================================================= */
.ct-app .terceros-busqueda-wrap{
  position: relative;
  width: 100%;
}

.ct-app .terceros-busqueda-dropdown{
  margin-top: .35rem;
  border: 1px solid rgba(16, 24, 40, .14);
  border-radius: var(--ct-radius);
  background: #fff;
  box-shadow: 0 18px 40px rgba(16,24,40,.14);
  overflow: hidden;
  z-index: 9999;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

.ct-app .terceros-busqueda-dropdown.d-none{
  display: none !important;
}

.ct-app .terceros-busqueda-item{
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .65rem .75rem;
  cursor: pointer;
  user-select: none;
  background: #fff;
  color: #111827;
}
.ct-app .terceros-busqueda-item + .terceros-busqueda-item{
  border-top: 1px solid rgba(16,24,40,.08);
}
.ct-app .terceros-busqueda-item:hover{
  background: rgba(13,110,253,.06);
}
.ct-app .terceros-busqueda-item.is-active{
  background: rgba(13,110,253,.12);
}

.ct-app .cc-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(19,180,166,.12);
  color: var(--ct-accent);
  flex: 0 0 34px;
}

.ct-app .cc-item-main{ min-width: 0; flex: 1 1 auto; }

.ct-app .cc-item-title{
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-app .cc-item-sub{
  margin-top: .12rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--ct-muted);
}
.ct-app .cc-badge-soft{
  display: inline-flex;
  align-items: center;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 900;
  background: rgba(16,185,129,.14);
  color: #047857;
}

/* =========================================================
   6) Responsive
========================================================= */
@media (max-width: 576px){
  body.ct-app{ overflow: auto; }
  .ct-app .sidebar{ width: 64px; }
  .ct-app .sidebar:hover{ width: 240px; }
  .ct-app .content{ margin-left: 0; padding: 12px; }
  .ct-app .sidebar:hover ~ .content{ margin-left: 0; }
}