/* Solo para pages/b2b_cic.py (/cic-...). Manual de marca Lyseon v1.2.
   Todo acotado a #main_b2b_cic: Dash carga assets/ global, esto no toca otras paginas.
   Las pildoras de pestañas usan .g2-pills de assets/cica2.css (mismo componente). */

#main_b2b_cic .cic-card {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 32, 91, .06);
  overflow: hidden;
}

/* cabecera Navy con kicker naranja */
#main_b2b_cic .cic-header {
  background: #00205B;
  border-bottom: none;
  padding: 16px 20px 12px;
}
#main_b2b_cic .cic-kicker {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FF5722;
}
#main_b2b_cic .cic-titulo {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 8px 0 0;
}
#main_b2b_cic .card-body { padding: 12px; }

#main_b2b_cic .cic-nota {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #555555;
  margin-bottom: 16px;
}
#main_b2b_cic .cic-msg {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
  color: #555555;
  min-height: 24px;
  margin-bottom: 8px;
}

/* switch "Modo edicion" */
#main_b2b_cic .cic-switch .form-check-label {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #333333;
}
#main_b2b_cic .cic-switch .form-check-input:checked {
  background-color: #00205B;
  border-color: #00205B;
}
#main_b2b_cic .cic-switch .form-check-input:focus {
  border-color: #FF5722;
  box-shadow: 0 0 0 .2rem rgba(255, 87, 34, .25);
}

/* botones: Montserrat Bold, mayuscula, +0.06em, radio 4px.
   Primario = naranja con texto Navy (blanco sobre naranja no pasa AA bajo 19px). */
#main_b2b_cic .cic-btn {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 6px 16px;
  box-shadow: none;
}
#main_b2b_cic .cic-btn-primary {
  background: #FF5722 !important;
  border: 1px solid #FF5722 !important;
  color: #00205B !important;
}
#main_b2b_cic .cic-btn-primary:hover {
  background: #DF3500 !important;
  border-color: #DF3500 !important;
  color: #FFFFFF !important;
}
#main_b2b_cic .cic-btn-secondary {
  background: transparent !important;
  border: 1px solid #00205B !important;
  color: #00205B !important;
}
#main_b2b_cic .cic-btn-secondary:hover {
  background: #001337 !important;
  border-color: #001337 !important;
  color: #FFFFFF !important;
}
#main_b2b_cic .cic-btn:focus-visible {
  outline: 2px solid #FF5722;
  outline-offset: 2px;
}

/* dash_table: paginacion y cajas de filtro con la misma tipografia */
#main_b2b_cic .dash-spreadsheet-container .previous-next-container,
#main_b2b_cic .dash-spreadsheet-container .page-number {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
  color: #333333;
}
#main_b2b_cic .dash-filter input::placeholder { color: #888888; }

/* ---- tabla: pisa assets/custom.css (global, con !important: 11px, centrado, hover naranja viejo).
   El id #main_b2b_cic le da mas especificidad, por eso gana sin tocar el CSS global. ---- */
#main_b2b_cic .dash-table-container .dash-header {
  background-color: #00205B !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-align: center !important;
  border: none !important;
  border-bottom: 2px solid #FF5722 !important;
  padding: 4px 6px !important;
}
#main_b2b_cic .dash-table-container .dash-cell {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 400 !important;
  font-size: 11px !important;
  text-align: center !important;
  padding: 4px 6px !important;
  border: none !important;
  border-bottom: 1px solid #DDDDDD !important;
  color: #333333;
  max-width: none !important;
}
#main_b2b_cic .dash-table-container .dash-cell .dash-cell-value {
  text-align: center !important;
}
#main_b2b_cic .dash-table-container .dash-row-odd .dash-cell {
  background-color: #F4F6F8 !important;
}
#main_b2b_cic .dash-table-container .dash-row:hover .dash-cell {
  background-color: #E6E9EF !important;
  color: #333333 !important;
  font-weight: 400 !important;
  cursor: default;
}
#main_b2b_cic .dash-table-container .dash-row-selected .dash-cell {
  background-color: #FFEEE9 !important;
  color: #333333 !important;
  font-weight: 400 !important;
}
#main_b2b_cic .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  box-shadow: none;
  border-radius: 0;
}

/* boton "Toggle Columns" nativo de dash_table (aparece por hidden_columns) */
#main_b2b_cic .show-hide {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #00205B;
  background: transparent;
  border: 1px solid #00205B;
  border-radius: 4px;
  padding: 6px 16px;
  margin-bottom: 16px;
}
#main_b2b_cic .show-hide:hover {
  background: #001337;
  border-color: #001337;
  color: #FFFFFF;
}
